/* =========================================================
   VVV Softech — stylesheet
   Theme: dukaan ki paperwork — receipt paper, carbon copy,
   purple rubber stamp. Mobile first.
   ========================================================= */

:root{
  --ink:      #171a2b;   /* text / dark sections */
  --ink-soft: #565b76;
  --paper:    #faf9f5;   /* page background */
  --card:     #ffffff;
  --carbon:   #e2ded2;   /* light rules, borders */
  --stamp:    #5b2a86;   /* violet stamp ink — accent */
  --stamp-lt: #f1e9f8;
  --paid:     #0f7a5a;   /* green ticks, prices */

  --r:   14px;
  --r-s: 8px;

  --f-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --f-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  --wrap: 1120px;
  --pad:  18px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--stamp); text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(30px,7.5vw,54px); }
h2{ font-size:clamp(25px,5.5vw,38px); }
h3{ font-size:19px; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.sect{ padding:56px 0; }
.sect-tight{ padding:36px 0; }
.center{ text-align:center; }
.mono{ font-family:var(--f-mono); }

/* ---------- eyebrow label ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--stamp);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::after{ content:''; flex:1; height:1px; background:var(--carbon); }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::after{ display:none; }

.lede{ color:var(--ink-soft); font-size:17px; max-width:60ch; }
.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px;
  border-radius:var(--r-s);
  font-weight:700; font-size:15px;
  border:1.5px solid var(--ink);
  background:var(--ink); color:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 -2px rgba(23,26,43,.25); }
.btn:active{ transform:translateY(0); }
.btn-stamp{ background:var(--stamp); border-color:var(--stamp); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-wide{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

:focus-visible{ outline:3px solid var(--stamp); outline-offset:2px; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(250,249,245,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--carbon);
}
.top-in{ display:flex; align-items:center; justify-content:space-between; height:62px; }
.logo{ display:flex; align-items:center; gap:9px; color:var(--ink); font-family:var(--f-display); font-weight:800; font-size:19px; letter-spacing:-.02em; }
.logo-mark{
  width:30px; height:30px; border-radius:7px;
  background:var(--stamp); color:#fff;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:13px; font-weight:700;
}
.nav{ display:none; }
.nav a{ color:var(--ink); font-size:15px; font-weight:600; padding:8px 10px; border-radius:6px; }
.nav a:hover, .nav a.on{ color:var(--stamp); background:var(--stamp-lt); }
.top-cta{ display:none; }
.burger{
  width:40px; height:40px; border:1.5px solid var(--carbon); border-radius:8px;
  background:var(--card); display:grid; place-items:center; cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

.mnav{ display:none; border-top:1px solid var(--carbon); background:var(--card); padding:10px var(--pad) 18px; }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:12px 4px; border-bottom:1px solid var(--carbon); color:var(--ink); font-weight:600; }
.mnav .btn{ margin-top:14px; }

/* ---------- hero ---------- */
.hero{ padding:38px 0 20px; position:relative; }
.hero-grid{ display:grid; gap:34px; }
.hero h1 span{ color:var(--stamp); }
.hero .lede{ font-size:17.5px; }
.trust{
  margin-top:22px; padding-top:16px; border-top:1px dashed var(--carbon);
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-family:var(--f-mono); font-size:12px; color:var(--ink-soft);
}
.trust b{ color:var(--ink); }

/* stamp badge */
.stamp{
  display:inline-block;
  border:2px solid var(--stamp); color:var(--stamp);
  padding:5px 12px; border-radius:4px;
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  transform:rotate(-3deg);
  opacity:.9;
}

/* ---------- signature: bill / receipt card ---------- */
.bill{
  background:var(--card);
  border-left:1px solid var(--carbon);
  border-right:1px solid var(--carbon);
  padding:26px 20px 30px;
  position:relative;
  box-shadow:0 14px 30px -22px rgba(23,26,43,.55);
  --tooth:11px;
  -webkit-mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--tooth)) var(--tooth) repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--tooth)) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--tooth)) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--tooth)) var(--tooth) repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--tooth)) var(--tooth) repeat-x,
    linear-gradient(#000 0 0) center/100% calc(100% - 2*var(--tooth)) no-repeat;
}
.bill-head{ text-align:center; border-bottom:1px dashed var(--carbon); padding-bottom:14px; margin-bottom:14px; }
.bill-head h3{ font-family:var(--f-mono); font-size:15px; letter-spacing:.1em; text-transform:uppercase; margin:0 0 4px; }
.bill-head p{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-soft); margin:0; }

.bill-line{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--f-mono); font-size:13px;
  padding:7px 0;
}
.bill-line .dots{ flex:1; border-bottom:1px dotted var(--carbon); transform:translateY(-3px); }
.bill-line .amt{ font-weight:700; white-space:nowrap; }
.bill-line .amt.free{ color:var(--paid); }

.bill-total{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:14px;
  border-top:2px solid var(--ink);
  font-family:var(--f-mono); font-weight:700;
}
.bill-total .big{ font-size:22px; }
.bill-foot{ margin-top:16px; text-align:center; font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); line-height:1.7; }
.bill-stamp{ display:flex; justify-content:center; margin-top:14px; }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:16px; }

.card{
  background:var(--card);
  border:1px solid var(--carbon);
  border-radius:var(--r);
  padding:22px 20px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--stamp); box-shadow:0 16px 30px -24px rgba(91,42,134,.7); }
.card h3{ margin-bottom:6px; }
.card p{ color:var(--ink-soft); font-size:15px; margin-bottom:14px; }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.card-num{ font-family:var(--f-mono); font-size:12px; color:var(--stamp); font-weight:700; }
.card-from{ font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); }
.card-from b{ color:var(--ink); font-size:15px; }

.ticks{ list-style:none; margin:0 0 4px; padding:0; }
.ticks li{ font-size:14.5px; padding:4px 0 4px 22px; position:relative; color:var(--ink); }
.ticks li::before{
  content:'✓'; position:absolute; left:0; top:3px;
  color:var(--paid); font-weight:700; font-size:13px;
}

.pains{ list-style:none; margin:0; padding:0; }
.pains li{ font-size:15px; padding:7px 0 7px 24px; position:relative; border-bottom:1px dashed var(--carbon); }
.pains li:last-child{ border-bottom:0; }
.pains li::before{
  content:'!'; position:absolute; left:0; top:7px;
  width:16px; height:16px; border-radius:50%;
  background:var(--stamp-lt); color:var(--stamp);
  font-family:var(--f-mono); font-size:11px; font-weight:700;
  display:grid; place-items:center;
}

.tags{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 16px; }
.tag{
  font-family:var(--f-mono); font-size:11px;
  background:var(--stamp-lt); color:var(--stamp);
  padding:4px 9px; border-radius:20px;
}

.prod-for{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.09em; }
.dot-live{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--paid); margin-right:6px; }

/* ---------- process ---------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:44px 1fr; gap:14px;
  padding:18px 0; border-bottom:1px dashed var(--carbon);
}
.step:last-child{ border-bottom:0; }
.step-n{
  font-family:var(--f-mono); font-size:13px; font-weight:700;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--stamp); color:var(--stamp);
  display:grid; place-items:center;
}
.step h3{ margin-bottom:3px; }
.step p{ margin:0; color:var(--ink-soft); font-size:15px; }

/* ---------- dark band ---------- */
.band{ background:var(--ink); color:#fff; }
.band h2,.band h3{ color:#fff; }
.band .lede{ color:#b9bdd4; }
.band .eyebrow{ color:#c9a6ec; }
.band .eyebrow::after{ background:rgba(255,255,255,.18); }
.band .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }

.stat{ border-top:1px solid rgba(255,255,255,.16); padding-top:14px; }
.stat b{ font-family:var(--f-display); font-size:30px; display:block; line-height:1.1; }
.stat span{ font-family:var(--f-mono); font-size:12px; color:#b9bdd4; }

/* ---------- pricing ---------- */
.plan{ position:relative; }
.plan-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--stamp); color:#fff;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  padding:4px 12px; border-radius:20px; white-space:nowrap;
  z-index:2;
}
.plan-price{ font-family:var(--f-display); font-size:34px; font-weight:800; letter-spacing:-.03em; }
.plan-price small{ font-family:var(--f-mono); font-size:12px; font-weight:400; color:var(--ink-soft); letter-spacing:0; }

/* ---------- FAQ ---------- */
.faq{ border-bottom:1px solid var(--carbon); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:16px 34px 16px 0; position:relative;
  font-weight:700; font-size:16.5px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:13px;
  font-family:var(--f-mono); font-size:20px; color:var(--stamp);
}
.faq[open] summary::after{ content:'–'; }
.faq p{ color:var(--ink-soft); font-size:15px; padding-right:20px; margin-top:-4px; }

/* ---------- form ---------- */
.form{ display:grid; gap:14px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px;
  border:1.5px solid var(--carbon); border-radius:var(--r-s);
  background:var(--card); color:var(--ink);
  font-family:var(--f-body); font-size:16px;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--stamp); outline:none; }
.field textarea{ min-height:110px; resize:vertical; }
.hp{ position:absolute; left:-9999px; }

.note{ font-size:13px; color:var(--ink-soft); }
.alert{ padding:14px 16px; border-radius:var(--r-s); font-size:15px; margin-bottom:18px; }
.alert-ok{ background:#e7f6ef; color:#0b5c44; border:1px solid #b6e3d0; }
.alert-bad{ background:#fdecec; color:#8c1c1c; border:1px solid #f3c2c2; }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#b9bdd4; padding:46px 0 0; }
.foot h4{ color:#fff; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; }
.foot a{ color:#b9bdd4; display:block; padding:5px 0; font-size:15px; }
.foot a:hover{ color:#fff; }
.foot-grid{ display:grid; gap:28px; }
.foot-bar{
  margin-top:34px; border-top:1px solid rgba(255,255,255,.14);
  padding:18px 0; font-size:13px;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:54px; height:54px; border-radius:50%;
  background:#25d366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4);
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.rv.in{ opacity:1; transform:none; }

/* ---------- desktop ---------- */
@media (min-width:760px){
  .sect{ padding:76px 0; }
  .hero{ padding:60px 0 30px; }
  .hero-grid{ grid-template-columns:1.15fr .85fr; align-items:center; gap:46px; }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .steps{ grid-template-columns:repeat(4,1fr); gap:22px; }
  .step{ grid-template-columns:1fr; border-bottom:0; border-top:2px solid var(--carbon); padding-top:18px; }
  .step:first-child{ border-top-color:var(--stamp); }
}
@media (min-width:960px){
  .nav{ display:flex; align-items:center; gap:2px; }
  .top-cta{ display:inline-flex; }
  .burger{ display:none; }
  .grid-3-lg{ grid-template-columns:repeat(3,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}