/* ============================================================
   VetriMarg — design-lab prototype
   Editorial Kinetic + WebGL hero. Sandbox showcase.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  --ink:#07070a;
  --panel:#0e0e15;
  --panel-2:#15151f;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);

  --text:#ececee;
  --muted:#8a8a93;
  --faint:#54545c;

  --violet:#7c5cff;
  --cyan:#22d3ee;
  --acid:#c8ff00;
  --grad:linear-gradient(100deg,var(--violet),var(--cyan));

  --display:'Clash Display','Space Grotesk',system-ui,sans-serif;
  --body:'Satoshi','Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--body);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit}
::selection{background:var(--violet);color:#fff}

/* hide native cursor only when our custom one is active */
.has-cursor, .has-cursor a, .has-cursor button{cursor:none}

/* ---- Grain ---- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;z-index:9000;
  pointer-events:none;opacity:.045;mix-blend-mode:overlay;
}

/* Intentional grey -> black depth (the look from before, done smoothly — no hard seam). */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg, #14141b 0%, #0a0a0f 20%, var(--ink) 36%);
}

/* ---- Custom cursor ---- */
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:var(--text);z-index:9500;pointer-events:none;
  transform:translate3d(-50%,-50%,0);mix-blend-mode:difference;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s;
  display:none;
}
.cursor.is-active{display:grid;place-items:center}
.cursor.is-hover{width:74px;height:74px;background:var(--text)}
.cursor__label{
  font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink);opacity:0;transition:opacity .25s;mix-blend-mode:difference;
}
.cursor.is-hover .cursor__label{opacity:1}

/* ---- Preloader ---- */
.preloader{
  position:fixed;inset:0;z-index:9800;background:var(--ink);
  display:grid;place-content:center;justify-items:center;gap:2rem;
}
html:not(.has-js) .preloader{display:none}
.preloader__word{display:flex;gap:.1em;overflow:hidden;font:600 clamp(2.2rem,9vw,6rem)/.9 var(--display)}
.preloader__word span{display:inline-block;transform:translateY(110%)}
.preloader__count{font:500 14px/1 var(--mono);color:var(--muted);display:flex;align-items:baseline;gap:.1em}
.preloader__bar{width:min(280px,60vw);height:2px;background:var(--line-2);overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:var(--grad)}

/* ============================================================
   Typography utilities
   ============================================================ */
.eyebrow{
  font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow i{font-style:normal;color:var(--acid)}
.section-title{
  font:600 clamp(2.6rem,8vw,7rem)/.95 var(--display);letter-spacing:-.02em;
}
.section-lead{
  max-width:46ch;color:var(--muted);font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6;
}
.section-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}

em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Reveal initial states (only with JS, not reduced motion) ---- */
.has-js [data-reveal],
.has-js .reveal-up{opacity:0;transform:translateY(30px)}
.has-js [data-split]{opacity:0}
/* SplitType masking for kinetic headline reveals */
/* room for ascenders/descenders inside the reveal mask (negative margin keeps layout) */
[data-split] .line{overflow:hidden;padding:.16em 0;margin:-.16em 0}
[data-split] .word{display:inline-block;will-change:transform}
/* gradient text must sit on the split word itself — the word's transform breaks a parent's background-clip:text (renders transparent) */
[data-split] em .word{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;position:relative;
  font:500 .98rem/1 var(--body);letter-spacing:.01em;white-space:nowrap;
  padding:1.05em 1.7em;border-radius:100px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn i{font-style:normal;transition:transform .35s var(--ease)}
.btn:hover i{transform:translateX(5px)}
.btn--solid{background:var(--text);color:var(--ink)}
.btn--solid:hover{background:#fff}
.btn--ghost{border:1px solid var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.btn--pill{border:1px solid var(--line);padding:.7em 1.2em;font-size:.9rem}
.btn--pill:hover{background:var(--text);color:var(--ink)}
.btn--block{width:100%;justify-content:center;margin-top:.5rem}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--pad);
  transition:padding .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding:.9rem var(--pad);background:rgba(7,7,10,.6);
  backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line-2);
}
.nav__brand{font:600 1.35rem/1 var(--display);letter-spacing:-.01em}
.nav__brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{font-size:.95rem;color:var(--muted);position:relative;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--acid);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{width:100%}
.nav__burger{display:none;flex-direction:column;gap:5px;width:30px}
.nav__burger span{height:1.5px;width:100%;background:var(--text);transition:transform .3s}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:0 var(--pad) clamp(3rem,7vh,6rem);overflow:hidden;
  /* CSS mesh fallback (shows if WebGL fails) */
  background:
    radial-gradient(60% 60% at 75% 20%,rgba(124,92,255,.28),transparent 60%),
    radial-gradient(50% 50% at 15% 80%,rgba(34,211,238,.20),transparent 60%),
    var(--ink);
}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,10,.35) 0%,transparent 30%,transparent 55%,rgba(7,7,10,.85) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto}
.hero__eyebrow{
  font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--text);
  margin-bottom:clamp(1.5rem,4vh,2.5rem);display:flex;align-items:center;gap:.7em;
}
.stars{color:var(--acid);letter-spacing:.1em}
.hero__title{
  font:600 clamp(3rem,12vw,11rem)/.92 var(--display);letter-spacing:-.03em;max-width:16ch;
}
.hero__sub{
  margin-top:clamp(1.5rem,4vh,2.4rem);max-width:50ch;color:var(--muted);
  font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.55;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(2rem,5vh,3rem)}
.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(3rem,7vh,6rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
}
.hero__scroll i{width:1px;height:54px;background:linear-gradient(var(--text),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--acid);animation:scrollDot 2s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(-100%)}60%,100%{transform:translateY(260%)}}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  border-block:1px solid var(--line-2);overflow:hidden;white-space:nowrap;
  padding:clamp(1.2rem,3vw,2rem) 0;background:var(--ink);
}
.marquee__track{display:inline-flex;will-change:transform}
.marquee__track span{
  font:500 clamp(1.6rem,4.5vw,3.4rem)/1 var(--display);letter-spacing:-.01em;
  text-transform:uppercase;padding-right:.4em;color:var(--text);
}
.marquee__track b{color:var(--violet)}

/* ============================================================
   What we do — bento
   ============================================================ */
.work{padding:clamp(5rem,12vw,10rem) var(--pad);max-width:var(--maxw);margin:0 auto}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.4vw,1.2rem)}
.tile{
  position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:22px;
  padding:clamp(1.5rem,2.4vw,2.4rem);min-height:300px;color:inherit;
  display:flex;flex-direction:column;justify-content:flex-start;gap:1.4rem;overflow:hidden;
  transition:border-color .4s var(--ease),background .4s,transform .5s var(--ease);
  isolation:isolate;
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(120% 120% at 100% 0%,rgba(124,92,255,.18),transparent 55%);
}
.tile::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.tile:hover{border-color:var(--line);transform:translateY(-6px)}
.tile:hover::before{opacity:1}
.tile:hover::after{transform:scaleX(1)}
.tile--lg{grid-row:span 2}
.tile--lg .tile__body h3{font-size:clamp(1.8rem,3vw,2.8rem)}
.tile--wide{grid-column:span 2}
.tile--cta{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(34,211,238,.05));justify-content:space-between}
.tile--cta .tile__body h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.tile__top{display:flex;align-items:flex-start;justify-content:space-between}
.tile__no{font:500 13px/1 var(--mono);color:var(--faint);letter-spacing:.1em}
.tile__go{font-size:1.25rem;line-height:1;color:var(--muted);opacity:0;transform:translate(-5px,5px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s}
.tile:hover .tile__go{opacity:1;transform:none;color:var(--text)}
.tile__body{flex:1;display:flex;flex-direction:column}
.tile__body h3{font:500 clamp(1.4rem,2.1vw,2rem)/1.12 var(--display);letter-spacing:-.01em;margin-bottom:.6rem}
.tile__body p{color:var(--muted);font-size:.98rem;max-width:34ch}
.tile__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line-2);flex-wrap:wrap}
.proof{display:inline-flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--text)}
.proof::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acid);flex:none}
.price{font:500 1.1rem/1 var(--display);color:var(--text)}
.tile__tag{display:inline-block;vertical-align:middle;margin-left:.5rem;font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:.45em .7em;border:1px solid var(--line);border-radius:100px;color:var(--muted);transform:translateY(-2px)}
.tile__tag--alt{color:var(--acid);border-color:rgba(200,255,0,.3)}

/* ============================================================
   How it works — pinned
   ============================================================ */
.process{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);
  padding:clamp(5rem,12vw,10rem) var(--pad);max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--line-2)}
.process__sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:2.5rem}
.process__head{display:flex;flex-direction:column;gap:1.1rem}
.process__rail{width:100%;height:2px;background:var(--line-2);max-width:320px}
.process__rail span{display:block;height:100%;width:0;background:var(--grad)}
.process__steps{list-style:none;display:flex;flex-direction:column;gap:clamp(3rem,12vh,9rem);padding:clamp(4rem,20vh,16rem) 0}
.step{border-top:1px solid var(--line-2);padding-top:1.8rem;transition:opacity .5s,transform .5s}
.step__no{font:500 13px/1 var(--mono);color:var(--violet);letter-spacing:.1em}
.step h3{font:500 clamp(1.8rem,3.4vw,3rem)/1.05 var(--display);letter-spacing:-.01em;margin:1rem 0 .8rem}
.step p{color:var(--muted);max-width:38ch;font-size:1.05rem}

/* ============================================================
   Stats
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2rem);
  padding:clamp(4rem,8vw,7rem) var(--pad);max-width:var(--maxw);margin:0 auto;
  border-block:1px solid var(--line-2);
}
.stat{display:flex;flex-direction:column;gap:.7rem}
.stat__num{font:600 clamp(3rem,7vw,6rem)/.9 var(--display);letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* ============================================================
   About
   ============================================================ */
.about{padding:clamp(6rem,15vw,12rem) var(--pad);max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:2.5rem}
.about__statement{font:500 clamp(1.8rem,4.2vw,4rem)/1.18 var(--display);letter-spacing:-.02em;max-width:20ch}

/* ============================================================
   Banner
   ============================================================ */
.banner{padding:clamp(4rem,10vw,9rem) var(--pad);overflow:hidden;border-block:1px solid var(--line-2)}
.banner__line{font:600 clamp(2.2rem,8.2vw,7rem)/1.02 var(--display);letter-spacing:-.03em;overflow-wrap:break-word}
.banner__line--accent{text-align:right;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   Contact
   ============================================================ */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(5rem,12vw,10rem) var(--pad);max-width:var(--maxw);margin:0 auto;align-items:start}
.contact__head{display:flex;flex-direction:column;gap:1.4rem}
.contact__title{font:600 clamp(3rem,8vw,7rem)/.95 var(--display);letter-spacing:-.03em}
.contact__form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.6rem}
.field--full{grid-column:span 2}
.field label{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.field input,.field textarea{
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:1rem 1.1rem;color:var(--text);resize:none;transition:border-color .3s
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.contact__note{grid-column:span 2;font:500 11px/1.5 var(--mono);color:var(--faint);letter-spacing:.05em}

/* ============================================================
   Footer
   ============================================================ */
.footer{padding:clamp(4rem,8vw,7rem) var(--pad) 2.5rem;border-top:1px solid var(--line-2);overflow:hidden}
.footer__mark{font:600 clamp(3rem,15vw,12rem)/.85 var(--display);letter-spacing:-.04em;overflow-wrap:break-word;
  background:linear-gradient(180deg,var(--text),transparent 130%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:3rem}
.footer__row{display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line-2);padding-top:2rem}
.footer__social{display:flex;gap:1.6rem}
.footer__social a{font-size:.95rem;color:var(--muted);transition:color .25s}
.footer__social a:hover{color:var(--text)}
.footer__legal,.footer__tag{font-size:.85rem;color:var(--faint)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile--lg{grid-row:span 1}
  .tile--wide{grid-column:span 2}
  .process{grid-template-columns:1fr}
  .process__sticky{position:relative;height:auto;top:auto}
  .process__steps{padding:3rem 0}
  .contact{grid-template-columns:1fr}
}
@media (max-width:680px){
  .nav__links{display:none}
  .nav .btn--pill{display:none}
  .nav__burger{display:flex}
  .bento{grid-template-columns:1fr}
  .tile--wide{grid-column:span 1}
  .stats{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem}
  .contact__form{grid-template-columns:1fr}
  .field--full,.contact__note{grid-column:span 1}
  .banner__line,.banner__line--accent{white-space:normal;text-align:left}
  .cursor{display:none!important}
}

/* ---- Reduced motion: everything visible & still ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .has-js [data-reveal],.has-js .reveal-up,.has-js [data-split]{opacity:1!important;transform:none!important}
  .preloader{display:none!important}
  .hero__scroll i::after{display:none}
}

/* ============================================================
   Visitor gate + toast
   ============================================================ */
.gate{position:fixed;inset:0;z-index:9700;display:grid;place-items:center;padding:1.5rem;
  background:rgba(5,5,8,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.gate.is-open{opacity:1;visibility:visible}
.gate__panel{position:relative;width:min(520px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:24px;padding:clamp(1.6rem,4vw,2.6rem);transform:translateY(24px) scale(.97);transition:transform .55s var(--ease)}
.gate.is-open .gate__panel{transform:none}
.gate__x{position:absolute;top:1rem;right:1.3rem;font-size:1.7rem;color:var(--muted);line-height:1}
.gate__x:hover{color:var(--text)}
.gate__title{font:500 clamp(1.5rem,3vw,2.1rem)/1.1 var(--display);margin:.9rem 0 .6rem}
.gate__lead{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem;max-width:42ch}
.gate__form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.gfield--full{grid-column:span 2}
.gfield input{width:100%;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:.9rem 1rem;color:var(--text);transition:border-color .3s}
.gfield input:focus{outline:none;border-color:var(--violet)}
.gfield input::placeholder{color:var(--faint)}
.gterms{grid-column:span 2;display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--muted);cursor:pointer}
.gterms input{accent-color:var(--violet);width:16px;height:16px}
.gate__err{grid-column:span 2;color:#ff6b6b;font-size:.85rem;min-height:1.1em;opacity:0;transition:opacity .2s}
.gate__err.show{opacity:1}
.gate__actions{grid-column:span 2;display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.gate__actions .btn{flex:1;justify-content:center;min-width:150px}
.gate-toast{position:fixed;left:50%;bottom:2rem;transform:translate(-50%,160%);z-index:9750;background:var(--text);color:var(--ink);
  font:500 .9rem/1.3 var(--body);padding:.9rem 1.4rem;border-radius:100px;box-shadow:0 12px 44px rgba(0,0,0,.55);
  transition:transform .45s var(--ease);max-width:90vw;text-align:center}
.gate-toast.show{transform:translate(-50%,0)}

/* ============================================================
   Inner page hero
   ============================================================ */
.page-hero{position:relative;padding:clamp(8rem,17vh,13rem) var(--pad) clamp(3rem,6vw,5rem);max-width:var(--maxw);margin:0 auto;border-bottom:1px solid var(--line-2)}
.page-hero h1{font:600 clamp(2.8rem,9vw,7rem)/.95 var(--display);letter-spacing:-.03em;margin:.9rem 0}
.page-hero p{color:var(--muted);max-width:50ch;font-size:clamp(1rem,1.4vw,1.18rem)}

/* ============================================================
   Services page
   ============================================================ */
.svc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,4vw,4rem);padding:clamp(3rem,7vw,6rem) var(--pad);max-width:var(--maxw);margin:0 auto;align-items:start}
.svc-picker{display:flex;flex-direction:column;gap:.7rem;position:sticky;top:96px}
.svc-card{display:flex;align-items:center;gap:1rem;text-align:left;width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:1.1rem 1.3rem;transition:border-color .3s,background .3s,transform .3s}
.svc-card:hover{border-color:var(--line);transform:translateX(4px)}
.svc-card.is-active{border-color:var(--violet);background:linear-gradient(100deg,rgba(124,92,255,.14),transparent 70%)}
.svc-card__no{font:500 12px/1 var(--mono);color:var(--faint)}
.svc-card__body{flex:1;min-width:0}
.svc-card__body h3{font:500 1.08rem/1.2 var(--display)}
.svc-card__note{display:block;font-size:.8rem;line-height:1.35;color:var(--muted);margin-top:.3rem}
.svc-card__body .tag{font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:.3em .55em;border:1px solid var(--line);border-radius:100px;color:var(--muted);margin-left:.5rem}
.svc-card__price{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;flex:none}
.svc-card__price s{color:var(--faint);font-size:.78rem}
.svc-card__price b{font:500 1.05rem/1 var(--display);color:var(--text)}
.book{background:var(--panel);border:1px solid var(--line-2);border-radius:24px;padding:clamp(1.5rem,3vw,2.5rem)}
.book h2{font:500 1.7rem/1.1 var(--display);margin-bottom:.4rem}
.book__for{font-size:.92rem;color:var(--muted);margin-bottom:1.6rem}
.book__for b{color:var(--violet)}
.book__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.book .field{display:flex;flex-direction:column;gap:.5rem}
.book .field--full{grid-column:span 2}
.book label{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.book input,.book textarea{background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:.9rem 1rem;color:var(--text);resize:none;transition:border-color .3s}
.book input:focus,.book textarea:focus{outline:none;border-color:var(--violet)}
.book input::placeholder,.book textarea::placeholder{color:var(--faint)}
.coupon{display:flex;gap:.6rem}.coupon input{flex:1}
.coupon-msg{font-size:.82rem;margin-top:.4rem;min-height:1em}
.coupon-msg.ok{color:var(--acid)}.coupon-msg.bad{color:#ff6b6b}
.summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line-2)}
.summary__label{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.summary__amt{font:600 2rem/1 var(--display)}
.summary__amt s{font-size:1rem;color:var(--faint);margin-right:.5rem;font-weight:400}
.book__note{font:500 11px/1.5 var(--mono);color:var(--faint);margin-top:1rem;letter-spacing:.04em}

/* ============================================================
   Resources page
   ============================================================ */
.res{padding:clamp(3rem,7vw,6rem) var(--pad);max-width:var(--maxw);margin:0 auto}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.4vw,1.2rem)}
.res-card{background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;gap:1rem;min-height:240px;transition:border-color .3s,transform .4s}
.res-card:hover{border-color:var(--line);transform:translateY(-5px)}
.res-card__type{font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--acid)}
.res-card h3{font:500 1.3rem/1.15 var(--display)}
.res-card p{color:var(--muted);font-size:.92rem;flex:1}
.res-card__cta{font-size:.9rem;color:var(--text);display:inline-flex;gap:.4em;align-items:center;margin-top:auto;transition:gap .3s var(--ease),color .3s}
.res-card:hover .res-card__cta{color:var(--violet);gap:.7em}
.res-card:hover .res-card__cta i{transform:translateX(2px)}
.faq{max-width:900px;margin:0 auto;padding:clamp(3rem,7vw,6rem) var(--pad)}
.faq__item{border-top:1px solid var(--line-2)}.faq__item:last-child{border-bottom:1px solid var(--line-2)}
.faq__q{width:100%;display:flex;justify-content:space-between;gap:1rem;align-items:center;text-align:left;padding:1.5rem 0;font:500 clamp(1.05rem,1.8vw,1.4rem)/1.3 var(--display)}
.faq__q i{flex:none;width:22px;height:22px;position:relative}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;background:var(--text);transition:opacity .3s,transform .3s}
.faq__q i::before{top:10px;left:1px;right:1px;height:2px}
.faq__q i::after{left:10px;top:1px;bottom:1px;width:2px}
.faq__item.is-open .faq__q i::after{opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .45s var(--ease)}
.faq__a p{padding:0 0 1.6rem;color:var(--muted);max-width:68ch;line-height:1.6}
.tlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}
.tcard{background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:1.2rem}
.tcard p{font-size:1rem;line-height:1.6;color:var(--text)}
.tcard__by{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.tcard__av{width:38px;height:38px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font:600 14px/1 var(--display);color:#fff;flex:none}
.tcard__by span{font-size:.9rem;color:var(--muted)}

/* ---- Inner responsive ---- */
@media (max-width:1000px){
  .svc{grid-template-columns:1fr}.svc-picker{position:relative;top:auto;flex-direction:row;overflow-x:auto;padding-bottom:.5rem}
  .svc-card{flex:none;width:230px}
  .res-grid,.tlist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .book__grid{grid-template-columns:1fr}.book .field--full{grid-column:span 1}
  .res-grid,.tlist{grid-template-columns:1fr}
  .gate__form{grid-template-columns:1fr}.gfield--full,.gterms,.gate__err,.gate__actions{grid-column:span 1}
}

/* utility used by functional JS (gate, modals) */
.hidden{display:none!important}