/* ============================================================
   High Profile Consultancy — AI Division
   Palette: Looka #48 — perfect red, ochre, grapeseed, off-white
     grapeseed #6061A8 = AI / system / primary
     ochre     #CE8F30 = results, money, things that worked
     red       #ED3224 = losses, problems, urgency
   Every other value is a lighter or darker shade of one of those
   three, or one of the palette's two off-whites. No outside hues.
   Type: Instrument Serif · Google Sans Flex · Fragment Mono
   ============================================================ */
:root{
  --bg:#F4F2EE; --white:#FFFFFF; --ink:#221F2E; --gray:#6A6675; --mid:#565266; --dim:#918D9C;
  --line:#E2DFD8; --panel:#EDEBE6;
  --blue:#6061A8; --blue-deep:#4A4B87; --blue-tint:#EAEAF4; --blue-tint2:#F2F2F9;
  --green:#CE8F30; --green-deep:#9A6A1E; --green-tint:#F9F0E0;
  --amber:#ED3224; --amber-deep:#C4241A; --amber-tint:#FCE8E5;
  --navy:#25264A; --navy-2:#2F3059;
  --purple:#3E3F73; --purple-deep:#2E2F5C; --purple-tint:#E9E9F1;
  --sans:"Google Sans Flex","Google Sans",Inter,system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:"Fragment Mono",ui-monospace,Menlo,monospace;
  --w:1300px; --rail:1360px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{display:block}

.rails{position:fixed;inset:0;pointer-events:none;z-index:0;width:min(var(--rail),100%);margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
main,footer,.nav{position:relative;z-index:1}

section{width:min(var(--rail),100%);margin:0 auto;border-bottom:1px solid var(--line);padding:104px 40px;text-align:center}
section > *{max-width:var(--w);margin-left:auto;margin-right:auto}

/* ---- type ---- */
h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.12;letter-spacing:0}
h3{font-size:44px;line-height:1.2;font-weight:400;letter-spacing:-.01em}
h4{font-size:20px;line-height:1.5;font-weight:500}
h5{font-size:16px;line-height:1.6;font-weight:500}
h6{font-size:13px;line-height:1.6;font-weight:500}
.sub{font-size:15px;line-height:1.6;color:var(--gray);max-width:420px;margin-top:12px;letter-spacing:.01em}
.sub--left{margin-left:0;max-width:520px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:18px;font-size:14px;line-height:1;letter-spacing:-.01em;white-space:nowrap;font-weight:500;transition:transform .25s var(--ease),background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 6px 18px -8px rgba(49,87,229,.6)}
.btn--blue:hover{background:var(--blue-deep)}
.btn--ghost{background:rgba(18,19,22,.06);color:var(--ink)}
.btn--ghost:hover{background:rgba(18,19,22,.1)}

/* ---- the "+ corner" label tag ---- */
.tag{position:relative;display:inline-block;background:var(--blue);color:#fff;font-size:13px;line-height:1;padding:7px 9px;letter-spacing:.02em}
.tag i{position:absolute;width:7px;height:7px;pointer-events:none}
.tag i::before,.tag i::after{content:"";position:absolute;background:currentColor;opacity:.9}
.tag i::before{left:3px;top:0;width:1px;height:7px}
.tag i::after{top:3px;left:0;width:7px;height:1px}
.tag i:nth-child(1){left:-9px;top:-9px}.tag i:nth-child(2){right:-9px;top:-9px}
.tag i:nth-child(3){left:-9px;bottom:-9px}.tag i:nth-child(4){right:-9px;bottom:-9px}
.tag i{color:var(--ink)}
.tag--green{background:var(--green)}
.tag--amber{background:var(--amber);color:var(--ink)}
.tag--mail{display:inline-flex;align-items:center;gap:6px;padding:6px 8px}
.tag--mail svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,247,244,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav__inner{position:relative;width:min(var(--rail),100%);margin:0 auto;height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.nav__links{display:flex;align-items:center;justify-content:center;gap:30px}
.nav__link{display:inline-flex;align-items:center;font-size:14px;line-height:1.6;color:var(--mid);letter-spacing:.01em}
.nav__link i{font-style:normal;font-size:13px;color:var(--blue);opacity:.7;transition:transform .3s var(--ease),opacity .2s}
.nav__link span{padding:0 1px;transition:color .2s}
.nav__link:hover span{color:var(--ink)} .nav__link:hover i{opacity:1}
.nav__link:hover i:first-child{transform:translateX(-3px)} .nav__link:hover i:last-child{transform:translateX(3px)}
.nav__logo{margin:0 26px;display:flex;align-items:center;height:34px;perspective:420px}
.logo3d{display:block;transform-style:preserve-3d;will-change:transform;backface-visibility:visible;animation:logospin 14s linear infinite}
.logo3d img{height:20px;width:auto;display:block}
@keyframes logospin{to{transform:rotateY(360deg)}}
.nav__cta{position:absolute;right:28px;top:50%;transform:translateY(-50%);height:32px;padding:0 14px}
.nav__cta:hover{transform:translateY(calc(-50% - 1px))}

/* ============ HERO · dark, Raylon motion, mockup cards ============ */
:root{--grad:linear-gradient(90deg,var(--blue) 0%,var(--green) 55%,var(--amber) 100%);
  --h-bg:#15152B; --h-card:rgba(255,255,255,.035); --h-line:rgba(255,255,255,.11); --h-text:#F4F2EE; --h-dim:#9B98AE;
  /* the five hero-card accents, lifted off the three palette hues so they stay legible on dark */
  --c-blue:#8F90D6; --c-green:#E0A64A; --c-purple:#A6A7DE; --c-orange:#CE8F30; --c-cyan:#F0574A}
.hero{position:relative;width:100%;max-width:none;margin:0;padding:84px 0 0;text-align:center;overflow:hidden;background:var(--h-bg);color:var(--h-text);border-bottom:0;z-index:2}
.hero > *{max-width:none}
.hero__dots{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/26px 26px;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 30%,transparent 30%,#000 100%);mask:radial-gradient(ellipse 70% 60% at 50% 30%,transparent 30%,#000 100%);opacity:.7}
.hero__copy{position:relative;z-index:3;padding:0 40px;max-width:820px;margin:0 auto}
.hero h1{font-family:var(--sans);font-weight:600;font-size:72px;line-height:1.05;letter-spacing:-.03em;color:#fff;margin:0 auto 18px}
.hero h1 span{background:linear-gradient(90deg,#BFC0E6 0%,#D9D9EC 45%,#EFE3E1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:17px;line-height:1.6;color:var(--h-dim);max-width:560px;margin:0 auto}
.hero__cta{display:flex;gap:12px;margin-top:30px;justify-content:center}
.btn--dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--h-line)} .btn--dark:hover{background:rgba(255,255,255,.14)}
/* Raylon's rainbow-rimmed button: a rotating square conic gradient, clipped to the pill,
   with a dark inner pill on top leaving a 1.5px rim */
.btn--rim{position:relative;height:44px;padding:1.5px;border-radius:999px;overflow:hidden;background:#15152B;color:#fff;font-size:15px;isolation:isolate}
.btn--rim::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:0;
  background:conic-gradient(from 0deg,#6061A8,#CE8F30,#ED3224,#CE8F30,#6061A8);animation:rimspin 5s linear infinite}
.btn--rim span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:41px;padding:0 22px;border-radius:999px;background:#15152B}
.btn--rim i{font-style:normal}
@keyframes rimspin{to{transform:rotate(360deg)}}
/* the soft halo behind it (static, breathing) */
.hero__cta{position:relative}
.hero__cta::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:70px;transform:translate(-62%,-50%);border-radius:999px;z-index:0;filter:blur(22px);opacity:.45;
  background:linear-gradient(90deg,#8F90D6,#E0A64A,#CE8F30,#ED3224);animation:halo 4s ease-in-out infinite}
.hero__cta > *{position:relative;z-index:1}
@keyframes halo{50%{opacity:.25}}
.appear{opacity:0;animation:appear .6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes appear{to{opacity:1}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- the aurora: five drifting blobs + a bright horizon line ---- */
.hero__aurora{position:absolute;left:0;right:0;bottom:0;height:380px;pointer-events:none;z-index:1;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 70%);mask:linear-gradient(180deg,transparent 0%,#000 70%)}
.aur{position:absolute;bottom:-150px;width:640px;height:340px;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.45;animation:drift var(--t,14s) ease-in-out infinite alternate}
.aur--1{left:-6%;background:#CE8F30;--t:13s}
.aur--2{left:18%;background:#ED3224;--t:17s;animation-delay:-4s}
.aur--3{left:40%;background:#6061A8;--t:15s;animation-delay:-9s}
.aur--4{left:62%;background:#CE8F30;--t:19s;animation-delay:-2s}
.aur--5{left:84%;background:#8F90D6;--t:16s;animation-delay:-7s}
@keyframes drift{0%{transform:translate(-8%,6%) scale(1);opacity:.32}50%{opacity:.55}100%{transform:translate(10%,-4%) scale(1.15);opacity:.4}}
.hero__horizon{position:relative;z-index:3;height:3px;margin-top:-2px;
  background:linear-gradient(90deg,#6061A8,#CE8F30,#ED3224,#CE8F30,#6061A8);background-size:200% 100%;
  animation:horizon 12s linear infinite;box-shadow:0 0 24px 4px rgba(255,255,255,.12)}
@keyframes horizon{to{background-position:-200% 0}}

/* ---- the card marquee ---- */
.hero__marquee{position:relative;z-index:2;margin-top:56px;overflow:hidden;padding-bottom:48px}
.hero__track{position:relative;z-index:2}
.hero__track{display:flex;gap:14px;width:max-content;animation:cards 70s linear infinite}
@keyframes cards{to{transform:translateX(-50%)}}
.pcard{--c:var(--c-blue);width:262px;flex:none;text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--h-line);border-radius:18px;padding:16px;
  display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -40px rgba(0,0,0,.8);position:relative;backdrop-filter:blur(6px)}
.pcard::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,transparent),transparent 60%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pcard--blue{--c:var(--c-blue)} .pcard--green{--c:var(--c-green)} .pcard--purple{--c:var(--c-purple)} .pcard--orange{--c:var(--c-orange)} .pcard--cyan{--c:var(--c-cyan)}
.pcard header{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--h-line)}
.pcard header .pcard__ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;margin:0;
  background:color-mix(in srgb,var(--c) 22%,transparent);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--c) 35%,transparent)}
.pcard__ic svg{width:17px;height:17px;fill:var(--c)}
.pcard__ic .ic-stroke{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcard header b{display:block;font-size:15px;font-weight:600;color:#fff;line-height:1.2}
.pcard header span{display:block;font-size:11.5px;color:var(--h-dim);margin-top:2px}
.pu{background:rgba(255,255,255,.04);border:1px solid var(--h-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;font-size:11.5px;color:var(--h-dim)}
.pu__hero{display:flex;align-items:center;gap:10px}
.pu__hero b{display:block;font-size:13px;font-weight:600;color:#fff} .pu__hero b em{font-style:normal;font-weight:400;font-size:10px;color:var(--c);margin-left:4px}
.pu__hero span{display:block;font-size:11px;color:var(--h-dim);line-height:1.4}
.pu__hero--row{justify-content:space-between} .pu__hero--row .pu__wave{width:42%;height:18px}
.pu__ic{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-size:16px;color:#fff;background:color-mix(in srgb,var(--c) 28%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
.pu__ic--av{width:30px;height:30px;background:rgba(255,255,255,.08);border-color:var(--h-line)}
.pu__ic--av::before{content:"";width:10px;height:10px;border-radius:50%;background:#CFCBD8;box-shadow:0 11px 0 4px #CFCBD8;transform:translateY(-4px);opacity:.6}
.pu__ic--book{width:30px;height:30px} .pu__ic--book::before{content:"";width:12px;height:10px;border:1.5px solid var(--c);border-radius:2px}
.pu__wave{display:flex;align-items:center;gap:2px;height:26px}
.pu__wave i{flex:1;height:30%;border-radius:2px;background:var(--c);opacity:.85;animation:wave 1.4s ease-in-out infinite}
.pu__wave i:nth-child(3n){animation-delay:.15s}.pu__wave i:nth-child(3n+1){animation-delay:.3s}.pu__wave i:nth-child(4n){animation-delay:.45s}.pu__wave i:nth-child(5n){animation-delay:.6s}
@keyframes wave{50%{height:95%}}
.pu__status{display:flex;align-items:center;gap:7px;font-size:11px;color:#d1d5db}
.pu__status i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);animation:pulse 1.6s ease-in-out infinite}
.pu__list{display:flex;flex-direction:column;gap:6px}
.pu__list li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--h-line);border-radius:10px;padding:9px 11px;font-size:12px;color:#E4E1DA}
.pu__list li em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--h-dim)}
.pu__list li i{width:16px;height:16px;border-radius:50%;flex:none;background:var(--c);position:relative}
.pu__list li i::after{content:"";position:absolute;left:5.5px;top:3px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.pu__list--flags li.ok i{background:var(--c-green)} .pu__list--flags li.ok em{color:var(--c-green)}
.pu__list--flags li.warn i{background:var(--c-orange)} .pu__list--flags li.warn i::after{content:"!";border:0;width:auto;height:auto;transform:none;left:6px;top:1px;font-size:10px;font-weight:700;color:#fff} .pu__list--flags li.warn em{color:var(--c-orange)}
.pu__list--flags li.bad i{background:#ED3224} .pu__list--flags li.bad i::after{content:"\00d7";border:0;width:auto;height:auto;transform:none;left:4.5px;top:0;font-size:11px;font-weight:700;color:#fff} .pu__list--flags li.bad em{color:#ED3224}
.pu__link,.pu__cta,.pu__input{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--h-line);border-radius:10px;padding:10px 12px;font-size:12px;color:#E4E1DA}
.pu__link span,.pu__chev{margin-left:auto;font-size:16px;color:var(--h-dim)}
.pu__msg{background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-radius:10px;padding:10px 11px;font-size:11.5px;color:#E4E1DA;line-height:1.45;position:relative}
.pu__msg a{color:var(--c);text-decoration:underline} .pu__msg small{position:absolute;right:10px;bottom:8px;font-size:10px;color:var(--c)}
.pu__t{display:block;font-size:12.5px;font-weight:600;color:#fff} .pu__t small{font-weight:400;color:var(--h-dim);font-size:10px}
.pu__bars{display:flex;flex-direction:column;gap:7px}
.pu__bars > div{display:grid;grid-template-columns:14px 1fr 34px;align-items:center;gap:8px;font-size:11px;color:var(--h-dim)}
.pu__bars i{display:block;height:12px;width:var(--w);border-radius:3px;background:rgba(255,255,255,.18);transform-origin:left;animation:barin 3s var(--ease) infinite}
.pu__bars .hot i{background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)} .pu__bars .hot span{color:var(--c)} .pu__bars em{font-style:normal;color:#E4E1DA;text-align:right}
@keyframes barin{0%{transform:scaleX(.2)}35%,100%{transform:scaleX(1)}}
.pu__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pu__tiles > div{background:rgba(255,255,255,.04);border:1px solid var(--h-line);border-radius:10px;padding:9px 11px}
.pu__tiles span{display:block;font-size:10px;color:var(--h-dim)} .pu__tiles b{font-size:17px;color:#fff;font-weight:600} .pu__tiles em{font-style:normal;font-size:10px;margin-left:4px}
.pu__tiles em.up{color:#ED3224} .pu__tiles em.good{color:var(--c-green)}
.pu__cta{background:color-mix(in srgb,var(--c) 12%,transparent);border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.pu__cta i{font-style:normal;color:var(--c)} .pu__cta b{display:block;font-size:12px;color:#fff} .pu__cta > div span{font-size:11px;color:var(--h-dim)}
.pu--chat{gap:10px}
.pu__q,.pu__a{display:flex;gap:8px;align-items:flex-start}
.pu__q p{background:rgba(255,255,255,.08);border:1px solid var(--h-line);border-radius:10px;padding:9px 11px;font-size:12px;color:#fff;margin:0}
.pu__a p{margin:0;font-size:11.5px;line-height:1.5;color:#E4E1DA}
.pu__a > div{background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);border-radius:10px;padding:9px 11px}
.pu__a small{display:block;margin-top:7px;font-size:10px;color:var(--c)}
.pu__input{color:var(--h-dim)} .pu__input span{margin-left:auto;color:var(--c)}

/* ---- the console, as a strip under the horizon ---- */
.os--strip{position:relative;z-index:3;width:min(var(--w),calc(100% - 80px));margin:0 auto;padding:22px 0 34px;text-align:left}
.os__head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--h-dim);margin-bottom:14px}
.os__live{width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 10px var(--c-green);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.55);opacity:.5}}
.os--strip .os__stage{display:grid;grid-template-columns:1fr 28px 1fr 28px 1.3fr;align-items:center;gap:10px}
.os__card{border:1px solid var(--h-line);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.04);transition:opacity .45s ease,transform .45s var(--ease)}
.os__k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--h-dim);margin-bottom:4px}
.os__card b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:#fff}
.os__card > span:not(.os__k){display:block;font-size:12px;color:var(--h-dim);margin-top:2px}
.os__event{border-color:rgba(245,158,11,.35)} .os__event .os__k{color:var(--c-orange)}
.os__system{border-color:rgba(59,130,246,.4)} .os__system .os__k{color:var(--c-blue)} .os__system b{color:#C9CAE8}
.os__result{border-color:rgba(34,197,94,.4)} .os__result .os__k{color:var(--c-green)}
.os__result ul{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:2px}
.os__result li{font-size:12.5px;font-weight:500;color:#F6E7C6;display:inline-flex;align-items:center;gap:6px}
.os__result li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c-green);flex:none}
.os__arrow{height:1px;background:var(--h-line);position:relative}
.os__arrow::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border:solid var(--h-dim);border-width:1px 1px 0 0;transform:rotate(45deg)}
.os.is-new .os__event,.os.is-new .os__system,.os.is-new .os__result{opacity:0;transform:translateY(6px)}
.os__progress{height:2px;background:var(--h-line);margin-top:16px;overflow:hidden;border-radius:2px}
.os__progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c-blue),var(--c-green))}
.os.is-running .os__progress i{animation:bar var(--cycle,6.7s) linear forwards}
@keyframes bar{to{width:100%}}

/* ============ BUILT FOR ============ */
.trust{padding:36px 0 40px}
.trust__label{font-size:14px;color:var(--mid);margin-bottom:30px;letter-spacing:.01em}
.marquee{position:relative;overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marquee__track{display:flex;gap:68px;width:max-content;padding-left:34px;animation:mq 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--mid);white-space:nowrap}
.marquee__track svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ HUMAN + AI (kept; amber warmth) ============ */
.human{padding:100px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,#F7F3EA 100%)}
.human__stage{position:relative;height:600px;width:100%;max-width:none;margin-top:20px}
.human__aiwrap{position:absolute;left:0;bottom:160px;width:660px;aspect-ratio:660/368}
.human__ai{position:absolute;inset:0;width:100%;height:100%}
.human__hand{position:absolute;right:0;bottom:219px;width:600px;height:auto;filter:grayscale(1) contrast(1.05);transform:translateX(30px);transition:transform 1.2s var(--ease)}
.reveal.in .human__hand{transform:none}
.human__star{position:absolute;left:calc(50% - 120px);top:40px;width:170px;height:170px;
  background:radial-gradient(circle,#9a9a9a 1.2px,transparent 1.55px) 0 0/6px 6px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C54 36 64 46 100 50 C64 54 54 64 50 100 C46 64 36 54 0 50 C36 46 46 36 50 0Z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 0 C54 36 64 46 100 50 C64 54 54 64 50 100 C46 64 36 54 0 50 C36 46 46 36 50 0Z' fill='black'/></svg>") center/contain no-repeat;
  opacity:.95;animation:spin 18s linear infinite,twinkle 4s ease-in-out infinite}
@keyframes spin{to{rotate:360deg}}
@keyframes twinkle{50%{opacity:.55}}
.human__tag{position:absolute;left:30%;top:70%;display:flex;flex-direction:column;align-items:center;gap:8px}
.human__tagline{width:1px;height:clamp(30px,5.2vw,74px);background:var(--ink);position:relative}
.human__tagline::before{content:"";position:absolute;top:-7px;left:-4px;width:9px;height:9px;background:var(--ink)}
.human__tagtext{font-size:14px;color:var(--mid)}

/* ============ WHAT WE DO · Knotch "How it works" layout ============ */
/* left-aligned lead, Step chip, UI panel on top fading out, copy beneath */
.sec-lead{max-width:var(--w);text-align:left;margin:0 auto}
.tag--pill2{display:inline-block;border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:600;background:var(--green-tint);color:var(--green-deep);border:1px solid #EBD9B4}
.tag--pill2 i{display:none}
.tag--blue2{background:var(--blue-tint);color:var(--blue-deep);border-color:#D8D8EA}
.features .sec-lead h3{font-size:46px;font-weight:700;letter-spacing:-.025em;margin-top:18px;line-height:1.12}
.features .sec-lead .sub{margin-top:12px}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px;max-width:var(--w)}
.s4{--c:var(--blue);--t:var(--blue-tint);position:relative;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(180deg,var(--t),var(--white) 62%);padding:0 0 26px;display:flex;flex-direction:column;text-align:left;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.s4:hover{transform:translateY(-4px);box-shadow:0 30px 60px -38px rgba(18,19,22,.35);border-color:var(--c)}
.s4--amber{--c:var(--amber-deep);--t:#FCE8E5} .s4--blue{--c:var(--blue);--t:#EAEAF4} .s4--green{--c:var(--green-deep);--t:#F8F2E6} .s4--purple{--c:var(--purple);--t:#E9E9F1}
.s4__step{align-self:flex-start;margin:18px 0 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--c);
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:5px 10px;position:relative;z-index:2}
/* the panel is cropped and faded at the bottom, exactly like Knotch's step cards */
.s4__panel{position:relative;height:186px;margin:14px 18px 0;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 62%,transparent 100%);mask:linear-gradient(180deg,#000 62%,transparent 100%)}
.s4__art{width:100%;display:flex;align-items:flex-start;justify-content:center}
.s4__art--safe{flex-direction:column;align-items:center;gap:12px}
.art{width:100%;max-width:230px;height:auto;font-family:var(--sans);filter:drop-shadow(0 14px 22px rgba(18,19,22,.12))}
.art--shield{max-width:112px;filter:none}
.s4 h4{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:20px 18px 0}
.s4 > p{font-size:14.5px;line-height:1.55;color:var(--gray);margin:8px 18px 0}
.tw{animation:twk 2.4s ease-in-out infinite} .tw2{animation-delay:.5s} .tw3{animation-delay:1s}
@keyframes twk{50%{opacity:.2}}
.flowline{animation:dashflow 1.6s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-18}}
.cogspin{animation:spin 9s linear infinite}
.orbit{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.safechips{display:flex;flex-direction:column;gap:6px;width:100%;padding:0 4px}
.sc{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;font-weight:500;color:var(--mid)}
.sc--ok{background:var(--green-tint);border-color:#EBD9B4;color:var(--green-deep)}
.sc i{width:16px;height:16px;flex:none;position:relative}
.sc .tick{width:16px;height:16px;border-radius:50%;background:var(--green)}
.sc .tick::after{content:"";position:absolute;left:5.5px;top:3.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sc .lines{background:linear-gradient(var(--dim) 2px,transparent 0) 0 2px/100% 5px repeat}
.sc .clock{border:2px solid var(--dim);border-radius:50%}
.sc .clock::after{content:"";position:absolute;left:6px;top:3px;width:1.5px;height:5px;background:var(--dim)}

/* ============ SYSTEMS · Knotch "Our solutions" bento ============ */
.systems{background:var(--blue-tint2)}
.systems h3{margin-top:18px;font-size:46px;font-weight:700;letter-spacing:-.025em;line-height:1.12}
.systems .sub{margin-top:14px;max-width:560px}
/* two tall outer cards, two stacked in the middle — mixed sizes like Knotch */
.systems__bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:44px;max-width:var(--w)}
.sys{--c:var(--blue);--t:var(--blue-tint);position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--t),var(--white) 70%);padding:24px;text-align:left;display:flex;flex-direction:column;gap:18px;
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.sys:hover{transform:translateY(-4px);box-shadow:0 30px 60px -38px rgba(18,19,22,.35);border-color:var(--c)}
.sys--blue{--c:var(--blue);--t:var(--blue-tint)} .sys--green{--c:var(--green-deep);--t:var(--green-tint)}
.sys--amber{--c:var(--amber-deep);--t:var(--amber-tint)} .sys--purple{--c:var(--purple);--t:var(--purple-tint)}
/* alternating widths give the bento rhythm without a height mismatch */
.sys--a{grid-column:span 7} .sys--b{grid-column:span 5}
.sys--c{grid-column:span 5} .sys--d{grid-column:span 7;flex-direction:column-reverse}
.sys--a,.sys--d{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:center}
.sys--d{direction:rtl} .sys--d > *{direction:ltr}
.sys__line{font-size:15.5px;line-height:1.55;color:var(--gray)}
.sys__line b{color:var(--ink);font-weight:600}
.sys__ui{margin-top:auto;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;justify-content:center;
  box-shadow:0 20px 44px -30px rgba(18,19,22,.4)}

.systems__more{margin-top:28px;font-size:15px;color:var(--mid)}
.systems__more a{color:var(--blue);font-weight:500;border-bottom:1px solid currentColor}
/* receptionist */
.callhead{display:flex;align-items:center;gap:14px}
.callhead b{display:block;font-size:16px;font-weight:500} .callhead span{display:block;font-size:12px;color:var(--gray);margin-top:2px}
.callhead em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;font-weight:500;color:var(--green-deep);margin-top:6px}
.wave{display:flex;align-items:center;gap:2px;height:26px}
.wave i{flex:1;height:30%;border-radius:2px;background:var(--blue);opacity:.8;animation:wave 1.4s ease-in-out infinite}
.wave i:nth-child(3n){animation-delay:.15s}.wave i:nth-child(3n+1){animation-delay:.3s}.wave i:nth-child(4n){animation-delay:.45s}.wave i:nth-child(5n){animation-delay:.6s}
@keyframes wave{50%{height:95%}}
.booked{align-self:center;background:var(--green);color:#fff;font-weight:500;font-size:15px;padding:10px 26px;border-radius:10px;box-shadow:0 0 0 6px var(--green-tint)}
/* lead follow-up */
.sys__ui--steps{gap:4px}
.step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);position:relative}
.step b{display:block;font-size:13px;font-weight:500} .step span{display:block;font-size:11.5px;color:var(--gray);margin-top:1px}
.step--on{background:var(--green-tint);border-color:#EBD9B4}
.step em.ok,.answer .ok{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--green);position:relative;flex:none;display:inline-block}
.step em.ok::after,.answer .ok::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.step__arrow{width:1px;height:14px;background:var(--dim);margin:2px auto;position:relative;opacity:.6}
.step__arrow::after{content:"";position:absolute;left:-3px;bottom:0;width:6px;height:6px;border:solid var(--dim);border-width:0 1px 1px 0;transform:rotate(45deg)}
/* marketing */
.ui__title{font-size:14px;font-weight:500}
.camp{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;font-size:12.5px;color:var(--mid)}
.camp em{font-style:normal;font-weight:500;font-size:12px}
.cbars{grid-column:1/-1;display:flex;align-items:flex-end;gap:4px;height:30px}
.cbars i{flex:1;height:var(--h);border-radius:2px;transform-origin:bottom;animation:grow 3.2s var(--ease) infinite}
@keyframes grow{0%{transform:scaleY(.3)}40%,100%{transform:scaleY(1)}}
.cbars--up i{background:#EEDFBE} .cbars--up i:nth-last-child(-n+2){background:var(--green-deep)}
.cbars--down i{background:#F7C4BF} .cbars--down i:nth-last-child(-n+3){background:#EBE2E0}
.suggest{display:flex;align-items:center;gap:10px;background:var(--amber-tint);border:1px solid #F6C9C3;border-radius:10px;padding:10px 12px}
.suggest i{font-style:normal;color:var(--amber-deep);font-size:18px} .suggest span{display:block;font-size:11px;color:var(--amber-deep)} .suggest b{display:block;font-size:15px;color:var(--amber-deep)}
.outcomes{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.outcomes li{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:500}
.outcomes li em{margin-left:auto;font-style:normal;font-size:11px;font-weight:400;color:var(--gray)}
.outcomes li i{width:16px;height:16px;border-radius:50%;background:var(--blue);flex:none;position:relative}
.outcomes li i::after{content:"";position:absolute;left:5.5px;top:3.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.askbox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--dim);margin-top:4px}
.askbox i{font-style:normal;color:var(--purple)}
/* knowledge */
.sys__ui--qa{gap:6px}
.ask{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--purple-tint);border:1px solid #D5D5E6;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:500;line-height:1.3}
.ask i{width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;flex:none}
.answer{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.answer b{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--green-deep);font-weight:500} .answer .ok{margin-left:0}
.answer p{font-size:12.5px;line-height:1.5;color:var(--mid);margin-top:8px}
.answer small{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--gray)}
.ic{width:18px;height:18px;border-radius:4px;display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:#fff;font-style:normal}
.ic--big{width:56px;height:56px;border-radius:50%;background:var(--blue-tint);color:var(--blue)} .ic--big::before{content:"\260E";font-size:26px}
.ic--person{background:var(--green-tint);color:var(--green-deep);width:32px;height:32px;border-radius:50%} .ic--person::before{content:"\263A";font-size:16px}
.ic--chat{background:var(--green);width:32px;height:32px;border-radius:50%} .ic--chat::before{content:"\2026";font-size:16px;line-height:0}
.ic--cal{background:var(--green-tint);color:var(--green-deep);width:32px;height:32px;border-radius:50%} .ic--cal::before{content:"\2637";font-size:14px}
.ic--up{background:var(--green-tint);color:var(--green-deep);border-radius:50%;width:26px;height:26px} .ic--up::before{content:"\2197";font-size:13px}
.ic--down{background:#FCE8E5;color:#ED3224;border-radius:50%;width:26px;height:26px} .ic--down::before{content:"\2198";font-size:13px}
.pos{color:var(--green-deep)} .neg{color:#ED3224}

/* ============ INTEGRATIONS (indigo) ============ */
.integ{padding:96px 28px 104px}
.integ__flow{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:48px;flex-wrap:wrap}
.integ__tiles{display:grid;grid-template-columns:repeat(3,auto);gap:8px}
.integ__tiles span{font-size:13px;font-weight:500;padding:10px 14px;background:var(--white);border:1px solid var(--line);color:var(--mid);animation:float 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
@keyframes float{50%{transform:translateY(-4px)}}
.integ__arrow{width:44px;height:1px;background:var(--blue-deep);position:relative;flex:none}
.integ__arrow::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border:solid var(--blue-deep);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.integ__hpc{width:84px;height:84px;border-radius:50%;background:var(--blue-deep);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(36,67,191,.12)}
.integ__hpc img{height:18px;filter:invert(1)}
.integ__out{font-size:14px;font-weight:500;padding:14px 18px;background:var(--white);border:1.5px solid var(--blue-deep);color:var(--blue-deep)}

/* ============ START WHERE YOU ARE (paths) ============ */
.tag--purple{background:var(--purple-tint);color:var(--purple-deep);border:1px solid #D9D9E8;font-weight:600;font-size:14px;border-radius:999px;padding:8px 18px}
.tag--purple i{display:none}
.paths h3{margin-top:18px;font-size:52px;font-weight:700;letter-spacing:-.025em}
.paths__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;max-width:var(--w)}
.path{--c:var(--blue);--d:var(--blue-deep);--t:#EAEAF4;--b:#D8D8EA;
  position:relative;border:1px solid var(--b);border-radius:22px;background:linear-gradient(180deg,var(--t),#fff 82%);
  padding:30px 30px 34px;text-align:left;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:0 14px;align-items:start}
.path--find{--c:#CE8F30;--d:#C4241A;--t:#FCEBE8;--b:#F6CEC8}
.path__q{display:block;font-size:15px;font-weight:600;color:var(--d)}
.path h4{font-size:30px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;color:var(--c);margin-top:8px;line-height:1.05}
.path--find h4{color:var(--d)}
.path__copy > p{font-size:15px;line-height:1.55;color:var(--mid);margin-top:12px;max-width:330px}
.path__list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.path__list li{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--b);border-radius:11px;padding:11px 14px;font-size:14.5px;font-weight:500}
.pl{width:22px;height:22px;flex:none;border-radius:6px;background:var(--t);position:relative}
.pl::after{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--d)}
.pl--head::after{content:"\1F3A7"} .pl--bars::after{content:"\1F4CA"} .pl--chat::after{content:"\1F4AC"} .pl--mail::after{content:"\2709"}
.pl--clock::after{content:"\1F551"} .pl--dollar::after{content:"$";font-weight:700;color:#9A6A1E}
.pl--person::after{content:"\1F464"} .pl--cup::after{content:"\1F3C6"}
.path__art{grid-column:2;grid-row:1/span 2;align-self:center;margin-right:-12px}
.pathart{width:100%;height:auto;font-family:var(--sans)}
.path__cta{grid-column:1;justify-self:start;margin-top:26px;height:48px;padding:0 26px;font-size:16px;border-radius:12px;gap:10px}
.path__cta i{font-style:normal;transition:transform .3s var(--ease)} .path__cta:hover i{transform:translateX(4px)}
.btn--gold{background:#CE8F30;color:#fff;box-shadow:0 10px 24px -12px rgba(217,161,35,.8)}
.btn--gold:hover{background:#C4241A}
.flowline{animation:dashflow 1.6s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-20}}
.sparks .tw{animation:twk 2.6s ease-in-out infinite;transform-origin:center}
.sparks .tw2{animation-delay:.7s}
@keyframes twk{50%{opacity:.25}}

/* the fractional band */
.frac{position:relative;margin-top:18px;max-width:var(--w);border:1px solid #D9D9E8;border-radius:22px;background:linear-gradient(180deg,#EDEDF4,#fff 88%);
  padding:30px 34px 32px;text-align:left;display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:center}
.frac h4{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--purple-deep);margin-top:8px}
.frac__copy > p{font-size:16px;line-height:1.55;color:var(--mid);margin-top:12px;max-width:420px}
.frac__flow{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.fstep{display:flex;flex-direction:column;align-items:center;text-align:center;width:104px}
.fico{width:56px;height:56px;border-radius:14px;background:#fff;border:1px solid #D9D9E8;display:grid;place-items:center;box-shadow:0 12px 24px -18px rgba(91,63,201,.7)}
.fico svg{width:30px;height:30px}
.fstep b{font-size:14px;font-weight:600;margin-top:10px}
.fstep span{font-size:12px;line-height:1.4;color:var(--gray);margin-top:3px}
.fdash{flex:1;height:0;border-top:2px dashed #C6C6DC;margin-top:28px;min-width:22px;position:relative}
.fdash::after{content:"";position:absolute;right:-2px;top:-4px;width:7px;height:7px;border:solid #C6C6DC;border-width:2px 2px 0 0;transform:rotate(45deg)}
.fwin{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #D9D9E8;border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px -20px rgba(91,63,201,.6)}
.fwin__badge{position:relative;width:38px;height:38px;flex:none}
.fwin__badge svg{width:38px;height:38px}
.fspark{position:absolute;right:-4px;top:-4px;width:9px;height:9px;background:var(--purple);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:twk 2.4s ease-in-out infinite}
.fwin b{font-size:15px;font-weight:600;line-height:1.25}
.frac__right{display:flex;flex-direction:column;gap:20px}
.frac__cta{align-self:flex-end;height:48px;padding:0 26px;font-size:16px;border-radius:12px;gap:10px;background:#fff;color:var(--purple-deep);border:1px solid #D9D9E8;box-shadow:0 12px 26px -18px rgba(91,63,201,.7)}
.frac__cta:hover{background:var(--purple-tint)}
.frac__cta i{font-style:normal;transition:transform .3s var(--ease)} .frac__cta:hover i{transform:translateX(4px)}

/* ============ RESULTS · illustrated cards (mockup) ============ */
.results{background:linear-gradient(180deg,#F8F2E6,#FBF6EE)}
.results h3{margin-top:18px;max-width:900px}
.tag--pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 16px 8px 12px;background:var(--green-tint);color:var(--green-deep);border:1px solid #EBD9B4;font-weight:600;font-size:14px}
.tag--pill i{display:none} .tag--pill .star{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:11px}
.results__row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;max-width:var(--w)}
.rc{--c:var(--green-deep);--t:var(--green-tint);background:var(--white);border:1px solid var(--line);border-radius:20px;padding:24px;text-align:left;display:flex;flex-direction:column;gap:16px;box-shadow:0 26px 54px -40px rgba(18,19,22,.3)}
.rc--blue{--c:var(--blue);--t:var(--blue-tint)} .rc--purple{--c:var(--purple);--t:var(--purple-tint)}
.rc header{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rc h4{font-size:26px;line-height:1.1;font-weight:700;color:var(--c);letter-spacing:-.01em}
.ill{position:relative;width:74px;height:66px;flex:none;display:grid;place-items:center;background:var(--t);border-radius:16px;overflow:hidden}
.ill img{width:56px;height:56px;object-fit:contain}
.ill svg{width:46px;height:auto} .ill .body{fill:var(--c)} .ill .w{fill:var(--ink);opacity:.75} .ill .horn{fill:var(--c)}
.ill .pad{fill:var(--c);opacity:.9} .ill .clip{fill:var(--ink);opacity:.6} .ill .ln{stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.badge{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(18,19,22,.5)}
.badge--call::after{content:"\260E";font-size:13px;color:var(--green-deep)}
.badge--chart::after{content:"\1F4CA";font-size:12px}
.badge--check{background:var(--amber);border-color:var(--amber)}
.badge--check::after{content:"";width:7px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rc__row{display:flex;gap:12px;align-items:flex-start}
.rc__ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px;background:var(--t);color:var(--c)}
.rc__ic--build{font-size:17px;font-weight:400}
.rc__row b{display:block;font-size:14px;font-weight:600;color:var(--c)}
.rc__row p{font-size:14px;line-height:1.5;color:var(--gray);margin-top:2px}
.rc__result{margin-top:auto;background:var(--t);border-radius:14px;padding:16px 18px 18px}
.rc__tag{display:inline-block;background:var(--white);border-radius:7px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--c)}
.rc__big{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:12px}
.rc__big .was{font-size:22px;font-weight:600;color:var(--dim);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#ED3224}
.rc__big .to{font-style:normal;font-size:20px;color:#ED3224;font-weight:700}
.rc__big .now{font-size:38px;font-weight:700;color:var(--c);letter-spacing:-.02em;line-height:1}
.rc__big small{font-size:15px;font-weight:600;color:var(--c);width:100%}
.rc__checks{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(0,0,0,.07)}
.rc__checks li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid)}
.rc__checks li i{width:17px;height:17px;border-radius:50%;background:var(--c);flex:none;position:relative}
.rc__checks li i::after{content:"";position:absolute;left:5.5px;top:3.5px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ============ FAQ (trust & safety · navy) ============ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:60px;text-align:left;padding:90px 28px 80px;align-items:start;background:var(--navy);color:#fff;border-bottom:0}
.faq > *{margin-left:0;margin-right:0}
.faq h3{color:#fff}
.faq .sub{color:rgba(255,255,255,.65)}
.faq__left{position:relative;min-height:520px;display:flex;flex-direction:column}
.faq__left h3{max-width:420px}
.extender{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start}
.extender__line{width:1px;height:56px;background:rgba(255,255,255,.4);margin-left:13px}
.faq__list{display:flex;flex-direction:column;gap:10px}
details{background:var(--navy-2);border:1px solid rgba(255,255,255,.12)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;font-size:16px;font-weight:500;line-height:1.4;color:#fff}
summary::-webkit-details-marker{display:none}
.plus{position:relative;width:16px;height:16px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;background:var(--amber);transition:transform .35s var(--ease)}
.plus::before{left:7px;top:0;width:2px;height:16px} .plus::after{top:7px;left:0;width:16px;height:2px}
details[open] .plus::before{transform:rotate(90deg)}
details > div{padding:0 26px 22px;font-size:14px;line-height:1.65;color:rgba(255,255,255,.75);max-width:520px}
details > div p{animation:appear .4s ease}

/* ============ BOOK A CALL ============ */
.book{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left;padding:64px 40px;align-items:center}
.book > *{margin-left:0;margin-right:0}
.book__left h3{max-width:560px}
.book__trust{display:flex;flex-direction:column;gap:10px;margin-top:34px;max-width:548px}
.book__trust li{display:flex;align-items:center;gap:12px;background:var(--blue-tint);border:1px solid #d6def9;padding:16px 22px;font-size:14px;font-weight:500}
.book__trust svg{width:16px;height:16px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
/* the Cal.com iframe sizes itself; let the box follow it instead of clipping */
.book__cal{background:#15152B;border:1px solid #2E2F5C;min-height:560px;padding:8px}
#calInline{width:100%} #calInline iframe{display:block}

/* ============ FOOTER ============ */
.footer{width:min(var(--rail),100%);margin:0 auto;padding:84px 40px 46px;display:grid;grid-template-columns:1fr 300px 1fr;gap:40px;text-align:left;min-height:640px;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.footer__brand{display:flex;flex-direction:column;max-width:280px}
.footer__logo{font-size:16px;font-weight:500}
.footer__brand > p{font-size:13px;line-height:1.6;color:var(--gray);margin-top:12px}
.footer__bottom{margin-top:auto;padding-top:260px}
.footer__social{display:flex;gap:10px}
.footer__social a{width:24px;height:24px;display:grid;place-items:center;transition:opacity .2s} .footer__social a:hover{opacity:.6}
.footer__social svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linejoin:round}
.footer__copy{font-size:13px;color:var(--mid);margin-top:22px}
.footer__figure{justify-self:center;align-self:end;width:300px;height:620px;margin-bottom:-120px;opacity:.9}
.footer__links{display:flex;flex-direction:column;gap:36px;justify-self:end;padding-right:20px}
.footer__links h6{margin-bottom:10px}
.footer__links a{display:block;font-size:13px;line-height:1.6;color:var(--mid);margin:8px 0;transition:color .2s}
.footer__links a i{font-style:normal;color:var(--blue);opacity:.7}
.footer__links a:hover{color:var(--ink)}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .systems__grid{grid-template-columns:1fr 1fr}
  .paths__grid{grid-template-columns:1fr}
  .path{grid-template-columns:1fr;gap:0}
  .path__art{grid-column:1;grid-row:auto;margin-top:20px}
  .path__cta{grid-column:1}
  .paths h3{font-size:34px}
  .frac{grid-template-columns:1fr;padding:26px}
  .frac h4{font-size:30px}
  .frac__flow{flex-wrap:wrap;justify-content:center;gap:16px}
  .fdash{display:none}
  .frac__cta{align-self:flex-start}
  .results__row{grid-template-columns:1fr}
}
@media (max-width:980px){
  section{padding:64px 24px}
  h1{font-size:42px}h3{font-size:32px}
  .nav__cta{display:none}
  .nav__links{gap:14px} .nav__link{font-size:13px} .nav__logo{margin:0 12px} .logo3d img{height:18px}
  .hero{padding:56px 0 0}
  .hero h1{font-size:44px}
  .hero__sub{font-size:15px}
  .hero__marquee{margin-top:40px;padding-bottom:36px}
  .pcard{width:248px}
  .os--strip{width:calc(100% - 48px);padding:18px 0 28px}
  .os--strip .os__stage{grid-template-columns:1fr;gap:8px} .os__arrow{display:none}
  .s4__art{min-height:180px}
  .human{padding-top:64px}
  .human__stage{height:290px;margin-top:6px}
  .human__aiwrap{width:60%;left:-8%;bottom:74px}
  .human__hand{width:56%;right:-8%;bottom:96px}
  .human__star{left:calc(50% - 46px);top:0;width:92px;height:92px}
  .human__tag{left:40%;top:72%} .human__tagline{height:26px} .human__tagtext{font-size:12px}
  .integ{padding:64px 24px 72px}
  .integ__flow{flex-direction:column;gap:16px}
  .integ__arrow{width:1px;height:28px} .integ__arrow::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
  .faq,.book{grid-template-columns:1fr;gap:30px}
  .faq__left{min-height:0} .extender{display:none}
  .footer{grid-template-columns:1fr;min-height:0}
  .footer__figure{display:none} .footer__bottom{padding-top:40px}
  .footer__links{justify-self:start;flex-direction:row;gap:60px}
}
@media (max-width:640px){
  .systems__grid{grid-template-columns:1fr}
  .tab{flex:1 1 100%}
  .nav__inner{height:60px} .nav__links{gap:12px} .nav__link i{display:none} .nav__logo{margin:0 6px} .logo3d img{height:16px}
  .integ__tiles{grid-template-columns:repeat(2,auto)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}