/* KeshSetu — shares VCom's design language: cream canvas, deep green, lime accent, serif display. */
:root{--green:#00583f;--green2:#003f30;--lime:#c9ff4f;--ink:#151815;--muted:#5c615a;--cream:#fbf8f0;--line:#e5e0d5;--card:#fff;--soft:#e8fac3;--danger:#982b1f;
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:Georgia,'Times New Roman',serif;--deva:'Tiro Devanagari Sanskrit','Noto Serif Devanagari',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:15px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid rgba(70,145,73,.35);outline-offset:3px}
.skip{position:fixed;top:-60px;left:16px;z-index:100;background:#fff;padding:10px 16px;border-radius:9px}.skip:focus{top:12px}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* brand */
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word b{font:400 27px/1 var(--deva);color:var(--green);letter-spacing:.01em}
.brand-word small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-weight:700}

/* nav */
.nav{height:76px;display:flex;align-items:center;gap:24px;border-bottom:1px solid rgba(92,91,80,.12);position:relative;z-index:8}
.nav nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:36px;font-size:14px}
.nav nav a:hover{color:var(--green)}
.nav-right{margin-left:auto;display:flex;gap:12px;align-items:center}
.menu-btn{display:none;border:0;background:transparent;margin-left:auto;padding:8px}
.menu-btn svg{width:24px;height:24px}

/* buttons */
.btn{height:48px;border-radius:999px;padding:0 26px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;border:0;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(0,79,56,.22)}
.btn-primary:hover{background:#007050;transform:translateY(-2px)}
.btn-ghost{border:1px solid #aeb4ae;background:rgba(255,255,255,.55);color:var(--ink)}
.btn-ghost:hover{background:#fff}
.btn-lime{background:var(--lime);color:#0b291b}
.btn-lime:hover{background:#d7ff79;transform:translateY(-2px)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.55;pointer-events:none}

.kicker{color:var(--green);text-transform:uppercase;font-size:11.5px;letter-spacing:.14em;font-weight:800;margin:0}
h1,h2,h3{text-wrap:balance}
.display{font:500 clamp(42px,4.4vw,70px)/1 var(--serif);letter-spacing:-.045em;margin:18px 0 22px}
.display em,.h2 em{font-style:normal;color:var(--green)}
.h2{font:500 clamp(34px,3.1vw,50px)/1.04 var(--serif);letter-spacing:-.03em;margin:10px 0 14px}
.lead{font-size:18px;color:#555c57;max-width:540px;margin:0}
.center{text-align:center}
.center .lead{margin:0 auto}

/* hero */
.hero{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center;padding:56px 0 40px;min-height:560px}
.hero-sk{font:400 20px/1.4 var(--deva);color:var(--green);margin:14px 0 0;opacity:.9}
.actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.trust{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.trust span{background:rgba(255,255,255,.7);border:1px solid #e6e2d8;border-radius:999px;padding:8px 14px;display:flex;align-items:center;gap:8px;font-size:12.5px}
.trust svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--green);color:#fff}

.visual{position:relative;height:470px}
.visual::before{content:"";position:absolute;inset:6% 2% 4% 10%;border-radius:40px;background:radial-gradient(120% 90% at 70% 30%,#e8fac3 0,#f4efe2 55%,transparent 75%)}
.mock-dash{position:absolute;left:0;top:30px;width:70%;height:360px;background:#0d1d19;color:#dce7e2;border:6px solid #25332e;border-radius:20px;box-shadow:0 26px 48px rgba(10,30,23,.28);transform:rotate(-3deg);overflow:hidden;font-size:11px}
.mock-dash header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #263b34}
.mock-dash header b{font:400 17px var(--deva);color:#aef377}
.mock-dash header span{font-size:10px;color:#9fb3ab}
.cal{display:grid;grid-template-columns:44px repeat(3,1fr);gap:0;padding:10px 12px}
.cal .h{font-size:9.5px;color:#9fb3ab;padding:4px 6px}
.cal .t{font-size:9px;color:#6f857c;height:40px;padding-top:2px}
.cal .col{position:relative;border-left:1px solid #1f322c;height:40px}
.ev{position:absolute;left:4px;right:4px;border-radius:7px;padding:5px 7px;font-size:9.5px;line-height:1.25;color:#08231a;background:#aef377}
.ev small{display:block;opacity:.75}
.ev.b{background:#ffd9a8}.ev.c{background:#bfe6ff}.ev.d{background:#f7c3d6}
.mock-phone{position:absolute;right:2%;top:0;width:224px;height:440px;background:#fff;border:8px solid #1a1f1c;border-radius:34px;box-shadow:0 26px 50px rgba(30,40,30,.3);transform:rotate(4deg);overflow:hidden}
.mock-phone .ph-top{background:var(--green);color:#fff;padding:16px 14px 18px}
.mock-phone .ph-top b{font:400 18px var(--deva);color:var(--lime)}
.mock-phone .ph-top p{margin:6px 0 0;font-size:11px;opacity:.85}
.ph-body{padding:12px}
.ph-svc{display:flex;justify-content:space-between;align-items:center;border:1px solid #ece7dc;border-radius:10px;padding:8px 10px;margin-bottom:7px;font-size:10.5px}
.ph-svc.on{border-color:var(--green);background:#f1fbe0}
.ph-svc i{font-style:normal;color:var(--muted)}
.ph-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:10px 0}
.ph-slots span{border:1px solid #e3ded2;border-radius:8px;text-align:center;padding:6px 0;font-size:10px}
.ph-slots span.on{background:var(--green);color:#fff;border-color:var(--green)}
.ph-cta{background:var(--green);color:#fff;border-radius:999px;text-align:center;padding:9px;font-size:11px;font-weight:700}
.float{position:absolute;background:#fff;border-radius:14px;box-shadow:0 14px 30px rgba(27,43,34,.16);display:flex;align-items:center;gap:10px;padding:12px 15px;font-size:11px}
.float b{display:block;font-size:12px}
.float small{color:#68716c}
.float .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#25a33f;color:#fff}
.float .ic svg{width:15px;height:15px}
.f1{left:4%;bottom:6px;transform:rotate(-2deg)}
.f2{right:30%;top:-6px;transform:rotate(3deg)}
.f2 .ic{background:#0b6bcb}

/* capability strip */
.caps{background:linear-gradient(115deg,#00412f,#006146);color:#fff;border-radius:16px;display:grid;grid-template-columns:repeat(6,1fr);padding:26px 14px;box-shadow:0 12px 35px rgba(0,67,48,.2)}
.caps article{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px;border-right:1px solid rgba(255,255,255,.22)}
.caps article:last-child{border:0}
.caps svg{color:var(--lime);width:28px;height:28px;margin-bottom:8px}
.caps b{font-size:14px}
.caps p{font-size:11.5px;line-height:1.4;margin:4px 0 0;color:#e1ece6}

section.block{padding:84px 0 20px}

/* salon types */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:38px}
.types article{background:rgba(255,255,255,.85);border:1px solid #ede7dc;border-radius:14px;padding:20px;transition:transform .2s ease,box-shadow .2s ease}
.types article:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(69,80,56,.09)}
.types .ti{width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--green);display:grid;place-items:center;margin-bottom:12px}
.types .ti svg{width:22px;height:22px}
.types h3{margin:0;font-size:16px}
.types p{margin:5px 0 0;color:var(--muted);font-size:13px}

/* benefits / feature cards */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}
.benefits article{background:rgba(255,255,255,.85);border:1px solid #ede7dc;border-radius:14px;padding:22px;display:grid;grid-template-columns:50px 1fr;gap:14px;align-items:start;box-shadow:0 9px 20px rgba(69,80,56,.05)}
.benefits .bi{width:48px;height:48px;border-radius:12px;background:var(--soft);color:var(--green);display:grid;place-items:center}
.benefits .bi svg{width:22px;height:22px}
.benefits h3{margin:2px 0 0;font-size:16.5px}
.benefits p{margin:5px 0 0;color:var(--muted);font-size:13.5px}

/* showcase */
.showcase{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.frame{background:#fff;border-radius:16px;padding:12px;box-shadow:0 22px 42px rgba(74,64,45,.14)}
.frame-top{display:flex;gap:5px;height:18px;align-items:center;padding-left:4px}
.frame-top i{width:7px;height:7px;border-radius:50%;background:#ef6d59}.frame-top i:nth-child(2){background:#efbd45}.frame-top i:nth-child(3){background:#65bd65}
.frame-body{border-radius:10px;background:var(--cream);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{background:#fff;border:1px solid #ece7dc;border-radius:12px;padding:14px;font-size:12.5px}
.mini h4{margin:0 0 8px;font-size:13px}
.mini .row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed #ece7dc}
.mini .row:first-of-type{border-top:0}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;background:var(--soft);color:var(--green)}
.pill.warn{background:#fff3d6;color:#8a5a00}
.pill.off{background:#f1efe9;color:#6d6f69}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:13px;color:#4f5752}
.ticks li{display:flex;gap:11px;align-items:flex-start}
.ticks svg{width:22px;height:22px;flex:none;background:#e7f8bd;color:var(--green);padding:5px;border-radius:50%}

/* steps */
.steps-box{background:rgba(255,255,255,.75);border:1px solid #eee9df;border-radius:18px;padding:34px 26px;text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;text-align:left}
.steps article{display:grid;grid-template-columns:40px 1fr;gap:13px;padding:0 16px}
.steps article>b{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#39a92d,#006342);color:#fff;display:grid;place-items:center}
.steps h3{margin:0;font-size:15px}
.steps p{font-size:13px;color:var(--muted);margin:4px 0}

/* AI */
.ai{background:#0d1d19;color:#e3ece7;border-radius:22px;padding:56px 48px;display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.ai .h2{color:#fff}.ai .h2 em{color:var(--lime)}
.ai .kicker{color:var(--lime)}
.ai .lead{color:#b9c9c2}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-grid article{background:#13281f;border:1px solid #21382f;border-radius:14px;padding:16px}
.ai-grid b{display:block;color:#fff;font-size:14px}
.ai-grid span{font-size:12.5px;color:#a9bbb3}

/* banner + faq + footer */
.banner{border-radius:16px;background:linear-gradient(120deg,#003f30,#00654a);color:#fff;display:flex;align-items:center;padding:36px 60px;gap:40px;box-shadow:0 15px 35px rgba(0,62,45,.2);position:relative;overflow:hidden}
.banner::after{content:"केशसेतु";position:absolute;right:-10px;bottom:-40px;font:400 150px/1 var(--deva);color:rgba(201,255,79,.07);pointer-events:none}
.banner p{font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:0;color:var(--lime);font-weight:700}
.banner h2{font:500 32px/1.1 var(--serif);margin:8px 0}
.banner span{font-size:14px;color:#d6e6de}
.banner .btn{margin-left:auto;position:relative;z-index:1}
.faq{max-width:1060px;margin:0 auto;padding:84px 32px;display:grid;grid-template-columns:280px 1fr;gap:40px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:700;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:17px;flex:none;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(90deg)}
.faq details p{color:var(--muted);font-size:14px;margin:10px 0 0}
.footer{border-top:1px solid var(--line);padding:28px 0 34px}
.footer .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.footer nav{display:flex;gap:26px;font-size:13px;flex-wrap:wrap}
.footer small{grid-column:1/-1;color:#8b8d86;font-size:12px}

/* modal + forms */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,31,22,.6);backdrop-filter:blur(8px);display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-card{width:min(680px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:#fbfaf5;border-radius:22px;padding:36px;position:relative;box-shadow:0 35px 80px rgba(0,27,20,.35)}
.modal-x{position:absolute;right:16px;top:16px;border:0;background:#eef0e8;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.modal-x svg{width:18px}
.modal h2{font:500 34px/1.05 var(--serif);margin:10px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px;font-size:12px;font-weight:700}
.field input,.field select,.field textarea{height:46px;border:1px solid #d8dbd2;border-radius:10px;background:#fff;padding:0 12px;color:var(--ink);font:15px var(--ui);width:100%}
.field textarea{height:84px;padding:10px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:0;box-shadow:0 0 0 3px rgba(0,88,63,.12)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:16px 0}
.consent input{margin-top:3px;accent-color:var(--green)}
.err{padding:11px 13px;background:#fff0ed;color:var(--danger);border-radius:9px;font-size:13.5px;margin:10px 0;display:none}
.err.show{display:block}
.ok-box{text-align:center;padding:30px 6px}
.ok-box .ic{width:62px;height:62px;border-radius:50%;background:#e5f6c3;color:var(--green);display:grid;place-items:center;margin:0 auto}
.ok-box .ic svg{width:28px;height:28px}
.hp{position:absolute;left:-9999px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:1000px){
  .wrap{padding:0 22px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:36px}
  .visual{max-width:640px;width:100%;margin:0 auto}
  .caps{grid-template-columns:repeat(3,1fr);row-gap:24px}.caps article:nth-child(3){border-right:0}
  .types{grid-template-columns:repeat(2,1fr)}
  .benefits{grid-template-columns:1fr}
  .showcase,.ai{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr 1fr;gap:24px}
  .ai{padding:44px 28px}
}
@media(max-width:720px){
  .wrap{padding:0 16px}
  .nav{height:66px}
  .nav nav{display:none}
  .nav nav.open{display:grid;position:absolute;left:0;right:0;top:64px;transform:none;background:#fff;border-radius:14px;padding:22px;gap:18px;box-shadow:0 18px 42px rgba(0,43,31,.18)}
  .nav-right{display:none}
  .menu-btn{display:block}
  .brand-word b{font-size:23px}
  .display{font-size:42px}
  .lead{font-size:16px}
  .actions .btn{width:100%}
  .visual{height:400px}
  .mock-dash{width:78%;height:300px}
  .mock-phone{width:178px;height:360px;top:20px}
  .f2{display:none}
  .caps{grid-template-columns:repeat(2,1fr);padding:22px 6px}
  .caps article:nth-child(2n){border-right:0}.caps article:nth-child(3){border-right:1px solid rgba(255,255,255,.22)}
  .types{grid-template-columns:1fr}
  .frame-body{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ai-grid{grid-template-columns:1fr}
  .banner{flex-direction:column;align-items:flex-start;padding:30px 22px}
  .banner .btn{margin-left:0;width:100%}
  .faq{grid-template-columns:1fr;padding:60px 16px;gap:10px}
  .footer .wrap{grid-template-columns:1fr}
  .modal-card{padding:28px 18px}
  .grid2{grid-template-columns:1fr}
  section.block{padding-top:64px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}
.types,.benefits{text-align:left}
.faq summary svg{height:17px;margin-top:3px}