@charset "UTF-8";
/* ==========================================================================
   GROWEB — Main stylesheet
   Arabic / RTL one-page website
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. DESIGN TOKENS ......... colors, font, easing
   02. RESET & BASE .......... normalize, typography defaults, page scroll
   03. SHARED COMPONENTS ..... buttons, section headings, tabs, hint, reveal
   04. NAVBAR ................ fixed top bar + mobile menu
   05. HERO .................. dot canvas, animated title, floating proof cards
   06. PROBLEM ............... before / after comparison slider + pain points
   07. WORK .................. project tabs, browser frame, decision markers
   08. PRICING ............... service tabs, plan cards, bundle strip
   09. PROCESS ............... summary card + scroll-driven timeline
   10. TESTIMONIALS .......... 3D tilt quote cards + open slot card
   11. FAQ ................... accordion groups + ask card
   12. FINAL CTA ............. dark panel, message picker, WhatsApp button
   13. FOOTER ................ brand, links, contact, socials
   14. WHATSAPP FAB .......... floating action button
   15. KEYFRAMES ............. all animations in one place
   16. REDUCED MOTION ........ accessibility overrides
   --- inner pages ---------------------------------------------------------
   17. PAGE CHROME ........... page head + closing CTA strip, shared by 17–18
   18. ABOUT PAGE ............ about-groweb.html
   19. WORK PAGE ............. groweb-work.html

   PAGES USING THIS FILE
   index.html (body.page-home) · about-groweb.html (body.page-about)
   groweb-work.html (body.page-work)

   NOTE ON SCOPING
   Sections and pages were each built standalone, so several class names were
   reused with different meanings (.card, .cta, .head, .work, .frame, .chips,
   .steps, .tabs, .btn, .glow ...). Every one of those is scoped to its section
   (.hero .card, .testi .card) or to its page (body.page-work .frame) so
   nothing can override anything else. Keep that pattern when editing.
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root{
  /* Surfaces */
  --bg:#F6F6F8;
  --card:#FFFFFF;
  --line:rgba(38,37,46,.08);

  /* Text */
  --ink:#26252E;
  --muted:#6B6A76;
  --soft-ink:#8E8D99;

  /* Brand */
  --brand:#6C63E8;
  --brand-2:#8A84E6;
  --brand-soft:#ECEAFD;
  --brand-deep:#3F37B8;
  --brand-hover:#5B52E0;

  /* Status */
  --wa:#25D366;
  --good:#1A9E4F;
  --bad:#D93A3F;
  --bad-soft:#FDECEC;

  /* Type & motion */
  --font:"Alexandria","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Layout */
  --wrap:1200px;
  --nav-offset:110px;   /* fixed nav height, used for anchor scrolling */
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-offset);   /* anchors clear the fixed navbar */
}
html,body{background:var(--bg)}

body{
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
ul,ol{list-style:none}
svg{display:block}
img{max-width:100%}

:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:12px}
.cta :focus-visible{outline-color:var(--brand-2)}   /* dark panel needs a lighter ring */

/* Screen-reader only helper */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ==========================================================================
   03. SHARED COMPONENTS
   ========================================================================== */

/* --- 03.1 Buttons -------------------------------------------------------
   Base size matches the hero. Sections that used a smaller button keep their
   own size further down in their own block. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:60px;padding:0 32px;border-radius:999px;flex:none;
  font-size:17px;font-weight:500;will-change:transform;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn > span{
  display:inline-flex;align-items:center;gap:10px;pointer-events:none;
  transition:transform .35s var(--ease);
}

.btn--primary{background:var(--brand);color:#fff;box-shadow:0 14px 34px -14px rgba(108,99,232,.85)}
.btn--primary:hover{background:var(--brand-hover);box-shadow:0 18px 40px -14px rgba(108,99,232,.95)}

.btn--ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}

.btn--wa{background:var(--wa);color:#08301D;box-shadow:0 18px 40px -18px rgba(37,211,102,.9)}
.btn--wa:hover{background:#20C05C;box-shadow:0 22px 46px -18px rgba(37,211,102,1)}

/* --- 03.2 Section headings ---------------------------------------------
   Every section uses the same two-line heading: a muted line then a solid one. */
.s-title{font-weight:500;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.4;letter-spacing:-.01em}
.s-title span{display:block}
.s-title__muted{color:var(--soft-ink)}
.s-sub{margin-top:18px;max-width:540px;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.95;color:var(--muted)}

/* --- 03.3 Tabs (shared by WORK and PRICING) ----------------------------- */
.tabs{
  position:relative;display:inline-flex;gap:4px;padding:6px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
}
.tabs__pill{
  position:absolute;top:6px;bottom:6px;left:0;width:0;border-radius:999px;background:var(--ink);
  transition:transform .5s var(--ease), width .5s var(--ease);
}
.tab{position:relative;z-index:1;border-radius:999px;transition:color .3s}
.tab b{display:block;font-size:15px;font-weight:500;line-height:1.4}
.tab small{display:block;font-size:12px;color:var(--muted);transition:color .3s}
.tab[aria-selected="true"]{color:#fff}
.tab[aria-selected="true"] small{color:rgba(255,255,255,.65)}
.tab:not([aria-selected="true"]):hover{color:var(--brand)}

/* --- 03.4 Interaction hint under a widget ------------------------------- */
.hint{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;color:var(--muted)}
.hint svg{width:18px;height:18px;color:var(--brand)}

/* --- 03.5 Scroll reveal -------------------------------------------------
   JS adds .is-visible when the element enters the viewport. --d staggers it. */
.rv{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
.rv.is-visible{opacity:1;transform:none}


/* ==========================================================================
   04. NAVBAR
   ========================================================================== */
.nav{position:fixed;top:18px;inset-inline:0;z-index:50;display:flex;justify-content:center;padding:0 20px}
.nav__bar{
  position:relative;width:100%;max-width:var(--wrap);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:10px;padding-inline:22px 12px;border-radius:20px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

/* Logo lockup, sized so the mark inside it lands at the same 36px it always
   was — the mark fills the artwork's full height, so height == mark size */
.logo{display:flex;align-items:center;flex:none}
.logo img{display:block;width:auto}
.nav .logo img{height:36px}

.nav__links{display:flex;gap:34px;font-size:15px;color:var(--muted)}
.nav__links a{position:relative;padding:8px 0;transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--brand)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;border-radius:2px;background:var(--brand)}

.nav .socials{display:flex;gap:8px}
.nav .socials a{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;
  transition:background .25s, transform .25s var(--ease);
}
.nav .socials a:hover{background:var(--brand);transform:translateY(-2px)}
.nav .socials svg{width:18px;height:18px}

/* Primary action in the bar */
.nav__cta{
  display:inline-flex;align-items:center;flex:none;height:44px;padding:0 20px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:15px;font-weight:500;transition:background .3s;
}
.nav__cta:hover{background:var(--brand-hover)}

/* Mobile menu */
.nav__toggle{display:none;width:42px;height:42px;border-radius:12px;background:var(--ink);color:#fff;place-items:center}
.nav__toggle svg{width:20px;height:20px}
.nav__panel{display:none}

@media (max-width:900px){
  /* The CTA moves into the panel below — leaving it in the bar squeezes the
     toggle out of the bar on narrow phones */
  .nav__links,.nav .socials,.nav__cta{display:none}
  .nav__toggle{display:grid}
  .nav__bar{padding-inline:16px 10px}
  .nav__panel{
    position:absolute;top:calc(100% + 8px);inset-inline:0;background:#fff;border:1px solid var(--line);
    border-radius:18px;padding:10px;box-shadow:0 30px 60px -30px rgba(38,37,46,.35);
  }
  .nav__panel.is-open{display:block}
  .nav__panel a{display:block;padding:13px 14px;border-radius:12px;font-size:15px}
  .nav__panel a:hover{background:var(--bg)}
}


/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:150px 20px 100px;overflow:hidden;isolation:isolate;
}

/* Cursor-reactive dot field (canvas). Also used by the about page head. */
.dot-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;
  transition:opacity 1.4s ease .6s;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 35%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 35%,transparent 100%);
}
body.is-in .dot-canvas{opacity:1}

/* Cursor glow. Shared with the about page head; the final CTA overrides it. */
.glow{
  position:absolute;top:0;left:0;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,99,232,.17) 0%,rgba(108,99,232,.06) 40%,rgba(108,99,232,0) 68%);
  z-index:-1;pointer-events:none;opacity:0;will-change:transform,opacity;
}

.hero__content{position:relative;z-index:2;text-align:center;max-width:980px}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;
  background:var(--brand-soft);color:var(--brand);font-size:14px;font-weight:500;
}
.badge__dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse 2.4s ease-out infinite}

/* Animated title: each word fades up in sequence */
.title{margin-top:30px;font-weight:500;font-size:clamp(2.5rem,6.2vw,5.5rem);line-height:1.24;letter-spacing:-.015em;will-change:transform}
.title .line{display:block}
.line__in{position:relative;display:inline-block}
/* Word-by-word entrance. Also used by the about page head. */
.w{display:inline-block;opacity:0;transform:translateY(38%);filter:blur(10px)}
body.is-in .w{animation:wordIn 1s var(--ease) forwards;animation-delay:calc(var(--i) * 80ms + 150ms)}

/* Hand-drawn highlight around "مبيعات" */
.hl{position:relative;display:inline-block;padding:0 .14em}
.hl svg{position:absolute;left:-9%;top:-16%;width:118%;height:138%;overflow:visible;pointer-events:none}
.hl path{
  fill:none;stroke:var(--brand-2);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;
}
body.is-in .hero .hl path{animation:draw 1.1s var(--ease) 1s forwards}

.sparkles{position:absolute;top:-14%;right:-64px;width:78px;height:78px;color:var(--brand-2);will-change:transform}
.sparkles svg{position:absolute}
.sparkles .s1{width:52px;height:52px;top:0;right:22px}
.sparkles .s2{width:28px;height:28px;bottom:0;right:0}

.sub{margin:26px auto 0;max-width:640px;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.95;color:var(--muted);font-weight:400}

.actions{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.trust{margin-top:30px;display:flex;gap:10px 24px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:18px;height:18px;color:var(--brand)}

.reveal{opacity:0;transform:translateY(16px)}
body.is-in .reveal{animation:fadeUp .9s var(--ease) forwards;animation-delay:var(--d)}

/* --- Floating proof cards ----------------------------------------------- */
.floats{position:absolute;inset:0;z-index:1;pointer-events:none}
.float{position:absolute;will-change:transform}
.float--a{top:21%;right:4%}
.float--b{bottom:13%;left:4.5%}
.float--c{top:23%;left:5.5%}
.float--d{bottom:17%;right:6%}

.hero .card{opacity:0;transform:scale(.82) translateY(14px) rotate(0deg)}
body.is-in .hero .card{animation:cardIn .9s var(--ease) forwards;animation-delay:var(--d)}

/* WhatsApp lead card */
.card--wa{
  width:250px;background:var(--card);border:1px solid var(--line);border-radius:22px 22px 22px 6px;
  padding:14px;box-shadow:0 30px 60px -30px rgba(38,37,46,.35);
}
.card__head{display:flex;align-items:center;gap:10px}
.card__head strong{display:block;font-size:13.5px;font-weight:500}
.card__head small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ico{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.ico svg{width:18px;height:18px}
.ico--wa{background:var(--wa)}

.hero .bubble{
  position:relative;margin-top:12px;background:#EAF8EF;border-radius:14px 14px 14px 4px;
  padding:10px 12px;font-size:13px;line-height:1.7;min-height:44px;
}
.bubble__text{transition:opacity .25s}
.typing{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);display:flex;gap:4px;opacity:0;transition:opacity .2s}
.typing i{width:6px;height:6px;border-radius:50%;background:#7FBF97;animation:typing 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
.hero .bubble.is-typing .bubble__text{opacity:0}
.hero .bubble.is-typing .typing{opacity:1}

/* Booking ticket card */
.card--book{
  display:flex;align-items:stretch;background:var(--card);border-radius:16px;border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(38,37,46,.35);overflow:hidden;width:250px;
}
.card--book .date{flex:none;width:70px;background:var(--brand);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0}
.card--book .date small{font-size:11px;opacity:.85}
.card--book .date b{font-size:28px;font-weight:600;line-height:1.2}
.card--book .info{padding:12px 14px;border-inline-start:2px dashed var(--line)}
.card--book .info strong{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500}
.card--book .info strong svg{width:16px;height:16px;color:#1FAA59}
.card--book .info p{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}

/* Instagram growth card */
.card--ig{width:220px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 16px 16px;box-shadow:0 30px 60px -30px rgba(38,37,46,.35)}
.ico--ig{background:radial-gradient(circle at 30% 110%,#FDC468 0%,#F2743E 35%,#D6249F 65%,#7A38D8 100%);border-radius:10px}
.ig__num{margin-top:12px;font-size:28px;font-weight:600;letter-spacing:-.01em}
.ig__label{font-size:12px;color:var(--muted)}
.bars{margin-top:12px;height:46px;display:flex;align-items:flex-end;gap:6px;direction:ltr}
.bars i{flex:1;height:var(--h);border-radius:4px;background:var(--brand-soft);transform:scaleY(0);transform-origin:bottom}
.bars i:last-child{background:var(--brand)}
body.is-in .hero .bars i{animation:grow .8s var(--ease) forwards;animation-delay:calc(1.5s + var(--i) * 60ms)}

/* Daily leads counter card */
.card--count{width:210px;background:var(--ink);color:#fff;border-radius:20px;padding:16px 18px;box-shadow:0 30px 60px -28px rgba(38,37,46,.6)}
.card--count small{display:block;font-size:12px;color:rgba(255,255,255,.65)}
.count__row{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}
.count__num{font-size:40px;font-weight:600;line-height:1.15;display:inline-block}
.count__num.pop{animation:pop .6s var(--ease)}
.count__up{font-size:12px;color:#9EF0BF;background:rgba(158,240,191,.12);padding:4px 8px;border-radius:999px}

/* --- Hero responsive ----------------------------------------------------- */
@media (max-width:1280px){
  .float--a{right:2%} .float--d{right:3%} .float--b{left:2%} .float--c{left:3%}
  .card--wa,.card--book{width:230px} .card--ig{width:200px} .card--count{width:190px}
}
@media (max-width:1099px){
  .floats{position:relative;inset:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:48px;width:100%}
  .float{position:static;transform:none !important}
  .float--b,.float--c{display:none}
  .card--wa{width:270px}
  .card--count{width:220px}
  .sparkles{right:-58px;width:54px;height:54px}
  .sparkles .s1{width:36px;height:36px;right:14px}
  .sparkles .s2{width:20px;height:20px}
}
@media (max-width:640px){
  .hero{padding:120px 18px 110px}
  .title{margin-top:24px}
  .sparkles{display:none}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
}


/* ==========================================================================
   06. PROBLEM  —  "any site vs a site that sells"
   ========================================================================== */
.problem{padding:120px 20px}
.problem__wrap{
  max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"head stage" "pains stage";
  column-gap:72px;row-gap:40px;align-items:start;
}
.problem__head{grid-area:head}
.problem__stage{grid-area:stage;position:sticky;top:var(--nav-offset)}
.pains{grid-area:pains;display:grid;gap:6px}
.problem .s-sub{max-width:520px;margin-top:20px}

/* --- Pain points --------------------------------------------------------- */
.pain{
  position:relative;display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:22px 22px 22px 18px;border-radius:22px;cursor:default;
  transition:background .35s, box-shadow .35s;
}
.pain::before{
  content:"";position:absolute;inset-inline-start:0;top:24px;bottom:24px;width:3px;border-radius:3px;
  background:var(--brand);transform:scaleY(0);transition:transform .45s var(--ease);
}
.pain:hover,.pain:focus-visible{background:#fff;box-shadow:0 24px 50px -30px rgba(38,37,46,.3);outline:none}
.pain:hover::before,.pain:focus-visible::before{transform:scaleY(1)}
.pain__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--bad-soft);color:var(--bad);transition:background .35s, color .35s}
.pain__ico svg{width:24px;height:24px}
.pain:hover .pain__ico,.pain:focus-visible .pain__ico{background:var(--brand-soft);color:var(--brand)}
.pain h3{font-size:1.15rem;font-weight:500;line-height:1.6}
.pain p{margin-top:6px;font-size:.95rem;line-height:1.9;color:var(--muted)}
.pain__fix{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500;color:var(--brand)}
.pain__fix svg{width:18px;height:18px;flex:none}

/* --- Before / after stage ------------------------------------------------
   .scene sizes everything from --u so the whole mock scales with the box. */
.stage{
  position:relative;width:100%;aspect-ratio:580/640;border-radius:32px;overflow:hidden;
  container-type:inline-size;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;
  border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(38,37,46,.55);
}
.scene{--u:calc(100cqw / 580);position:absolute;inset:0;font-size:calc(var(--u) * 12)}
@supports not (width:1cqw){.scene{--u:1px}}
.scene--after{
  z-index:1;background-color:#EFEEFD;
  background-image:radial-gradient(rgba(108,99,232,.2) 1px,transparent 1.3px);
  background-size:calc(var(--u) * 22) calc(var(--u) * 22);
}
.scene--before{
  z-index:2;background-color:#E8E8EC;
  background-image:radial-gradient(rgba(38,37,46,.1) 1px,transparent 1.3px);
  background-size:calc(var(--u) * 22) calc(var(--u) * 22);
  clip-path:inset(0 0 0 50%);
}

.s-tag{position:absolute;top:calc(var(--u) * 18);z-index:4;padding:calc(var(--u) * 7) calc(var(--u) * 15);border-radius:999px;font-size:calc(var(--u) * 12.5);font-weight:500;white-space:nowrap}
.scene--before .s-tag{right:calc(var(--u) * 18);background:#fff;color:var(--bad)}
.scene--after .s-tag{left:calc(var(--u) * 18);background:var(--brand);color:#fff}

/* Phone shell */
.phone{
  position:absolute;top:calc(var(--u) * 62);left:50%;width:calc(var(--u) * 250);height:calc(var(--u) * 540);
  margin-left:calc(var(--u) * -125);background:#fff;border:calc(var(--u) * 7) solid var(--ink);
  border-radius:calc(var(--u) * 38);overflow:hidden;
  box-shadow:0 calc(var(--u) * 30) calc(var(--u) * 60) calc(var(--u) * -30) rgba(38,37,46,.55);
}
.phone::before{content:"";position:absolute;top:calc(var(--u) * 8);left:50%;width:calc(var(--u) * 70);height:calc(var(--u) * 18);margin-left:calc(var(--u) * -35);background:var(--ink);border-radius:999px;z-index:2}
.screen{position:absolute;inset:0;padding-top:calc(var(--u) * 40)}

/* Before: the typical website */
.bad-site{background:#fff;font-family:Tahoma,Arial,sans-serif}
.bs-bar{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6);padding:0 calc(var(--u) * 10) calc(var(--u) * 8);border-bottom:1px solid #DDD}
.bs-logo{flex:none;font-family:Arial,sans-serif;font-size:calc(var(--u) * 9);font-weight:700;color:#999;border:1px dashed #BBB;padding:calc(var(--u) * 3) calc(var(--u) * 6)}
.bs-nav{flex:1;min-width:0;text-align:left;font-size:calc(var(--u) * 6.5);color:#1A0DAB;white-space:nowrap;overflow:hidden}
.bs-slider{position:relative;height:calc(var(--u) * 150);background:linear-gradient(#CFCFD4,#B5B5BC);display:grid;place-items:center}
.bs-slider p{position:absolute;bottom:calc(var(--u) * 26);inset-inline:0;text-align:center;color:#fff;font-size:calc(var(--u) * 12);font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.bs-spinner{width:calc(var(--u) * 26);height:calc(var(--u) * 26);margin-top:calc(var(--u) * -24);border:calc(var(--u) * 3) solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}
.bs-dots{position:absolute;bottom:calc(var(--u) * 10);left:50%;transform:translateX(-50%);display:flex;gap:calc(var(--u) * 4)}
.bs-dots i{width:calc(var(--u) * 6);height:calc(var(--u) * 6);border-radius:50%;background:rgba(255,255,255,.5)}
.bs-dots .on{background:#fff}
.bs-body{padding:calc(var(--u) * 10)}
.bs-body h5{margin:calc(var(--u) * 6) 0 calc(var(--u) * 4);font-size:calc(var(--u) * 10);color:#333}
.bs-body p{font-size:calc(var(--u) * 7.5);line-height:1.7;color:#888;text-align:justify}
.sk{display:block;height:calc(var(--u) * 5);margin-top:calc(var(--u) * 5);background:#E8E8E8;border-radius:2px}
.sk.short{width:60%}
.bs-popup{position:absolute;left:calc(var(--u) * 12);right:calc(var(--u) * 12);bottom:calc(var(--u) * 16);background:#fff;border:1px solid #DDD;padding:calc(var(--u) * 14) calc(var(--u) * 12);text-align:center;box-shadow:0 0 0 calc(var(--u) * 600) rgba(0,0,0,.35)}
.bs-popup b{display:block;font-size:calc(var(--u) * 11);color:#333}
.bs-close{position:absolute;top:calc(var(--u) * 3);left:calc(var(--u) * 7);font-size:calc(var(--u) * 13);color:#BBB}
.bs-input{display:block;margin-top:calc(var(--u) * 9);border:1px solid #CCC;padding:calc(var(--u) * 6);font-size:calc(var(--u) * 9);color:#AAA;text-align:right}
.bs-btn{display:block;margin-top:calc(var(--u) * 6);background:#999;color:#fff;font-size:calc(var(--u) * 9);padding:calc(var(--u) * 6)}

/* After: the client website */
.site-bar{display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u) * 14) calc(var(--u) * 10)}
.site-logo{display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 12.5);font-weight:600}
.site-logo i{width:calc(var(--u) * 18);height:calc(var(--u) * 18);border-radius:calc(var(--u) * 5);background:var(--brand)}
.site-menu{width:calc(var(--u) * 16);height:2px;background:var(--ink);border-radius:2px;box-shadow:0 calc(var(--u) * 5) 0 var(--ink),0 calc(var(--u) * -5) 0 var(--ink)}
.site-hero{position:relative;margin:0 calc(var(--u) * 10);height:calc(var(--u) * 140);border-radius:calc(var(--u) * 16);background:linear-gradient(160deg,#8A84E6,#5B52E0);overflow:hidden;color:#fff}
.site-hero svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%}
.site-hero p{position:absolute;top:calc(var(--u) * 14);right:calc(var(--u) * 14);max-width:72%;font-size:calc(var(--u) * 13);font-weight:500;line-height:1.5}
.site-body{padding:calc(var(--u) * 12) calc(var(--u) * 14)}
.site-body h4{font-size:calc(var(--u) * 13);font-weight:600}
.problem .price{margin-top:calc(var(--u) * 3);font-size:calc(var(--u) * 12);font-weight:600;color:var(--brand)}
.problem .chips{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 5);margin-top:calc(var(--u) * 8)}
.problem .chips span{font-size:calc(var(--u) * 9.5);background:var(--bg);padding:calc(var(--u) * 4) calc(var(--u) * 8);border-radius:999px}
.days-label{margin-top:calc(var(--u) * 12);font-size:calc(var(--u) * 10.5);color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 5);margin-top:calc(var(--u) * 6)}
.days span{text-align:center;border:1px solid #E4E3EA;border-radius:calc(var(--u) * 9);padding:calc(var(--u) * 6) 0;font-size:calc(var(--u) * 9.5);line-height:1.4}
.days span b{display:block;font-size:calc(var(--u) * 13);font-weight:600}
.days .on{background:var(--brand);border-color:var(--brand);color:#fff}
.site-cta{margin-top:calc(var(--u) * 12);height:calc(var(--u) * 38);border-radius:calc(var(--u) * 11);background:var(--brand);color:#fff;font-size:calc(var(--u) * 12);font-weight:500;display:grid;place-items:center}
.site-wa{margin-top:calc(var(--u) * 7);height:calc(var(--u) * 34);border-radius:calc(var(--u) * 11);border:1.5px solid var(--wa);color:var(--good);font-size:calc(var(--u) * 11);display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 6)}
.site-wa svg{width:calc(var(--u) * 15);height:calc(var(--u) * 15)}

/* Floating comparison cards inside the stage */
.fc{
  position:absolute;z-index:3;width:calc(var(--u) * 214);background:#fff;border:1px solid var(--line);
  border-radius:calc(var(--u) * 16);padding:calc(var(--u) * 12);font-size:calc(var(--u) * 11.5);
  box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 50) calc(var(--u) * -22) rgba(38,37,46,.4);
  transform:rotate(var(--rot,0deg)) scale(var(--sc,1));
  transition:opacity .35s, transform .5s var(--ease), box-shadow .35s;
}
.fc--1{top:calc(var(--u) * 86);right:calc(var(--u) * 14)}
.fc--2{top:calc(var(--u) * 268);left:calc(var(--u) * 14)}
.fc--3{bottom:calc(var(--u) * 24);right:calc(var(--u) * 20)}
/* messy on the "before" side, straight on the "after" side */
.scene--before .fc--1{--rot:3deg}
.scene--before .fc--2{--rot:-3deg}
.scene--before .fc--3{--rot:2deg}

.fc__head{display:flex;align-items:center;gap:calc(var(--u) * 8);font-weight:500}
.fc__head time{margin-inline-start:auto;font-size:calc(var(--u) * 10);font-weight:400;color:var(--muted)}
.fc__ico{flex:none;width:calc(var(--u) * 26);height:calc(var(--u) * 26);border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);font-size:calc(var(--u) * 11)}
.fc__ico svg{width:55%;height:55%}
.fc__ico--brand{background:var(--brand-soft);color:var(--brand)}
.fc__msg{margin-top:calc(var(--u) * 8);background:var(--bg);border-radius:calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 3);padding:calc(var(--u) * 7) calc(var(--u) * 10);line-height:1.6}
.fc__reply{margin-top:calc(var(--u) * 6);margin-inline-start:calc(var(--u) * 22);background:var(--brand-soft);color:var(--brand-deep);border-radius:calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 3) calc(var(--u) * 10);padding:calc(var(--u) * 7) calc(var(--u) * 10);line-height:1.6}
.fc__reply small{display:block;font-size:calc(var(--u) * 9);opacity:.7}
.fc__status{margin-top:calc(var(--u) * 9);display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 10.5);font-weight:500;line-height:1.5}
.fc__status svg{flex:none;width:calc(var(--u) * 15);height:calc(var(--u) * 15)}
.is-bad{color:var(--bad)}
.is-good{color:var(--good)}
.fc__quote{margin-top:calc(var(--u) * 8);padding:calc(var(--u) * 8) calc(var(--u) * 10);border-radius:calc(var(--u) * 10);background:var(--bg);color:var(--muted);font-size:calc(var(--u) * 12);line-height:1.6}
.fc__quote.is-clear{background:var(--brand-soft);color:var(--brand-deep);font-weight:500}

/* Numbered steps inside a comparison card (NOT the process timeline) */
.problem .steps{margin-top:calc(var(--u) * 8);display:grid;gap:calc(var(--u) * 5);counter-reset:st;list-style:none}
.problem .steps li{display:flex;align-items:center;gap:calc(var(--u) * 7);font-size:calc(var(--u) * 10.5);counter-increment:st}
.problem .steps li::before{content:counter(st, arabic-indic);flex:none;width:calc(var(--u) * 17);height:calc(var(--u) * 17);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--u) * 9);background:var(--bg);color:var(--muted)}
.problem .steps.is-bad,.problem .steps.is-good{color:var(--ink)}
.problem .steps.is-good li::before{background:var(--brand-soft);color:var(--brand)}

.speed{margin-top:calc(var(--u) * 8);display:flex;align-items:baseline;gap:calc(var(--u) * 5)}
.speed b{font-size:calc(var(--u) * 30);font-weight:600;line-height:1.1}
.speed small{font-size:calc(var(--u) * 11);color:var(--muted)}
.speed.is-bad b{color:var(--bad)}
.speed.is-good b{color:var(--good)}
.meter{margin-top:calc(var(--u) * 6);height:calc(var(--u) * 7);border-radius:999px;background:#EEEEF2;overflow:hidden}
.meter i{display:block;width:var(--w);height:100%;border-radius:inherit}
.meter.is-bad i{background:var(--bad)}
.meter.is-good i{background:var(--good)}
.search{display:flex;align-items:center;gap:calc(var(--u) * 6);border:1px solid #E4E3EA;border-radius:999px;padding:calc(var(--u) * 6) calc(var(--u) * 10);font-size:calc(var(--u) * 10.5)}
.search svg{flex:none;width:calc(var(--u) * 13);height:calc(var(--u) * 13);color:var(--muted)}
.serp{margin-top:calc(var(--u) * 8);display:grid;gap:calc(var(--u) * 4)}
.serp li{padding:calc(var(--u) * 6) calc(var(--u) * 8);border-radius:calc(var(--u) * 8)}
.serp b{display:block;font-size:calc(var(--u) * 10.5);font-weight:500;color:var(--brand-deep)}
.serp small{display:block;font-size:calc(var(--u) * 9);color:var(--muted)}
.serp .you{background:var(--brand-soft)}
.serp .you small{direction:ltr;text-align:right}
.checks{margin-top:calc(var(--u) * 8);display:grid;gap:calc(var(--u) * 5)}
.checks li{display:flex;align-items:center;gap:calc(var(--u) * 6);font-size:calc(var(--u) * 10.5)}
.checks svg{flex:none;width:calc(var(--u) * 13);height:calc(var(--u) * 13);color:var(--brand)}

/* Drag divider + knob */
.divider{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:6;pointer-events:none}
.divider::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(38,37,46,.05),0 0 24px rgba(38,37,46,.25)}
.knob{
  pointer-events:auto;position:absolute;top:50%;left:0;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:#fff;color:var(--brand);display:grid;place-items:center;cursor:grab;
  box-shadow:0 12px 30px -8px rgba(38,37,46,.45);
  transition:transform .35s var(--ease), background .3s, color .3s;
}
.knob svg{width:24px;height:24px}
.stage:hover .knob{transform:scale(1.06)}
.stage.is-dragging .knob{transform:scale(1.14);background:var(--brand);color:#fff;cursor:grabbing}

/* Closing strip */
.closing{
  position:relative;max-width:var(--wrap);margin:96px auto 0;padding:38px 44px;border-radius:30px;
  overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
}
.closing::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(138,132,230,.35) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to left,transparent 30%,#000);mask-image:linear-gradient(to left,transparent 30%,#000);
}
.closing strong{display:block;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:500;line-height:1.5}
/* Direct child only — a bare ".closing span" would also hit the CTA's inner span */
.closing > div > span{display:block;margin-top:6px;font-size:1rem;color:rgba(255,255,255,.68);line-height:1.8}

/* --- Problem responsive -------------------------------------------------- */
@media (max-width:980px){
  .problem{padding:88px 18px}
  .problem__wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head" "stage" "pains";row-gap:32px}
  .problem__stage{position:static;max-width:560px;width:100%;margin:0 auto}
  .pain{padding:18px 16px}
}
@media (max-width:640px){
  .pain{grid-template-columns:44px 1fr;gap:14px}
  .pain__ico{width:44px;height:44px;border-radius:14px}
  .knob{width:46px;height:46px;margin:-23px 0 0 -23px}
  .closing{margin-top:64px;padding:28px 22px;border-radius:24px}
  .closing .btn{width:100%}
  /* Phone is hidden on small screens so the cards stay readable */
  .stage{aspect-ratio:380/640;border-radius:24px}
  .scene{--u:calc(100cqw / 380)}
  .phone{display:none}
  .fc{width:calc(var(--u) * 300)}
  .fc--1{top:calc(var(--u) * 64);right:calc(var(--u) * 24)}
  .fc--2{top:calc(var(--u) * 262);left:calc(var(--u) * 24)}
  .fc--3{bottom:calc(var(--u) * 26);right:calc(var(--u) * 40)}
}


/* ==========================================================================
   07. WORK  —  project showcase
   ========================================================================== */
.work{padding:120px 20px}
.work__wrap{max-width:var(--wrap);margin:0 auto}
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}

/* Project tabs (built by JS) */
.work .tabs{max-width:100%;overflow-x:auto;scrollbar-width:none}
.work .tabs::-webkit-scrollbar{display:none}
.work .tab{flex:none;display:flex;align-items:center;gap:10px;padding:9px 20px 9px 16px;text-align:start}
.swatch{flex:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line)}

/* Case layout */
.case{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}

/* Browser frame */
.frame{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 50px 90px -60px rgba(38,37,46,.55)}
.frame__bar{direction:ltr;height:46px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#FBFBFC;border-bottom:1px solid var(--line)}
.frame__dots{display:flex;gap:7px}
.frame__dots i{width:11px;height:11px;border-radius:50%;background:#E3E2E8}
.frame__url{flex:1;max-width:340px;margin:0 auto;height:28px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--muted)}
.frame__url svg{width:13px;height:13px}
.frame__dots-spacer{width:47px}

/* The screenshot plays through the frame while the pointer rests on it —
   same mechanic as the projects page. The duration is set by the script,
   from the page length. */
.viewport{position:relative;aspect-ratio:5/4;overflow:hidden;background:#EEEEF2}
.page{position:relative;transition:opacity .24s ease}
.page img{
  display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;
  transform:translate3d(0,0,0);transition:transform 0s linear;
}
.progress{height:3px;background:var(--line)}
.progress i{display:block;height:100%;background:var(--brand);transform-origin:right;transform:scaleX(0);transition:transform 0s linear}
.case.is-playing .page img,
.case.is-playing .progress i{transition-timing-function:cubic-bezier(.4,0,.5,1)}

.work .hint{margin-top:14px}
body.is-touch .work .hint{display:none}   /* nothing to hover on touch */

/* Case info column — scoped, because the hero booking card also has an .info */
.work .info > *{transition:opacity .24s ease, transform .24s ease}
.info__meta{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.work .info h3{margin-top:10px;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:500;line-height:1.4}
.info__brief{margin-top:12px;max-width:480px;font-size:1rem;line-height:1.95;color:var(--muted)}
.decisions-label{margin-top:26px;font-size:14px;font-weight:500;color:var(--ink)}
.decisions{margin-top:10px;display:grid;gap:4px}
.decisions li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:13px 16px;border-radius:18px}
.decisions .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-size:14px;font-weight:600}
.decisions h4{font-size:1rem;font-weight:500;line-height:1.6}
.decisions p{margin-top:2px;font-size:.9rem;line-height:1.85;color:var(--muted)}
.quote{margin-top:20px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:.98rem;line-height:1.9}
.quote footer{margin-top:8px;font-size:.85rem;color:var(--muted)}
.info__actions{margin-top:26px;display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap}
.work .btn{height:56px;padding:0 30px;font-size:16px}

.link{display:inline-flex;align-items:center;gap:8px;font-weight:500;padding-bottom:3px;border-bottom:1.5px solid var(--ink);transition:color .25s, border-color .25s}
.link:hover{color:var(--brand);border-color:var(--brand)}
.link svg{width:16px;height:16px}

/* Link through to the full projects page */
.work__more{margin-top:48px;display:flex;justify-content:center}
.work__more .btn svg{width:18px;height:18px}

/* Cross-fade when switching projects */
.case.is-switching .page{opacity:0}
.case.is-switching .info > *{opacity:0;transform:translateY(8px)}

/* Keep the hero's booking card out of the transition above */
.hero .card--book .info{transition:none}

/* --- Work responsive ----------------------------------------------------- */
@media (max-width:1000px){
  .work{padding:88px 18px}
  .case{grid-template-columns:minmax(0,1fr);gap:36px}
  .case__media{max-width:720px;width:100%;margin:0 auto}
  .info__brief{max-width:none}
}
@media (max-width:640px){
  .work .tabs{border-radius:22px}
  .work .tab{padding:8px 14px 8px 12px}
  .frame{border-radius:20px}
  .decisions li{padding:12px}
  .info__actions .btn{width:100%}
}


/* ==========================================================================
   08. PRICING
   ========================================================================== */
.pricing{padding:120px 20px}
.pricing__wrap{max-width:var(--wrap);margin:0 auto}
.pricing__head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}
.pricing .tab{padding:10px 22px;text-align:center}

/* Panels swap with a short fade */
.panel{margin-top:56px;transition:opacity .25s ease, transform .25s ease}
.panel[hidden]{display:none}
.panel.is-leaving{opacity:0;transform:translateY(10px)}
.panel.is-entering{opacity:0;transform:translateY(-10px)}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}

/* Plan card with a cursor-following border light */
.plan{
  position:relative;isolation:isolate;padding:30px 28px 32px;border-radius:28px;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 60px -50px rgba(38,37,46,.45);
  --mx:50%;--my:0%;
}
.plan::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my),rgba(108,99,232,.95),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
}
.plan__glow{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(108,99,232,.07),transparent 70%);
}
.plans.is-hovering .plan::before,.plans.is-hovering .plan__glow{opacity:1}

.plan--featured{background:var(--ink);color:#fff;border-color:transparent;transform:translateY(-14px);box-shadow:0 50px 80px -50px rgba(38,37,46,.8)}
.plan--featured .plan__glow{background:radial-gradient(360px circle at var(--mx) var(--my),rgba(138,132,230,.2),transparent 70%)}
.plan--featured::before{background:radial-gradient(280px circle at var(--mx) var(--my),rgba(168,163,255,1),transparent 65%)}

.plan__badge{position:absolute;top:24px;left:24px;padding:6px 12px;border-radius:999px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:500}
.plan__name{font-size:1.2rem;font-weight:500;line-height:1.5}
.plan__for{margin-top:8px;min-height:3.6em;font-size:.93rem;line-height:1.85;color:var(--muted)}
.plan--featured .plan__for{color:rgba(255,255,255,.68)}

.plan__price{margin-top:22px;display:flex;align-items:flex-end;gap:10px}
.plan__price b{font-size:clamp(2.6rem,4vw,3.3rem);font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan__price span{display:flex;flex-direction:column;font-size:15px;font-weight:500;line-height:1.35;padding-bottom:4px}
.plan__price small{font-size:12.5px;font-weight:400;color:var(--muted)}
.plan--featured .plan__price small{color:rgba(255,255,255,.6)}
.plan__note{margin-top:12px;display:flex;gap:8px;font-size:12.5px;line-height:1.8;color:var(--muted)}
.plan--featured .plan__note{color:rgba(255,255,255,.62)}

.pricing .btn{height:54px;padding:0 28px;font-size:16px}
.plan__cta{margin-top:24px;width:100%}

.plan__label{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;font-weight:500}
.plan--featured .plan__label{border-color:rgba(255,255,255,.12)}
.plan__list{margin-top:14px;display:grid;gap:11px}
.plan__list li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.7}
.plan__list svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--brand)}
.plan--featured .plan__list li{color:rgba(255,255,255,.88)}
.plan--featured .plan__list svg{color:var(--brand-2)}
.plan__list .is-gift{margin-top:4px;padding:10px 12px;border-radius:14px;background:var(--brand-soft);color:var(--brand-deep);font-weight:500}
.plan__list .is-gift svg{color:var(--brand)}

/* Reassurance line under each panel */
.pricing .assure{margin-top:28px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;font-size:.98rem;color:var(--muted);line-height:1.8}
.pricing .assure svg{flex:none;width:20px;height:20px;color:var(--brand)}
.pricing .assure b{color:var(--ink);font-weight:500}

/* Bundle strip */
.bundle{
  margin-top:56px;display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;
  padding:26px 32px;border-radius:26px;background:var(--brand-soft);
}
.bundle__text{display:flex;align-items:center;gap:18px}
.bundle__ico{flex:none;width:52px;height:52px;border-radius:16px;background:#fff;color:var(--brand);display:grid;place-items:center}
.bundle__ico svg{width:26px;height:26px}
.bundle strong{display:block;font-size:1.15rem;font-weight:500;line-height:1.6}
.bundle p{font-size:.95rem;line-height:1.8;color:#4A4570}
.bundle .btn--ghost{background:#fff;border-color:#fff}
.bundle .btn--ghost:hover{background:var(--ink);border-color:var(--ink)}

/* Plan cards reveal as a group */
.plans .plan{opacity:0;translate:0 26px;transition:opacity .9s var(--ease) var(--d), translate .9s var(--ease) var(--d)}
.plans.is-visible .plan{opacity:1;translate:0 0}

/* --- Pricing responsive -------------------------------------------------- */
@media (max-width:1040px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
  .plan--featured{transform:none}
  .plan__for{min-height:0}
}
@media (max-width:640px){
  .pricing{padding:88px 18px}
  .pricing .tabs{width:100%}
  .pricing .tab{flex:1;padding:10px 12px}
  .panel{margin-top:40px}
  .plan{padding:26px 22px 28px;border-radius:24px}
  .bundle{padding:22px 20px}
  .bundle__text{align-items:flex-start}
  .bundle .btn{width:100%}
}


/* ==========================================================================
   09. PROCESS  —  how the work runs
   ========================================================================== */
.process{padding:120px 20px;--line:rgba(38,37,46,.1)}   /* slightly stronger rules in this section */
.process__wrap{
  max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"head steps" "card steps";
  column-gap:80px;row-gap:36px;align-items:start;
}
.process__head{grid-area:head}
.plan-card{grid-area:card;position:sticky;top:var(--nav-offset)}
.process .steps{grid-area:steps}
.process .s-sub{max-width:480px}

/* --- Summary card -------------------------------------------------------- */
.plan-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 40px 80px -60px rgba(38,37,46,.5)}
.pc-label{font-size:14px;font-weight:500}

/* Package selector (NOT the CTA chips) */
.process .chips{position:relative;margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);padding:5px;border-radius:16px;background:var(--bg)}
.chips__pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:12px;background:#fff;box-shadow:0 6px 16px -8px rgba(38,37,46,.35);transition:transform .45s var(--ease), width .45s var(--ease)}
.process .chip{position:relative;z-index:1;padding:10px 6px;border-radius:12px;font-size:14px;color:var(--muted);transition:color .3s}
.process .chip[aria-checked="true"]{color:var(--ink);font-weight:500}

.total{margin-top:24px;display:flex;align-items:flex-end;gap:12px}
.total b{font-size:clamp(3rem,5vw,3.8rem);font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.total span{padding-bottom:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.total span strong{display:block;color:var(--ink);font-weight:500}

/* Design vs build duration bar */
.bar{margin-top:20px;display:flex;gap:4px;height:14px}
.bar__seg{border-radius:999px;transition:flex-grow .6s var(--ease), box-shadow .3s, transform .3s var(--ease)}
.bar__seg--design{background:var(--brand-soft);flex-grow:4}
.bar__seg--build{background:var(--brand);flex-grow:10}
.bar__legend{margin-top:12px;display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.bar__legend span{display:flex;align-items:center;gap:7px;transition:color .3s}
.bar__legend i{width:10px;height:10px;border-radius:50%}
.bar__legend .l-design i{background:var(--brand-2)}
.bar__legend .l-build i{background:var(--brand)}

/* Payment split */
.pay{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pay__row{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay__item{padding:12px 10px;border-radius:16px;background:var(--bg);text-align:center;transition:background .3s, box-shadow .3s, transform .35s var(--ease)}
.pay__item b{display:block;font-size:1.25rem;font-weight:600;line-height:1.3}
.pay__item small{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:var(--muted)}
.pay__item--free b{color:var(--good)}

/* Hovering a timeline step highlights the matching part of the card */
.is-linked{box-shadow:0 0 0 2px var(--brand);transform:translateY(-2px)}
.bar__seg.is-linked{box-shadow:0 0 0 3px rgba(108,99,232,.3);transform:scaleY(1.35)}

.pc-fine{margin-top:18px;font-size:12.5px;line-height:1.85;color:var(--muted)}
.process .btn{height:56px;padding:0 28px;font-size:16px}
.plan-card .btn{margin-top:20px;width:100%}

/* --- Scroll-driven timeline ---------------------------------------------- */
.process .steps{position:relative;--p:0}
.process .steps::before,.steps__fill{content:"";position:absolute;top:24px;bottom:24px;right:23px;width:2px;border-radius:2px}
.process .steps::before{background:var(--line)}
.steps__fill{background:var(--brand);transform-origin:top;transform:scaleY(var(--p))}

.step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:22px;padding-bottom:22px}
.step:last-child{padding-bottom:0}
.step__node{
  position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:2px solid var(--line);color:var(--soft-ink);font-weight:600;font-size:16px;
  transition:background .4s, border-color .4s, color .4s, box-shadow .5s var(--ease);
}
.step.is-active .step__node{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 7px rgba(108,99,232,.14)}

.step__body{padding:22px 24px 24px;border-radius:24px;background:transparent;transition:background .35s, box-shadow .35s, opacity .4s}
.step:not(.is-active) .step__body{opacity:.55}
.step:hover .step__body,.step:focus-within .step__body,.step.is-active .step__body{opacity:1}
.step:hover .step__body,.step:focus-within .step__body{background:#fff;box-shadow:0 26px 50px -34px rgba(38,37,46,.35)}

.step h3{font-size:1.25rem;font-weight:500;line-height:1.55}
.step p{margin-top:8px;font-size:.97rem;line-height:1.9;color:var(--muted)}

.meta{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.meta li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.5}
.step:hover .meta li,.step:focus-within .meta li{background:var(--bg);border-color:transparent}
.meta svg{flex:none;width:16px;height:16px;color:var(--brand)}
.meta em{font-style:normal;color:var(--muted)}

.fork{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fork div{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;font-size:.9rem;line-height:1.7}
.fork svg{flex:none;width:18px;height:18px;margin-top:3px}
.fork .yes{background:var(--brand-soft);color:var(--brand-deep)}
.fork .no{background:#fff;border:1px solid var(--line);color:var(--muted)}
.fork b{display:block;font-weight:500;color:var(--ink)}
.fork .yes b{color:var(--brand-deep)}

.perk{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:500}
.perk svg{width:16px;height:16px;color:var(--brand-2)}

/* --- Process responsive -------------------------------------------------- */
@media (max-width:1000px){
  .process{padding:88px 18px}
  .process__wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head" "steps" "card";row-gap:40px}
  .plan-card{position:static;max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  .step{grid-template-columns:40px 1fr;gap:12px}
  .step__node{width:40px;height:40px;font-size:14px}
  .process .steps::before,.steps__fill{right:19px;top:20px;bottom:20px}
  .step__body{padding:14px 12px 18px}
  .step:not(.is-active) .step__body{opacity:.7}
  .fork{grid-template-columns:1fr}
  .plan-card{padding:22px 18px}
}


/* ==========================================================================
   10. TESTIMONIALS
   ========================================================================== */
.testi{padding:120px 20px}
.testi__wrap{max-width:var(--wrap);margin:0 auto}
.cards{margin-top:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1200px}

/* Quote card with a gentle 3D tilt (NOT the hero proof cards) */
.testi .card{
  position:relative;display:flex;flex-direction:column;padding:32px 30px 28px;border-radius:28px;
  background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -48px rgba(38,37,46,.45);
  transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease), box-shadow .4s;
  --gx:50%;--gy:0%;overflow:hidden;
}
.testi .card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(108,99,232,.09),transparent 65%);
}
.testi .card.is-tilting{transition:transform .12s linear, box-shadow .4s;box-shadow:0 40px 70px -44px rgba(38,37,46,.5)}
.testi .card.is-tilting::after{opacity:1}

.card__mark{width:44px;height:44px;color:var(--brand-2);transform:scaleX(-1)}
.card__quote{margin-top:18px;flex:1;font-size:1.08rem;line-height:2;color:var(--ink)}
.card__foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:600;color:#fff;background:var(--c1)}
.who b{display:block;font-size:1rem;font-weight:500}
.who small{display:block;margin-top:2px;font-size:.88rem;color:var(--muted)}
.card__link{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:500;color:var(--brand);white-space:nowrap}
.card__link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.card__link:hover svg{transform:translateX(-4px)}

/* Open slot card — "your review could be next".
   Kept at the same .testi-scoped specificity as the base card above,
   otherwise the base would win and this card would render white. */
.testi .card--offer{background:var(--ink);color:#fff;border-color:transparent}
.testi .card--offer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(138,132,230,.35) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.testi .card--offer::after{background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(138,132,230,.22),transparent 65%)}
.slot{position:relative;width:48px;height:48px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);display:grid;place-items:center;color:var(--brand-2)}
.slot svg{width:22px;height:22px}
.testi .card--offer h3{position:relative;margin-top:22px;font-size:1.45rem;font-weight:500;line-height:1.55}
.testi .card--offer p{position:relative;margin-top:10px;flex:1;font-size:1rem;line-height:1.95;color:rgba(255,255,255,.7)}
.testi .btn{margin-top:26px;height:56px;padding:0 26px;font-size:16px}

/* Cards reveal one after the other */
.cards .card.rv{transition:opacity .9s var(--ease) var(--d), transform .5s var(--ease)}
.cards .card.rv:not(.is-visible){transform:translateY(26px)}

/* --- Testimonials responsive --------------------------------------------- */
@media (max-width:1000px){
  .testi{padding:88px 18px}
  .cards{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media (max-width:640px){
  .testi .card{padding:26px 22px 24px;border-radius:24px}
  .card__foot{flex-wrap:wrap}
  .card__link{margin-inline-start:62px}
}


/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq{padding:120px 20px;--line:rgba(38,37,46,.09)}
.faq__wrap{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px 80px;align-items:start}
.faq__side{position:sticky;top:var(--nav-offset)}

/* Ask card */
.ask{position:relative;margin-top:36px;padding:26px;border-radius:26px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.ask::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(138,132,230,.35) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 80%);mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
.ask strong{display:block;font-size:1.2rem;font-weight:500;line-height:1.6}
.ask p{margin-top:6px;font-size:.95rem;line-height:1.85;color:rgba(255,255,255,.68)}
.faq .btn{margin-top:20px;height:54px;padding:0 24px;font-size:15.5px}
.faq .btn svg{width:20px;height:20px}

/* Question groups */
.group + .group{margin-top:44px}
.group__label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--muted);margin-bottom:10px}
.group__label::after{content:"";flex:1;height:1px;background:var(--line)}

/* Accordion — grid-template-rows animates the open/close height */
.qa{border-radius:20px;transition:background .35s, box-shadow .35s}
.qa + .qa{margin-top:4px}
.qa:hover{background:rgba(255,255,255,.55)}
.qa.is-open{background:#fff;box-shadow:0 24px 50px -36px rgba(38,37,46,.4)}
.qa h3{font-size:inherit;font-weight:inherit}
.qa__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;text-align:start;font-size:1.08rem;font-weight:500;line-height:1.65;border-radius:20px}
.qa__icon{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);transition:transform .45s var(--ease), background .3s, color .3s}
.qa__icon svg{width:18px;height:18px}
.qa:hover .qa__icon{transform:scale(1.08)}
.qa.is-open .qa__icon{transform:rotate(45deg);background:var(--brand);color:#fff}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa__a > div{overflow:hidden}
.qa__a p{padding:0 22px 22px 76px;font-size:.98rem;line-height:2;color:var(--muted);opacity:0;transform:translateY(-6px);transition:opacity .35s ease, transform .45s var(--ease)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa.is-open .qa__a p{opacity:1;transform:none;transition-delay:.06s}

/* --- FAQ responsive ------------------------------------------------------ */
@media (max-width:1000px){
  .faq{padding:88px 18px}
  .faq__wrap{grid-template-columns:minmax(0,1fr)}
  .faq__side{position:static;display:contents}
  .faq .s-title{order:0}
  .groups{order:1}
  .ask{order:2;margin-top:0}
}
@media (max-width:640px){
  .qa__q{padding:16px 14px;font-size:1rem}
  .qa__icon{width:32px;height:32px}
  .qa__a p{padding:0 14px 18px}
}


/* ==========================================================================
   12. FINAL CTA
   ========================================================================== */
.cta{padding:100px 20px}
.cta__panel{
  position:relative;max-width:var(--wrap);margin:0 auto;padding:72px 64px;border-radius:40px;
  overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center;
}
.cta__dots{position:absolute;inset:0;z-index:-2;width:100%;height:100%;opacity:.9}
.cta .glow{
  position:absolute;top:0;left:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  z-index:-1;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(138,132,230,.3) 0%,rgba(138,132,230,.08) 45%,rgba(138,132,230,0) 70%);
}

.c-title{font-weight:500;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.4;letter-spacing:-.015em}
.c-title span{display:block}
.c-title__muted{color:rgba(255,255,255,.45)}
.c-sub{margin-top:20px;max-width:520px;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.95;color:rgba(255,255,255,.68)}

.cta .assure{margin-top:30px;display:grid;gap:12px}
.cta .assure li{display:flex;align-items:center;gap:12px;font-size:.98rem;line-height:1.7}
.cta .assure svg{flex:none;width:20px;height:20px;color:var(--brand-2)}

/* --- Message picker ------------------------------------------------------ */
.picker{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:30px;padding:28px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.picker__step + .picker__step{margin-top:22px}
.picker__label{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.62)}
.picker__label b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:12px;font-weight:500;color:#fff}

/* Option chips (NOT the process package selector) */
.cta .chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.cta .chip{
  padding:11px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.18);
  font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.82);
  transition:background .3s, border-color .3s, color .3s, transform .35s var(--ease);
}
.cta .chip:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.cta .chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);font-weight:500}

/* Live WhatsApp message preview */
.preview{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.preview__label{font-size:13px;color:rgba(255,255,255,.5)}
.cta .bubble{
  position:relative;margin-top:10px;padding:14px 16px;border-radius:18px 18px 4px 18px;background:#0F3D28;
  font-size:14.5px;line-height:1.85;color:#DDF5E6;min-height:64px;
}
.cta .bubble b{color:#fff;font-weight:500}
.bubble__time{display:block;margin-top:6px;font-size:11px;color:rgba(221,245,230,.5);text-align:left;direction:ltr}

.cta .btn{margin-top:20px;width:100%;gap:12px;height:62px;padding:0 26px}
.cta .btn > span{gap:12px}
.cta .btn svg{width:26px;height:26px}

.alt{margin-top:16px;text-align:center;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.5)}
.alt a{color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color .25s, border-color .25s;direction:ltr;display:inline-block}
.alt a:hover{color:#fff;border-color:#fff}

/* --- CTA responsive ------------------------------------------------------ */
@media (max-width:1040px){
  .cta{padding:72px 18px}
  .cta__panel{grid-template-columns:minmax(0,1fr);gap:40px;padding:48px 32px;border-radius:32px}
  .c-sub{max-width:none}
}
@media (max-width:640px){
  .cta{padding:56px 14px}
  .cta__panel{padding:34px 20px;border-radius:26px}
  .picker{padding:20px 16px;border-radius:24px}
  .cta .chip{padding:10px 14px;font-size:14px}
  .cta .btn{height:58px;font-size:16px}
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer{padding:64px 20px 32px;--line:rgba(38,37,46,.1)}
.footer__wrap{max-width:var(--wrap);margin:0 auto}
.footer__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:start}

.brand{max-width:320px}
.footer .logo img{height:34px;}
/* flex-end pulls the lockup to the right edge of the column,
   flush with the paragraph underneath it */
.footer .logo{}
.brand p{margin-top:12px;font-size:.95rem;line-height:1.9;color:var(--muted)}

.links{display:contents}
.links h3{font-size:13px;font-weight:500;color:var(--muted)}
.links ul{margin-top:14px;display:grid;gap:11px}
.links a{display:inline-block;font-size:.97rem;line-height:1.6;transition:color .25s, transform .3s var(--ease)}
.links a:hover{color:var(--brand);transform:translateX(-4px)}

.contact a{display:flex;align-items:flex-start;gap:10px}
.contact svg{flex:none;width:18px;height:18px;margin-top:5px;color:var(--brand)}
.contact .ltr{direction:ltr}

.footer__bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  font-size:.88rem;color:var(--muted);
}
.footer .socials{display:flex;gap:8px}
.footer .socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);color:var(--ink);
  transition:background .25s, color .25s, transform .3s var(--ease);
}
.footer .socials a:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.footer .socials svg{width:17px;height:17px}

/* --- Footer responsive --------------------------------------------------- */
@media (max-width:820px){
  .footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:36px}
  .brand{grid-column:1 / -1;max-width:none}
}
@media (max-width:640px){
  .footer{padding:48px 18px 28px}
  .footer__bottom{flex-direction:column-reverse;align-items:flex-start}
}


/* ==========================================================================
   14. WHATSAPP FAB
   ========================================================================== */
.wa-fab{
  position:fixed;bottom:24px;right:24px;z-index:60;display:flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 22px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:500;box-shadow:0 16px 36px -14px rgba(108,99,232,.9);
  transition:transform .3s var(--ease), background .3s;
}
.wa-fab:hover{background:var(--brand-hover);transform:translateY(-3px)}
.wa-fab svg{width:24px;height:24px}

@media (max-width:640px){
  .wa-fab{padding:0;width:56px;justify-content:center}
  .wa-fab span{display:none}
}


/* ==========================================================================
   15. KEYFRAMES
   ========================================================================== */
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes cardIn{to{opacity:1;transform:scale(1) translateY(0) rotate(var(--r))}}
@keyframes grow{to{transform:scaleY(1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25);color:#C9C5FF}100%{transform:scale(1)}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(108,99,232,.5)}70%{box-shadow:0 0 0 9px rgba(108,99,232,0)}100%{box-shadow:0 0 0 0 rgba(108,99,232,0)}}
@keyframes spin{to{transform:rotate(360deg)}}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  /* Shared */
  .rv{opacity:1;transform:none;transition:none}
  .btn,.chip,.qa__a,.qa__a p,.qa__icon,.tabs__pill,.chips__pill,.panel,
  .links a,.footer .socials a,.fc,.knob,.pain,.pain::before,
  .page,.info > *,.step__body,.step__node,.bar__seg{transition:none}

  /* Hero (and the about page head, which reuses .w / .reveal) */
  .w,.reveal,.hero .bars i{opacity:1 !important;transform:none !important;filter:none !important;animation:none !important}
  .hero .card{opacity:1 !important;animation:none !important;transform:rotate(var(--r)) !important}
  .hero .hl path{stroke-dashoffset:0;animation:none !important}
  .badge__dot{animation:none}
  .dot-canvas{transition:none}

  /* Problem */
  .bs-spinner{animation:none}

  /* Pricing */
  .plans .plan{opacity:1;transform:none;translate:none;transition:none}

  /* Process */
  .step:not(.is-active) .step__body{opacity:1}

  /* Testimonials */
  .cards .card.rv{opacity:1;transform:none;transition:none}
}


/* ==========================================================================
   17. PAGE CHROME  —  shared by about-groweb.html and groweb-work.html
   ========================================================================== */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-size:13.5px;font-weight:500;color:var(--brand)}

/* Inner-page H1. Only direct children become blocks, so the word-by-word
   spans (.w) inside the about page head stay inline. */
.h-title{font-weight:500;font-size:clamp(2.2rem,4.4vw,3.8rem);line-height:1.32;letter-spacing:-.015em;will-change:transform}
.h-title > span{display:block}
.h-title__muted{color:var(--soft-ink)}
.h-sub{margin-top:24px;max-width:620px;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:2;color:var(--muted)}
.h-sub strong{color:var(--ink);font-weight:500}

/* Closing CTA strip at the bottom of each inner page */
.page-cta{margin-top:104px}
.page-cta__inner{
  position:relative;padding:40px 44px;border-radius:30px;background:var(--ink);color:#fff;
  overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:22px 40px;flex-wrap:wrap;
}
.page-cta__inner::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(138,132,230,.35) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to left,transparent 35%,#000);mask-image:linear-gradient(to left,transparent 35%,#000);
}
.page-cta strong{display:block;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:500;line-height:1.55}
.page-cta p{margin-top:8px;font-size:1rem;line-height:1.85;color:rgba(255,255,255,.68)}
.page-cta .btn{height:58px;padding:0 30px;font-size:16.5px}

/* Inner pages breathe a little before the footer */
body.page-about .footer,
body.page-work  .footer{margin-top:40px}

@media (max-width:640px){
  .wrap{padding:0 18px}
  .page-cta{margin-top:72px}
  .page-cta__inner{padding:28px 22px;border-radius:24px}
  .page-cta .btn{width:100%}
}


/* ==========================================================================
   18. ABOUT PAGE  —  about-groweb.html
   ========================================================================== */

/* --- Head (reuses .dot-canvas, .glow, .w and .reveal from the hero) ------- */
.about-head{
  position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,80vh,840px);padding:158px 0 80px;
}
.about-head > .wrap{width:100%}

/* --- Swap list: what most sites say vs what we write ---------------------- */
.swap{padding:104px 0 0}
.swap__head{max-width:640px}
.swap h2{margin-top:12px;font-weight:500;font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.45;letter-spacing:-.01em}
.swap__lead{margin-top:16px;font-size:1.02rem;line-height:1.95;color:var(--muted)}

.rows{margin-top:44px;border-top:1px solid var(--line)}
.rows__labels{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:0 16px;padding:0 22px 12px;font-size:13px;color:var(--muted)}
.rows__labels span:last-child{font-weight:500;color:var(--ink)}

.row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  align-items:center;gap:0 16px;padding:26px 22px;border-bottom:1px solid var(--line);cursor:default;
  transition:background .35s, box-shadow .35s;
}
.row:hover,.row:focus-within{background:#fff;box-shadow:0 26px 52px -38px rgba(38,37,46,.4);outline:none}

.said{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.7;color:var(--muted);transition:color .35s}
.said s{text-decoration-color:rgba(107,106,118,.55);text-decoration-thickness:1.5px}
.sells{font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.7;font-weight:500;transition:color .35s}
.row:hover .sells,.row:focus-within .sells{color:var(--brand-deep)}

.arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;justify-self:center;
  background:var(--bg);color:var(--soft-ink);border:1px solid var(--line);
  transition:background .4s var(--ease), color .4s, border-color .4s, transform .5s var(--ease);
}
.arrow svg{width:19px;height:19px}
.row:hover .arrow,.row:focus-within .arrow{background:var(--brand);border-color:var(--brand);color:#fff;transform:scale(1.08)}

/* The reason opens on hover / focus (and on tap, via .is-open from the script) */
.why{grid-column:1 / -1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.why > div{overflow:hidden}
.why p{
  padding-top:16px;font-size:.95rem;line-height:1.9;color:var(--muted);max-width:760px;
  opacity:0;transform:translateY(-6px);transition:opacity .35s ease, transform .45s var(--ease);
}
.row:hover .why,.row:focus-within .why,.row.is-open .why{grid-template-rows:1fr}
.row:hover .why p,.row:focus-within .why p,.row.is-open .why p{opacity:1;transform:none;transition-delay:.05s}
.row.is-open{background:#fff}

/* --- Principles ---------------------------------------------------------- */
.principles{padding:104px 0 0}
.principles h2{margin-top:12px;max-width:640px;font-weight:500;font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.45;letter-spacing:-.01em}
.grid4{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

/* Named .principle, not .card — the hero and testimonials already use .card */
.principle{
  position:relative;isolation:isolate;padding:32px 30px;border-radius:26px;background:#fff;
  border:1px solid var(--line);box-shadow:0 30px 60px -52px rgba(38,37,46,.45);
  --mx:50%;--my:0%;
}
.principle::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(108,99,232,.9),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
}
.grid4.is-hovering .principle::before{opacity:1}
.principle__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.principle__ico svg{width:25px;height:25px}
.principle h3{margin-top:20px;font-size:1.22rem;font-weight:500;line-height:1.55}
.principle p{margin-top:10px;font-size:.97rem;line-height:1.95;color:var(--muted)}

/* --- Founder ------------------------------------------------------------- */
.founder{padding:104px 0 0}
.founder__inner{padding:44px;border-radius:32px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -64px rgba(38,37,46,.5)}
.founder h2{font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.5}
.founder__role{margin-top:6px;font-size:.98rem;color:var(--brand);font-weight:500}
.founder p{margin-top:16px;max-width:560px;font-size:1rem;line-height:2;color:var(--muted)}
.founder__facts{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.founder__facts li{padding:9px 15px;border-radius:14px;background:var(--bg);font-size:13.5px;line-height:1.5}

/* --- About responsive ---------------------------------------------------- */
@media (max-width:980px){
  .about-head{padding-top:132px}
  .swap,.principles,.founder{padding-top:80px}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .founder__inner{padding:32px}
}
@media (max-width:720px){
  /* The two phrases stack, with the arrow turning down between them */
  .rows__labels{display:none}
  .row{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 16px}
  .arrow{justify-self:start;width:38px;height:38px;transform:rotate(-90deg)}
  .arrow svg{width:17px;height:17px}
  .row:hover .arrow,.row:focus-within .arrow{transform:rotate(-90deg) scale(1.08)}
  .why p{padding-top:12px}
}
@media (max-width:640px){
  .about-head{padding:116px 0 56px;min-height:clamp(440px,66vh,620px)}
  .about-head .h-title{font-size:1.85rem}
  .swap,.principles,.founder{padding-top:64px}
  .principle{padding:26px 22px;border-radius:22px}
  .founder__inner{padding:24px 20px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  .arrow,.why,.why p,.principle::before{transition:none}
}


/* ==========================================================================
   19. WORK PAGE  —  groweb-work.html
   ========================================================================== */

.work-head{padding:158px 0 0}
.work-head .h-sub{margin-top:20px;max-width:560px;font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.95}

/* --- Filter toolbar ------------------------------------------------------ */
.toolbar{margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:18px 32px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:14.5px;line-height:1.4;
  transition:background .3s, color .3s, border-color .3s, transform .35s var(--ease);
}
.filter span{font-size:12.5px;color:var(--muted);transition:color .3s}
.filter:hover{transform:translateY(-2px);border-color:rgba(38,37,46,.2)}
.filter[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.filter[aria-checked="true"] span{color:rgba(255,255,255,.6)}
.toolbar .hint{margin-top:0;gap:9px}

/* --- Project grid -------------------------------------------------------- */
.projects{max-width:var(--wrap);margin:44px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}

/* Named .project, not .work — .work is the home page's section class */
.project{display:flex;flex-direction:column}
.project.is-hidden{display:none}
.project:hover .frame{box-shadow:0 46px 84px -50px rgba(38,37,46,.6);transform:translateY(-4px)}

/* Browser frame, sized a touch smaller than the one on the home page */
body.page-work .frame{border-radius:22px;box-shadow:0 36px 70px -52px rgba(38,37,46,.55);transition:box-shadow .45s var(--ease), transform .45s var(--ease)}
body.page-work .frame__bar{height:42px;gap:12px;padding:0 14px}
body.page-work .frame__dots{gap:6px}
body.page-work .frame__dots i{width:10px;height:10px}
body.page-work .frame__url{max-width:300px;height:26px;font-size:12.5px;overflow:hidden;white-space:nowrap}
body.page-work .frame__url svg{flex:none;width:12px;height:12px}
.frame__spacer{width:42px}

/* The screenshot scrolls itself while the pointer rests on the card */
body.page-work .viewport{aspect-ratio:4/3;cursor:auto}
body.page-work .viewport img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;transform:translate3d(0,0,0);transition:transform 0s linear}
.project.is-playing .viewport img{transition-timing-function:cubic-bezier(.4,0,.5,1)}
/* On touch the frame stays put — seven scrollable cards would trap the page scroll */
body.is-touch .viewport{overflow:hidden}
body.is-touch .viewport img{transition:none !important;transform:none !important}
body.is-touch .toolbar .hint{display:none}

.project__meta{padding:22px 4px 0}
.project__cat{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted)}
body.page-work .swatch{width:13px;height:13px;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line)}
.project__meta h2{margin-top:8px;font-size:1.5rem;font-weight:500;line-height:1.5}
.project__desc{margin-top:10px;max-width:520px;font-size:.98rem;line-height:1.95;color:var(--muted)}
.project__tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.project__tags li{padding:7px 13px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--ink)}
.project__link{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:500;color:var(--brand);padding-bottom:3px;border-bottom:1.5px solid var(--brand)}
.project__link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.project__link:hover svg{transform:translate(-3px,-3px)}

.empty{grid-column:1 / -1;padding:64px 0;text-align:center;color:var(--muted)}

/* --- Work page responsive ------------------------------------------------ */
@media (max-width:1000px){
  .projects{grid-template-columns:minmax(0,1fr);gap:48px;max-width:640px}
  .work-head{padding-top:132px}
}
@media (max-width:640px){
  .work-head{padding:116px 0 0}
  .work-head .h-title{font-size:1.85rem}
  .projects{padding:0 18px;margin-top:32px}
  .toolbar{margin-top:28px}
  .filter{padding:10px 14px;font-size:14px}
  .toolbar .hint{display:none}
  body.page-work .frame{border-radius:18px}
  .project__meta{padding:18px 2px 0}
}
@media (prefers-reduced-motion:reduce){
  body.page-work .viewport img{transition:none !important}
  .project:hover .frame{transform:none}
}