/* AIQ One · aiqtechlabs.com
   The original aiq dark theme, refined: warmer light, more space, a serif accent for warmth. */
:root{
  --ink:#0B0E1A; --ink-2:#10131F; --deep:#070A12;
  --card:rgba(255,255,255,.035); --card-2:rgba(255,255,255,.06);
  --bone:#F3EEE4; --text:#D2CDC3; --muted:#A09C93; --faint:#75726C;
  --line:rgba(243,238,228,.09); --line-2:rgba(243,238,228,.16);
  --bl:#2D6BFF; --cy:#00D4FF; --vi:#8B5CF6; --mg:#F43F8E; --am:#FFB224; --or:#FF7A3D;
  --r:24px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Sora',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{margin:0; padding:0; box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}
body{background:var(--ink); color:var(--bone); font:17px/1.7 var(--sans); overflow-x:hidden; position:relative; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:var(--am); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--am); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.03em; line-height:1.12; color:var(--bone); font-weight:600}
em.s,.s{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
.warm{background:linear-gradient(95deg,#FFD27A 0%,var(--am) 35%,var(--or) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1}
.narrow{max-width:760px}
.center{text-align:center; margin-left:auto; margin-right:auto}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:500 .74rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--am); margin-bottom:18px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.7}
.center .eyebrow::after{content:""; width:22px; height:1px; background:currentColor; opacity:.7}
.lead{font-size:clamp(1.05rem,2vw,1.22rem); color:var(--text); line-height:1.7}
.muted{color:var(--muted)}

/* background: breathing warm and cool light, a few rising particles */
.field{position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(12px)}
.field.cool{left:-30vmax; top:62%; width:74vmax; height:74vmax; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(45,107,255,.10) 0%, rgba(0,212,255,.035) 40%, transparent 68%); animation:breathe 11s ease-in-out infinite}
.field.warm{right:-26vmax; top:34%; width:76vmax; height:76vmax; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(255,122,61,.14) 0%, rgba(255,178,36,.06) 40%, transparent 68%); animation:breathe 11s ease-in-out 5.5s infinite}
@keyframes breathe{0%,100%{opacity:.6;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.06)}}
#sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.p{position:absolute; bottom:-3vh; border-radius:50%; opacity:0; animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:var(--po,.4)}88%{opacity:var(--po,.4)}100%{transform:translateY(-108vh);opacity:0}}

/* icons: Lucide line icons as masks, coloured by currentColor */
.ic{display:inline-block; width:24px; height:24px; background:currentColor; flex:none;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat}

/* ── header: a light bar that sets the colourful logo off from the dark page ── */
.top{position:sticky; top:0; z-index:50; background:#F7F4EE; transition:box-shadow .25s}
.top::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,#2D6BFF,#00D4FF,#8B5CF6,#F43F8E,#FFB224,#FF7A3D)}
.top.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
.top .wrap{display:flex; align-items:center; gap:32px; height:73px; max-width:none; padding:0 clamp(20px,3.6vw,64px)}
.brand{display:flex; align-items:center; gap:18px; text-decoration:none; line-height:1}
.brand svg,.brand img{height:64px !important; width:auto !important; overflow:visible}
.brand .bw{display:inline-flex; flex-direction:column; align-items:stretch; font:700 1.36rem/1 var(--display); letter-spacing:-.03em; color:#141826; white-space:nowrap}
/* the four dots light up in turn, bottom to top, then rest */
.brand .dot{transform-box:fill-box; transform-origin:center; animation:climb 2.6s ease-in-out infinite}
.brand .k1{animation-delay:0s} .brand .k2{animation-delay:.28s} .brand .k3{animation-delay:.56s} .brand .k4{animation-delay:.84s}
@keyframes climb{0%,44%,100%{transform:scale(1); filter:none} 11%{transform:scale(1.38); filter:drop-shadow(0 0 5px var(--g)) drop-shadow(0 0 2px var(--g))} 24%{transform:scale(1); filter:none}}
.menu{display:flex; gap:34px; margin-left:auto}
.menu a{color:#3A4150; text-decoration:none; font-weight:500; font-size:.97rem; position:relative; padding:6px 0}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--or),var(--am)); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.menu a:hover{color:#0B0E1A} .menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a[aria-current]{color:#0B0E1A; font-weight:600}
.burger{display:none; margin-left:auto; width:44px; height:44px; border:1px solid rgba(31,39,37,.18); border-radius:12px; background:#fff; color:#1A1F2E; align-items:center; justify-content:center}
@media (max-width:1120px){
  .top .wrap{height:64px}
  .brand svg,.brand img{height:50px !important}
  .brand{gap:12px} .brand .bw{padding-left:12px; font-size:1.02rem}
  .menu,.top .btn{display:none}
  .burger{display:inline-flex}
  .top.open .menu{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:#F7F4EE; border-bottom:1px solid rgba(31,39,37,.12); padding:6px 24px 18px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
  .top.open .menu a{padding:15px 0; border-bottom:1px solid rgba(31,39,37,.1); font-size:1.06rem; color:#1A1F2E}
  .top.open .menu a::after{display:none}
}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px;
  font:600 .98rem/1 var(--sans); text-decoration:none; border:1px solid transparent; transition:transform .2s, background .2s, border-color .2s, box-shadow .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.amber{background:linear-gradient(135deg,#FFC24D,var(--am) 45%,var(--or)); color:#1A1206; box-shadow:0 10px 30px -10px rgba(255,150,40,.55)}
.btn.amber:hover{box-shadow:0 14px 36px -10px rgba(255,150,40,.7)}
.btn.line{border-color:var(--line-2); color:var(--bone)}
.btn.line:hover{border-color:var(--am)}
.btn .ic{width:18px; height:18px}
.top .btn{min-height:42px; padding:0 20px; font-size:.92rem; box-shadow:0 6px 18px -8px rgba(255,140,40,.6)}
.go{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--am); text-decoration:none}
.go .ic{width:18px; height:18px; transition:transform .2s}
.go:hover .ic{transform:translateX(3px)}

/* sections */
.sec{position:relative; z-index:1; padding:clamp(80px,11vw,140px) 0}
.sec.tight{padding-top:clamp(48px,6vw,72px)}
.sec h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.sec .lead{margin-top:18px}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0}

/* ── home hero ── */
.hero{position:relative; z-index:1; text-align:center; padding:clamp(56px,8vw,96px) 0 0}
.wordmark{display:inline-block; font:700 clamp(1.9rem,4.2vw,2.7rem)/1 var(--display); letter-spacing:-.04em; color:var(--bone)}
.wordmark .s{color:var(--am); font-size:1.08em; margin-left:.06em}
.tagline{margin-top:14px; font:500 .78rem/1.5 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.hero h1{margin:30px auto 0; max-width:16em; font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:600; letter-spacing:-.04em; line-height:1.1}
.hero h1 .s{font-size:1.06em}
.hero .lead{margin:26px auto 0; max-width:38em}
.hero .ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px}
.trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px; margin-top:34px; color:var(--muted); font-size:.93rem}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust .ic{width:17px; height:17px; color:var(--am)}

/* product showcase: a browser window with a phone in front */
.showcase{position:relative; margin:clamp(56px,8vw,88px) auto 0; max-width:1040px; padding:0 24px}
.showcase::before{content:""; position:absolute; left:8%; right:8%; top:14%; bottom:-6%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,150,40,.30), rgba(255,122,61,.10) 55%, transparent); filter:blur(30px); z-index:0}
.browser{position:relative; z-index:1; border-radius:18px; background:#F7F6F2; box-shadow:0 50px 100px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); overflow:hidden; color:#1F2725; text-align:left}
.b-bar{display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; background:#ECEAE4; border-bottom:1px solid #DEDBD3}
.b-bar i{width:11px; height:11px; border-radius:50%; background:#D9D5CC}
.b-bar i:nth-child(1){background:#FF6159} .b-bar i:nth-child(2){background:#FFBD2E} .b-bar i:nth-child(3){background:#28C941}
.b-bar span{margin-left:14px; flex:1; max-width:340px; height:24px; border-radius:8px; background:#fff; font:500 11px/24px var(--sans); color:#7A7F7C; padding-left:12px}
.b-body{display:grid; grid-template-columns:190px 1fr; min-height:420px}
.b-side{background:#FBFAF7; border-right:1px solid #E6E3DC; padding:18px 14px; font-size:12.5px}
.b-side .bs-brand{display:flex; align-items:center; gap:8px; font:700 13px/1 var(--display); margin-bottom:18px}
.b-side .bs-brand img{height:22px}
.b-side a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:#4A524F; text-decoration:none; font-weight:500}
.b-side a.on{background:#1F2725; color:#fff}
.b-side a .ic{width:15px; height:15px}
.b-main{padding:22px 24px}
.b-main h5{font:600 17px/1.2 var(--display); letter-spacing:-.02em}
.b-main .b-sub{font-size:12px; color:#7A7F7C; margin-top:3px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.kpi{background:#fff; border:1px solid #E6E3DC; border-radius:14px; padding:12px 14px}
.kpi small{display:block; font-size:11px; color:#7A7F7C}
.kpi b{display:block; font:700 17px/1.3 var(--display); letter-spacing:-.02em; margin-top:2px}
.kpi em{font-style:normal; font-size:10.5px; font-weight:600; color:#1D8A56}
.kpi.due em{color:#B7791F}
.b-row{display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-top:12px}
.panel{background:#fff; border:1px solid #E6E3DC; border-radius:14px; padding:14px}
.panel .pt{font:600 12px/1 var(--sans); color:#4A524F; margin-bottom:12px}
.bars{display:flex; align-items:flex-end; gap:8px; height:120px}
.bars i{flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#FFB224,#FF7A3D); opacity:.9}
.bars i:nth-child(odd){background:linear-gradient(180deg,#5B8CFF,#2D6BFF)}
.bars-x{display:flex; gap:8px; margin-top:6px; font-size:9.5px; color:#9A9E9B} .bars-x span{flex:1; text-align:center}
.list .li{display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid #EFEDE8; font-size:12px}
.list .li:first-of-type{border-top:0}
.list .li span{color:#4A524F} .list .li b{font-weight:600}
.list .li em{font-style:normal; font-size:10px; font-weight:600; color:#B7791F; background:#FFF3DA; padding:2px 7px; border-radius:999px}
.phone{position:absolute; z-index:2; right:-8px; bottom:-40px; width:210px; aspect-ratio:9/18.6; border-radius:34px; background:#05070D; padding:9px;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.12); transform:rotate(3deg)}
.screen{height:100%; border-radius:26px; background:#F7F6F2; color:#1F2725; overflow:hidden; display:flex; flex-direction:column; font-size:10.5px; line-height:1.35; text-align:left}
.sbar{display:flex; justify-content:space-between; padding:10px 16px 2px; font-weight:600; font-size:9.5px}
.app-head{padding:6px 14px 8px}
.app-head small{color:#7A7F7C; font-size:9.5px}
.app-head b{display:block; font:700 13px/1.25 var(--display); margin-top:1px}
.todo{margin:6px 10px 0; background:#fff; border:1px solid #E6E3DC; border-radius:12px; padding:2px 10px}
.todo .t{font:600 8.5px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#B7791F; padding:8px 0 3px}
.row-i{display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid #EFEDE8}
.row-i:first-of-type{border-top:0}
.row-i .ic{width:13px; height:13px; color:#2D6BFF}
.row-i span{flex:1}
.row-i em{font-style:normal; font-size:8.5px; font-weight:600; color:#9A5B00; background:#FFF1D6; padding:2px 6px; border-radius:999px}
.tabs{margin-top:auto; display:flex; justify-content:space-around; padding:8px 6px 12px; background:#fff; border-top:1px solid #E6E3DC}
.tabs span{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:8px; color:#9A9E9B}
.tabs span.on{color:#1F2725; font-weight:600}
.tabs .ic{width:15px; height:15px}
@media (max-width:860px){
  .b-body{grid-template-columns:1fr}
  .b-side{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .b-row{grid-template-columns:1fr}
  .phone{width:150px; right:-4px; bottom:-30px}
}
@media (max-width:520px){ .phone{display:none} .b-main{padding:16px} }

/* ── pillars ── */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px}
.pillar{position:relative; padding:36px 32px 32px; border-radius:var(--r); background:var(--card); border:1px solid var(--line); overflow:hidden; transition:border-color .25s, transform .25s}
.pillar:hover{border-color:rgba(255,178,36,.35); transform:translateY(-3px)}
.pillar .num{font:500 .75rem/1 var(--mono); letter-spacing:.14em; color:var(--faint)}
.pillar .ic{width:30px; height:30px; margin-top:22px; color:var(--am)}
.pillar:nth-child(1) .ic{color:var(--cy)} .pillar:nth-child(3) .ic{color:#B69CFF}
.pillar h3{margin-top:18px; font-size:1.45rem}
.pillar p{margin-top:12px; color:var(--text); font-size:1rem}
.pillar ul{list-style:none; margin-top:18px; display:grid; gap:8px; font-size:.95rem; color:var(--muted)}
.pillar li{display:flex; gap:10px; align-items:baseline}
.pillar li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--am); flex:none; transform:translateY(-2px)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}}

/* ── journey timeline ── */
.timeline{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:64px}
.timeline::before{content:""; position:absolute; top:11px; left:4%; right:4%; height:2px; background:linear-gradient(90deg,var(--bl),var(--cy),var(--vi),var(--mg),var(--am),var(--or)); opacity:.8}
.stage{position:relative; padding-top:44px}
.stage::before{content:""; position:absolute; top:3px; left:0; width:18px; height:18px; border-radius:50%; background:var(--ink); border:2px solid var(--am); box-shadow:0 0 0 5px var(--ink)}
.stage:nth-child(-n+3)::before{border-color:var(--cy)}
.stage small{font:500 .72rem/1 var(--mono); letter-spacing:.14em; color:var(--faint)}
.stage h3{margin-top:8px; font-size:1.08rem}
.stage p{margin-top:8px; font-size:.93rem; color:var(--muted); line-height:1.6}
@media (max-width:1000px){.timeline{grid-template-columns:repeat(3,1fr); row-gap:36px} .timeline::before{display:none}}
@media (max-width:560px){.timeline{grid-template-columns:1fr; row-gap:28px}}

/* ── industries teaser ── */
.chips{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:52px}
.chip{display:flex; flex-direction:column; align-items:center; gap:14px; padding:28px 12px; border-radius:20px; background:var(--card); border:1px solid var(--line); font-weight:500; font-size:.95rem; text-align:center; color:var(--bone); line-height:1.35}
.chip .ic{width:30px; height:30px; color:var(--am)}
.chip:nth-child(odd) .ic{color:var(--cy)}
@media (max-width:1000px){.chips{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.chips{grid-template-columns:repeat(2,1fr)}}
.after{margin-top:40px; text-align:center}

/* ── promise ── */
.promise{display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:60px}
.promise div .ic{width:28px; height:28px; color:var(--am)}
.promise div:nth-child(even) .ic{color:var(--cy)}
.promise b{display:block; margin-top:18px; font:600 1.12rem/1.3 var(--display); letter-spacing:-.02em}
.promise p{margin-top:8px; color:var(--muted); font-size:.97rem}
@media (max-width:960px){.promise{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.promise{grid-template-columns:1fr; gap:30px}}

/* ── closing band ── */
.band{position:relative; overflow:hidden; border-radius:32px; padding:clamp(44px,7vw,84px) clamp(28px,6vw,72px); text-align:center;
  background:radial-gradient(120% 140% at 50% 0%, rgba(255,178,36,.20), rgba(255,122,61,.10) 40%, rgba(16,19,31,.9) 75%), var(--ink-2); border:1px solid rgba(255,178,36,.22)}
.band h2{font-size:clamp(2rem,4.6vw,3.2rem); max-width:16em; margin:0 auto}
.band p{margin:18px auto 0; max-width:34em; color:var(--text)}
.band .ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px}

/* ── inner page hero ── */
.phero{position:relative; z-index:1; padding:clamp(64px,9vw,120px) 0 clamp(24px,4vw,48px)}
.phero h1{font-size:clamp(2.4rem,6vw,4.2rem); font-weight:600; letter-spacing:-.045em; line-height:1.05; max-width:14em}
.phero .lead{margin-top:24px; max-width:40em}

/* ── product page ── */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px}
.feature{padding:30px 28px; border-radius:22px; background:var(--card); border:1px solid var(--line)}
.feature .ib{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(0,212,255,.10); color:var(--cy)}
.feature:nth-child(3n+2) .ib{background:rgba(255,178,36,.12); color:var(--am)}
.feature:nth-child(3n) .ib{background:rgba(139,92,246,.16); color:#B69CFF}
.feature h3{margin-top:20px; font-size:1.15rem}
.feature p{margin-top:8px; color:var(--muted); font-size:.97rem}
@media (max-width:960px){.feature-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr}}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:52px; counter-reset:s}
.steps div{position:relative; padding:30px 26px; border-radius:22px; background:var(--card); border:1px solid var(--line); counter-increment:s}
.steps div::before{content:counter(s,decimal-leading-zero); font:500 .78rem/1 var(--mono); letter-spacing:.12em; color:var(--am)}
.steps b{display:block; margin-top:16px; font:600 1.1rem/1.3 var(--display)}
.steps p{margin-top:8px; color:var(--muted); font-size:.96rem}
@media (max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center}
.split ul{list-style:none; margin-top:30px; display:grid; gap:20px}
.split li{display:flex; gap:16px}
.split li .ic{width:24px; height:24px; color:var(--am); margin-top:3px}
.split li:nth-child(even) .ic{color:var(--cy)}
.split li b{display:block; font:600 1.06rem/1.35 var(--display)}
.split li span{color:var(--muted); font-size:.97rem}
@media (max-width:920px){.split{grid-template-columns:1fr; gap:48px}}
.orbit{position:relative; aspect-ratio:1; max-width:460px; width:100%; justify-self:center}
.orbit .ring{position:absolute; inset:0; border:1px dashed var(--line-2); border-radius:50%}
.orbit .ring.r2{inset:18%}
.orbit .core{position:absolute; inset:33%; border-radius:50%; background:var(--deep); border:1px solid var(--line-2); display:grid; place-items:center; box-shadow:0 0 80px rgba(255,150,40,.22)}
.orbit .core img{width:64%; height:auto}
.orbit .node{position:absolute; transform:translate(-50%,-50%); background:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:9px 16px; font-weight:500; font-size:.88rem; display:flex; align-items:center; gap:8px; white-space:nowrap}
.orbit .node .ic{width:16px; height:16px; color:var(--am)}

/* ── industries page ── */
.ind-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px}
.ind{padding:30px 28px; border-radius:22px; background:var(--card); border:1px solid var(--line); transition:border-color .25s}
.ind:hover{border-color:rgba(255,178,36,.35)}
.ind .ic{width:30px; height:30px; color:var(--am)}
.ind:nth-child(odd) .ic{color:var(--cy)}
.ind h3{margin-top:18px; font-size:1.15rem}
.ind p{margin-top:8px; color:var(--muted); font-size:.97rem}
.ind.more{background:radial-gradient(120% 120% at 0% 0%, rgba(255,178,36,.16), transparent 60%), var(--card-2); border-color:rgba(255,178,36,.3)}
@media (max-width:960px){.ind-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ind-grid{grid-template-columns:1fr}}

/* ── company page ── */
.statement{font:400 clamp(1.6rem,3.6vw,2.5rem)/1.35 var(--serif); letter-spacing:-.01em; color:var(--bone); max-width:26em}
.statement .warm{font-style:italic}
.values{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:52px}
.value{padding:34px 32px; border-radius:22px; background:var(--card); border:1px solid var(--line)}
.value .ic{width:28px; height:28px; color:var(--am)}
.value:nth-child(even) .ic{color:var(--cy)}
.value h3{margin-top:18px; font-size:1.25rem}
.value p{margin-top:10px; color:var(--text); font-size:1rem}
@media (max-width:760px){.values{grid-template-columns:1fr}}
.meaning{display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center}
.meaning img{width:clamp(160px,22vw,240px); height:auto}
@media (max-width:760px){.meaning{grid-template-columns:1fr; gap:28px}}

/* ── contact page ── */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px}
.cc{padding:32px 30px; border-radius:22px; background:var(--card); border:1px solid var(--line)}
.cc .ic{width:26px; height:26px; color:var(--am)}
.cc small{display:block; margin-top:18px; font:500 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cc a,.cc span{display:block; margin-top:10px; color:var(--bone); font:600 1.15rem/1.4 var(--display); letter-spacing:-.01em; text-decoration:none}
.cc a:hover{color:var(--am)}
.cc .addr{font:400 1rem/1.6 var(--sans); color:var(--text)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.next{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; counter-reset:n}
.next div{counter-increment:n; padding-top:22px; border-top:1px solid var(--line-2)}
.next div::before{content:counter(n,decimal-leading-zero); font:500 .78rem/1 var(--mono); letter-spacing:.12em; color:var(--am)}
.next b{display:block; margin-top:12px; font:600 1.1rem/1.3 var(--display)}
.next p{margin-top:6px; color:var(--muted); font-size:.97rem}
@media (max-width:760px){.next{grid-template-columns:1fr}}

/* ── footer ── */
.foot{position:relative; z-index:1; background:var(--deep); border-top:1px solid var(--line); color:var(--muted); padding:80px 0 32px; margin-top:40px}
.foot .cols{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px}
.foot .fb img{height:52px; width:auto}
.foot .fb p{margin-top:18px; font-size:.97rem; max-width:22em; color:var(--text)}
.foot .fb p .s{color:var(--am)}
.foot h4{font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--bone); margin-bottom:18px}
.foot ul{list-style:none; display:grid; gap:12px; font-size:.95rem}
.foot a{color:var(--text); text-decoration:none}
.foot a:hover{color:var(--am)}
.foot .legal{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); font:400 .76rem/1.8 var(--mono); letter-spacing:.02em; color:var(--faint); display:flex; flex-wrap:wrap; gap:6px 28px; justify-content:space-between}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot .cols{grid-template-columns:1fr}}

/* ── legal pages ── */
.doc{position:relative; z-index:1; max-width:840px; margin:0 auto; padding:clamp(56px,8vw,96px) 24px 80px}
.doc h1{font-size:clamp(2.2rem,5vw,3.2rem); font-weight:600; letter-spacing:-.04em}
.doc .meta{margin-top:12px; color:var(--muted); font-size:.95rem}
.doc .lead{margin-top:24px}
.doc nav.toc{margin:36px 0 8px; padding:24px 26px; background:var(--card); border:1px solid var(--line); border-radius:20px}
.doc nav.toc b{font:500 .72rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--am)}
.doc nav.toc ol{margin:14px 0 0 20px; columns:2; column-gap:36px; font-size:.96rem}
.doc nav.toc li{margin:5px 0; break-inside:avoid}
.doc nav.toc a{color:var(--text)}
@media (max-width:620px){.doc nav.toc ol{columns:1}}
.doc h2{margin-top:48px; font-size:1.4rem; scroll-margin-top:110px}
.doc h3{margin-top:24px; font-size:1.08rem}
.doc p,.doc li{color:var(--text)}
.doc p{margin-top:12px}
.doc ul{margin:12px 0 0 22px}
.doc li{margin:7px 0}
.doc strong{color:var(--bone)}
.doc .box{margin-top:16px; padding:20px 22px; background:var(--card); border:1px solid var(--line); border-radius:18px}
.doc table{width:100%; border-collapse:collapse; margin-top:14px; font-size:.95rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.doc th,.doc td{text-align:left; vertical-align:top; padding:12px 16px; border-bottom:1px solid var(--line)}
.doc th{background:rgba(255,255,255,.04); font-weight:600; color:var(--bone)}
.doc td{color:var(--text)}
.doc tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto}

/* gentle reveal on scroll */
.rv{opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}

/* hero logo animation (used on the home page's large mark) */
.stroke-a,.stroke-q{opacity:0; animation:appear .9s cubic-bezier(.16,1,.3,1) forwards}
.stroke-a{animation-delay:.15s}.stroke-q{animation-delay:.35s}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.d{opacity:0; animation:ignite .5s ease-out forwards, shimmer 3.2s ease-in-out infinite}
.d1{animation-delay:.7s,1.6s}.d2{animation-delay:.85s,1.75s}.d3{animation-delay:1s,1.9s}
.d4{animation:ignite .5s ease-out 1.15s forwards, shimmer 3.2s ease-in-out 2.05s infinite}
@keyframes ignite{from{opacity:0;transform:translateY(14px) scale(.4)}to{opacity:1;transform:none}}
@keyframes shimmer{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.6;transform:translateY(-3px)}}

@media (prefers-reduced-motion:reduce){
  .brand .dot{animation:none; transform:none; filter:none}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important}
  .stroke-a,.stroke-q,.d{opacity:1}
  .rv{opacity:1; transform:none}
  #sky{display:none}
}

/* caption under the home showcase */
.caption{position:relative; z-index:2; margin:72px auto 0; max-width:40em; text-align:center; font-size:.92rem; color:var(--muted)}
.caption b{color:var(--text); font-weight:500}
@media (max-width:860px){ .caption{margin-top:56px} }
@media (min-width:1180px){ .phone{right:-70px} }

.foot .brand .bw{color:var(--bone)}

/* ── happy customers ── */
.stories{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.stories:empty{display:none}
.story{margin:0; padding:30px 28px; border-radius:22px; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; gap:18px}
.story .stars{color:var(--am); letter-spacing:3px; font-size:.95rem}
.story blockquote{font:400 1.12rem/1.6 var(--serif); font-style:italic; color:var(--bone)}
.story figcaption{margin-top:auto; display:flex; flex-direction:column; gap:3px; font-size:.93rem; color:var(--muted)}
.story figcaption b{color:var(--bone); font-weight:600}
.story figcaption em{font-style:normal; align-self:flex-start; margin-top:8px; font:500 .7rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--am); border:1px solid rgba(255,178,36,.35); padding:6px 10px; border-radius:999px}
@media (max-width:960px){.stories{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.stories{grid-template-columns:1fr}}
.story-empty{max-width:680px; margin:0 auto; text-align:center; padding:56px 32px; border-radius:26px; background:radial-gradient(120% 140% at 50% 0%, rgba(255,178,36,.14), transparent 60%), var(--card); border:1px solid var(--line-2)}
.story-empty .ic{width:34px; height:34px; color:var(--am)}
.story-empty h3{margin-top:18px; font-size:1.5rem}
.story-empty p{margin-top:12px; color:var(--text)}

/* the philosophy line under "Research Labs" */
.brand .bw .rule{display:block; height:1.5px; margin:7px 0 6px; border-radius:2px; background:linear-gradient(90deg,#2D6BFF,#00D4FF,#8B5CF6,#F43F8E,#FFB224,#FF7A3D)}
.brand .bw small{display:block; font:600 .6rem/1 'IBM Plex Sans',var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#4A5363; margin-right:-.3em}
.foot .brand .bw small{color:#A9B0BE}
@media (max-width:1120px){ .brand .bw{font-size:1.12rem} .brand .bw .rule{margin:5px 0 4px} .brand .bw small{font-size:.52rem; letter-spacing:.26em; margin-right:-.26em} }