/*
Theme Name: iHubSA
Theme URI: https://ihub-sa.co.za
Author: iHubSA
Description: The iHubSA website as a multi-page WordPress theme. Works with Elementor: on activation it creates the Home, Solutions, Our Solutions (products), About (incl. How It Works, Industries and Our Work), Pricing, Contact and Privacy pages, the main menu, and sets the homepage. See Appearance > iHubSA Setup.
Version: 1.2.0
Requires at least: 6.3
Requires PHP: 7.4
License: All rights reserved
Text Domain: ihubsa
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---- surfaces: navy-tinted blacks, lightest = most elevated ---- */
  --void:#040A11;         /* page base */
  --surface:#08131E;      /* alternate section */
  --card:#0C1B29;         /* card fill */
  --card-2:#112537;       /* raised / hover */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);

  /* ---- ink ---- */
  --ink:#EDF4FA;          /* headings */
  --body:#A3BACD;         /* body copy */
  --muted:#7691A8;        /* secondary */
  --faint:#6E8BA3;        /* labels, captions — 4.9:1 on cards, clears WCAG AA */

  /* ---- brand ---- */
  --blue:#073F68;
  --blue-lit:#2E86C7;     /* glow / chart blue */
  --blue-soft:#4FA3DE;
  --orange:#FF7012;
  --orange-lit:#FF9243;
  --orange-dim:rgba(255,112,18,.14);
  --blue-dim:rgba(46,134,199,.13);

  --ok:#2BD4A0; --warn:#FFB020; --bad:#FF5A5A;

  --r-sm:9px; --r:15px; --r-lg:22px; --r-xl:30px;
  --max:1200px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* depth on dark comes from glow + rim-light, not drop shadow */
  --rim:inset 0 1px 0 rgba(255,255,255,.055);
  --sh:0 18px 44px rgba(0,0,0,.5);
  --sh-lg:0 30px 80px rgba(0,0,0,.62);
}

html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%;background:var(--void)}
body{font-family:var(--ff);color:var(--body);background:var(--void);line-height:1.68;
  font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.16;letter-spacing:-.024em;font-weight:700}
h1{font-size:clamp(2.15rem,4.7vw,3.75rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,3.3vw,2.7rem);font-weight:800;letter-spacing:-.03em}
h3{font-size:1.1rem;font-weight:650}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--orange);color:#04070B}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:5px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:#1B3145;border-radius:99px;border:3px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:#26455F}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
.icon{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* headline gradient wash — the reference's subtle top-lit type */
.grad{background:linear-gradient(175deg,#FFFFFF 12%,#E2EDF6 58%,#AFC9DE 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.87rem 1.55rem;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:.94rem;font-weight:600;cursor:pointer;text-decoration:none;letter-spacing:-.01em;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
  white-space:nowrap;position:relative}
.btn .icon{width:17px;height:17px;stroke-width:2.1}
.btn-o{background:linear-gradient(180deg,#FF832E,#F26206);color:#fff;
  box-shadow:0 0 0 1px rgba(255,146,67,.5),0 8px 26px rgba(255,112,18,.34),var(--rim)}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,146,67,.7),0 14px 38px rgba(255,112,18,.48)}
.btn-b{background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(8px)}
.btn-b:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--body);border-color:var(--line-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--orange);background:var(--orange-dim);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line-2);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.btn-lg{padding:1.05rem 2.05rem;font-size:1rem}
.btn-full{width:100%}
/* Four pricing columns leave the CTA narrower than its label, and .btn is
   nowrap by default — let these wrap instead of spilling out of the button. */
.plan .btn-full{white-space:normal;text-align:center;line-height:1.35;padding-block:.8rem}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(4,10,17,.72);
  backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:.28s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(4,10,17,.9)}
.nav-in{max-width:var(--max);margin-inline:auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;flex:none}
.logo{--logo-ink:#FFFFFF;--logo-accent:#FF7012;display:block;width:auto;height:40px}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:500;
  position:relative;padding:.35rem 0;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--orange);border-radius:2px;transition:right .3s ease;box-shadow:0 0 8px var(--orange)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-links > li:last-child{display:none}
.nav-cta{display:flex;align-items:center;gap:.75rem;flex:none}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);
  border-radius:11px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}

/* ---------- atmosphere ---------- */
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 30%,#000 35%,transparent 78%)}
.dot-bg{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.07) 1.3px,transparent 1.3px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 40%,#000 15%,transparent 74%);
  mask-image:radial-gradient(ellipse 75% 55% at 50% 40%,#000 15%,transparent 74%)}
.orb{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none}
/* hairline that separates sections without a hard edge */
.seam{position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.11) 22%,rgba(255,255,255,.11) 78%,transparent)}

/* ---------- hero ---------- */
.hero{position:relative;padding:78px 0 0;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 120% 88% at 50% -14%,#0E3557 0%,#071A2B 38%,var(--void) 74%)}
.hero .orb-1{width:760px;height:560px;background:#1466A8;top:-300px;left:50%;transform:translateX(-50%);opacity:.5}
.hero .orb-2{width:680px;height:420px;background:var(--orange);bottom:-300px;left:50%;transform:translateX(-50%);opacity:.1}
.hero-grid{max-width:var(--max);margin-inline:auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.06fr);gap:56px;align-items:center;
  position:relative;z-index:2}

main{overflow-x:clip}

/* pill announcement */
.pill-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .45rem .4rem .95rem;
  border-radius:100px;font-size:.81rem;font-weight:500;color:#CFE2F0;margin-bottom:1.6rem;
  background:rgba(255,255,255,.055);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  text-decoration:none;transition:.25s;position:relative;overflow:hidden}
.pill-badge:hover{border-color:rgba(255,146,67,.5);background:rgba(255,112,18,.09)}
.pill-badge .tag{background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:.2rem .55rem;border-radius:100px}
.pill-badge .go{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:rgba(255,255,255,.1);transition:.25s}
.pill-badge .go .icon{width:12px;height:12px;stroke-width:2.6}
.pill-badge:hover .go{background:var(--orange);transform:translateX(2px)}

/* This headline is two sentences, so each gets its own block — otherwise the
   line breaks land mid-sentence ("...Your Business. Yours / Could Run It.")
   and the contrast the line depends on is lost. Slightly smaller than the
   global h1 scale because it is nine words, not five. */
.hero h1{margin-bottom:1.3rem;font-size:clamp(2rem,3.9vw,3.2rem);line-height:1.1}
.hero h1 > span{display:block}
.hero h1 .hl{color:var(--orange);-webkit-text-fill-color:var(--orange);
  text-shadow:0 0 44px rgba(255,112,18,.42)}
.hero .lede{font-size:1.14rem;color:#B6CDDE;max-width:47ch;line-height:1.62;margin-bottom:1rem}
.hero .sub strong{color:var(--ink);font-weight:600}
.hero .sub{font-size:.97rem;color:var(--muted);max-width:53ch;margin-bottom:2.1rem}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-note{display:flex;align-items:center;gap:.6rem;font-size:.89rem;color:var(--muted);flex-wrap:wrap}
.hero-note a{color:var(--orange);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,112,18,.35)}
.hero-note a:hover{border-bottom-color:var(--orange)}

/* glowing product mockup */
.hero-visual{position:relative}
.hero-visual::before{content:'';position:absolute;inset:-14% -8% -22% -8%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(46,134,199,.62),rgba(46,134,199,.2) 44%,transparent 70%);
  filter:blur(46px)}
.hero-visual::after{content:'';position:absolute;left:12%;right:12%;bottom:-6%;height:56px;z-index:0;
  background:radial-gradient(ellipse at center,rgba(255,112,18,.42),transparent 70%);filter:blur(34px)}
.mock{position:relative;z-index:1;background:#071320;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.09);
  transform:perspective(1800px) rotateY(-7deg) rotateX(3deg);
  transition:transform .65s cubic-bezier(.2,.8,.3,1)}
.mock-bar{display:flex;align-items:center;gap:.5rem;padding:11px 14px;
  background:linear-gradient(180deg,#0D1E2E,#0A1826);border-bottom:1px solid rgba(255,255,255,.07)}
.mock-bar i{width:9px;height:9px;border-radius:50%;display:block}
.mock-bar i:nth-child(1){background:#FF5F57}.mock-bar i:nth-child(2){background:#FEBC2E}.mock-bar i:nth-child(3){background:#28C840}
.mock-url{flex:1;margin-left:.5rem;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.07);
  border-radius:7px;padding:4px 10px;font-size:10.5px;color:#5F7C93;display:flex;align-items:center;gap:5px;
  overflow:hidden;white-space:nowrap}
.mock-url .icon{width:11px;height:11px;stroke-width:2.4;color:var(--ok)}

/* Two stacked previews cross-fading in place. The wrapper is sized by whichever
   view is in flow; the other is absolutely positioned on top of it, so the mock
   never changes height when they swap. */
.mock-views{position:relative}
.mv{opacity:0;visibility:hidden;transition:opacity .5s ease}
.mv:not(:first-child){position:absolute;inset:0}
.mv.on{opacity:1;visibility:visible}
.mv svg{display:block}

.mock-tabs{display:flex;gap:.3rem;padding:8px;background:rgba(0,0,0,.34);
  border-bottom:1px solid rgba(255,255,255,.07)}
.mt{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem .6rem;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;
  letter-spacing:-.01em;transition:.2s}
.mt .icon{width:14px;height:14px}
.mt:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.mt.on{background:var(--orange-dim);border-color:rgba(255,112,18,.42);color:var(--orange-lit)}
.mt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Decorative captions only — they must never swallow a click meant for the
   preview tabs underneath them. */
.float-card{pointer-events:none;position:absolute;background:rgba(14,30,45,.82);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.85rem 1.05rem;
  box-shadow:var(--sh),var(--rim);display:flex;align-items:center;gap:.7rem;z-index:3;
  animation:float 5.6s ease-in-out infinite}
.float-card .fc-ico{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;flex:none}
.float-card b{display:block;font-size:.86rem;color:var(--ink);line-height:1.2;font-weight:600}
.float-card em{font-style:normal;font-size:.73rem;color:var(--muted)}
.fc-a{bottom:-24px;left:-34px}
.fc-b{top:-22px;right:-20px;animation-delay:-2.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* flow strip */
.flow{position:relative;z-index:2;margin-top:70px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent)}
.flow-in{max-width:var(--max);margin-inline:auto;padding:30px 24px;
  display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.flow-step{display:flex;align-items:center;gap:.9rem;padding:0 20px;position:relative}
.flow-step+.flow-step::before{content:'';position:absolute;left:0;top:50%;width:1px;height:38px;
  transform:translateY(-50%);background:linear-gradient(180deg,transparent,var(--line-2),transparent)}
.flow-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--blue-soft);box-shadow:var(--rim)}
.flow-step:last-child .flow-ico{background:var(--orange-dim);border-color:rgba(255,112,18,.35);
  color:var(--orange);box-shadow:0 0 22px rgba(255,112,18,.22),var(--rim)}
.flow-step b{display:block;color:var(--ink);font-size:.91rem;font-weight:600;line-height:1.25}
.flow-step em{font-style:normal;font-size:.77rem;color:var(--faint)}

/* ---------- sections ---------- */
section{position:relative;padding:96px 0}
.alt{background:var(--surface)}
/* orb-bearing sections must clip their own glow, or the page scrolls sideways */
.dark{background:var(--void);overflow:hidden;isolation:isolate}
.sec-head{max-width:730px;margin:0 auto 58px;text-align:center;position:relative;z-index:2}
.sec-tag{display:inline-flex;align-items:center;gap:.5rem;color:var(--orange);
  font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:1rem}
.sec-tag::before,.sec-tag::after{content:'';width:20px;height:1px;background:currentColor;opacity:.45}
.sec-tag.left::before{display:none}
.sec-head p{font-size:1.04rem;color:var(--muted);margin-top:1.1rem}

.rv{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mv{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}

/* ---------- trusted by ---------- */
.trusted{padding:56px 0;position:relative;border-block:1px solid var(--line);background:var(--surface)}
.trusted h4{text-align:center;font-size:.76rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2.2rem}
.logo-wall{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.logo-slot{height:52px;min-width:132px;padding:0 1.4rem;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px dashed rgba(255,255,255,.13);background:rgba(255,255,255,.022);
  color:var(--faint);font-size:.7rem;text-align:center;line-height:1.3;transition:.28s}
.logo-slot:hover{border-color:rgba(255,255,255,.24);color:var(--muted)}
.logo-slot .icon{width:15px;height:15px;flex:none;opacity:.55}
.logo-slot img{max-height:30px;width:auto;filter:grayscale(1) brightness(2.4);opacity:.62;transition:.28s}
.logo-slot:has(img){border-style:solid;border-color:transparent;background:none;padding:0}
.logo-slot:has(img):hover img{filter:grayscale(0) brightness(1);opacity:1}

/* ---------- cards ---------- */
.cards{display:grid;gap:20px}
.c-3{grid-template-columns:repeat(3,1fr)}
.c-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  position:relative;overflow:hidden;box-shadow:var(--rim);
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),border-color .3s,background .3s,box-shadow .3s}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at 50% 0%,rgba(46,134,199,.15),transparent 62%)}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--card-2);
  box-shadow:var(--sh),var(--rim)}
.card:hover::after{opacity:1}
.card h3{margin-bottom:.5rem;position:relative;z-index:1}
.card p{font-size:.93rem;color:var(--muted);line-height:1.65;position:relative;z-index:1}
.c-ico{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--blue-soft);
  position:relative;z-index:1;box-shadow:var(--rim);transition:.3s}
.card:hover .c-ico{color:var(--orange);border-color:rgba(255,112,18,.35);background:var(--orange-dim);
  box-shadow:0 0 26px rgba(255,112,18,.2),var(--rim)}
.c-ico.warm{background:var(--orange-dim);border-color:rgba(255,112,18,.3);color:var(--orange)}

/* ---------- bento grid ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bento-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;position:relative;overflow:hidden;box-shadow:var(--rim);display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),border-color .3s,background .3s,box-shadow .3s}
.bento-card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(520px circle at var(--mx,30%) var(--my,0%),rgba(46,134,199,.16),transparent 62%)}
.bento-card:hover{transform:translateY(-5px);border-color:var(--line-2);background:var(--card-2);box-shadow:var(--sh),var(--rim)}
.bento-card:hover::after{opacity:1}
.bento-card > *{position:relative;z-index:1}
.bento-card h3{font-size:1.18rem;margin-bottom:.5rem}
.bento-card p{font-size:.93rem;color:var(--muted);line-height:1.65}
.b-w2{grid-column:span 2}
.b-w3{grid-column:span 3}
.b-head{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.b-head .c-ico{margin-bottom:0;width:42px;height:42px;border-radius:11px}
.b-head .c-ico .icon{width:21px;height:21px}
/* embedded mini UI preview */
.b-visual{margin-top:22px;border-radius:13px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#0A1826,#071320);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:16px;position:relative}
.b-visual::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,134,199,.12),transparent 65%)}
.b-visual svg{position:relative;z-index:1}
.bento-card.tall .b-visual{margin-top:auto}

/* ---------- before / after ---------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:stretch}
.ba>*{min-width:0}
.ba-col{border-radius:var(--r-lg);padding:34px;position:relative;overflow:hidden}
.ba-before{background:var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
.ba-after{background:linear-gradient(158deg,#0B2B47,#071825);border:1px solid rgba(46,134,199,.28);
  box-shadow:0 0 70px rgba(46,134,199,.14),var(--sh),var(--rim)}
.ba-h{display:flex;align-items:center;gap:.75rem;margin-bottom:1.7rem;position:relative;z-index:2;flex-wrap:wrap}
.ba-h h3{color:var(--ink)}
.ba-chip{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:.34rem .8rem;border-radius:100px}
.ba-before .ba-chip{background:rgba(255,90,90,.13);color:#FF8A8A;border:1px solid rgba(255,90,90,.28)}
.ba-after .ba-chip{background:var(--orange-dim);color:var(--orange-lit);border:1px solid rgba(255,112,18,.4)}
.ba-list{list-style:none;position:relative;z-index:2}
.ba-list li{display:flex;align-items:flex-start;gap:.8rem;padding:.6rem 0;font-size:.94rem}
.ba-before li{color:var(--faint)}
.ba-after li{color:#BDD5E7}
.ba-list .icon{width:18px;height:18px;margin-top:3px;flex:none;stroke-width:2.3}
.ba-before .icon{color:#FF5A5A;opacity:.7}
.ba-after .icon{color:var(--orange)}
.ba-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-width:122px}
.ba-mid-line{width:1px;flex:1;background:linear-gradient(180deg,transparent,var(--line-2),transparent);min-height:34px}
.ba-badge{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,#12314C,#071825);
  border:1px solid rgba(255,112,18,.45);color:var(--ink);
  box-shadow:0 0 44px rgba(255,112,18,.26),var(--rim);
  font-size:.63rem;font-weight:800;letter-spacing:.06em;line-height:1.4;padding:8px}
.ba-badge .icon{width:21px;height:21px;color:var(--orange);margin:0 auto 5px;stroke-width:2.2}

/* ---------- excel feature ---------- */
.xl{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.xl>*{min-width:0}
/* the spreadsheet stays light — it's a real artefact from the "before" world */
.sheet{background:#F4F7F9;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;
  max-width:100%;min-width:0;box-shadow:var(--sh-lg);position:relative}
.sheet::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,10,17,.16));border-radius:var(--r)}
.sheet-top{display:flex;align-items:center;gap:.6rem;padding:12px 16px;background:#E7EDF1;
  border-bottom:1px solid #D3DCE3;font-size:.82rem;font-weight:600;color:#5A6B78}
.sheet-top .icon{width:17px;height:17px;color:#1D6F42}
.sheet-scroll{overflow-x:auto}
.sheet table{width:100%;border-collapse:collapse;font-size:.78rem}
.sheet th{background:#DCE4EA;color:#2A3A47;font-weight:600;text-align:left;padding:9px 11px;
  border-right:1px solid #C8D3DB;border-bottom:1px solid #C8D3DB;white-space:nowrap}
.sheet td{padding:9px 11px;border-right:1px solid #E1E7EC;border-bottom:1px solid #E1E7EC;
  color:#3E4E5C;white-space:nowrap}
.sheet tbody tr:hover td{background:#E8F0F6}
.sheet-foot{padding:10px 14px;background:#FDF1E5;border-top:1px solid #E8D5C2;
  font-size:.78rem;color:#9A5410;display:flex;align-items:center;gap:.5rem}
.sheet-foot .icon{width:15px;height:15px;flex:none}
.xl-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.4rem;margin:1.6rem 0 2rem}
.xl-list li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--body);padding:.42rem 0}
.xl-list .icon{width:16px;height:16px;color:var(--orange);flex:none;stroke-width:2.5}

/* ---------- demos ---------- */
.demo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--rim);
  transition:transform .3s,box-shadow .3s,border-color .3s,background .3s}
.demo-card:hover{transform:translateY(-5px);box-shadow:var(--sh),var(--rim);
  border-color:var(--line-2);background:var(--card-2)}
.demo-chart{background:linear-gradient(165deg,#0B1D2E,#071320);border-bottom:1px solid var(--line);
  padding:20px 22px;position:relative}
.demo-chart::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%,rgba(46,134,199,.2),transparent 65%)}
.demo-body{padding:22px;display:flex;flex-direction:column;flex:1}
.demo-body h3{margin-bottom:.35rem}
.demo-body>p{font-size:.87rem;color:var(--muted);margin-bottom:1.1rem}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1.2rem}
.kpi{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.kpi span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600}
.kpi b{font-size:1rem;color:var(--ink);font-weight:700;letter-spacing:-.02em}
.demo-body .btn{margin-top:auto}

/* ---------- industries ---------- */
.inds{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ind{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 14px;
  text-align:center;box-shadow:var(--rim);transition:transform .28s,border-color .28s,background .28s,box-shadow .28s}
.ind:hover{transform:translateY(-4px);border-color:rgba(255,112,18,.38);background:var(--card-2);
  box-shadow:0 0 30px rgba(255,112,18,.12),var(--rim)}
.ind .icon{width:26px;height:26px;color:var(--blue-soft);margin:0 auto 12px;transition:.28s}
.ind:hover .icon{color:var(--orange);transform:scale(1.1)}
.ind b{font-size:.83rem;color:var(--body);font-weight:600;line-height:1.35}
.ind:hover b{color:var(--ink)}

/* ---------- automation tool ---------- */
.auto-wrap{max-width:900px;margin-inline:auto;position:relative;z-index:2}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:2rem}
.opt{display:flex;align-items:center;gap:.75rem;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;cursor:pointer;
  transition:.22s;font-size:.88rem;color:var(--body);position:relative;box-shadow:var(--rim)}
.opt:hover{background:var(--card-2);border-color:var(--line-2);color:var(--ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.26);flex:none;
  display:grid;place-items:center;transition:.22s}
.opt .box .icon{width:12px;height:12px;stroke-width:3;color:#fff;opacity:0;transform:scale(.5);transition:.22s}
.opt.on{background:rgba(255,112,18,.11);border-color:rgba(255,112,18,.45);color:var(--ink);
  box-shadow:0 0 24px rgba(255,112,18,.14),var(--rim)}
.opt.on .box{background:var(--orange);border-color:var(--orange)}
.opt.on .box .icon{opacity:1;transform:scale(1)}
.result{background:linear-gradient(158deg,#0B2B47,#071825);border:0 solid rgba(46,134,199,.3);
  border-radius:var(--r-lg);padding:0 34px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.7,.3,1),opacity .4s,padding .5s,border-width .5s}
.result.on{max-height:1000px;opacity:1;padding:34px;border-width:1px;
  box-shadow:0 0 70px rgba(46,134,199,.16),var(--rim)}
.result h4{font-size:1.28rem;margin-bottom:.4rem}
.result>p{color:var(--muted);font-size:.93rem;margin-bottom:1.4rem}
.result ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1.5rem;margin-bottom:1.8rem}
.result li{display:flex;align-items:center;gap:.65rem;font-size:.92rem;color:#C9DEEE;animation:fadeIn .4s both}
.result li .icon{width:16px;height:16px;color:var(--orange);flex:none;stroke-width:2.6}
@keyframes fadeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.proc::before{content:'';position:absolute;top:31px;left:12%;right:12%;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 15px)}
.step{position:relative;text-align:center}
.step-n{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--card);border:1px solid var(--line-2);color:var(--blue-soft);font-weight:800;font-size:1.02rem;
  position:relative;z-index:2;transition:.3s;box-shadow:var(--rim)}
.step:hover .step-n{border-color:var(--orange);background:var(--orange-dim);color:var(--orange);
  transform:scale(1.08);box-shadow:0 0 34px rgba(255,112,18,.28),var(--rim)}
.step h3{margin-bottom:.55rem}
.step p{font-size:.91rem;color:var(--muted)}

/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 40px}
.why-item{display:flex;gap:1.1rem}
.why-ico{width:46px;height:46px;border-radius:12px;background:var(--orange-dim);
  border:1px solid rgba(255,112,18,.28);color:var(--orange);display:grid;place-items:center;flex:none;
  box-shadow:var(--rim)}
.why-item h3{margin-bottom:.4rem}
.why-item p{font-size:.92rem;color:var(--muted)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about>*{min-width:0}
.quote{border-left:2px solid var(--orange);padding-left:1.5rem;margin:1.8rem 0;
  font-size:1.16rem;color:var(--ink);font-weight:600;line-height:1.52;letter-spacing:-.018em}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.photo{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(155deg,#0D2033,#071320);
  border:1px dashed rgba(255,255,255,.14);aspect-ratio:4/5;
  display:grid;place-items:center;text-align:center;padding:16px}
.photo:first-child{grid-row:span 2;aspect-ratio:auto;min-height:100%}
/* The image sits above the placeholder rather than replacing it. A missing
   file removes the <img> via onerror, uncovering the placeholder again. */
.photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:2}
.photo:has(img){border-style:solid;border-color:var(--line)}
.photo .ph{color:var(--faint)}
.photo .ph .icon{width:28px;height:28px;margin:0 auto 8px;opacity:.7}
.photo .ph b{display:block;font-size:.76rem;font-weight:600;color:var(--muted)}
.photo .ph code{font-size:.66rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- case studies ---------- */
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--rim);transition:transform .3s,box-shadow .3s,border-color .3s,background .3s}
.case:hover{transform:translateY(-5px);box-shadow:var(--sh),var(--rim);
  border-color:var(--line-2);background:var(--card-2)}
.case-top{padding:20px 26px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.7rem}
.case-top .icon{width:21px;height:21px;color:var(--orange)}
.case-tag{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.case-body{padding:26px}
.case-body h3{margin-bottom:1.2rem}
.case-row{padding-left:1.6rem;position:relative;margin-bottom:1.1rem}
.case-row::before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.18)}
.case-row:last-child{margin-bottom:0}
.case-row:last-child::before{background:var(--orange);box-shadow:0 0 10px var(--orange)}
.case-row b{display:block;font-size:.65rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:.3rem}
.case-row p{font-size:.91rem;color:var(--muted)}

/* ---------- saas ---------- */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:44px 0}
.jn{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 12px;text-align:center;transition:.3s;position:relative;box-shadow:var(--rim)}
.jn:hover{background:var(--card-2);border-color:var(--line-2);transform:translateY(-4px)}
.jn:last-child{background:rgba(255,112,18,.1);border-color:rgba(255,112,18,.35);
  box-shadow:0 0 34px rgba(255,112,18,.15),var(--rim)}
.jn .icon{width:23px;height:23px;color:var(--blue-soft);margin:0 auto 10px}
.jn:last-child .icon{color:var(--orange)}
.jn b{font-size:.86rem;color:var(--ink);font-weight:600}
.jn-num{position:absolute;top:8px;left:11px;font-size:.63rem;color:var(--faint);font-weight:700}
.saas-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem 2rem;list-style:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--rim)}
.saas-caps li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--body)}
.saas-caps .icon{width:16px;height:16px;color:var(--orange);flex:none;stroke-width:2.4}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}

/* ---------- integrated websites ---------- */
.int-lead{max-width:68ch;margin:0 auto 3rem;text-align:center;font-size:1.04rem}
.int-lead strong{color:var(--ink)}

/* One system, three faces. The stack shows them as layers of a single object
   rather than three separate products, which is the whole point of the pitch. */
.stack{max-width:620px;margin:0 auto 3.4rem;position:relative}
.layer{position:relative;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);padding:18px 22px;margin-bottom:12px;box-shadow:var(--rim);
  display:flex;align-items:center;gap:1rem}
.layer::after{content:'';position:absolute;left:50%;bottom:-12px;width:1.5px;height:12px;
  background:linear-gradient(var(--line-2),transparent)}
.layer:last-child{margin-bottom:0}
.layer:last-child::after{display:none}
.layer .icon{width:21px;height:21px;color:var(--orange)}
.layer b{display:block;color:var(--ink);font-size:.97rem;font-weight:600}
.layer span{font-size:.87rem;color:var(--muted);display:block;line-height:1.5}
.layer.base{background:linear-gradient(180deg,rgba(7,63,104,.5),rgba(7,63,104,.22));
  border-color:rgba(46,134,199,.4)}
.layer.base .icon{color:var(--blue-soft)}

.int-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.int-card{min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 28px;box-shadow:var(--rim);transition:.24s}
.int-card:hover{background:var(--card-2);border-color:var(--line-2);transform:translateY(-3px)}
.int-card .n{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);font-weight:700;display:block;margin-bottom:.65rem}
.int-card h3{font-size:1.06rem;margin-bottom:.5rem}
.int-card p{font-size:.92rem;color:var(--body);margin:0}

.int-note{margin-top:2.6rem;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--orange);border-radius:var(--r-sm);padding:22px 26px;
  max-width:760px;margin-inline:auto}
.int-note b{color:var(--ink)}
.int-note p{margin:0;font-size:.95rem}
.plan{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;
  display:flex;flex-direction:column;box-shadow:var(--rim);transition:transform .3s,box-shadow .3s,border-color .3s}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh),var(--rim);border-color:var(--line-2)}
.plan.hot{border-color:rgba(255,112,18,.42);
  background:linear-gradient(170deg,rgba(255,112,18,.07),var(--card) 42%);
  box-shadow:0 0 60px rgba(255,112,18,.13),var(--rim);position:relative}
.plan.hot::after{content:'MOST COMMON';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--orange);color:#fff;font-size:.61rem;font-weight:800;letter-spacing:.12em;
  padding:.34rem .95rem;border-radius:100px;white-space:nowrap;box-shadow:0 4px 18px rgba(255,112,18,.45)}
.plan-ico{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--blue-soft);display:grid;place-items:center;margin-bottom:16px;
  box-shadow:var(--rim)}
.plan.hot .plan-ico{background:var(--orange-dim);border-color:rgba(255,112,18,.32);color:var(--orange)}
.plan h3{font-size:1.26rem;margin-bottom:.5rem}
.plan>p{font-size:.91rem;color:var(--muted);min-height:52px}
.plan ul{list-style:none;margin:1.5rem 0 2rem;border-top:1px solid var(--line);padding-top:1.3rem}
.plan li{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem 0;font-size:.91rem;color:var(--body)}
.plan li .icon{width:16px;height:16px;color:var(--ok);flex:none;margin-top:3px;stroke-width:2.6}
.plan .btn{margin-top:auto}

/* ---------- assessment CTA ---------- */
.cta-box{max-width:940px;margin-inline:auto;text-align:center;position:relative;z-index:2}
.cta-badge{display:inline-flex;align-items:center;gap:.6rem;background:var(--orange-dim);
  border:1px solid rgba(255,112,18,.42);color:var(--orange-lit);padding:.5rem 1.15rem;border-radius:100px;
  font-size:.79rem;font-weight:700;margin-bottom:1.5rem;box-shadow:0 0 30px rgba(255,112,18,.14)}
.cta-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2.4rem 0;list-style:none}
.cta-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.9rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.89rem;color:var(--body);box-shadow:var(--rim)}
.cta-list .icon{width:16px;height:16px;color:var(--orange);flex:none;stroke-width:2.4}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.form-grid>*{min-width:0}
.form-side h2{margin-bottom:1rem}
.form-side>p{color:var(--muted);margin-bottom:2rem}
.fs-item{display:flex;gap:1rem;margin-bottom:1.6rem}
.fs-ico{width:42px;height:42px;border-radius:11px;background:var(--orange-dim);
  border:1px solid rgba(255,112,18,.26);color:var(--orange);display:grid;place-items:center;flex:none}
.fs-item b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.fs-item em{font-style:normal;font-size:.88rem;color:var(--muted)}
.f-link{color:var(--orange);font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(255,112,18,.3);transition:.2s}
.f-link:hover{border-bottom-color:var(--orange)}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;
  box-shadow:var(--sh),var(--rim);position:relative;overflow:hidden}
.form-card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px circle at 70% -10%,rgba(46,134,199,.12),transparent 62%)}
.form-card > *{position:relative;z-index:1}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fg{margin-bottom:17px}
.fg label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.fg .req{color:var(--orange)}
.fg .opt-txt{color:var(--faint);font-weight:400}
.fg input,.fg select,.fg textarea{width:100%;padding:.78rem .9rem;border:1px solid var(--line-2);
  border-radius:10px;font-family:inherit;font-size:.92rem;color:var(--ink);
  background:rgba(0,0,0,.28);transition:.2s}
.fg input::placeholder,.fg textarea::placeholder{color:var(--faint)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--orange);
  background:rgba(0,0,0,.42);box-shadow:0 0 0 3px rgba(255,112,18,.14)}
.fg textarea{resize:vertical;min-height:112px}
.fg select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237691A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.fg select option{background:#0C1B29;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-2);
  border-radius:100px;padding:.5rem .95rem;font-size:.86rem;color:var(--muted);cursor:pointer;transition:.2s}
.chip:hover{border-color:rgba(255,255,255,.3);color:var(--ink);background:rgba(255,255,255,.04)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip .icon{width:0;height:14px;opacity:0;transition:.2s;stroke-width:3;overflow:hidden}
.chip.on{background:var(--orange-dim);border-color:rgba(255,112,18,.5);color:var(--orange-lit);font-weight:600}
.chip.on .icon{opacity:1;width:14px}
.drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:26px;text-align:center;cursor:pointer;
  transition:.22s;position:relative;background:rgba(0,0,0,.22)}
.drop:hover,.drop.over{border-color:var(--orange);background:var(--orange-dim)}
.drop.bad{border-color:var(--bad);background:rgba(214,69,69,.08)}
.drop.bad b{color:var(--bad)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop .icon{width:25px;height:25px;color:var(--orange);margin:0 auto 9px}
.drop b{display:block;font-size:.89rem;color:var(--ink);word-break:break-word}
.drop em{font-style:normal;font-size:.79rem;color:var(--faint)}
.form-note{text-align:center;font-size:.8rem;color:var(--faint);margin-top:1rem}
.form-note a{color:var(--blue-soft);text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:var(--orange-lit)}
.ok-msg{display:none;text-align:center;padding:34px 20px}
.ok-msg.on{display:block;animation:fadeIn .5s}
.ok-ico{width:66px;height:66px;border-radius:50%;background:rgba(43,212,160,.12);
  border:1px solid rgba(43,212,160,.3);color:var(--ok);
  display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 0 40px rgba(43,212,160,.18)}
.ok-ico .icon{width:31px;height:31px;stroke-width:2.5}
.ok-msg h3{font-size:1.32rem;margin-bottom:.6rem}
.ok-msg p{color:var(--muted);font-size:.94rem;max-width:40ch;margin-inline:auto}
.ok-msg strong{color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--void);color:var(--muted);padding:74px 0 0;position:relative;overflow:hidden;
  border-top:1px solid var(--line)}
footer::before{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:900px;height:340px;border-radius:50%;background:#14548C;filter:blur(120px);opacity:.16;pointer-events:none}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:44px;
  position:relative;z-index:2}
.f-logo{--logo-ink:#FFFFFF;height:38px;margin-bottom:1.2rem}
.f-about{font-size:.9rem;line-height:1.72;margin-bottom:1.4rem;max-width:34ch;color:var(--muted)}
.f-social{display:flex;gap:.6rem}
.f-social a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:.24s}
.f-social a:hover{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(255,112,18,.36)}
.f-social .icon{width:16px;height:16px}
footer h4{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin-bottom:1.1rem}
footer ul{list-style:none}
footer ul a{display:block;padding:.42rem 0;font-size:.9rem;text-decoration:none;color:var(--muted);transition:.2s}
footer ul a:hover{color:var(--orange);transform:translateX(3px)}
.f-contact li{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem 0;font-size:.9rem}
.f-contact .icon{width:15px;height:15px;color:var(--orange);flex:none;margin-top:4px}
.f-ph{color:var(--faint);font-style:italic}
.f-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;
  justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;
  position:relative;z-index:2;color:var(--faint)}
.f-bottom nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.f-bottom a{text-decoration:none;color:var(--faint);transition:.2s}
.f-bottom a:hover{color:var(--orange)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(2,6,11,.82);backdrop-filter:blur(7px);animation:fadeIn .25s}
.modal-box{position:relative;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);width:100%;max-width:960px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:var(--sh-lg),0 0 90px rgba(46,134,199,.14);
  animation:popIn .34s cubic-bezier(.2,.9,.3,1);overflow:hidden}
@keyframes popIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:20px 26px;
  background:linear-gradient(120deg,#0C2E4C,#08202F);border-bottom:1px solid var(--line);flex:none}
.modal-head h3{font-size:1.14rem;display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.modal-head .icon{width:20px;height:20px;color:var(--orange)}
.modal-head small{display:block;font-size:.77rem;color:var(--faint);font-weight:400;margin-top:2px}
.modal-x{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:.2s;flex:none}
.modal-x:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.modal-body{padding:26px;overflow-y:auto}
.m-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px}
.m-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  position:relative;overflow:hidden;box-shadow:var(--rim)}
.m-kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange);
  box-shadow:0 0 12px var(--orange)}
.m-kpi span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  font-weight:600;margin-bottom:.3rem}
.m-kpi b{font-size:1.58rem;color:var(--ink);font-weight:800;letter-spacing:-.03em;line-height:1;display:block}
.m-kpi i{font-style:normal;font-size:.73rem;color:var(--ok);display:inline-flex;align-items:center;gap:3px;margin-top:6px}
.m-kpi i .icon{width:12px;height:12px;stroke-width:2.6}
.m-panels{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:20px}
.m-panels>*{min-width:0}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--rim)}
.panel h4{font-size:.85rem;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;
  justify-content:space-between;gap:.5rem}
.panel h4 em{font-style:normal;font-size:.71rem;color:var(--faint);font-weight:500}
.m-table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--rim)}
.m-scroll{overflow-x:auto}
.m-table table{width:100%;border-collapse:collapse;font-size:.86rem}
.m-table th{background:rgba(255,255,255,.035);text-align:left;padding:12px 16px;font-size:.68rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);white-space:nowrap}
.m-table td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted);white-space:nowrap}
.m-table tr:last-child td{border-bottom:none}
.m-table tbody tr:hover{background:rgba(255,255,255,.03)}
.m-table td b{color:var(--ink);font-weight:600}
.pill{display:inline-flex;align-items:center;padding:.24rem .65rem;border-radius:100px;
  font-size:.72rem;font-weight:600;white-space:nowrap;border:1px solid}
.p-ok{background:rgba(43,212,160,.12);color:#4FE0B4;border-color:rgba(43,212,160,.28)}
.p-go{background:rgba(79,163,222,.12);color:#7CC0F0;border-color:rgba(79,163,222,.28)}
.p-wn{background:rgba(255,176,32,.12);color:#FFC957;border-color:rgba(255,176,32,.28)}
.p-bd{background:rgba(255,90,90,.12);color:#FF8A8A;border-color:rgba(255,90,90,.28)}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.81rem}
.bar-row .lbl{width:124px;flex:none;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:100px;width:0;
  background:linear-gradient(90deg,#2E86C7,#4FA3DE);box-shadow:0 0 12px rgba(79,163,222,.5);
  animation:grow 1s cubic-bezier(.2,.8,.3,1) forwards}
.bar-fill.o{background:linear-gradient(90deg,#F26206,#FF9243);box-shadow:0 0 12px rgba(255,112,18,.55)}
.bar-row .val{width:48px;flex:none;text-align:right;color:var(--ink);font-weight:600}
@keyframes grow{to{width:var(--w)}}
.modal-foot{padding:18px 26px;background:var(--void);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;flex:none}
.modal-foot p{font-size:.84rem;color:var(--faint)}

.anim-bar{transform-origin:bottom;animation:barUp .85s cubic-bezier(.2,.8,.3,1) both}
@keyframes barUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.anim-line{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.5s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.anim-ring{animation:ring 1.3s cubic-bezier(.3,.7,.3,1) .2s both}
@keyframes ring{from{stroke-dashoffset:var(--dash)}to{stroke-dashoffset:0}}

/* ---------- capability strip ---------- */
.strip{padding:24px 0 44px;background:transparent;position:relative;z-index:2}
.strip-in{display:flex;align-items:center;justify-content:center;
  gap:1rem 2.4rem;flex-wrap:wrap}
.strip-in span{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted);
  font-size:.85rem;font-weight:600;white-space:nowrap}
.strip-in .icon{width:16px;height:16px;color:var(--orange);flex:none}

/* ---------- before -> after morph ---------- */
.morph{max-width:840px;margin-inline:auto;position:relative;z-index:2}
.morph-ctl{position:relative;display:flex;padding:5px;border-radius:100px;width:max-content;
  margin:0 auto 34px;background:var(--card);border:1px solid var(--line);box-shadow:var(--rim)}
.morph-ctl button{position:relative;z-index:2;border:0;background:none;cursor:pointer;
  padding:.62rem 1.75rem;border-radius:100px;font-size:.84rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.morph-ctl button.on{color:#fff}
.morph-pill{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;
  width:calc(50% - 5px);border-radius:100px;
  background:linear-gradient(180deg,#FF832E,#F26206);
  box-shadow:0 4px 20px rgba(255,112,18,.45);
  transition:transform .5s cubic-bezier(.4,1.25,.5,1)}
.morph[data-state="after"] .morph-pill{transform:translateX(100%)}

.morph-card{position:relative;border-radius:var(--r-lg);padding:34px 38px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .6s,box-shadow .6s,background .6s}
.morph[data-state="before"] .morph-card{border-color:rgba(255,90,90,.2);
  box-shadow:0 0 60px rgba(255,90,90,.06),var(--rim)}
.morph[data-state="after"] .morph-card{background:linear-gradient(158deg,#0B2B47,#071825);
  border-color:rgba(255,112,18,.3);box-shadow:0 0 90px rgba(255,112,18,.13),var(--sh),var(--rim)}
/* light sweeps across the card at the moment of change */
.morph-card::after{content:'';position:absolute;top:0;bottom:0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,146,67,.13),transparent);
  opacity:0;left:-40%}
.morph.sweep .morph-card::after{animation:sweep .85s cubic-bezier(.4,0,.3,1)}
@keyframes sweep{0%{left:-40%;opacity:0}18%{opacity:1}100%{left:105%;opacity:0}}

.morph-h{display:grid;margin-bottom:1.3rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.morph-h > span{grid-area:1/1;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  transition:opacity .45s,transform .45s}
.morph-h h3{font-size:1.12rem;margin:0}
.mrows{list-style:none;display:grid;gap:0}
.mrow{display:grid;align-items:center;min-height:2.9rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:0}
.mrow > span{grid-area:1/1;display:flex;align-items:flex-start;gap:.85rem;font-size:.97rem;
  transition:opacity .5s cubic-bezier(.3,.7,.3,1),transform .5s cubic-bezier(.3,.7,.3,1),filter .5s;
  transition-delay:calc(var(--i) * 55ms)}
.mrow .icon{width:18px;height:18px;margin-top:3px;flex:none;stroke-width:2.3}
.m-b{color:var(--faint)}
.m-b .icon{color:#FF5A5A;opacity:.75}
.m-a{color:#D6E7F4}
.m-a .icon{color:var(--orange)}
.morph[data-state="before"] .m-a,
.morph[data-state="before"] .morph-h .h-a{opacity:0;transform:translateY(9px);pointer-events:none}
.morph[data-state="after"] .m-b,
.morph[data-state="after"] .morph-h .h-b{opacity:0;transform:translateY(-9px);filter:blur(2px);pointer-events:none}
.morph-foot{display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.8rem;font-size:.85rem;color:var(--faint)}
.morph-foot .icon{width:15px;height:15px;color:var(--orange)}
@media(prefers-reduced-motion:reduce){
  .morph-pill,.morph-card,.mrow>span,.morph-h>span{transition:none}
  .morph.sweep .morph-card::after{animation:none}
}

/* ---------- SaaS explainer ---------- */
.saas-explain{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:56px}
.se-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--rim)}
.se-card h3{font-size:1.1rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.7rem}
.se-card h3 .icon{width:20px;height:20px;color:var(--orange);flex:none}
.se-card p{font-size:.95rem;color:var(--muted);line-height:1.72}
.se-card p+p{margin-top:.9rem}
.se-eg{font-size:.88rem;color:var(--faint);margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.se-card.old{background:rgba(255,90,90,.035);border-color:rgba(255,90,90,.15)}
.se-card.old h3 .icon{color:#FF8A8A}

.saas-sub{text-align:center;max-width:640px;margin:0 auto 32px}
.saas-sub h3{font-size:1.55rem;font-weight:800;letter-spacing:-.028em;margin-bottom:.6rem}
.saas-sub p{color:var(--muted);font-size:.98rem}

.saas-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:60px}
.path{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--rim);position:relative;overflow:hidden}
.path.hot{background:linear-gradient(165deg,rgba(255,112,18,.07),var(--card) 46%);
  border-color:rgba(255,112,18,.3);box-shadow:0 0 60px rgba(255,112,18,.1),var(--rim)}
.path-tag{display:inline-flex;align-items:center;gap:.45rem;font-size:.66rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-soft);
  background:rgba(79,163,222,.1);border:1px solid rgba(79,163,222,.24);
  padding:.3rem .75rem;border-radius:100px;margin-bottom:1.1rem}
.path.hot .path-tag{color:var(--orange-lit);background:var(--orange-dim);
  border-color:rgba(255,112,18,.35)}
.path h3{font-size:1.2rem;margin-bottom:.6rem}
.path>p{font-size:.94rem;color:var(--muted);margin-bottom:1.3rem}
.path ul{list-style:none}
.path li{display:flex;align-items:flex-start;gap:.7rem;font-size:.93rem;color:var(--body);padding:.44rem 0}
.path li .icon{width:16px;height:16px;color:var(--orange);flex:none;margin-top:4px;stroke-width:2.5}

/* ---------- floating chrome objects + 3D tilt ---------- */
.obj{position:absolute;pointer-events:none;z-index:1;will-change:transform;contain:layout paint;
  transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg))}
.obj svg{width:100%;height:auto;display:block;transform:translateZ(0)}
/* pushed further back: dimmer, softer, slightly out of focus */
.obj.deep{opacity:.5}
.obj.deep svg{filter:blur(2.5px)}
.obj.mid{opacity:.78}
.obj.mid svg{filter:blur(.7px)}

.o-sphere{width:92px;left:48.8%;top:33%;z-index:3}
.o-torus{width:206px;right:-64px;bottom:15%}
.o-star{width:116px;left:-1%;bottom:17%}
.o-cone{width:88px;right:13%;top:3%}
.o-saas-star{width:104px;left:2%;top:14%}
.o-saas-torus{width:180px;right:-40px;bottom:12%}
.o-int-torus{width:164px;right:-30px;top:14%}
.o-cta-sphere{width:88px;right:6%;top:16%}

/* cursor-driven tilt — the mockup and cards lean toward the pointer */
.mock{transform:perspective(1800px)
  rotateY(calc(-6deg + var(--ty,0deg)))
  rotateX(calc(2.5deg + var(--tx,0deg)));
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.bento-card,.demo-card{transform:perspective(1100px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.bento-card:hover,.demo-card:hover{transform:perspective(1100px)
  rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-5px)}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .nav-links{gap:1.25rem}
  .nav-links a{font-size:.86rem}
  .nav-in{gap:1rem}
  .nav-cta > .btn{padding:.6rem 1rem;font-size:.82rem}
}

@media(max-width:1080px){
  .c-4{grid-template-columns:repeat(2,1fr)}
  .plan{padding:26px 22px}
  .plans{gap:16px}
  .o-sphere{display:none}
  .inds{grid-template-columns:repeat(3,1fr)}
  .opts{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .m-kpis{grid-template-columns:repeat(2,1fr)}
  .m-panels{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-w2,.b-w3{grid-column:span 2}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:46px;text-align:center}
  .hero .lede,.hero .sub{margin-inline:auto}
  .hero-btns,.hero-note{justify-content:center}
  .mock,.hero-visual:hover .mock{transform:none}
  .fc-a{left:6px;bottom:-18px}.fc-b{right:6px;top:-16px}
  .flow-in{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .flow-step+.flow-step::before{display:none}
  .xl,.about,.form-grid{grid-template-columns:1fr;gap:36px}
  .ba{grid-template-columns:1fr}
  .ba-mid{flex-direction:row;min-height:74px;width:100%}
  .ba-mid-line{width:auto;height:1px;flex:1;min-height:0;
    background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
  .proc{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .proc::before{display:none}
  .journey{grid-template-columns:repeat(2,1fr)}
  .photo:first-child{grid-row:auto;aspect-ratio:4/5;min-height:0}
}
/* The nav switches to the burger at 900px, not 820px: seven links plus a CTA
   no longer fit below that, and a cramped nav is worse than a menu button. */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#071320;border-bottom:1px solid var(--line);
    padding:12px 24px 20px;box-shadow:var(--sh);max-height:calc(100vh - 70px);overflow-y:auto}
  .nav-links.open li{border-bottom:1px solid var(--line)}
  .nav-links.open > li:last-child{display:block;border:none;padding-top:14px}
  .nav-links.open a{padding:.95rem 0;font-size:1rem;display:block}
  .nav-links.open a::after{display:none}
  .nav-links.open .btn{padding:.95rem 1.5rem;color:#fff}
  .burger{display:flex}
  .nav-cta > .btn{display:none}
}

@media(max-width:820px){
  .obj{display:none}
  .mock,.bento-card,.demo-card,.bento-card:hover,.demo-card:hover{transform:none}
  .bento-card:hover,.demo-card:hover{transform:translateY(-5px)}
  section{padding:68px 0}
  .sec-head{margin-bottom:42px}
  .cards.c-3,.cards.c-4,.plans,.bento,.int-grid{grid-template-columns:1fr}

  /* The wide bento cards drop to one column here, which would shrink their
     illustrations until the labels are 4px and unreadable. Give those three a
     scrollable viewport instead and hold the drawing at a legible size — a
     sideways swipe on a detailed diagram is a familiar interaction; an
     illegible smear is not. The container scrolls, so the page still does not. */
  .b-visual{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .b-w2 .b-visual > svg{min-width:680px}
  .b-w3 .b-visual > svg{min-width:800px}
  .tall .b-visual > svg{min-width:330px}
  .morph-card{padding:26px 20px}
  .mrow>span{font-size:.92rem;gap:.7rem}
  .mrow{min-height:2.6rem;padding:.6rem 0}
  .morph-ctl button{padding:.6rem 1.3rem;font-size:.79rem}
  .strip-in{gap:.85rem 1.6rem}
  .strip-in span{font-size:.81rem}
  .b-w2,.b-w3{grid-column:span 1}
  .why{grid-template-columns:1fr}
  .result ul,.saas-caps,.xl-list{grid-template-columns:1fr}
  .saas-explain,.saas-paths{grid-template-columns:1fr}
  .se-card,.path{padding:26px 22px}
  .saas-sub h3{font-size:1.3rem}
  .cta-list{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .modal-body{padding:18px}
  .logo-slot{min-width:112px;height:46px}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap,.nav-in,.hero-grid,.flow-in{padding-inline:18px}
  section{padding:54px 0}
  .hero{padding-top:54px}
  .card,.bento-card,.form-card,.plan,.ba-col{padding:24px}
  .opts,.journey,.inds,.row,.f-grid,.kpis,.m-kpis{grid-template-columns:1fr}
  .flow-in{grid-template-columns:1fr;gap:20px}
  .hero-btns .btn{width:100%}
  .f-bottom{flex-direction:column;text-align:center}
  .float-card{display:none}
  .obj{display:none}
  .photos{grid-template-columns:1fr 1fr}
  .logo{height:34px}
  .orb{max-width:88vw;max-height:88vw;filter:blur(70px)}
  .hero-visual::before{filter:blur(34px)}
}


/* =====================================================================
   WordPress + Elementor integration (added for the WordPress version)
   ===================================================================== */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}
html{scroll-padding-top:96px}
/* Elementor wrappers must not add spacing around the original sections */
.ihub-sec.e-con,.ihub-sec.e-con.e-flex{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
  --gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--content-width:100%;--container-max-width:100%;
  padding:0!important;gap:0!important;margin:0!important;max-width:100%!important;display:block!important}
.ihub-sec>.elementor-widget,.ihub-sec .elementor-widget-html,.ihub-sec .elementor-widget-container{
  width:100%;max-width:100%;margin:0!important;padding:0!important}
.elementor-widget:not(:last-child){margin-block-end:0}
.elementor a{box-shadow:none}
.site-main>.elementor{width:100%}
/* the menu WordPress builds */
.nav-links .current_page_item>a{color:var(--ink)}
/* inside the Elementor editor, show everything (no scroll-reveal) */
.elementor-editor-active .rv,.elementor-editor-preview .rv{opacity:1!important;transform:none!important}
/* inner pages: first section sits a little closer to the menu */
body:not(.home) .site-main>.elementor>.e-con:first-child section,
body:not(.home) .site-main>section:first-child{padding-top:72px}
/* ---------- Our Solutions (product cards) ---------- */
.products{overflow:hidden}
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;position:relative;z-index:2;max-width:1040px;margin:0 auto}
.prod-card{display:flex;flex-direction:column;gap:1rem;background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px;box-shadow:var(--rim),var(--sh);transition:border-color .25s,transform .25s}
.prod-card:hover{border-color:rgba(255,112,18,.45);transform:translateY(-3px)}
.prod-top{display:flex;align-items:center;gap:14px}
.prod-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--orange-dim);color:var(--orange)}
.prod-ico.b{background:var(--blue-dim);color:var(--blue-soft)}
.prod-ico .icon{width:26px;height:26px}
.prod-name{flex:1;min-width:0}
.prod-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.prod-card h3{font-size:1.6rem;color:var(--ink);line-height:1.2;letter-spacing:-.02em}
.prod-card h3 a{color:inherit;text-decoration:none}
.prod-card h3 a:hover{color:var(--orange-lit)}
.prod-badge{flex:none;font-size:.74rem;font-weight:600;color:var(--ok);border:1px solid rgba(43,212,160,.35);background:rgba(43,212,160,.08);border-radius:99px;padding:.3rem .75rem;white-space:nowrap}
.prod-tagline{color:var(--orange-lit);font-weight:600;font-size:1.05rem}
.prod-list{list-style:none;display:grid;gap:.55rem}
.prod-list li{display:flex;gap:.6rem;align-items:flex-start;color:var(--body);font-size:.95rem}
.prod-list .icon{flex:none;width:18px;height:18px;color:var(--ok);margin-top:.22rem}
.prod-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.4rem}
.prod-meta>div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.prod-meta b{display:block;color:var(--ink);font-size:1.35rem;line-height:1.2}
.prod-meta span{font-size:.8rem;color:var(--muted);line-height:1.4;display:block}
.prod-card .btn{margin-top:auto}
.prod-note{text-align:center;color:var(--faint);font-size:.78rem;margin-top:-.4rem}
@media (max-width:820px){
  .prod-grid{grid-template-columns:1fr}
  .prod-card{padding:24px}
  .prod-top{flex-wrap:wrap}
  .prod-badge{order:3}
}
/* menu: keep each item on one line now that there are 8 items */
.nav-links a{white-space:nowrap}
@media (min-width:901px) and (max-width:1440px){.nav-links{gap:1.05rem}.nav-links a{font-size:.83rem}.nav-cta .btn{padding-inline:1.1rem}}
@media (min-width:901px) and (max-width:1180px){.nav-links{gap:.8rem}.nav-links a{font-size:.78rem}.nav-cta .btn{font-size:.8rem;padding-inline:.9rem}}
@media (max-width:820px){.prod-name{flex:1 1 calc(100% - 70px)}.prod-badge{margin-left:66px}}
/* plain-content pages (e.g. pages you add later without Elementor) */
.ihub-plain{padding:80px 0}
.ihub-plain .wrap>*+*{margin-top:1rem}
.ihub-plain h1{color:var(--ink);font-size:clamp(2rem,5vw,2.9rem);line-height:1.15;margin-bottom:1rem}
.ihub-plain a{color:var(--blue-soft)}

/* ---- privacy page ---- */
.ihub-legal img,.ihub-legal svg{max-width:100%;display:block}
.ihub-legal h1,.ihub-legal h2,.ihub-legal h3{color:var(--ink);line-height:1.2;letter-spacing:-.024em;font-weight:700}
.ihub-legal a{color:var(--blue-soft)}
.ihub-legal a:hover{color:var(--orange-lit)}
.ihub-legal .wrap{max-width:820px;margin-inline:auto;padding:0 24px}
.ihub-legal .top{padding:70px 0 34px;position:relative;overflow:hidden}
.ihub-legal .top::before{content:'';position:absolute;left:50%;top:-140px;width:680px;height:420px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(46,134,199,.3),transparent 68%)}
.ihub-legal .eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-bottom:.7rem}
.ihub-legal h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:1rem}
.ihub-legal .lede{font-size:1.06rem;color:var(--body);max-width:62ch}
.ihub-legal .stamp{margin-top:1.4rem;font-size:.84rem;color:var(--faint);
  border-top:1px solid var(--line);padding-top:1rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.ihub-legal .legal-main{padding-bottom:80px;position:relative;z-index:1}
.ihub-legal h2{font-size:1.32rem;margin:2.9rem 0 .9rem;scroll-margin-top:90px;
  display:flex;align-items:baseline;gap:.7rem}
.ihub-legal h2 .n{font-size:.8rem;color:var(--orange);font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.ihub-legal h3{font-size:1rem;margin:1.6rem 0 .5rem;color:var(--ink)}
.ihub-legal p{margin-bottom:1rem}
.ihub-legal ul{margin:0 0 1.15rem 0;padding-left:1.15rem}
.ihub-legal li{margin-bottom:.5rem}
.ihub-legal li::marker{color:var(--orange)}
.ihub-legal strong{color:var(--ink);font-weight:600}
.ihub-legal .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin:1.4rem 0;box-shadow:var(--rim)}
.ihub-legal .card p:last-child,.ihub-legal .card ul:last-child{margin-bottom:0}
.ihub-legal .flag{background:rgba(255,176,32,.07);border-color:rgba(255,176,32,.32)}
.ihub-legal .flag .lbl{color:var(--warn);font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;display:block;margin-bottom:.5rem}
.ihub-legal .tbl{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.92rem}
.ihub-legal .tbl th,.ihub-legal .tbl td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);
  vertical-align:top}
.ihub-legal .tbl th{color:var(--ink);font-weight:600;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.ihub-legal .tbl td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
.ihub-legal .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ihub-legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin:2rem 0 0}
.ihub-legal .toc b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.8rem;font-weight:700}
.ihub-legal .toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem}
.ihub-legal .toc li{margin-bottom:.4rem;font-size:.9rem}
.ihub-legal .toc a{text-decoration:none;color:var(--body)}
.ihub-legal .toc a:hover{color:var(--orange-lit)}
@media(max-width:640px){
.ihub-legal .toc ol{columns:1}
.ihub-legal .top{padding:48px 0 26px}
.ihub-legal h2{margin-top:2.3rem}
.ihub-legal .tbl td:first-child{white-space:normal}
}
.ihub-legal ul{list-style:disc}.ihub-legal ol{list-style:decimal}