/* VEDHEM — shared styles. Mobile-first. Palette: white, black, greys only. */
:root{
  --ink:#0a0a0a;--paper:#fff;--g9:#141414;--g7:#3d3d3d;--g6:#5c5c5c;--g5:#737373;--g4:#8a8a8a;--g3:#c2c2c2;--g2:#e2e2e2;--g1:#f0f0f0;
  --head:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;--body:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%;background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.05;letter-spacing:-.03em}
h1{font-size:clamp(2.4rem,9vw,4.6rem);max-width:16ch;margin:0 auto}
h2{font-size:clamp(1.9rem,6.5vw,3rem);max-width:16ch}
h2.ctr{margin:0 auto}
.eyebrow{display:inline-block;font:600 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--g6);margin-bottom:14px}
.lead{color:var(--g7);font-size:1.08rem;max-width:38ch}
.ctr{text-align:center}
.ctr .lead{margin-left:auto;margin-right:auto}

/* buttons: rounded, calm hover (no jitter), soft ripple */
.btn{position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:50px;padding:0 28px;border-radius:12px;font-weight:600;font-size:.98rem;border:1.5px solid var(--ink);background:var(--ink);color:#fff;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}
.btn.line{background:transparent;color:var(--ink);box-shadow:none}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.sm{min-height:42px;padding:0 18px;font-size:.9rem;border-radius:10px}
.btn.block{width:100%}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .55s ease-out;pointer-events:none}
.btn.line .ripple,.btn.ghost .ripple{background:rgba(0,0,0,.1)}
@keyframes rip{to{transform:scale(1);opacity:0}}
.cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:32px}
.cta .btn{width:100%}

.lg{width:44px;height:21px;fill:var(--ink)}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.scrolled{border-color:var(--g2);box-shadow:0 1px 0 var(--g2)}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.acts{display:flex;align-items:center;gap:14px}
.links{display:none}
.login{display:none}
.burger{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--g2);border-radius:10px;background:none;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .25s}
.burger span::before{top:-5px}.burger span::after{top:5px}
header.open .burger span{background:transparent}
header.open .burger span::before{transform:translateY(5px) rotate(45deg)}
header.open .burger span::after{transform:translateY(-5px) rotate(-45deg)}
.mnav{display:none;position:fixed;inset:64px 0 0 0;background:#fff;padding:12px 20px 28px;overflow:auto;z-index:55}
header.open .mnav{display:block}
.mnav a{display:block;padding:16px 4px;font:600 1.3rem var(--head);border-bottom:1px solid var(--g1)}
.mnav .btn{margin-top:20px}

/* hero */
.hero{position:relative;overflow:hidden;padding:56px 0 40px}
.hero .wrap{position:relative;z-index:1}
.hero .wrap>*{animation:rise .8s var(--ease) both}
.hero .wrap>:nth-child(2){animation-delay:.08s}
.hero .wrap>:nth-child(3){animation-delay:.16s}
.hero .wrap>:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
h1.shine{background:linear-gradient(100deg,var(--ink) 40%,var(--g4) 50%,var(--ink) 60%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:200% 0}50%{background-position:0 0}}
.hero .lead{margin:22px auto 0}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.badge{display:flex;align-items:center;gap:7px;border:1px solid var(--g2);border-radius:999px;padding:7px 14px;font-size:.85rem;color:var(--g6);font-weight:500}
.badge i{width:6px;height:6px;border-radius:50%;background:var(--g4)}

/* hero product preview */
.stage{margin:40px auto 0;perspective:1400px;max-width:640px}
.card{background:#fff;border:1.5px solid var(--g3);border-radius:20px;box-shadow:0 30px 60px -28px rgba(0,0,0,.24);overflow:hidden;transform:rotateX(4deg);animation:settle 1s var(--ease) .3s both}
@keyframes settle{from{opacity:0;transform:translateY(30px) rotateX(10deg)}}
.card-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--g1)}
.card-top .who{display:flex;align-items:center;gap:10px;font-weight:700;font-family:var(--head)}
.dot3{display:flex;gap:6px}
.dot3 i{width:8px;height:8px;border-radius:50%;background:var(--g2)}
.card-body{padding:22px}
.card-body h3{font-size:1.3rem;margin-bottom:16px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--g1);border-radius:14px;background:var(--g1);margin-bottom:16px}
.stats div{padding:14px 12px;text-align:center}
.stats div+div{border-left:1px solid var(--g2)}
.stats b{display:block;font:700 1.5rem/1.1 var(--head)}
.stats small{color:var(--g6);font-size:.78rem}
.bars{display:flex;align-items:flex-end;gap:7px;height:58px;margin-bottom:16px}
.bars i{flex:1;background:var(--g2);border-radius:4px 4px 0 0;height:var(--h);animation:grow .8s .6s var(--ease) both}
.bars i.top{background:var(--ink)}
@keyframes grow{from{transform:scaleY(0)}}
.rows li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--g1);font-size:.9rem}
.rows time{width:58px;color:var(--g6);font-size:.78rem;flex:none}
.rows span{flex:1;font-weight:500}
.rows em{font-style:normal;font-size:.72rem;color:var(--g6);background:var(--g1);border-radius:6px;padding:3px 8px}

/* sections */
.sec{padding:76px 0}
.sec.dark{background:var(--g9);color:#fff}
.sec.dark .lead{color:var(--g3)}
.head{margin-bottom:44px}
.head p{margin-top:14px}

/* problem / solution */
.vs{display:grid;gap:14px;margin-top:36px}
.vs>div{border:1px solid var(--g3);border-radius:18px;padding:26px;background:#fff}
.vs .bad{background:var(--g1)}
.vs .bad li{color:var(--g5);text-decoration:line-through;text-decoration-color:var(--g4)}
.vs .good{background:var(--ink);color:#fff;border-color:var(--ink)}
.vs h4{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:var(--g6);margin-bottom:14px}
.vs .good h4{color:var(--g3)}
.vs li{padding:11px 0;border-top:1px solid var(--g2);font-size:1rem;display:flex;gap:10px;align-items:flex-start}
.vs .good li{border-color:rgba(255,255,255,.14)}

/* bento feature grid */
.bento{display:grid;gap:14px}
.bcard{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.bcard:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.4);border-color:rgba(255,255,255,.28)}
.bcard.big{background:var(--ink);color:#fff;border-color:rgba(255,255,255,.14)}
.bcard.big:hover{box-shadow:0 20px 40px -18px rgba(0,0,0,.4)}
.bicon{width:42px;height:42px;border-radius:11px;background:var(--g1);display:grid;place-items:center;margin-bottom:18px}
.bcard.big .bicon{background:rgba(255,255,255,.12)}
.bicon svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6}
.bcard.big .bicon svg{stroke:#fff}
.bcard h3{font-size:1.25rem;margin-bottom:8px}
.bcard p{color:var(--g6);font-size:.96rem}
.bcard.big p{color:var(--g3)}

/* timeline steps */
.steps{position:relative;margin-top:44px}
.steps::before{content:"";position:absolute;left:25px;top:6px;bottom:6px;width:1.5px;background:var(--g2)}
.steps li{position:relative;display:grid;grid-template-columns:52px 1fr;gap:18px;padding-bottom:36px}
.steps li:last-child{padding-bottom:0}
.steps b{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:600 1.1rem var(--head);z-index:1}
.steps h3{font-size:1.2rem;margin-bottom:4px}
.steps p{color:var(--g6);max-width:44ch}

/* pricing */
.plans{display:grid;gap:18px;margin-top:44px}
.plan{border:1.5px solid var(--g2);border-radius:22px;padding:30px;display:flex;flex-direction:column;background:#fff}
.plan.feat{box-shadow:0 24px 48px -26px rgba(0,0,0,.18)}
.ptag{align-self:flex-start;font:600 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--g1);color:var(--g6);border-radius:999px;padding:6px 12px;margin-bottom:18px}
.plan.feat .ptag{background:var(--ink);color:#fff}
.plan h3{font-size:1.3rem;margin-bottom:6px}
.plan .price{font:700 2.6rem/1 var(--head);letter-spacing:-.03em;margin:14px 0 4px}
.plan .price span{font:500 1rem var(--body);color:var(--g6)}
.plan .pdesc{color:var(--g6);font-size:.94rem;margin-bottom:22px;min-height:44px}
.plan ul{margin:0 0 26px;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:.95rem;border-top:1px solid var(--g1)}
.plan li svg{flex:none;width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;margin-top:2px}

/* marquee: testimonials scroll infinitely */
.marquee{overflow:hidden;margin-top:44px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);cursor:pointer}
.mtrack{display:flex;width:max-content;gap:16px;animation:mscroll 34s linear infinite}
.marquee:hover .mtrack,.marquee.stopped .mtrack{animation-play-state:paused!important}
@keyframes mscroll{to{transform:translateX(-50%)}}

/* testimonials */
.quotes{display:none}
.quote{flex:0 0 320px;border:1.5px solid var(--g3);border-radius:18px;padding:26px;background:var(--paper);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.quote p{font-size:1.05rem;color:var(--g7);margin-bottom:18px}
.who2{display:flex;align-items:center;gap:12px}
.av{width:38px;height:38px;border-radius:50%;background:var(--g1);display:grid;place-items:center;font:700 .85rem var(--head);color:var(--g6)}
.who2 b{display:block;font-size:.92rem}
.who2 span{color:var(--g6);font-size:.82rem}

/* vedhem ai section */
.ai-list{display:grid;gap:18px;margin-top:24px}
.ai-list li{display:flex;gap:14px;align-items:flex-start}
.ai-list h3{font-size:1.02rem;margin-bottom:3px}
.ai-list p{color:var(--g6);font-size:.92rem}
.ai-card .rows em{white-space:nowrap}

/* contact form */
.contact-grid{display:grid;gap:32px;margin-top:8px}
.form-card{border:1.5px solid var(--g3);border-radius:20px;padding:26px;background:var(--paper)}
[data-theme=dark] .form-card{background:#111;border-color:#333}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.fld label{font-size:.86rem;font-weight:600;color:var(--g7)}
.fld input,.fld textarea,.fld select{font:inherit;font-size:.96rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--g2);border-radius:10px;padding:12px 14px;transition:border-color .2s;width:100%}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.fld textarea{resize:vertical;min-height:120px}
.contact-info{display:grid;gap:14px;align-content:start}
.info-row{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--g2);border-radius:16px;padding:18px}
.info-row .bicon{margin-bottom:0;flex:none}
.info-row h3{font-size:1rem;margin-bottom:3px}
.info-row p{color:var(--g6);font-size:.9rem}
.info-row a{color:var(--ink);font-weight:600}
.note-inline{color:var(--g5);font-size:.86rem;margin-top:10px}

/* faq */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--g2)}
.faq details:last-child{border-bottom:1px solid var(--g2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;font:600 1.08rem/1.3 var(--head);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.7rem;line-height:1;font-weight:300;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>.ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq details[open]>.ans{grid-template-rows:1fr}
.faq details>.ans>p{overflow:hidden;min-height:0;margin:0;padding:0 26px 22px 0;color:var(--g6);max-width:58ch;opacity:0;transition:opacity .2s ease}
.faq details[open]>.ans>p{opacity:1;transition:opacity .28s ease .08s}

/* closing CTA */
.final{background:var(--ink);color:#fff;text-align:center;padding:80px 0;border-radius:28px}
.final h2{margin:0 auto 16px}
.final p{color:var(--g3);margin:0 auto 30px;max-width:34ch}
.final .row{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:320px;margin:0 auto}

footer{padding:56px 0 30px;border-top:1px solid var(--g2)}
.fgrid{display:grid;gap:36px}
.fcol h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--g6);margin-bottom:14px}
.fcol a{display:block;padding:7px 0;color:var(--g7)}
.fcol a:hover{color:var(--ink)}
.fbrand p{color:var(--g6);margin-top:14px;font-size:.92rem;max-width:26ch}
.copy{margin-top:40px;color:var(--g4);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.bento .bcard:nth-child(2).reveal{transition-delay:.06s}
.bento .bcard:nth-child(3).reveal{transition-delay:.12s}
.bento .bcard:nth-child(4).reveal{transition-delay:.18s}
.bento .bcard:nth-child(5).reveal{transition-delay:.24s}
.bento .bcard:nth-child(6).reveal{transition-delay:.3s}
.plans .plan:nth-child(2).reveal{transition-delay:.08s}
.plans .plan:nth-child(3).reveal{transition-delay:.16s}

@media(min-width:640px){
  .cta{flex-direction:row;justify-content:center}
  .cta .btn{width:auto}
  .vs{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:860px){
  .links{display:flex;gap:30px;font-weight:500;color:var(--g7)}
  .links a{padding:6px 0;border-bottom:2px solid transparent}
  .links a:hover,.links a[aria-current]{color:var(--ink)}
  .login{display:inline-block;color:var(--g7);font-weight:500;margin-right:6px}
  .burger,.mnav{display:none!important}
  .wrap{padding:0 32px}
  .hero{padding:88px 0 60px}
  .sec{padding:110px 0}
  .head{max-width:640px}
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento .big{grid-column:span 2}
  .steps{max-width:640px}
  .final{padding:100px 40px}
  .final .row{flex-direction:row;justify-content:center;max-width:none}
  .fgrid{grid-template-columns:1.4fr repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== v2: tighter spacing, left align, hover dots, theme, slideshow, side dashboards ===== */
.acts{gap:10px}
h1{margin:0;max-width:18ch}
.hero .lead{margin:18px 0 0}
.hero{padding:40px 0 24px}
.cta{justify-content:flex-start;margin-top:24px}
.badges{justify-content:flex-start;margin-top:20px}
.sec{padding:52px 0}
.head{margin-bottom:28px}
.head p{margin-top:10px}
.steps,.plans,.marquee{margin-top:28px}
.stage{margin-top:32px}
.final{text-align:left;padding:56px 24px}
.final h2{margin:0 0 12px}
.final p{margin:0 0 24px}
.final .row{margin:0;align-items:stretch}
footer{padding:40px 0 24px}
.copy{margin-top:28px}

/* light-gray dots, revealed only near the cursor on white sections */
.hero,.sec:not(.dark){position:relative}
.hero::before,.sec:not(.dark)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;background-image:radial-gradient(var(--g3) 1.4px,transparent 1.8px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,transparent);mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000,transparent)}
.hero:hover::before,.sec:not(.dark):hover::before{opacity:1}
.sec:not(.dark)>.wrap{position:relative;z-index:1}

/* theme toggle */
.theme{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--g2);border-radius:10px;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.theme:hover{background:var(--g1)}
.theme svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.theme .sun,[data-theme=dark] .theme .moon{display:none}
[data-theme=dark] .theme .sun{display:block}
body,header,.card,.plan,.quote,.vs>div,.slides,.mini{transition:background-color .3s,color .3s,border-color .3s}

/* side dashboards + slideshow: desktop only */
.side,.about{display:none}
.mini{border:1.5px solid var(--g3);background:var(--paper);border-radius:16px;padding:14px 16px;box-shadow:0 18px 36px -22px rgba(0,0,0,.24)}
.mini small{display:block;color:var(--g6);font-size:.74rem;margin-bottom:4px}
.mini b{display:block;font:700 1.15rem/1.2 var(--head);margin-bottom:10px;color:var(--ink)}
.mini svg{width:100%;height:36px;color:var(--ink)}
.mini em{font-style:normal;font-size:.74rem;color:var(--g6);background:var(--g1);border-radius:6px;padding:3px 8px}
.mb{display:flex;align-items:flex-end;gap:5px;height:40px}
.mb i{flex:1;height:var(--h);background:var(--g3);border-radius:3px 3px 0 0}
.mb i:last-child{background:var(--ink)}
.ring{width:44px;height:44px;border-radius:50%;background:conic-gradient(var(--ink) 64%,var(--g2) 0);-webkit-mask:radial-gradient(circle 14px,transparent 98%,#000);mask:radial-gradient(circle 14px,transparent 98%,#000)}
.split{display:flex;gap:3px;height:8px}
.split i{border-radius:4px;background:var(--ink)}
.split i:nth-child(2){background:var(--g5)}.split i:nth-child(3){background:var(--g3)}

.slides{border:1px solid var(--g2);border-radius:24px;overflow:hidden;background:var(--g1)}
.strack{display:flex;transition:transform .7s var(--ease)}
.slide{flex:0 0 100%;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding:36px 44px 12px;min-height:250px}
.slide h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:10px;max-width:20ch}
.slide p{color:var(--g6);max-width:46ch}
.svis{display:grid;gap:10px;justify-items:start}
.chip{display:flex;align-items:center;gap:10px;border:1px solid var(--g2);background:var(--paper);border-radius:12px;padding:12px 18px;font-weight:600;box-shadow:0 14px 30px -20px rgba(0,0,0,.3)}
.chip:nth-child(2){margin-left:28px}.chip:nth-child(3){margin-left:56px}
.chip svg{width:16px;height:16px;stroke:var(--ink);stroke-width:2.2;fill:none}
.sctl{display:flex;justify-content:space-between;align-items:center;padding:8px 44px 20px}
.sdots,.sarr{display:flex;gap:8px}
.sdots button{width:8px;height:8px;border:0;border-radius:99px;background:var(--g3);cursor:pointer;transition:width .3s var(--ease),background .3s;padding:0}
.sdots button.on{width:28px;background:var(--ink)}
.sarr button{width:36px;height:36px;border:1.5px solid var(--g3);border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.sarr button:hover{background:var(--ink);color:var(--paper)}

@media(min-width:860px){
  .hero{padding:56px 0 36px}
  .sec{padding:64px 0}
  .about{display:block;padding:8px 0 24px}
  #problem .wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:center}
  #problem .head{margin:0}
  #problem .vs{margin:0}
  .ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .ai-grid .head,.ai-grid .lead{margin:0}
  .contact-grid{grid-template-columns:1.1fr .9fr;align-items:start}
  .steps{max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .steps::before{display:none}
  .steps li{display:block;padding:22px;border:1px solid var(--g2);border-radius:18px;background:var(--paper)}
  .steps b{width:42px;height:42px;margin-bottom:14px}
  #faq .wrap{display:grid;grid-template-columns:1fr 1.7fr;gap:48px;align-items:start}
  #faq .head{margin:0}
  .faq{max-width:none}
  .final{padding:64px 48px}
}
@media(min-width:1040px){
  .stage{max-width:none;display:grid;grid-template-columns:1fr minmax(400px,540px) 1fr;gap:20px;align-items:center;margin-top:36px}
  .side{display:grid;gap:14px}
  .side.l{transform:perspective(1000px) rotateY(9deg) translateX(8px)}
  .side.r{transform:perspective(1000px) rotateY(-9deg) translateX(-8px)}
  .side.l .mini:nth-child(2){margin-right:28px}.side.r .mini:nth-child(2){margin-left:28px}
}

/* dark theme */
[data-theme=dark]{color-scheme:dark}
[data-theme=dark] header{background:rgba(11,11,11,.88)}
[data-theme=dark] .card,[data-theme=dark] .plan,[data-theme=dark] .vs>div,[data-theme=dark] .mnav{background:#111}
[data-theme=dark] .card{border-color:#333;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
[data-theme=dark] .mini{background:#161616;border-color:#333;box-shadow:0 16px 34px -20px rgba(0,0,0,.5)}
[data-theme=dark] .quote{background:#161616;border-color:var(--g3);box-shadow:0 6px 20px rgba(0,0,0,.4)}
[data-theme=dark] .vs .bad{background:var(--g1)}
[data-theme=dark] .btn{color:var(--paper)}
[data-theme=dark] .btn.line{color:var(--ink)}
[data-theme=dark] .btn.line:hover,[data-theme=dark] .btn.ghost:hover{color:var(--paper);background:var(--ink)}
[data-theme=dark] .btn.ghost{color:var(--ink);border-color:#444}
[data-theme=dark] .vs .good,[data-theme=dark] .bcard.big,[data-theme=dark] .final{background:#1c1c1c;color:#fff;border:1px solid #2e2e2e}
[data-theme=dark] .vs .good h4,[data-theme=dark] .sec.dark .lead,[data-theme=dark] .final p,[data-theme=dark] .bcard.big p{color:#a6a6a6}
[data-theme=dark] .plan.feat .ptag,[data-theme=dark] .steps b{color:var(--paper)}
[data-theme=dark] .sec.dark{background:#101010}
[data-theme=dark] .bcard{border-color:#2a2a2a}
[data-theme=dark] .sdots button.on{background:var(--ink)}

/* v3: centred hero/problem/testimonials/final, pricing text fix, marquee glow */
h1{margin:0 auto}
.hero .lead{margin:18px auto 0}
.cta{justify-content:center}
.badges{justify-content:center}
.final{text-align:center}
.final h2{margin:0 auto 12px}
.final p{margin:0 auto 24px}
.final .row{margin:0 auto;align-items:center}
@media(min-width:860px){.final .row{align-items:center;justify-content:center}}
#problem .head{max-width:none}
.plan{color:var(--ink)}
:root{--glow:rgba(0,0,0,.22)}
[data-theme=dark]{--glow:rgba(255,255,255,.16)}
.marquee{position:relative;-webkit-mask-image:none;mask-image:none}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--glow),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--glow),transparent)}

/* v4: per-card glow, no strike-through, two-line headline */
h1{max-width:none}
.vs .bad li{text-decoration:none}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:18px 0}
.marquee::before,.marquee::after{display:none}

/* v5: mobile menu fix, faster marquee, no tap highlight */
*{-webkit-tap-highlight-color:transparent}
a,button,summary{touch-action:manipulation;-webkit-touch-callout:none}
header.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
.mnav{background:var(--paper)}
.mtrack{animation-duration:16s}

/* v6: flow wave, mobile hero first screen, dotted wave background */
.flow{position:relative;height:56px;overflow:hidden;color:var(--g4);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ftrack{position:absolute;inset:0;display:flex;width:200%;animation:flowmove 12s linear infinite}
.ftrack.t2{animation-duration:20s;opacity:.7}
.ftrack svg{flex:none;width:50%;height:56px}
.flow path{fill:none;stroke:currentColor;stroke-linecap:round}
.flow .w1{stroke-width:1.6}
.flow .w2{stroke-width:3;stroke-dasharray:0 10;transform:translateY(6px)}
@keyframes flowmove{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes drift{to{background-position:480px 0}}
@media(max-width:859px){
  .hero{padding-top:0}
  .hero-text{min-height:calc(100svh - 64px - 56px);display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding-bottom:28px}
  .hero .badges{display:none}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160'%3E%3Cpath d='M0 30 C60 10 180 10 240 30 C300 50 420 50 480 30' fill='none' stroke='%23cfcfcf' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3Cpath d='M0 80 C60 60 180 60 240 80 C300 100 420 100 480 80' fill='none' stroke='%23cfcfcf' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3Cpath d='M0 130 C60 110 180 110 240 130 C300 150 420 150 480 130' fill='none' stroke='%23cfcfcf' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3C/svg%3E");background-size:480px 160px;animation:drift 20s linear infinite}
  [data-theme=dark] body::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160'%3E%3Cpath d='M0 30 C60 10 180 10 240 30 C300 50 420 50 480 30' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3Cpath d='M0 80 C60 60 180 60 240 80 C300 100 420 100 480 80' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3Cpath d='M0 130 C60 110 180 110 240 130 C300 150 420 150 480 130' fill='none' stroke='%23333333' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 12'/%3E%3C/svg%3E")}
}
@media(max-width:859px){body{background:transparent}}

/* ===== v7: hover grid, glass nav, tilt/pop, full-bleed marquee, smooth theme, lighter paint ===== */
.flow{display:none}
body::before{display:none!important}
@media(max-width:859px){body{background:var(--paper)}.hero-text{min-height:calc(100svh - 88px)}}
h1.shine{animation:none;background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.card{animation-fill-mode:backwards}

/* low-opacity grid, only near the cursor (desktop pointer only) */
:root{--gl:rgba(0,0,0,.14)}
[data-theme=dark]{--gl:rgba(255,255,255,.15)}
.hero::before,.sec:not(.dark)::before{display:none;background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),#000,transparent);mask-image:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),#000,transparent)}

/* matte glass header + mobile dropdown */
header,header.scrolled,header.open,[data-theme=dark] header,[data-theme=dark] header.open{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:transparent}
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.68);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
header.scrolled::before{border-bottom-color:rgba(0,0,0,.07)}
[data-theme=dark] header::before{background:rgba(14,14,14,.62)}
[data-theme=dark] header.scrolled::before{border-bottom-color:rgba(255,255,255,.08)}
@media(max-width:859px){
  .mnav,[data-theme=dark] .mnav{display:block;inset:auto;top:72px;left:12px;right:12px;max-height:calc(100svh - 92px);padding:8px;border-radius:22px;background:rgba(255,255,255,.7);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid rgba(0,0,0,.07);box-shadow:0 24px 60px -22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6);visibility:hidden;opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right;transition:opacity .22s ease,transform .32s var(--ease),visibility 0s .32s}
  [data-theme=dark] .mnav{background:rgba(22,22,22,.68);border-color:rgba(255,255,255,.08);box-shadow:0 24px 60px -22px #000,inset 0 1px 0 rgba(255,255,255,.06)}
  header.open .mnav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .mnav a{padding:14px;font-size:1.1rem;border:0;border-radius:14px;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .35s var(--ease),background-color .2s}
  header.open .mnav a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*35ms + 60ms)}
  .mnav a:not(.btn):active{background:var(--g1)}
  .mnav a.btn{display:flex;width:calc(100% - 8px);margin:8px 4px 4px;padding:0 28px;font-size:1rem;border:1.5px solid var(--ink);border-radius:12px}
  .quote{flex-basis:270px;padding:22px}
  .mtrack{animation-duration:26s}
}

/* full-bleed marquee, soft glow, no edge fade */
.marquee{-webkit-mask-image:none;mask-image:none;position:relative;left:50%;width:100vw;margin-left:-50vw;padding:14px 0}
.mtrack{gap:0;animation-duration:32s;will-change:transform}
.quote{margin-right:16px}

/* small motion */
.faq summary{transition:padding .25s var(--ease)}
.badge,.chip,.quote{transition:transform .25s var(--ease),box-shadow .25s,border-color .3s,background-color .3s,color .3s}

/* smooth theme change */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:vtin .4s ease both;mix-blend-mode:normal}
@keyframes vtin{from{opacity:0}}
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease!important}

/* desktop pointer only: grid, pop, tilt */
@media(min-width:860px) and (hover:hover) and (pointer:fine){
  .hero::before,.sec:not(.dark)::before{display:block}
  .tilt.rdone{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,background-color .3s,color .3s,border-color .3s;transition-delay:0s!important}
  .card.tilt.rdone{transform:rotateX(calc(4deg + var(--rx,0deg))) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1))}
  .tilt.rdone:hover{--ty:-4px;--sc:1.015;box-shadow:0 22px 40px -20px rgba(0,0,0,.38)}
  .card.tilt.rdone:hover{--sc:1.01;box-shadow:0 50px 90px -30px rgba(0,0,0,.36)}
  .badge:hover{transform:translateY(-2px);border-color:var(--g4)}
  .chip:hover{transform:translateY(-3px) scale(1.03)}
  .quote:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 14px 28px -16px rgba(0,0,0,.28)}
  .faq summary:hover{padding-left:6px}
  .links a{transition:color .2s,border-color .2s}
  .links a:hover{border-bottom-color:var(--ink)}
  .fcol a{transition:transform .2s var(--ease),color .2s}
  .fcol a:hover{transform:translateX(3px)}
}

/* touch / mobile preview: no hover effects */
@media(max-width:859px),(hover:none){
  .btn:hover{transform:none;box-shadow:none}
  .btn.line:hover,[data-theme=dark] .btn.line:hover{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
  [data-theme=dark] .btn.ghost:hover{background:transparent;color:var(--ink);border-color:#444}
  .bcard:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.14)}
  [data-theme=dark] .bcard:hover{border-color:#2a2a2a}
  .theme:hover,.sarr button:hover{background:none}
  .sarr button:hover{color:var(--ink)}
  .fcol a:hover{color:var(--g7)}
  .hero::before,.sec:not(.dark)::before{display:none}
  .btn:active{transform:scale(.97)}
}

/* ===== v8: permanent semicircle grids beside hero text, gentler scroll reveal ===== */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(circle clamp(200px,27vw,520px) at 0 300px,#000 25%,transparent 100%),radial-gradient(circle clamp(200px,27vw,520px) at 100% 300px,#000 25%,transparent 100%);mask-image:radial-gradient(circle clamp(200px,27vw,520px) at 0 300px,#000 25%,transparent 100%),radial-gradient(circle clamp(200px,27vw,520px) at 100% 300px,#000 25%,transparent 100%)}
@media(max-width:859px){.hero::after{-webkit-mask-image:radial-gradient(circle 180px at 0 45svh,#000 25%,transparent 100%),radial-gradient(circle 180px at 100% 45svh,#000 25%,transparent 100%);mask-image:radial-gradient(circle 180px at 0 45svh,#000 25%,transparent 100%),radial-gradient(circle 180px at 100% 45svh,#000 25%,transparent 100%)}}

/* relaxed reveal: longer, softer easing, slight scale, wider stagger */
.reveal{opacity:0;transform:translateY(36px) scale(.975);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.plans .plan:nth-child(2).reveal{transition-delay:.14s}
.plans .plan:nth-child(3).reveal{transition-delay:.28s}
.bento .bcard:nth-child(n).reveal{transition-delay:.08s}
.bento .bcard:nth-child(2).reveal{transition-delay:.14s}
.bento .bcard:nth-child(3).reveal{transition-delay:.22s}
.bento .bcard:nth-child(4).reveal{transition-delay:.26s}
.bento .bcard:nth-child(5).reveal{transition-delay:.32s}

/* v9: mobile — semicircle grids at top and bottom of the first screen */
@media(max-width:859px){.hero::after{-webkit-mask-image:radial-gradient(circle min(260px,70vw) at 50% 0,#000 25%,transparent 100%),radial-gradient(circle min(260px,70vw) at 50% calc(100svh - 88px),#000 25%,transparent 100%);mask-image:radial-gradient(circle min(260px,70vw) at 50% 0,#000 25%,transparent 100%),radial-gradient(circle min(260px,70vw) at 50% calc(100svh - 88px),#000 25%,transparent 100%)}}

/* v10: mobile — smaller, pushed-out semicircles so they stay clear of the text */
@media(max-width:859px){
  .hero::after{-webkit-mask-image:radial-gradient(circle min(190px,50vw) at 50% -36px,#000 15%,transparent 100%),radial-gradient(circle min(190px,50vw) at 50% calc(100svh - 52px),#000 15%,transparent 100%);mask-image:radial-gradient(circle min(190px,50vw) at 50% -36px,#000 15%,transparent 100%),radial-gradient(circle min(190px,50vw) at 50% calc(100svh - 52px),#000 15%,transparent 100%)}
  [data-theme=dark]{--gl:rgba(255,255,255,.07)}
}

/* v11: desktop light mode — darker grid lines for semicircular grid */
@media(min-width:860px){:root{--gl:rgba(0,0,0,.35)}[data-theme=dark]{--gl:rgba(255,255,255,.15)}}

/* ===== v12: semicircle grid tuning, black/white text selection ===== */
/* semicircle grids get their own line colour so the cursor-hover grid is untouched */
.hero::after{background-image:linear-gradient(var(--gls) 1px,transparent 1px),linear-gradient(90deg,var(--gls) 1px,transparent 1px)}
:root{--gls:rgba(0,0,0,.14)}
[data-theme=dark]{--gls:rgba(255,255,255,.17)}            /* mobile dark: lighter (was .07) */
@media(min-width:860px){
  :root{--gls:rgba(0,0,0,.5)}                              /* desktop light: darker (was .35) */
  [data-theme=dark]{--gls:rgba(255,255,255,.15)}
}

/* text selection / copy highlight: black in light theme, white in dark theme */
::selection{background:#000;color:#fff;-webkit-text-fill-color:#fff}
/* black surfaces in light theme need the inverse so the highlight stays visible */
.sec.dark ::selection,.final ::selection,.vs .good ::selection,.bcard.big ::selection,
.btn:not(.line):not(.ghost)::selection,.btn:not(.line):not(.ghost) ::selection,
.plan.feat .ptag::selection,.steps b::selection{background:#fff;color:#000;-webkit-text-fill-color:#000}
[data-theme=dark] ::selection{background:#fff;color:#000;-webkit-text-fill-color:#000}
[data-theme=dark] .btn:not(.line):not(.ghost)::selection,[data-theme=dark] .btn:not(.line):not(.ghost) ::selection,
[data-theme=dark] .plan.feat .ptag::selection,[data-theme=dark] .steps b::selection{background:#000;color:#fff;-webkit-text-fill-color:#fff}

/* v13: softer cursor grid below the first screen so text stays easy to read */
.sec:not(.dark):hover::before{opacity:.5}

/* ===== v14: contact page — permanent semicircle grid layer, form + service cards ===== */

/* Reusable first-screen grid layer: sits at the top of the page and scrolls away with it.
   Add <div class="semi-bg" aria-hidden="true"></div> right after the svg sprite on any page. */
.semi-bg{position:absolute;top:0;left:0;right:0;height:100vh;height:100svh;z-index:0;pointer-events:none;background-image:linear-gradient(var(--gls) 1px,transparent 1px),linear-gradient(90deg,var(--gls) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(circle clamp(220px,30vw,540px) at 0 45%,#000 25%,transparent 100%),radial-gradient(circle clamp(220px,30vw,540px) at 100% 45%,#000 25%,transparent 100%);mask-image:radial-gradient(circle clamp(220px,30vw,540px) at 0 45%,#000 25%,transparent 100%),radial-gradient(circle clamp(220px,30vw,540px) at 100% 45%,#000 25%,transparent 100%)}
@media(max-width:859px){.semi-bg{-webkit-mask-image:radial-gradient(circle min(190px,50vw) at 50% -36px,#000 15%,transparent 100%),radial-gradient(circle min(190px,50vw) at 50% calc(100% - 52px),#000 15%,transparent 100%);mask-image:radial-gradient(circle min(190px,50vw) at 50% -36px,#000 15%,transparent 100%),radial-gradient(circle min(190px,50vw) at 50% calc(100% - 52px),#000 15%,transparent 100%)}}
/* everything sits above the grid */
.semi-bg~main,.semi-bg~footer{position:relative;z-index:1}

/* form card */
.contact-grid{gap:18px;align-items:stretch}
.form-card{position:relative;padding:28px;box-shadow:0 30px 60px -34px rgba(0,0,0,.3);animation:rise .8s var(--ease) .05s backwards}
.form-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--g2)}
.form-head h2{font-size:1.5rem;max-width:none;margin-bottom:4px}
.form-head p{color:var(--g6);font-size:.94rem}
.frow{display:grid;gap:0}
.fld input,.fld textarea,.fld select{background:var(--g1);border-color:transparent}
.fld input::placeholder,.fld textarea::placeholder{color:var(--g5)}
.fld input:focus,.fld textarea:focus,.fld select:focus{background:var(--paper);border-color:var(--ink);box-shadow:0 0 0 4px var(--g2)}
.fld textarea{min-height:150px}
.form-card .btn{min-height:54px}

/* three service cards beside the form */
.contact-side{display:grid;gap:14px}
.svc{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--g3);border-radius:20px;padding:22px;background:var(--paper);color:var(--ink);box-shadow:0 18px 36px -26px rgba(0,0,0,.3);animation:rise .8s var(--ease) backwards;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .3s,background-color .3s,color .3s}
.svc:nth-child(1){animation-delay:.12s}.svc:nth-child(2){animation-delay:.2s}.svc:nth-child(3){animation-delay:.28s}
.svc.on{outline:2px solid var(--ink);outline-offset:3px}
.svc-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.svc-top .bicon{margin:0;flex:none}
.svc h3{font-size:1.2rem;margin-bottom:2px}
.svc-top small{display:block;color:var(--g6);font-size:.82rem}
.svc>p{color:var(--g6);font-size:.93rem;max-width:46ch}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 16px}
.svc-tags li{font-size:.78rem;font-weight:500;color:var(--g7);background:var(--g1);border-radius:999px;padding:4px 11px}
.svc-go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1.5px solid var(--g3);border-radius:10px;background:transparent;color:inherit;font-weight:600;font-size:.9rem;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.svc-go .on{display:none}
.svc.on .svc-go .on{display:inline}
.svc.on .svc-go .off{display:none}
.svc.on .svc-go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.svc{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc>p,.svc .svc-top small{color:#b5b5b5}
.svc .bicon{background:rgba(255,255,255,.12)}
.svc .bicon svg{stroke:#fff}
.svc .svc-tags li{background:rgba(255,255,255,.12);color:#e6e6e6}
.svc .svc-go{border-color:rgba(255,255,255,.3)}
.svc.on .svc-go{background:#fff;color:#000;border-color:#fff}
[data-theme=dark] .svc{background:#1c1c1c;border-color:#2e2e2e}
[data-theme=dark] .svc{box-shadow:0 16px 34px -22px rgba(0,0,0,.6)}

/* info strip: sits under the form, above the grid */
.contact-info.strip{margin-top:14px}
.info-row{background:var(--paper)}
[data-theme=dark] .info-row{background:#111;border-color:#2a2a2a}

@media(min-width:640px){.frow{grid-template-columns:1fr 1fr;gap:16px}}
@media(min-width:860px){
  .contact-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
  .contact-side{grid-template-rows:repeat(3,1fr)}
  .contact-info.strip{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:860px) and (hover:hover) and (pointer:fine){
  .svc:hover{transform:translateY(-4px);box-shadow:0 26px 44px -24px rgba(0,0,0,.4)}
  .svc:not(.on) .svc-go:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .svc:not(.on) .svc-go:hover{background:#fff;color:#000;border-color:#fff}
}

/* ===== v15: opaque hero buttons/capsules, contact + about cursor grid synced to the semicircle grids ===== */

/* "View pricing" and the three capsules under it: solid (theme paper = white in light mode), so grid lines never show through */
.hero .btn.line{background:var(--paper)}
.hero .btn.line:hover{background:var(--ink);color:#fff}
[data-theme=dark] .hero .btn.line:hover{background:var(--ink);color:var(--paper)}
.hero .badge{background:var(--paper)}
@media(max-width:859px),(hover:none){
  .hero .btn.line:hover,[data-theme=dark] .hero .btn.line:hover{background:var(--paper);color:var(--ink)}
}

/* Contact + About: the grid that follows the cursor now uses the semicircle grids' line colour, size and fade,
   and script.js locks it to the same 38px lattice so lines meet exactly where the two grids overlap. */
.semi-bg~main .sec:not(.dark)::before{
  background-image:linear-gradient(var(--gls) 1px,transparent 1px),linear-gradient(90deg,var(--gls) 1px,transparent 1px);
  background-size:38px 38px;
  background-position:0 var(--oy,0px);
  -webkit-mask-image:radial-gradient(circle clamp(220px,30vw,540px) at var(--mx,50%) var(--my,50%),#000 25%,transparent 100%);
  mask-image:radial-gradient(circle clamp(220px,30vw,540px) at var(--mx,50%) var(--my,50%),#000 25%,transparent 100%);
}
.semi-bg~main .sec:not(.dark):hover::before{opacity:1}

/* Subtle grid lines keep decorative backgrounds clear of body text. */
:root{--gls:rgba(0,0,0,.05);--gl:rgba(0,0,0,.06)}
[data-theme=dark]{--gls:rgba(255,255,255,.08);--gl:rgba(255,255,255,.07)}
@media(min-width:860px){
  :root{--gls:rgba(0,0,0,.12);--gl:rgba(0,0,0,.08)}
  [data-theme=dark]{--gls:rgba(255,255,255,.08);--gl:rgba(255,255,255,.07)}
}

/* About and Contact place copy over the grids, so keep these even softer. */
.semi-bg,.semi-bg~main{--gls:rgba(0,0,0,.035)}
[data-theme=dark] .semi-bg,[data-theme=dark] .semi-bg~main{--gls:rgba(255,255,255,.06)}
@media(min-width:860px){
  .semi-bg,.semi-bg~main{--gls:rgba(0,0,0,.08)}
  [data-theme=dark] .semi-bg,[data-theme=dark] .semi-bg~main{--gls:rgba(255,255,255,.06)}
}
@media(max-width:859px){.contact-info.strip{margin-top:36px}}

/* ===== v18: landing AI section — air between the feature list and the AI card on mobile; steady icon pills ===== */
.ai-list .bicon{flex:none;margin:0}
@media(max-width:859px){.ai-grid>.ai-card{margin-top:44px}}

/* ===== v18: landing AI section — air between the feature list and the AI card on mobile; steady icon pills ===== */
.ai-list .bicon{flex:none;margin:0}
@media(max-width:859px){.ai-grid>.ai-card{margin-top:44px}}

/* ===== v19: justified body copy — clean, even text blocks. Only real paragraphs (headings, buttons, labels, chips stay as they are).
   Hyphenation keeps word gaps even in narrow columns; the last line follows the block's own alignment (left, or centred inside centred blocks). ===== */
main p{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;overflow-wrap:break-word}
.ctr,.final{text-align-last:center}
@media(min-width:860px){.hero-text{text-align-last:left}}



/* Dedicated Studio action, separate from the navigation links. */
header a[hidden]{display:none!important}
header .btn.studio-nav-btn{display:inline-flex;gap:10px;min-height:40px;padding:8px 15px;border:1px solid #4b4b4b;border-radius:12px;background:linear-gradient(155deg,#383838,#1b1b1b);color:#f5f5f5;font-size:.84rem;font-weight:550;box-shadow:inset 0 1px 0 #ffffff20,0 3px 10px #00000018;transition:background .18s,border-color .18s,transform .18s}
header .btn.studio-nav-btn:hover{background:linear-gradient(155deg,#454545,#292929);border-color:#737373;color:#fff;transform:translateY(-1px)}
.studio-button-mark{display:block;width:22px;height:13px;fill:currentColor;flex:none}

:root[data-theme=dark] header .btn.studio-nav-btn{border-color:#515151;box-shadow:inset 0 1px 0 #ffffff15,0 3px 10px #0004}
@media(min-width:860px) and (max-width:1100px){header .links{gap:14px;font-size:.85rem}.acts{gap:8px}}
@media(max-width:480px){header .acts>a[href="signup.html"],header .acts>a[data-href="signup.html"]{display:none}header .btn.studio-nav-btn{padding:8px 12px;gap:7px}}

:root{--brand-studio-font:'Space Grotesk','Helvetica Neue',Arial,sans-serif}
header .btn.studio-nav-btn{font-family:var(--brand-studio-font);font-weight:600;letter-spacing:.015em}
/* Keep the homepage grid visible without placing it over the copy. */
main>.hero{--gls:rgba(0,0,0,.18);--gl:rgba(0,0,0,.14)}
[data-theme=dark] main>.hero{--gls:rgba(255,255,255,.20);--gl:rgba(255,255,255,.15)}
main>.hero::after{opacity:1;z-index:0}
@media(max-width:859px){main>.hero{--gls:rgba(0,0,0,.15)}[data-theme=dark] main>.hero{--gls:rgba(255,255,255,.18)}}

/* Product wordmark uses the same type as the homepage headline. */
.vedhem-ai-brand{font-family:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;font-weight:600;letter-spacing:-.03em;text-transform:none;white-space:nowrap}