/* ============================================================
   Arivo — marketing design system: "Sticker Sheet"
   The Arivo robot is the brand. Pages are sheets of die-cut
   stickers: drenched Arivo orange, white vinyl, and the black of
   the robot's visor. Display: M PLUS Rounded 1c. Body: Figtree.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  /* palette */
  --orange:#F26A1B;          /* the sheet */
  --orange-hot:#FF8A3D;      /* glossy highlight */
  --orange-ink:#B8420E;      /* orange text on white (AA) */
  --peach:#FFE9DA;           /* soft field */
  --peach-2:#FFD9BF;
  --cream:#FFF4EA;           /* the sheet's backing paper: hero + feature fields */
  --cream-line:#FBDCC3;
  --visor:#17140F;           /* the robot's face */
  --visor-2:#26211B;
  --white:#FFFFFF;
  --ink:#17140F;
  --ink-2:#4A4540;
  --ink-3:#6B645D;
  --line:rgba(23,20,15,0.12);
  --line-strong:rgba(23,20,15,0.22);
  --green:#0F7A5A;
  --amber:#B7791F;
  --red:#C23B32;

  /* legacy aliases still referenced by inline styles in templates */
  --bg:#FFFFFF;
  --bg-soft:var(--peach);
  --bg-ink:var(--visor);
  --text-1:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --brand:var(--orange);
  --brand-deep:var(--orange-ink);
  --brand-2:var(--green);
  --teal:var(--green);
  --rose:var(--red);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --brand-soft:rgba(242,106,27,0.1);
  --brand-soft-2:rgba(15,122,90,0.1);
  --teal-soft:rgba(15,122,90,0.1);

  /* sticker physics */
  --die:6px;                                   /* white die-cut margin */
  --lift:0 14px 24px -12px rgba(23,20,15,0.38), 0 2px 4px rgba(23,20,15,0.08);
  --lift-hi:0 22px 34px -14px rgba(23,20,15,0.42), 0 3px 6px rgba(23,20,15,0.1);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:24px;
  --radius-xl:32px;

  --ff-display:'M PLUS Rounded 1c', 'Figtree', ui-rounded, system-ui, sans-serif;
  --ff-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --settle:cubic-bezier(0.22, 1, 0.36, 1);

  --section:120px;
  --measure:62ch;
}

/* ============ BASE ============ */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  background:var(--white);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul, ol{ list-style:none; }
img{ max-width:100%; display:block; }
h1, h2, h3, h4{ font-family:var(--ff-display); font-weight:800; letter-spacing:-0.02em; text-wrap:balance; }
p{ text-wrap:pretty; }

::selection{ background:var(--orange); color:var(--white); }
:focus-visible{ outline:3px solid var(--visor); outline-offset:3px; border-radius:6px; }
html{ scrollbar-color:var(--orange) var(--peach); }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.grad{ color:var(--white); }
.text-center{ text-align:center; }
.mt-16{ margin-top:16px; }
.eyebrow{ display:none; }

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:4px;
  z-index:400; background:var(--visor);
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
}

/* ============ HEADER ============ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--white);
  box-shadow:0 1px 0 var(--cream-line);
  transition:box-shadow .3s var(--ease);
}
.header.scrolled{ box-shadow:0 1px 0 var(--cream-line), 0 12px 28px -20px rgba(184,66,14,0.35); }
@media (max-width: 720px){
  .header{ transition:transform .28s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
  .header.mobile-hidden{ transform:translateY(-100%); }
}
.nav{ padding:14px 0; }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-display); font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--ink);
  flex-shrink:0;
}
.logo-mark{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--orange);
  box-shadow:0 0 0 3px var(--white), var(--lift);
  overflow:hidden; transform:rotate(-6deg);
  transition:transform .4s var(--settle);
}
.logo-word{ display:block; height:34px; width:auto; transition:transform .4s var(--settle); }
.logo:hover .logo-word{ transform:rotate(-2deg) scale(1.03); }
.logo-chip{ display:inline-flex; padding:10px 18px; border-radius:16px; background:var(--white); box-shadow:var(--lift); transform:rotate(-2deg); }
.logo-chip .logo-word{ height:32px; }
.logo:hover .logo-mark{ transform:rotate(4deg) scale(1.05); }
.logo-mark.logo-img img{ width:100%; height:100%; object-fit:contain; }
.logo-mark svg{ width:20px; height:20px; }

/* nav links + dropdowns */
.nav-group{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }
.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 14px; border-radius:999px;
  font-size:15.5px; font-weight:600; color:var(--ink);
  transition:background .2s var(--ease);
}
.nav-link:hover{ background:var(--cream); color:var(--orange-ink); }
.nav-link.current{ background:var(--peach); color:var(--orange-ink); }
.nav-link .chev{ width:15px; height:15px; transition:transform .3s var(--ease); }
.nav-item.open .nav-link .chev{ transform:rotate(180deg); }

.dropdown{ display:none; }

.drop-link{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; border-radius:var(--radius-m);
  transition:background .18s var(--ease);
}
.drop-link:hover{ background:var(--peach); }
.drop-link .d-ic{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--white);
  box-shadow:0 0 0 3px var(--white), 0 4px 10px -4px rgba(23,20,15,0.4);
}
.drop-link:nth-child(3n+3) .d-ic{ background:var(--visor); }
.drop-link:nth-child(3n+4) .d-ic{ background:var(--peach-2); color:var(--orange-ink); }
.drop-link .d-ic svg{ width:16px; height:16px; }
.drop-link .d-tx{ line-height:1.3; padding-top:1px; }
.drop-link .d-tx b{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); }
.drop-link .d-tx span{ font-size:13.5px; color:var(--ink-3); }

.dropdown-mega{ position:fixed; top:0; left:0; right:0; padding-top:calc(var(--header-h, 72px) + 12px); pointer-events:none; }
.dropdown-mega .mega-wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
.dropdown-mega .mega-panel{
  background:var(--white); border-radius:var(--radius-l);
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1px) var(--line), 0 30px 60px -24px rgba(23,20,15,0.4);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(260px,1.15fr); gap:18px;
  padding:22px;
  opacity:0; transform:translateY(-8px) rotate(-0.4deg);
  transition:opacity .24s var(--ease), transform .3s var(--settle);
  pointer-events:none;
}
.nav-item.open .dropdown-mega .mega-panel,
.nav-item:hover .dropdown-mega .mega-panel{ opacity:1; transform:none; pointer-events:auto; }
.dropdown-mega .mega-panel.company-panel{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:720px; margin-left:auto; }
.dropdown-mega .mega-panel::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mega-col h6{
  font-family:var(--ff-display); font-size:12.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--orange-ink); padding:6px 12px 8px;
}
.mega-feature{
  display:block; position:relative; border-radius:var(--radius-m); overflow:hidden;
  background:var(--visor); color:var(--white); margin-top:4px;
  transition:transform .35s var(--settle);
}
.mega-feature:hover{ transform:rotate(-1deg) translateY(-2px); }
.mega-feature .mf-img{ height:120px; position:relative; display:flex; align-items:center; justify-content:center; background:var(--orange); }
.mega-feature .mf-video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega-feature .mf-play, .mega-feature .mf-ghost-ico{
  position:relative; z-index:1; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--orange);
  box-shadow:0 8px 20px -8px rgba(0,0,0,0.5);
}
.mega-feature .mf-play svg{ width:18px; height:18px; margin-left:2px; }
.mega-feature .mf-ghost-ico svg{ width:20px; height:20px; }
.mega-feature .mf-body{ padding:14px 16px 16px; }
.mega-feature .mf-body b{ display:block; font-family:var(--ff-display); font-size:15.5px; font-weight:800; margin-bottom:4px; }
.mega-feature .mf-body span{ font-size:13.5px; color:rgba(255,255,255,0.72); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* header actions */
.nav-actions{ display:flex; align-items:center; gap:8px; }
.nav-actions .btn{ padding:10px 18px; font-size:15px; }

/* mobile menu button */
.menu-btn{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--peach); color:var(--orange-ink);
}
.menu-btn svg{ width:20px; height:20px; }

/* mobile nav panel */
.nav-panel{
  position:fixed; inset:0; z-index:340;
  width:100%; height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--cream);
  visibility:hidden; transform:translateY(-100%);
  transition:transform .4s var(--ease), visibility .4s;
}
.nav-panel.open{ visibility:visible; transform:translateY(0); }
.np-bar{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; padding-top:calc(16px + env(safe-area-inset-top));
}
.np-title{ font-family:var(--ff-display); font-size:22px; font-weight:800; color:var(--ink); }
.np-close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--peach); color:var(--orange-ink); }
.np-close svg{ width:20px; height:20px; }
.np-inner{
  flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  padding:8px 20px calc(24px + env(safe-area-inset-bottom));
}
.m-acc{ background:var(--white); border-radius:var(--radius-m); box-shadow:var(--lift); }
.m-acc-head{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; font-family:var(--ff-display); font-size:19px; font-weight:800; color:var(--ink);
}
.m-acc-head .chev{ width:18px; height:18px; transition:transform .3s var(--ease); }
.m-acc.open .m-acc-head .chev{ transform:rotate(180deg); }
.m-acc-body{ display:none; padding:0 8px 10px; }
.m-acc.open .m-acc-body{ display:block; animation:fadeUp .3s var(--ease); }
.m-link{ display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:12px; font-size:16.5px; font-weight:600; color:var(--ink-2); }
.m-link:hover{ background:var(--peach); color:var(--ink); }
.np-inner > .m-link{ padding:16px 18px; background:var(--white); border-radius:var(--radius-m); box-shadow:var(--lift); font-family:var(--ff-display); font-size:19px; font-weight:800; color:var(--ink); }
.m-link.current{ color:var(--orange-ink); }
.m-auth{ margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:10px; }
.m-auth .btn{ width:100%; }
body.menu-open{ overflow:hidden; }

/* ============ BUTTONS ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:999px;
  font-family:var(--ff-display); font-size:16.5px; font-weight:800; white-space:nowrap;
  transition:transform .35s var(--settle), box-shadow .3s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn svg{ width:18px; height:18px; stroke-width:2.4; }
.btn:hover{ transform:translateY(-2px) rotate(-1deg); }
.btn:active{ transform:translateY(0) scale(0.98); }
.btn-primary{ background:var(--orange); color:var(--white) !important; box-shadow:0 0 0 3px var(--white), var(--lift); }
.btn-primary:hover{ background:#E35C10; box-shadow:0 0 0 3px var(--white), var(--lift-hi); }
.btn-ghost{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn-ghost:hover{ background:var(--peach); }
.btn-block{ width:100%; }
.btn-block:hover{ transform:translateY(-2px); }
/* on the cream sheet: ghost is a white sticker with an orange-ink outline */
.on-orange .btn-ghost, .hero .btn-ghost{ background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--cream-line), var(--lift); }
.on-orange .btn-ghost:hover, .hero .btn-ghost:hover{ background:var(--white); box-shadow:inset 0 0 0 2px var(--orange), var(--lift-hi); }
.nav-actions .btn-primary{ box-shadow:0 8px 16px -10px rgba(184,66,14,0.8); }
.nav-actions .btn-ghost{ background:transparent; box-shadow:inset 0 0 0 2px var(--cream-line); }
.nav-actions .btn-ghost:hover{ background:var(--cream); box-shadow:inset 0 0 0 2px var(--orange); }

/* ============ PILLS ============ */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:var(--white); color:var(--ink);
  font-family:var(--ff-display); font-size:14px; font-weight:800;
  box-shadow:var(--lift); transform:rotate(-2deg);
}
.pill svg{ width:14px; height:14px; color:var(--orange); }
.pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; }

/* ============ SECTION HEADS ============ */
.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(34px, 4.6vw, 58px); line-height:1.06; }
.section-head p{ margin-top:18px; font-size:19px; color:var(--ink-2); line-height:1.55; max-width:42em; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.section-pad{ padding:var(--section) 0; }
.section-band{ background:var(--peach); }
.on-orange{ background:var(--cream); }
.on-orange .section-head p{ color:var(--ink-2); }

/* ============ REVEAL: stick-on ============ */
.reveal{ opacity:0; transform:translateY(18px) scale(0.97) rotate(var(--r, 0deg)); transition:opacity .7s var(--ease), transform .8s var(--settle); }
.reveal.in-view{ opacity:1; transform:rotate(var(--r, 0deg)); }
.reveal-stagger > *{ transition-delay:calc(var(--i, 0) * 80ms); }

/* ============================================================
   HOME
   ============================================================ */

/* ---- hero: the orange sheet ---- */
.hero{ position:relative; overflow:hidden; background:var(--cream); padding:128px 0 0; }
.hero::before{ /* faint die-cut dot grain on the sheet */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(242,106,27,0.16) 1.4px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; }
.hero-copy{ position:relative; z-index:2; padding-bottom:64px; }
.hero h1{ font-size:clamp(42px, 5.2vw, 76px); line-height:1; letter-spacing:-0.035em; color:var(--ink); }
.hero h1 .grad{ color:var(--orange-ink); }
.hero .lead{ margin-top:26px; font-size:clamp(18px, 1.6vw, 21px); line-height:1.5; color:var(--ink-2); max-width:32em; font-weight:500; }
.hero-ctas{ margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-trust{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-trust span{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px 7px 10px; border-radius:999px;
  background:rgba(255,255,255,0.24); color:var(--ink);
  font-size:14.5px; font-weight:700;
}
.hero-trust svg{ width:16px; height:16px; stroke-width:2.6; }

/* hero pipeline: channels -> Arivo -> outcomes */
.flow{ position:relative; display:grid; row-gap:58px; padding:6px 0 60px; }
.flow-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.flow-line{ fill:none; stroke:#F0B088; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1 9; animation:flowDash 1.6s linear infinite; }
.flow-line.out{ stroke-dasharray:7 7; }
.flow-line.is-on{ stroke:var(--orange); stroke-width:3; stroke-dasharray:8 8; animation-duration:.6s; }
@keyframes flowDash{ to{ stroke-dashoffset:-20; } }
.flow-packet{ fill:var(--orange); stroke:var(--white); stroke-width:3; opacity:0; filter:drop-shadow(0 3px 4px rgba(184,66,14,0.45)); }

.flow-row{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.flow-node{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.flow-node b{ font-family:var(--ff-display); font-size:14px; font-weight:800; color:var(--ink-2); transition:color .3s var(--ease); }
.fn-ic{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--white); color:var(--orange-ink);
  box-shadow:0 0 0 2px var(--cream-line), var(--lift);
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.fn-ic.web{ color:var(--visor); }
.fn-ic.whatsapp{ color:#1F8F5B; }
.flow-node.is-on b{ color:var(--ink); }
.flow-node.is-on .fn-ic{ background:var(--orange); color:var(--white); box-shadow:0 0 0 4px var(--white), 0 0 0 6px var(--orange), var(--lift-hi); }
.flow-node.is-on .fn-ic.web{ background:var(--visor); box-shadow:0 0 0 4px var(--white), 0 0 0 6px var(--visor), var(--lift-hi); }
.flow-node.is-on .fn-ic.whatsapp{ background:#1F8F5B; box-shadow:0 0 0 4px var(--white), 0 0 0 6px #1F8F5B, var(--lift-hi); }

.flow-hub{ position:relative; z-index:1; justify-self:center; display:flex; flex-direction:column; align-items:center; }
.flow-hub picture{ display:contents; }
.flow-hub .robot{
  width:190px; height:190px; object-fit:contain;
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 16px 18px rgba(184,66,14,0.25));
  animation:robotFloat 4.5s ease-in-out infinite;
  user-select:none; pointer-events:none;
}
@keyframes robotFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
.flow-status{
  display:flex; align-items:center; gap:9px; width:min(330px, 88vw); height:42px; margin-top:4px; padding:0 16px 0 6px;
  border-radius:999px; background:var(--white); box-shadow:0 0 0 2px var(--cream-line), var(--lift);
  font-size:14.5px; font-weight:600; color:var(--ink);
}
.fs-ch{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--peach); color:var(--orange-ink); font-size:14px; }
.fs-tx{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flow-status.is-done .fs-ch{ background:var(--orange); color:var(--white); }

/* the verb stickers riding the sheet's bottom edge */
.verb-strip{
  position:relative; z-index:4;
  background:var(--cream);
  padding:0 0 64px;
}
.verb-strip .wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 16px; }
.verb{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px 12px 12px; border-radius:999px;
  background:var(--white); color:var(--ink);
  font-family:var(--ff-display); font-size:17px; font-weight:800;
  box-shadow:0 0 0 2px var(--line), var(--lift);
  transform:rotate(var(--r, 0deg));
}
.verb svg{ width:32px; height:32px; padding:7px; border-radius:50%; background:var(--orange); color:var(--white); stroke-width:2.4; }
.verb.dark{ background:var(--visor); color:var(--white); box-shadow:0 0 0 4px var(--white), var(--lift); }
.verb.dark svg{ background:var(--white); color:var(--visor); }
.verb.peach{ background:var(--peach); }
.verb.peach svg{ background:var(--visor); }

/* ---- statement ---- */
.statement{ padding:108px 0 24px; }
.statement p{
  font-family:var(--ff-display); font-weight:800; letter-spacing:-0.02em;
  font-size:clamp(26px, 3.2vw, 42px); line-height:1.22; color:var(--ink); max-width:24em;
}
.statement p .hl{ color:var(--orange-ink); }
.statement p .muted{ color:var(--ink-3); }

/* ---- capabilities: the sticker sheet ---- */
.sheet{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:34px 28px; align-items:start; }
.cap{
  position:relative; padding:30px 30px 32px; border-radius:var(--radius-xl);
  background:var(--white);
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift);
  transform:rotate(var(--r, 0deg));
  transition:transform .45s var(--settle), box-shadow .3s var(--ease);
}
.cap:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift-hi); }
.cap::after, .pact-col::after, .verb::after, .step-card::after, .value-card::after, .plan::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 38%);
}
.verb, .pact-col, .step-card, .value-card{ position:relative; }
.cap h3{ font-size:26px; line-height:1.12; margin:18px 0 10px; }
.cap p{ font-size:16.5px; color:var(--ink-2); line-height:1.55; max-width:36em; }
.cap .medal{
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--white);
  box-shadow:0 0 0 4px var(--white), 0 8px 16px -8px rgba(23,20,15,0.5);
}
.cap .medal svg{ width:26px; height:26px; stroke-width:2.2; }
.cap.orange{ background:var(--orange); }
.cap.orange p{ color:rgba(23,20,15,0.86); }
.cap.orange .medal{ background:var(--white); color:var(--orange-ink); }
.cap.visor{ background:var(--visor); color:var(--white); }
.cap.visor p{ color:rgba(255,255,255,0.76); }
.cap.peach{ background:var(--peach); }
.cap.big h3{ font-size:clamp(30px, 3vw, 40px); }
.c-1{ grid-column:1 / span 6; --r:-1.5deg; }
.c-2{ grid-column:7 / span 6; --r:1.2deg; margin-top:36px; }
.c-3{ grid-column:1 / span 4; --r:1.4deg; }
.c-4{ grid-column:5 / span 4; --r:-1deg; margin-top:26px; }
.c-5{ grid-column:9 / span 4; --r:1.8deg; }
.c-6{ grid-column:2 / span 10; --r:-0.6deg; }
.cap-row{ display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between; }
.cap-row > div{ flex:1 1 320px; }
.code-pill{
  display:block; width:fit-content; max-width:100%;
  font-family:var(--ff-mono); font-size:14px; line-height:1.6;
  background:var(--visor); color:#FFB27A; border-radius:14px; padding:12px 16px;
  overflow-wrap:anywhere;
}
.code-pill .t{ color:rgba(255,255,255,0.5); }
.cap.visor .code-pill{ background:var(--visor-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12); }

/* ---- journey ---- */
.journey-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.journey-card{ padding:32px; border-radius:var(--radius-xl); background:var(--white); box-shadow:0 0 0 var(--die) var(--white), var(--lift); }
.journey-card.bad{ transform:rotate(-1deg); }
.journey-card.good{ background:var(--visor); color:var(--white); transform:rotate(1deg); }
.journey-card .j-tag{
  display:inline-block; margin-bottom:26px; padding:6px 14px; border-radius:999px;
  font-family:var(--ff-display); font-weight:800; font-size:15px;
  background:var(--peach); color:var(--ink);
}
.journey-card.good .j-tag{ background:var(--orange); color:var(--ink); }
.j-row{ display:flex; align-items:flex-start; }
.j-step{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; flex:1 1 0; min-width:0; }
.j-node{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--peach); }
.j-node svg{ width:21px; height:21px; stroke-width:2.2; color:var(--ink); }
.j-step span{ font-size:15.5px; font-weight:600; line-height:1.3; padding-right:8px; }
.j-card-bad .j-step span{ color:var(--ink-2); }
.j-card-bad .j-node.exit{ background:var(--red); }
.j-card-bad .j-node.exit svg{ color:var(--white); }
.j-card-good .j-node{ background:rgba(255,255,255,0.1); }
.j-card-good .j-node svg{ color:var(--white); }
.j-card-good .j-step:last-child .j-node{ background:var(--orange); box-shadow:0 0 0 4px var(--white); }
.j-card-good .j-step:last-child span{ color:var(--orange-hot); font-weight:800; }
.j-conn{ flex:0 0 16px; height:3px; border-radius:2px; margin:23px 8px 0 -10px; background:currentColor; opacity:.2; }

/* ---- channels ---- */
.channels-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
.channel-card{
  padding:28px 26px 30px; border-radius:var(--radius-xl); background:var(--white);
  box-shadow:0 0 0 var(--die) var(--white), var(--lift);
  transform:rotate(var(--r, 0deg));
  transition:transform .45s var(--settle), box-shadow .3s var(--ease);
}
.channel-card:hover{ transform:rotate(0) translateY(-6px); box-shadow:0 0 0 var(--die) var(--white), var(--lift-hi); }
.channel-card:nth-child(4n+1){ --r:-1.6deg; }
.channel-card:nth-child(4n+2){ --r:1.2deg; }
.channel-card:nth-child(4n+3){ --r:-0.8deg; }
.channel-card:nth-child(4n+4){ --r:1.6deg; }
.channel-icon{
  width:58px; height:58px; border-radius:18px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--white);
  box-shadow:0 0 0 4px var(--white), 0 8px 16px -8px rgba(23,20,15,0.5);
  transform:rotate(-6deg);
}
.channel-icon svg{ width:27px; height:27px; stroke-width:2.2; }
.channel-icon.web{ background:var(--visor); }
.channel-icon.whatsapp{ background:#1F8F5B; }
.channel-icon.email{ background:var(--orange); }
.channel-icon.sms{ background:var(--peach-2); color:var(--orange-ink); }
.channel-card h3{ font-size:28px; line-height:1.1; }
.channel-kicker{ margin:6px 0 14px; font-size:15px; font-weight:700; color:var(--orange-ink); }
.channel-card p{ color:var(--ink-2); font-size:16px; line-height:1.55; }
.channel-status{ display:inline-flex; align-items:center; gap:7px; margin-top:20px; padding:6px 12px; border-radius:999px; background:var(--peach); font-size:14px; font-weight:700; }
.channel-status svg{ width:15px; height:15px; stroke-width:2.6; color:var(--green); }

/* ---- channels: one conversation hopping across the sheet ---- */
.hop{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; list-style:none; }
.hop::before{ /* the path the conversation travels */
  content:""; position:absolute; left:6%; right:6%; top:44px; height:0;
  border-top:4px dashed var(--peach-2);
}
.hop-stop.reveal{ transform:translateY(18px) scale(0.97); }
.hop-stop.reveal.in-view{ transform:none; }
.hop-stop{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.hop-ic{
  width:88px; height:88px; border-radius:50%; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--white);
  box-shadow:0 0 0 7px var(--white), 0 0 0 9px var(--line), var(--lift);
  transform:rotate(var(--r, 0deg));
  transition:transform .45s var(--settle);
}
.hop-stop:hover .hop-ic{ transform:rotate(0) translateY(-6px) scale(1.04); }
.hop-ic svg{ width:36px; height:36px; stroke-width:2.1; color:inherit; }
.hop-ic.web{ background:var(--visor); }
.hop-ic.whatsapp{ background:#1F8F5B; }
.hop-ic.sms{ background:var(--peach-2); color:var(--orange-ink); }
.hop-stop b{ font-family:var(--ff-display); font-size:26px; font-weight:800; letter-spacing:-0.015em; }
.hop-stop > span:not(.hop-ic){ font-size:16.5px; color:var(--ink-2); line-height:1.5; max-width:22ch; }

/* ---- visor sticker (the robot's face, die-cut) ---- */
.visor-sticker{
  width:230px; height:150px; margin-top:40px; border-radius:64px;
  display:flex; align-items:center; justify-content:center;
  background:var(--visor); color:var(--orange);
  box-shadow:0 0 0 8px var(--white), var(--lift-hi);
  transform:rotate(-7deg);
}
.visor-sticker svg{ width:130px; }

/* ---- steps ---- */
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px; align-items:start; }
.step-card{ padding:34px 30px; border-radius:var(--radius-xl); background:var(--white); box-shadow:var(--lift); transform:rotate(var(--r, 0deg)); }
.step-card:nth-child(1){ --r:-1.2deg; }
.step-card:nth-child(2){ --r:0.8deg; margin-top:30px; }
.step-card:nth-child(3){ --r:-0.6deg; margin-top:60px; }
.step-num{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:22px;
  font-family:var(--ff-display); font-size:30px; font-weight:800; line-height:1;
  background:var(--visor); color:var(--orange-hot);
  box-shadow:0 0 0 5px var(--white), 0 10px 18px -8px rgba(23,20,15,0.5);
  transform:rotate(-8deg);
}
.step-card h3{ font-size:26px; line-height:1.12; margin-bottom:10px; }
.step-card p{ font-size:16.5px; color:var(--ink-2); line-height:1.55; }
.snippet{
  width:fit-content; max-width:100%; margin-top:20px;
  font-family:var(--ff-mono); font-size:13.5px; line-height:1.6;
  background:var(--visor); color:#FFB27A; border-radius:14px; padding:12px 16px; overflow-wrap:anywhere;
}
.snippet .t{ color:rgba(255,255,255,0.5); }
.snippet .s{ color:#FFD4B0; }

/* ---- founding businesses ---- */
.pact{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px; align-items:start; }
.pact-col{ padding:32px 30px 34px; border-radius:var(--radius-xl); box-shadow:0 0 0 var(--die) var(--white), var(--lift); transform:rotate(var(--r, 0deg)); }
.pact-col:nth-child(1){ background:var(--orange); --r:-1.4deg; }
.pact-col:nth-child(2){ background:var(--white); --r:1deg; margin-top:24px; }
.pact-col:nth-child(3){ background:var(--visor); color:var(--white); --r:-0.8deg; }
.pact-col h3{ font-size:25px; line-height:1.18; letter-spacing:-0.015em; }
.pact-col p{ margin-top:14px; font-size:16.5px; font-weight:500; line-height:1.55; opacity:.86; }

/* ---- early access ---- */
.ea-grid{ display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1fr); gap:64px; align-items:start; }
.ea-card{ position:sticky; top:130px; }
.ea-card h2{ font-size:clamp(36px, 4.4vw, 58px); line-height:1.04; }
.ea-card p{ margin-top:20px; font-size:19px; color:var(--ink-2); line-height:1.55; max-width:28em; }
.ea-robot{ width:220px; margin-top:34px; transform:rotate(-8deg); filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 16px 18px rgba(23,20,15,0.25)); }
.price-flag{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding:7px 14px; border-radius:999px; background:var(--white); font-size:15px; font-weight:700; box-shadow:var(--lift); transform:rotate(-1.5deg); }
.price-flag svg{ width:16px; height:16px; color:var(--orange-ink); }
.ea-feats{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.ea-feats li{ display:flex; align-items:center; gap:10px; font-size:16.5px; font-weight:600; }
.ea-feats li svg{ width:20px; height:20px; padding:3px; border-radius:50%; background:var(--orange); color:var(--white); stroke-width:3; }

/* ---- forms ---- */
.form-card{
  position:relative; border-radius:var(--radius-xl); background:var(--white); padding:40px;
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift-hi);
  transform:rotate(0.6deg);
}
.form-h{ font-family:var(--ff-display); font-size:28px; font-weight:800; letter-spacing:-0.02em; margin-bottom:6px; }
.form-sub{ font-size:16px; color:var(--ink-2); margin-bottom:26px; }
.f-row{ margin-bottom:18px; }
.f-row label{ display:block; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.f-row input, .f-row select, .f-row textarea{
  width:100%; padding:13px 16px; border-radius:16px;
  background:var(--white); border:2px solid var(--peach-2);
  color:var(--ink); font-size:16.5px; font-family:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f-row input:hover, .f-row select:hover, .f-row textarea:hover{ border-color:#FFC49B; }
.f-row textarea{ resize:vertical; min-height:110px; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(242,106,27,0.18); }
.f-row input::placeholder, .f-row textarea::placeholder{ color:var(--ink-3); }
.f-row select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B8420E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.form-card .btn-block{ margin-top:8px; }
.form-fields.hide{ display:none; }
.form-success{ display:none; text-align:center; padding:30px 0 10px; }
.form-success.show{ display:block; animation:fadeUp .5s var(--ease); }
.success-icon{ width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; color:var(--white); box-shadow:0 0 0 5px var(--white), var(--lift); }
.success-icon svg{ width:28px; height:28px; }
.form-success h3{ font-size:26px; margin-bottom:8px; }
.form-success p{ color:var(--ink-2); font-size:16.5px; max-width:340px; margin:0 auto; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- final cta: the visor ---- */
.final-cta{ position:relative; overflow:hidden; background:var(--visor); color:var(--white); text-align:center; padding:130px 0; }
.final-cta .grid-overlay, .final-cta .glow{ display:none; }
.final-cta .wrap{ position:relative; z-index:1; }
.visor-eyes{ display:block; width:140px; height:auto; margin:0 auto 34px; color:var(--orange); }
.final-cta .pill{ margin-bottom:26px; }
.final-cta h2{ font-size:clamp(38px, 5.6vw, 76px); line-height:1.02; letter-spacing:-0.03em; max-width:15ch; margin:0 auto 22px; }
.final-cta p{ color:rgba(255,255,255,0.74); font-size:20px; max-width:520px; margin:0 auto 40px; }
.final-cta .btn-primary{ box-shadow:0 0 0 3px var(--visor), 0 0 0 6px var(--orange); }

/* ============================================================
   SUBPAGES
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; background:var(--cream); padding:140px 0 88px; }
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(242,106,27,0.16) 1.4px, transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 90%);
}
.page-hero .p-grid{ display:none; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(42px, 6vw, 80px); line-height:1; letter-spacing:-0.035em; max-width:16ch; margin-bottom:22px; }
.page-hero h1 .grad{ color:var(--orange-ink); }
.page-hero p{ font-size:20px; font-weight:500; color:var(--ink-2); max-width:34em; line-height:1.5; }
.crumbs{ display:flex; align-items:center; gap:8px; margin-bottom:26px; font-size:14.5px; font-weight:700; color:rgba(23,20,15,0.8); }
.crumbs a{ padding:4px 10px; border-radius:999px; background:var(--white); color:var(--ink); transition:background .2s var(--ease); }
.crumbs a:hover{ background:var(--peach); color:var(--orange-ink); }
.crumbs svg{ width:14px; height:14px; }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; align-items:stretch; }
.pricing-grid:has(> .plan:only-child){ grid-template-columns:minmax(0,440px); justify-content:center; }
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:38px 34px; border-radius:var(--radius-xl); background:var(--white);
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift);
  transition:transform .45s var(--settle), box-shadow .3s var(--ease);
}
.plan:nth-child(odd){ transform:rotate(-0.8deg); }
.plan:nth-child(even){ transform:rotate(0.8deg); }
.plan:hover{ transform:rotate(0) translateY(-6px); box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift-hi); }
.plan.popular{ background:var(--orange); }
.plan.popular .p-desc, .plan.popular .p-price .per{ color:rgba(23,20,15,0.8); }
.plan.popular ul li svg{ color:var(--ink); }
.plan .flag{
  position:absolute; top:-16px; right:24px; padding:6px 14px; border-radius:999px;
  font-family:var(--ff-display); font-size:13.5px; font-weight:800;
  background:var(--visor); color:var(--white); box-shadow:0 0 0 4px var(--white), var(--lift);
  transform:rotate(4deg);
}
.plan .p-name{ font-family:var(--ff-display); font-size:22px; font-weight:800; }
.plan .p-price{ margin:18px 0 6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.plan .p-price .amt{ font-family:var(--ff-display); font-size:52px; font-weight:800; letter-spacing:-0.04em; line-height:1; }
.plan .p-price .per{ font-size:15.5px; font-weight:600; color:var(--ink-3); }
.plan .p-desc{ font-size:16px; color:var(--ink-2); line-height:1.55; margin-bottom:24px; }
.plan ul{ margin:0 0 30px; display:flex; flex-direction:column; gap:12px; }
.plan ul li{ display:flex; align-items:flex-start; gap:10px; font-size:16px; font-weight:500; }
.plan ul li svg{ width:18px; height:18px; color:var(--orange-ink); flex-shrink:0; margin-top:3px; stroke-width:2.6; }
.plan ul li.off{ color:var(--ink-3); }
.plan ul li.off svg{ color:var(--ink-3); }
.plan .btn{ margin-top:auto; }
.plan.popular .btn-primary{ background:var(--visor); }
.pricing-note{ text-align:center; color:var(--ink-3); font-size:15.5px; margin-top:34px; }

.faq{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ border-radius:var(--radius-l); background:var(--white); box-shadow:0 0 0 2px var(--line); transition:box-shadow .3s var(--ease), transform .35s var(--settle); }
.faq-item.open{ box-shadow:0 0 0 2px var(--orange), var(--lift); transform:rotate(-0.4deg); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; font-family:var(--ff-display); font-size:19px; font-weight:800; text-align:left; color:var(--ink); }
.faq-q .chev{ width:30px; height:30px; padding:6px; border-radius:50%; background:var(--peach); color:var(--orange-ink); flex-shrink:0; transition:transform .3s var(--ease), background .2s; }
.faq-item.open .faq-q .chev{ transform:rotate(180deg); background:var(--orange); color:var(--white); }
.faq-a{ display:none; padding:0 24px 22px; font-size:16.5px; color:var(--ink-2); line-height:1.65; max-width:var(--measure); }
.faq-item.open .faq-a{ display:block; animation:fadeUp .3s var(--ease); }

/* about / company */
.mission{ position:relative; overflow:hidden; border-radius:var(--radius-xl); background:var(--visor); color:var(--white); padding:64px 60px; box-shadow:var(--lift); }
.mission::before, .mission::after{ display:none; }
.mission .wrap{ position:relative; z-index:1; }
.mission h2{ font-size:clamp(32px, 4vw, 50px); line-height:1.06; max-width:18ch; margin-bottom:22px; color:var(--orange-hot); }
.mission p{ color:rgba(255,255,255,0.78); font-size:18.5px; line-height:1.65; max-width:var(--measure); }

.values{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px 30px; }
.value-card{
  padding:30px 28px 32px; border-radius:var(--radius-xl); background:var(--white);
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift);
  transform:rotate(var(--r, 0deg));
  transition:transform .45s var(--settle);
}
.value-card:nth-child(3n+1){ --r:-1.2deg; }
.value-card:nth-child(3n+2){ --r:0.9deg; }
.value-card:nth-child(3n){ --r:-0.5deg; }
.value-card:hover{ transform:rotate(0) translateY(-5px); }
.value-card .v-ic{
  width:54px; height:54px; border-radius:50%; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange) !important; color:var(--white) !important;
  box-shadow:0 0 0 4px var(--white), 0 8px 16px -8px rgba(23,20,15,0.5);
}
.value-card:nth-child(3n+2) .v-ic{ background:var(--visor) !important; }
.value-card .v-ic svg{ width:24px; height:24px; stroke-width:2.2; }
.value-card h3{ font-size:23px; line-height:1.15; margin-bottom:8px; }
.value-card p{ font-size:16.5px; color:var(--ink-2); line-height:1.55; }

.team-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px; }
.team-card{ padding:32px 28px; border-radius:var(--radius-xl); background:var(--white); text-align:center; box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift); }
.team-avatar{
  width:76px; height:76px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:24px; font-weight:800;
  background:var(--orange) !important; color:var(--white);
  box-shadow:0 0 0 5px var(--white), var(--lift);
}
.team-card h3{ font-size:22px; }
.team-card .role{ font-size:15px; font-weight:700; color:var(--orange-ink); margin:4px 0 12px; }
.team-card p{ font-size:16px; color:var(--ink-2); line-height:1.55; }

/* founder */
.founder{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:48px; align-items:center;
  max-width:980px; padding:40px; border-radius:var(--radius-xl); background:var(--white);
  box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift);
}
.founder-photo{
  width:100%; aspect-ratio:2/3; height:auto; object-fit:cover; border-radius:var(--radius-l);
  background:var(--peach); box-shadow:0 0 0 6px var(--white), var(--lift-hi); transform:rotate(-2deg);
}
.founder-body h3{ font-size:clamp(28px, 3vw, 38px); line-height:1.08; }
.founder-body .role{ margin:8px 0 16px; font-size:16px; font-weight:700; color:var(--orange-ink); }
.founder-body > p{ font-size:17.5px; color:var(--ink-2); line-height:1.6; max-width:42em; }
.founder-facts{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.founder-facts li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.45; color:var(--ink-2); }
.founder-facts li b{ color:var(--ink); }
.founder-facts i{ flex-shrink:0; width:30px; height:30px; margin-top:-3px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--peach); color:var(--orange-ink); font-size:13px; }
.founder-links{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.founder-links a{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  font-family:var(--ff-display); font-size:15px; font-weight:800; color:var(--ink);
  background:var(--white); box-shadow:inset 0 0 0 2px var(--cream-line);
  transition:box-shadow .2s var(--ease), background .2s var(--ease), transform .35s var(--settle);
}
.founder-links a:hover{ background:var(--cream); box-shadow:inset 0 0 0 2px var(--orange); transform:translateY(-2px); }
.founder-links i{ color:var(--orange-ink); }
@media (max-width: 860px){
  .founder{ grid-template-columns:1fr; gap:30px; padding:26px 22px; }
  .founder-photo{ max-width:240px; }
}

/* contact */
.contact-grid{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
.contact-cards{ display:flex; flex-direction:column; gap:18px; }
.contact-card{
  display:flex; align-items:flex-start; gap:16px; padding:22px; border-radius:var(--radius-l); background:var(--white);
  box-shadow:0 0 0 2px var(--line);
  transition:transform .35s var(--settle), box-shadow .3s var(--ease);
}
.contact-card:hover{ transform:rotate(-0.8deg) translateY(-3px); box-shadow:0 0 0 2px var(--orange), var(--lift); }
.contact-card .c-ic{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--orange) !important; color:var(--white) !important; }
.contact-card .c-ic svg{ width:20px; height:20px; stroke-width:2.2; }
.contact-card b{ display:block; font-family:var(--ff-display); font-size:18px; font-weight:800; margin-bottom:3px; }
.contact-card a, .contact-card span{ font-size:16px; color:var(--ink-2); line-height:1.5; display:block; }
.contact-card a:hover{ color:var(--orange-ink); }
.text-link{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; color:var(--orange-ink); font-size:16px; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.text-link:hover{ color:var(--ink); }
.text-link svg{ width:16px; height:16px; }

/* careers principles band */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stats-band > *{ padding:26px 24px; border-radius:var(--radius-l); background:var(--visor); color:var(--white); box-shadow:var(--lift); transform:rotate(var(--r, 0deg)); }
.stats-band > :nth-child(odd){ --r:-1.2deg; }
.stats-band > :nth-child(even){ --r:1deg; background:var(--orange); color:var(--ink); }
.stats-band .val{ font-family:var(--ff-display); font-size:40px; font-weight:800; line-height:1; }
.stats-band > :nth-child(odd) .val{ color:var(--orange-hot); }
.stats-band .lbl{ margin-top:12px; font-family:var(--ff-display); font-size:20px; font-weight:800; line-height:1.2; }

/* testimonials (kept for when real quotes exist) */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.testimonial{ padding:32px; border-radius:var(--radius-xl); background:var(--white); box-shadow:var(--lift); }
.testimonial blockquote{ font-family:var(--ff-display); font-weight:800; font-size:21px; line-height:1.3; margin-bottom:22px; }
.t-person{ display:flex; align-items:center; gap:12px; }
.t-avatar{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--white); background:var(--orange); font-weight:800; font-size:14px; flex-shrink:0; }
.t-name{ font-size:15.5px; font-weight:700; }
.t-role{ font-size:14px; color:var(--ink-3); }

/* policy / prose */
.policy-body{ max-width:780px; }
.policy-meta{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:rgba(23,20,15,0.82); margin-top:6px; }
.policy-meta .chip{ font-size:13px; font-weight:800; padding:4px 11px; border-radius:999px; background:var(--visor); color:var(--white); }
.prose{ color:var(--ink-2); font-size:18px; line-height:1.72; max-width:var(--measure); }
.prose h2{ font-size:30px; color:var(--ink); line-height:1.15; margin:56px 0 16px; }
.prose h3{ font-size:21px; color:var(--ink); margin:34px 0 10px; }
.prose p{ margin-bottom:18px; }
.prose a{ color:var(--orange-ink); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.prose a:hover{ color:var(--ink); }
.prose ul, .prose ol{ margin:0 0 20px; padding-left:24px; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-bottom:8px; }
.prose li::marker{ color:var(--orange); }
.prose strong{ color:var(--ink); }
.prose .callout{ background:var(--peach); border-radius:var(--radius-l); padding:22px 26px; margin:28px 0; color:var(--ink); }
.prose .callout p{ margin:0; }

/* videos: shared card + empty state */
.yc{ flex:0 0 320px; scroll-snap-align:start; display:block; }
.yc-thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-l); overflow:hidden; background:var(--visor); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 var(--die) var(--white), var(--lift); transition:transform .45s var(--settle); }
.yc:hover .yc-thumb{ transform:rotate(-1.2deg) translateY(-4px); }
.yc-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yc-play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; background:var(--orange); color:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px var(--white), var(--lift); transform:scale(.9); transition:transform .35s var(--settle); }
.yc-play svg{ width:20px; height:20px; margin-left:2px; fill:currentColor; }
.yc:hover .yc-play{ transform:scale(1.05) rotate(-8deg); }
.yc-body{ padding:16px 4px 0; }
.yc-body h3{ font-size:18px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.yc-body p{ margin-top:5px; font-size:15px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lib-empty{ max-width:500px; padding:40px 36px; border-radius:var(--radius-xl); background:var(--white); text-align:center; box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift); }
.lib-empty-ico{ width:64px; height:64px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--orange) !important; color:var(--white) !important; box-shadow:0 0 0 5px var(--white), var(--lift); }
.lib-empty-ico svg{ width:28px; height:28px; }
.lib-empty h3{ font-size:24px; margin-bottom:8px; }
.lib-empty p{ font-size:16.5px; color:var(--ink-2); line-height:1.55; margin-bottom:22px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--visor); color:var(--white); padding:72px 0 40px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; margin-bottom:56px; }
.footer-brand .logo{ color:var(--white); }
.footer-brand p{ color:rgba(255,255,255,0.62); font-size:16px; max-width:280px; margin-top:16px; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--ff-display); font-size:14px; font-weight:800; letter-spacing:0.04em; color:var(--orange-hot); margin-bottom:16px; }
.footer-col a{ display:block; font-size:16px; color:rgba(255,255,255,0.76); margin-bottom:11px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:14.5px; color:rgba(255,255,255,0.58); }
.footer-bottom a{ color:var(--orange-hot); font-weight:700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .dropdown-mega .mega-panel{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .mega-col.feature-col{ grid-column:1 / -1; }
  .mega-feature .mf-img{ height:96px; }
  .channels-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1000px){
  :root{ --section:96px; }
  .hero-grid{ grid-template-columns:1fr; gap:24px; }
  .hero-copy{ padding-bottom:0; }
  .flow{ width:100%; max-width:540px; margin:0 auto; }
  .sheet{ grid-template-columns:1fr 1fr; gap:34px 26px; }
  .sheet .cap{ grid-column:auto !important; margin-top:0 !important; }
  .sheet .c-1, .sheet .c-6{ grid-column:1 / -1 !important; }
  .pricing-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .values, .team-grid, .pact{ grid-template-columns:1fr 1fr; }
  .pact-col{ margin-top:0 !important; }
  .contact-grid, .ea-grid{ grid-template-columns:1fr; gap:48px; }
  .ea-card{ position:static; }
  .visor-sticker{ display:none; }
  .hop{ grid-template-columns:1fr 1fr; row-gap:48px; }
  .hop::before{ display:none; }
  .stats-band{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; max-width:560px; }
  .step-card{ margin-top:0 !important; }
}
@media (max-width: 860px){
  :root{ --section:80px; --die:5px; }
  .wrap{ padding:0 20px; }
  .nav-group{ display:none; }
  .nav-actions .btn-ghost{ display:none; }
  .menu-btn{ display:flex; }
  .journey-grid, .testimonial-grid{ grid-template-columns:1fr; }
  .page-hero{ padding:130px 0 64px; }
}
@media (max-width: 720px){
  .nav{ padding:12px 0; }
  .nav-actions .btn-primary{ padding:10px 16px; font-size:14.5px; }
  .hero{ padding-top:100px; }
  .flow{ row-gap:44px; padding-bottom:44px; }
  .fn-ic{ width:46px; height:46px; font-size:19px; }
  .flow-node b{ font-size:12.5px; }
  .flow-hub .robot{ width:150px; height:150px; }
  .hero-ctas .btn{ flex:1 1 auto; }
  .hero-trust span{ font-size:13.5px; }
  .verb-strip .wrap{ gap:10px; }
  .verb{ font-size:15px; padding:9px 15px 9px 9px; }
  .verb svg{ width:28px; height:28px; padding:6px; }
  .statement{ padding:80px 0 12px; }
  .sheet, .values, .team-grid, .pact, .channels-grid, .stats-band{ grid-template-columns:1fr; }
  .hop{ grid-template-columns:1fr; row-gap:40px; }
  .verb-strip{ padding-bottom:44px; }
  .cap{ padding:28px 24px 30px; }
  .j-row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 12px; }
  .j-conn{ display:none; }
  .journey-card{ padding:26px 22px; }
  .form-card{ padding:28px 22px; transform:none; }
  .mission{ padding:40px 26px; }
  .final-cta{ padding-top:96px; }
  .faq-q{ font-size:17px; padding:18px; }
  .faq-a{ padding:0 18px 20px; }
  .footer-cols{ gap:36px; }
  .page-hero{ padding-top:120px; }
  .page-hero h1{ font-size:42px; }
  .page-hero p{ font-size:18px; }
}

/* ============ FLASH / FORM STATES (backend) ============ */
.flash-toast{
  position:fixed; top:90px; right:20px; z-index:500;
  display:flex; align-items:flex-start; gap:11px;
  max-width:420px; padding:15px 16px; border-radius:var(--radius-l);
  background:var(--white); box-shadow:0 0 0 var(--die) var(--white), 0 0 0 calc(var(--die) + 1.5px) var(--line), var(--lift-hi);
  animation:fadeUp .45s var(--ease);
}
.flash-toast .flash-ic{ flex-shrink:0; display:flex; }
.flash-toast .flash-ic svg{ width:20px; height:20px; }
.flash-toast.flash-success .flash-ic svg{ color:var(--green); }
.flash-toast.flash-warning .flash-ic svg{ color:var(--amber); }
.flash-toast.flash-error .flash-ic svg{ color:var(--red); }
.flash-toast .flash-tx{ display:flex; flex-direction:column; gap:3px; font-size:15.5px; font-weight:600; color:var(--ink); }
.flash-close{ margin-left:auto; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:var(--ink-3); }
.flash-close:hover{ background:var(--peach); color:var(--ink); }
.flash-close svg{ width:14px; height:14px; }
.form-errors{ border-radius:16px; background:#FDECEA; box-shadow:inset 0 0 0 2px rgba(194,59,50,0.3); padding:14px 16px; margin-bottom:20px; font-size:15px; color:#9B2C24; }
.form-errors p{ margin:0 0 4px; font-weight:700; }
.form-errors ul{ margin:0; padding-left:18px; list-style:disc; }
.form-errors li{ margin-bottom:2px; }
@media (max-width:720px){ .flash-toast{ top:auto; right:14px; bottom:14px; left:14px; max-width:none; } }

/* ============ VIDEO MODAL ============ */
.video-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s; }
.video-modal.open{ opacity:1; visibility:visible; }
.video-modal-backdrop{ position:absolute; inset:0; background:rgba(242,106,27,0.94); }
.video-modal-box{ position:relative; width:100%; max-width:960px; background:var(--white); padding:10px; border-radius:var(--radius-xl); box-shadow:0 40px 90px -30px rgba(23,20,15,0.6); transform:scale(0.95) rotate(-1deg); transition:transform .4s var(--settle); }
.video-modal.open .video-modal-box{ transform:none; }
.video-modal-close{ position:absolute; top:-18px; right:-18px; z-index:2; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--visor); color:var(--white); box-shadow:0 0 0 4px var(--white); cursor:pointer; transition:transform .3s var(--settle); }
.video-modal-close:hover{ transform:rotate(90deg); }
.video-modal-close svg{ width:18px; height:18px; }
.video-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:22px; overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
body.modal-open{ overflow:hidden; }
@media (max-width:720px){ .video-modal{ padding:14px; } .video-modal-close{ top:-14px; right:-6px; } }