:root{
    --coif-bg:#f7f1eb;
    --coif-surface:#fffaf6;
    --coif-surface-2:#f1e4d7;
    --coif-text:#211815;
    --coif-muted:#6f625a;
    --coif-line:rgba(33,24,21,.10);
    --coif-gold:#d1a46e;
    --coif-gold-deep:#b98549;
    --coif-dark:#1c1513;
    --coif-shadow:0 18px 60px rgba(30,20,16,.10);
}

.demo-body--coiffeur{
    background:
        radial-gradient(circle at top left, rgba(209,164,110,.18), transparent 28%),
        linear-gradient(180deg, #fbf6f1 0%, var(--coif-bg) 100%);
    color:var(--coif-text);
}

.coif-container{
    width:min(1180px, calc(100% - 32px));
    margin:0 auto;
}

.coif-header{
    position:sticky;
    top:56px;
    z-index:900;
    background:rgba(247,241,235,.82);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--coif-line);
}

.coif-header__inner{
    min-height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.coif-logo{
    font-size:20px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.coif-nav{
    display:flex;
    align-items:center;
    gap:24px;
}

.coif-nav a{
    font-size:14px;
    color:var(--coif-muted);
    font-weight:700;
}

.coif-nav a:hover{
    color:var(--coif-text);
}

.coif-btn,
.coif-btn--dark,
.coif-btn--gold,
.coif-btn--ghost,
.coif-btn--ghost-dark,
.btn-demo,
.btn-demo-primary,
.btn-demo-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:800;
    transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.coif-btn--dark{
    background:var(--coif-dark);
    color:#fff;
}

.coif-btn--gold,
.btn-demo-primary{
    background:linear-gradient(135deg, var(--coif-gold), #e5c090);
    color:#1a120f;
    box-shadow:0 10px 24px rgba(209,164,110,.25);
}

.coif-btn--ghost,
.btn-demo-outline{
    border:1px solid var(--coif-line);
    background:rgba(255,255,255,.5);
    color:var(--coif-text);
}

.coif-btn--ghost-dark{
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    background:transparent;
}

.coif-btn:hover,
.coif-btn--dark:hover,
.coif-btn--gold:hover,
.coif-btn--ghost:hover,
.coif-btn--ghost-dark:hover,
.btn-demo-primary:hover,
.btn-demo-outline:hover{
    transform:translateY(-2px);
}

.coif-overline{
    margin:0 0 12px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--coif-muted);
}

.coif-hero{
    padding:72px 0 56px;
}

.coif-hero__grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:34px;
    align-items:center;
}

.coif-hero__content h1{
    margin:0 0 18px;
    font-size:clamp(44px, 6vw, 88px);
    line-height:.96;
    letter-spacing:-.04em;
    max-width:10ch;
}

.coif-hero__text{
    margin:0 0 24px;
    max-width:58ch;
    color:var(--coif-muted);
    font-size:17px;
    line-height:1.8;
}

.coif-hero__actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.coif-stats{
    margin-top:28px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.coif-stat{
    min-width:150px;
    padding:14px 16px;
    border-radius:22px;
    border:1px solid var(--coif-line);
    background:rgba(255,255,255,.5);
    box-shadow:var(--coif-shadow);
}

.coif-stat strong{
    display:block;
    font-size:18px;
    margin-bottom:4px;
}

.coif-stat span{
    color:var(--coif-muted);
    font-size:13px;
}

.coif-hero__visual{
    position:relative;
    min-height:620px;
}

.coif-frame{
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.6);
    background:rgba(255,255,255,.38);
    box-shadow:var(--coif-shadow);
}

.coif-frame--main{
    position:absolute;
    top:0;
    right:0;
    width:78%;
}

.coif-frame--floating{
    position:absolute;
    width:38%;
}

.coif-frame--one{
    left:0;
    bottom:120px;
}

.coif-frame--two{
    left:10%;
    bottom:0;
}

.coif-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:rgba(255,255,255,.92);
    font-size:14px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    overflow:hidden;
}

.coif-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 35%, transparent 65%, rgba(255,255,255,.08)),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(135deg, #4f3a33, #b98549 55%, #f0d6b5);
}

.coif-media span{
    position:relative;
    z-index:2;
    padding:18px;
    max-width:80%;
}

.coif-media--portrait{
    min-height:560px;
}

.coif-media--small{
    min-height:180px;
}

.coif-media--wide{
    min-height:460px;
}

.coif-media--gallery{
    min-height:240px;
}

.coif-marquee{
    overflow:hidden;
    padding:10px 0 18px;
    border-top:1px solid rgba(33,24,21,.08);
    border-bottom:1px solid rgba(33,24,21,.08);
    position:relative;
}

.coif-marquee::before,
.coif-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:80px;
    z-index:2;
    pointer-events:none;
}

.coif-marquee::before{
    left:0;
    background:linear-gradient(90deg, var(--coif-bg), rgba(247,241,235,0));
}

.coif-marquee::after{
    right:0;
    background:linear-gradient(270deg, var(--coif-bg), rgba(247,241,235,0));
}

.coif-marquee__inner{
    display:flex;
    width:max-content;
    animation:coifMarqueeLoop 24s linear infinite;
    will-change:transform;
}

.coif-marquee__track{
    flex:0 0 auto;
    min-width:100vw;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:28px;
    padding-right:28px;
    white-space:nowrap;

    font-size:13px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(33,24,21,.58);
}

.coif-marquee__track span{
    position:relative;
    display:inline-flex;
    align-items:center;
}

.coif-marquee__track span::after{
    content:"•";
    margin-left:28px;
    color:rgba(33,24,21,.28);
}

.coif-marquee__track span:last-child::after{
    content:"";
    margin-left:0;
}

@keyframes coifMarqueeLoop{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-33.3333%);
    }
}

@media (prefers-reduced-motion: reduce){
    .coif-marquee__inner{
        animation:none;
    }
}

.coif-section{
    padding:88px 0;
}

.coif-section--soft{
    background:rgba(255,255,255,.35);
    border-top:1px solid rgba(33,24,21,.06);
    border-bottom:1px solid rgba(33,24,21,.06);
}

.coif-section__head{
    margin-bottom:28px;
    max-width:70ch;
}

.coif-section__head h2{
    margin:0 0 12px;
    font-size:clamp(30px, 3vw, 52px);
    line-height:1.02;
    letter-spacing:-.03em;
}

.coif-section__head p{
    margin:0;
    color:var(--coif-muted);
    line-height:1.8;
}

.coif-services{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}

.coif-card,
.coif-review,
.coif-contact__card{
    border-radius:26px;
    border:1px solid rgba(33,24,21,.08);
    background:rgba(255,255,255,.6);
    box-shadow:var(--coif-shadow);
}

.coif-card{
    padding:24px;
}

.coif-chip{
    display:inline-flex;
    margin-bottom:12px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(209,164,110,.18);
    color:#6a4a27;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.coif-card h3{
    margin:0 0 10px;
    font-size:24px;
}

.coif-card p{
    margin:0;
    color:var(--coif-muted);
    line-height:1.75;
}

.coif-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    align-items:center;
}

.coif-split__content h2{
    margin:0 0 12px;
    font-size:clamp(30px, 3vw, 48px);
    line-height:1.04;
}

.coif-split__content p{
    margin:0 0 18px;
    color:var(--coif-muted);
    line-height:1.8;
}

.coif-list{
    margin:0;
    padding-left:18px;
    color:var(--coif-muted);
    line-height:1.9;
}

.coif-gallery{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:18px;
}

.coif-gallery__item--large{
    grid-row:span 2;
}

.coif-gallery__item .coif-media{
    height:100%;
}

.coif-reviews{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
}

.coif-review{
    padding:24px;
}

.coif-review__stars{
    margin:0 0 14px;
    color:var(--coif-gold-deep);
    font-size:15px;
    font-weight:900;
    letter-spacing:.14em;
}

.coif-review p{
    margin:0 0 14px;
    color:var(--coif-muted);
    line-height:1.75;
}

.coif-review strong{
    font-size:14px;
}

.coif-contact{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.coif-contact__card{
    padding:28px;
}

.coif-contact__card h2{
    margin:0 0 14px;
    font-size:clamp(28px, 2.6vw, 40px);
    line-height:1.05;
}

.coif-contact__card p{
    color:var(--coif-muted);
    line-height:1.75;
}

.coif-contact__card--cta{
    background:linear-gradient(135deg, #1c1513, #3a2b26);
    color:#fff;
}

.coif-contact__card--cta p,
.coif-contact__card--cta .coif-overline{
    color:rgba(255,255,255,.76);
}

.coif-contact__rows{
    display:grid;
    gap:14px;
}

.coif-contact__row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid rgba(33,24,21,.08);
}

.coif-contact__row span{
    color:var(--coif-muted);
    font-size:14px;
}

.coif-contact__row strong{
    text-align:right;
}

[data-demo-reveal]{
    opacity:0;
    transform:translateY(28px) scale(.985);
    transition:
        opacity .8s cubic-bezier(.2,.9,.2,1),
        transform .8s cubic-bezier(.2,.9,.2,1);
}

[data-demo-reveal].is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

@media (max-width: 1100px){
    .coif-nav{
        display:none;
    }

    .coif-hero__grid,
    .coif-split,
    .coif-contact{
        grid-template-columns:1fr;
    }

    .coif-services,
    .coif-reviews{
        grid-template-columns:1fr 1fr;
    }

    .coif-gallery{
        grid-template-columns:1fr 1fr;
    }

    .coif-gallery__item--large{
        grid-row:auto;
        grid-column:span 2;
    }

    .coif-hero__visual{
        min-height:520px;
    }
}

@media (max-width: 720px){
    .coif-header{
        top:76px;
    }

    .coif-header__inner{
        min-height:72px;
    }

    .coif-hero{
        padding:48px 0 36px;
    }

    .coif-hero__content h1{
        font-size:clamp(38px, 12vw, 56px);
        max-width:none;
    }

    .coif-services,
    .coif-reviews,
    .coif-gallery{
        grid-template-columns:1fr;
    }

    .coif-gallery__item--large{
        grid-column:auto;
    }

    .coif-hero__visual{
        min-height:420px;
    }

    .coif-frame--main{
        width:100%;
        position:relative;
    }

    .coif-frame--floating{
        display:none;
    }

    .coif-media--portrait{
        min-height:380px;
    }

    .coif-section{
        padding:64px 0;
    }

    .coif-contact__row{
        flex-direction:column;
    }

    .coif-contact__row strong{
        text-align:left;
    }
}