/* ═══════════════════════════════════════════════════════════════
   HairDiag Pro — Homepage landing styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;transform:scale(1.06);animation:heroZoom 14s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(24,18,9,.88) 4%,rgba(34,28,19,.62) 46%,rgba(34,28,19,.18) 100%)}
html[dir="rtl"] .hero::after{background:linear-gradient(-100deg,rgba(24,18,9,.88) 4%,rgba(34,28,19,.62) 46%,rgba(34,28,19,.18) 100%)}
.hero-in{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;padding:120px 22px 150px}
.hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,6.4vw,74px);font-weight:600;color:#FDF9F0;line-height:1.05;text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic;color:var(--g300)}
.hero-lead{color:rgba(250,247,241,.88);font-size:clamp(16px,2vw,19px);max-width:52ch;line-height:1.7;margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn-white{background:#FDF9F0;color:var(--ink);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.btn-white:hover{transform:translateY(-2px);background:#fff}
.btn-line{border:1px solid rgba(255,255,255,.55);color:#FDF9F0;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.btn-line:hover{background:rgba(255,255,255,.18)}
.hero-meta{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap;color:rgba(253,247,240,.72);font-size:12.5px;letter-spacing:.05em}
.hero-meta b{color:#fff;font-size:26px;font-family:'Cormorant Garamond',serif;display:block;letter-spacing:.02em;line-height:1.1;margin-bottom:2px}
.hero-meta span{text-transform:uppercase;font-size:10.5px;letter-spacing:.16em;opacity:.85}
.curve{position:absolute;bottom:-1px;left:0;right:0;z-index:3;line-height:0}
.curve svg{width:100%;height:70px;display:block}

/* ── Sections ─────────────────────────────────────────────── */
.section{padding:96px 0}
.sec-tag{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--g700)}
.sec-tag::before{content:"";width:34px;height:1px;background:var(--g500)}
.sec-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4.6vw,52px);font-weight:600;line-height:1.08;margin:14px 0 10px}
.sec-head p{color:var(--soft);font-size:16.5px;line-height:1.65;max-width:60ch}

/* Stats band */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:46px}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;border:1px solid rgba(220,196,140,.55);background:rgba(255,255,255,.8);border-radius:20px;padding:26px 12px;box-shadow:0 14px 34px -20px rgba(138,106,49,.35)}
.stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3.4vw,40px);font-weight:600;color:var(--g800)}
.stat span{font-size:12.5px;color:var(--soft);letter-spacing:.04em}

/* Services */
.svc{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid rgba(34,28,19,.08);box-shadow:0 18px 40px -24px rgba(34,28,19,.28);transition:.3s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 55px -26px rgba(138,106,49,.45);border-color:rgba(197,160,89,.55)}
.svc-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.svc:hover .svc-img img{transform:scale(1.08)}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(24,18,9,.55))}
.svc-num{position:absolute;top:14px;inset-inline-start:14px;z-index:2;font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:var(--g100);background:rgba(24,18,9,.45);backdrop-filter:blur(4px);border-radius:99px;padding:4px 12px}
.svc-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.svc-body h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600}
.svc-body p{font-size:13.8px;color:var(--soft);line-height:1.6;margin:8px 0 12px;flex:1}
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.svc-tag{font-size:10px;font-weight:600;letter-spacing:.09em;color:var(--g800);background:var(--g100);border:1px solid var(--g200);border-radius:99px;padding:3px 10px}
.svc-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--g700)}
.svc-link:hover{gap:12px}

/* Diagnostic section */
.diag-band{background:linear-gradient(180deg,rgba(251,246,234,.55),rgba(245,236,218,.4));border:1px solid rgba(220,196,140,.5);border-radius:36px;overflow:hidden}
.diag-grid{display:grid}
@media(min-width:980px){.diag-grid{grid-template-columns:1.05fr 1fr}}
.diag-img{position:relative;min-height:340px;background-size:cover;background-position:center}
.diag-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(251,246,234,.95));}
html[dir="rtl"] .diag-img::after{background:linear-gradient(-90deg,transparent 55%,rgba(251,246,234,.95))}
.diag-badge{position:absolute;z-index:2;bottom:26px;inset-inline-start:26px;background:#fff;border:1px solid rgba(220,196,140,.6);border-radius:18px;padding:14px 20px;box-shadow:0 20px 44px -20px rgba(138,106,49,.5);display:flex;gap:12px;align-items:center}
.diag-badge .tile{width:44px;height:44px;border-radius:12px}
.diag-body{padding:44px 30px}
.diag-steps{list-style:none;margin-top:22px}
.diag-steps li{display:flex;align-items:center;gap:14px;padding:9px 0;font-size:15px}
.diag-steps .n{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:'Cormorant Garamond',serif;font-weight:700;background:linear-gradient(135deg,var(--g500),var(--g700));box-shadow:0 8px 18px -8px rgba(138,106,49,.6)}
.diag-note{margin-top:18px;font-size:12.5px;color:var(--g800);background:var(--g100);border-radius:14px;padding:10px 14px;display:flex;gap:8px}

/* Values */
.val{text-align:center;padding:30px 24px;border:1px solid rgba(34,28,19,.09);background:rgba(255,255,255,.9);border-radius:24px;transition:.25s}
.val:hover{transform:translateY(-4px);border-color:rgba(197,160,89,.5)}
.val .tile{width:54px;height:54px;margin:0 auto 16px;border-radius:16px}
.val b{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;display:block;margin-bottom:6px}
.val span{font-size:13.5px;color:var(--soft);line-height:1.6}

/* CTA band */
.cta-band{position:relative;border-radius:34px;overflow:hidden;padding:clamp(40px,6vw,76px) clamp(24px,5vw,64px);color:#FDF9F0;text-align:center;background:linear-gradient(120deg,#8A6A31,#B08A4A 55%,#C5A059);box-shadow:0 30px 70px -30px rgba(138,106,49,.65)}
html[dir="rtl"] .cta-band{background:linear-gradient(-120deg,#8A6A31,#B08A4A 55%,#C5A059)}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 260px at 15% 0,rgba(255,255,255,.18),transparent 60%)}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,4.6vw,50px);font-weight:600;line-height:1.12;position:relative}
.cta-band p{position:relative;color:rgba(253,249,240,.9);margin:14px auto 28px;max-width:46ch;font-size:16px}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.65);color:#FDF9F0;background:rgba(255,255,255,.12)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.25)}

/* Footer */
.foot{background:var(--ink);color:rgba(250,247,241,.75);margin-top:96px}
.foot-in{width:min(1120px,100%);margin:0 auto;padding:64px 22px 34px;display:grid;gap:40px}
@media(min-width:820px){.foot-in{grid-template-columns:1.4fr 1fr 1fr;gap:56px}}
.foot h4{font-family:'Cormorant Garamond',serif;font-size:19px;color:#FDF9F0;margin-bottom:14px}
.foot a{color:rgba(250,247,241,.75)}
.foot a:hover{color:var(--g300)}
.foot .logo b{color:#FDF9F0}
.foot ul{list-style:none}
.foot li{padding:5px 0;font-size:14px}
.foot .col small{display:block;font-size:12.5px;line-height:1.7;margin-top:12px}
.copy{border-top:1px solid rgba(250,247,241,.12);margin-top:44px;padding:18px 0 4px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12px;color:rgba(250,247,241,.5)}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* Mobile nav */
.mnav{display:none;position:absolute;top:66px;inset-inline:20px;background:#fff;border:1px solid var(--g200);border-radius:18px;box-shadow:0 26px 60px -22px rgba(34,28,19,.35);padding:14px;z-index:45}
.mnav.open{display:block}
.mnav a{display:block;padding:11px 14px;border-radius:12px;font-weight:500;font-size:15px}
.mnav a:hover{background:var(--g100)}
.hburger{display:none}
@media(max-width:860px){.navlinks{display:none}.hburger{display:inline-flex}}
@media print{.hero,.curve,.foot,.no-print{display:none!important}}.photo-credit{font-size:10.5px;color:rgba(250,247,241,.4);line-height:1.5;margin-top:10px}