/* AiXCEL brand system
   Layout: light, editorial product site. Porcelain ground, white instruments, one navy band per page.
   Headlines in tight Geist with one italic Instrument Serif accent (the OpenXCEL film's voice, now house style).
   Each product carries its own accent: AiXCEL blue, OpenXCEL teal, SIGNAL coral. */
:root{
  --paper:#F5F6F8; --paper-2:#EEF0F4; --white:#FFFFFF;
  --ink:#0D1526; --ink-2:#2E3A4E; --mute:#667085; --faint:#98A2B3;
  --line:#E3E6EB; --line-2:#D3D8E0;
  --night:#0A1120; --night-2:#121B2E; --night-line:rgba(210,222,240,.14); --night-fg:#E8EDF5; --night-mute:#97A3B6;
  --blue:#2552E8; --blue-ink:#1838B0; --blue-soft:#EAF0FF;
  --teal:#0A98A6; --teal-soft:#E2F5F6;
  --coral:#E05A2A; --coral-soft:#FDEDE6;
  --amber:#C98A10; --amber-soft:#FCF3DF; --green:#14975F; --green-soft:#E3F5EC; --red:#DB3F45; --red-soft:#FCE9EA;
  --acc:var(--blue); --acc-soft:var(--blue-soft);
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-io:cubic-bezier(.77,0,.18,1);
  --gut:clamp(16px,4vw,48px); --max:1280px;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(13,21,38,.04),0 8px 24px -12px rgba(13,21,38,.12);
  --shadow-lg:0 2px 4px rgba(13,21,38,.04),0 30px 60px -28px rgba(13,21,38,.28);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:var(--ink);color:var(--white)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.num{font-variant-numeric:tabular-nums}

/* type */
h1,h2,h3,h4{margin:0;font-weight:620;letter-spacing:-.035em;text-wrap:balance;color:var(--ink)}
.d1{font-size:clamp(44px,6.6vw,96px);line-height:.98;letter-spacing:-.045em}
.d2{font-size:clamp(36px,4.6vw,68px);line-height:1}
.d3{font-size:clamp(26px,2.4vw,36px);line-height:1.08;letter-spacing:-.03em}
.d4{font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
em.i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--acc);font-size:1.08em}
.lede{font-size:clamp(17px,1.3vw,19.5px);line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0;text-wrap:pretty}
.body{font-size:15.5px;color:var(--mute);margin:0;max-width:52ch}
.kicker{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:10px}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.fine{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--faint)}
.tag{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;padding:6px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--white);white-space:nowrap}
.tag.acc{background:var(--acc-soft);border-color:transparent;color:var(--acc)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px/1 var(--sans);padding:15px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .4s var(--ease);white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--white);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 20px -10px rgba(13,21,38,.6)}
.btn-primary:hover{background:var(--acc)}
.btn-line{background:var(--white);color:var(--ink);border-color:var(--line-2)}
.btn-line:hover{border-color:var(--ink)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--ink)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(245,246,248,.8);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;letter-spacing:-.02em;font-size:17px;color:var(--ink)}
.brand svg{width:30px;height:30px;flex:none}
.brand small{font-weight:450;color:var(--mute);font-size:15px;margin-left:-4px}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0;font-size:14.5px;color:var(--ink-2)}
.menu a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;transition:background .2s,color .2s}
.menu a:hover,.menu a[aria-current="page"]{background:var(--white);color:var(--ink);box-shadow:var(--shadow)}
.nav .btn{padding:11px 17px;font-size:14px}
@media (max-width:960px){.menu{display:none}}
@media (max-width:420px){.brand small{display:none}.nav .btn{padding:10px 13px;font-size:13px}}

/* sections */
.sec{padding-block:clamp(88px,11vw,150px)}
.sec.tight{padding-block:clamp(56px,7vw,96px)}
.head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:24px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px)}
.head .stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.white{background:var(--white)}
.band{background:var(--night);color:var(--night-fg)}
.band h1,.band h2,.band h3,.band h4{color:var(--white)}
.band .lede,.band .body,.band .kicker{color:var(--night-mute)}
.band em.i{color:#8FB1FF}
.band .fine{color:#6E7B90}
.band .btn-primary{background:var(--white);color:var(--ink)}
.band .btn-primary:hover{background:#8FB1FF}
.band .btn-line{background:transparent;color:var(--white);border-color:var(--night-line)}

/* cards and frames */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.win{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;max-width:100%}
.win-bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:#FBFBFC}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#E3E6EB;flex:none}
.win-bar i:nth-child(1){background:#F1625C}.win-bar i:nth-child(2){background:#F5BE4F}.win-bar i:nth-child(3){background:#5DC762}
.win-bar .url{margin-left:12px;flex:1;max-width:360px;height:22px;border-radius:6px;background:var(--paper-2);font:11px/22px var(--mono);color:var(--mute);padding:0 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Slack-style message primitives, shared by the motion scenes */
.sl{font-size:13.5px;line-height:1.45;color:#1D1C1D}
.sl-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:8px 0}
.sl-av{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font:600 12px var(--sans);color:#fff;background:#6E5ACF;overflow:hidden}
.sl-av img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.sl-name{font-weight:700}
.sl-app{font-size:10px;background:#E8E8E8;color:#555;border-radius:3px;padding:1px 4px;font-weight:600;margin-left:4px;vertical-align:1px}
.sl-time{color:#616061;font-size:12px;margin-left:6px}
.sl-btn{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12.5px;border:1px solid #C9C9C9;background:#fff;color:#1D1C1D}
.sl-btn.go{background:#007A5A;border-color:#007A5A;color:#fff}

/* brand mark (original AiXCEL colours) */
.brand img{width:32px;height:32px;flex:none}
.foot .brand img{background:#F4F0E8;border-radius:9px;padding:2px}
.icn{flex:none;display:block}
.bm svg{width:100%;height:100%;display:block}

/* glass: frosted panels over the soft gradient stages */
.stage-bg{position:relative;overflow:hidden;background:linear-gradient(160deg,#EEF2FB 0%,#F5F6F8 45%,#EAF6F6 100%)}
.stage-bg::before,.stage-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.75;pointer-events:none;animation:drift 18s ease-in-out infinite alternate}
.stage-bg::before{width:55%;aspect-ratio:1;left:-12%;top:-20%;background:radial-gradient(circle,rgba(37,82,232,.28),transparent 65%)}
.stage-bg::after{width:50%;aspect-ratio:1;right:-10%;bottom:-25%;background:radial-gradient(circle,rgba(10,152,166,.26),transparent 65%);animation-delay:-9s}
@keyframes drift{to{transform:translate(8%,6%) scale(1.08)}}
.glass{background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -24px rgba(13,21,38,.28);border-radius:20px}

/* logo tiles */
.lg-tile{display:grid;place-items:center;border-radius:12px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}
.lg-tile svg,.lg-tile img{width:58%;height:58%;object-fit:contain}

/* reveal: only blocks that start below the first screen are hidden, and scroll reveals them */
[data-reveal]{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.pre{opacity:0;transform:translateY(28px)}

/* footer */
.foot{background:var(--night);color:var(--night-mute);padding-block:80px 40px}
.foot .grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:40px}
.foot .brand{color:var(--white)}
.foot .brand small{color:var(--night-mute)}
.foot h4{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6E7B90;margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--white)}
.foot .legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--night-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
@media (max-width:900px){.foot .grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot .grid > :first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}