/* ============================================================================
SERVE INNOVATE — UI LAYER
----------------------------------------------------------------------------
Components and motion primitives introduced with the new pages
(services, process, contact, blog index, blog posts, legal, 404).
Loaded AFTER assets/theme.css, which remains the single source of truth for
colour, type, nav, footer and the lead modal. Nothing here redefines a
palette token — every colour below resolves to a theme.css variable.
============================================================================ */
/* ============================================================================
1. MOTION PRIMITIVES
----------------------------------------------------------------------------
All entrance motion is opt-in via data attributes and driven by one shared
IntersectionObserver in assets/motion.js. Elements are visible by default and
only hidden once JS confirms it can animate them (the `js-motion` class on
), so the page is never blank if JS fails or is blocked.
============================================================================ */
/* --- fade + rise ---------------------------------------------------------- */
.js-motion [data-anim]{opacity:0;will-change:opacity,transform}
.js-motion [data-anim="up"]{transform:translateY(38px)}
.js-motion [data-anim="down"]{transform:translateY(-30px)}
.js-motion [data-anim="left"]{transform:translateX(-42px)}
.js-motion [data-anim="right"]{transform:translateX(42px)}
.js-motion [data-anim="zoom"]{transform:scale(.92)}
.js-motion [data-anim="blur"]{filter:blur(14px)}
.js-motion [data-anim]{transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.js-motion [data-anim].is-in{opacity:1;transform:none;filter:none}
/* --- word-by-word headline reveal ---------------------------------------- */
/* motion.js splits [data-split] into word. The
outer span clips, the inner one slides up — so words rise out of nothing
rather than fading in place. */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wd>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:var(--d,0ms)}
.is-in .wd>i,.wd.is-in>i{transform:none}
/* --- stagger helper ------------------------------------------------------- */
/* motion.js writes --i (index) on children of [data-stagger]; the delay is
derived here so the timing lives with the styles, not in script. */
[data-stagger]>*{transition-delay:calc(var(--i,0) * var(--step,85ms))}
/* --- magnetic buttons ----------------------------------------------------- */
.mag{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
/* --- 3D tilt cards -------------------------------------------------------- */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.tilt-in{transform:translateZ(38px)}
/* --- cursor spotlight ----------------------------------------------------- */
/* --mx/--my are set from JS on pointermove; the gradient follows the cursor. */
.spot{position:relative;isolation:isolate}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s var(--ease);
background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(98,198,255,.16),transparent 62%)}
.spot:hover::before{opacity:1}
.spot>*{position:relative;z-index:1}
/* --- animated gradient border -------------------------------------------- */
.glow-edge{position:relative}
.glow-edge::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
background:conic-gradient(from var(--ang,0deg),transparent 0deg,var(--sky-400) 70deg,transparent 150deg,transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
opacity:0;transition:opacity .45s var(--ease)}
.glow-edge:hover::after{opacity:1;animation:angSpin 3.4s linear infinite}
@property --ang{syntax:'';initial-value:0deg;inherits:false}
@keyframes angSpin{to{--ang:360deg}}
/* --- marquee -------------------------------------------------------------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:mqSlide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes mqSlide{to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:100px;white-space:nowrap;
border:1px solid var(--glass-line);background:rgba(98,198,255,.05);color:#bcd6f5;font-size:.9rem;font-weight:500}
.mq-item svg{width:16px;height:16px;stroke:var(--sky-400);fill:none;stroke-width:2;flex:none}
/* ============================================================================
2. PAGE HERO (shared by every new interior page)
============================================================================ */
.phero{padding:170px 0 78px;position:relative;overflow:hidden}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(2.35rem,5.2vw,4rem);max-width:17ch;margin-bottom:20px;text-wrap:balance}
.phero .lead{color:#a9c6e8;font-size:1.1rem;max-width:60ch;line-height:1.75}
.phero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
/* soft aurora wash behind the heading */
.phero::before{content:"";position:absolute;top:-160px;left:50%;width:940px;height:540px;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(closest-side,rgba(47,123,240,.24),transparent 72%);filter:blur(28px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.85rem;color:#7fa3cb;margin-bottom:22px}
.crumbs a{color:#9fc0e6;transition:color .25s}
.crumbs a:hover{color:var(--sky-300)}
.crumbs svg{width:13px;height:13px;stroke:#5b7ea6;fill:none;stroke-width:2.4;flex:none}
/* ============================================================================
3. CARD SYSTEM
============================================================================ */
.card-grid{display:grid;gap:22px}
.card-grid.c2{grid-template-columns:repeat(2,1fr)}
.card-grid.c3{grid-template-columns:repeat(3,1fr)}
.card-grid.c4{grid-template-columns:repeat(4,1fr)}
.ucard{position:relative;padding:30px 28px;border-radius:var(--radius);border:1px solid var(--glass-line);
background:linear-gradient(165deg,rgba(10,34,72,.62),rgba(4,16,38,.46));
transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);overflow:hidden}
.ucard:hover{transform:translateY(-7px);border-color:rgba(98,198,255,.34);box-shadow:0 34px 70px -34px rgba(2,10,26,.95)}
.ucard .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
background:rgba(98,198,255,.1);border:1px solid var(--glass-line);transition:.4s var(--ease)}
.ucard:hover .ic{background:var(--grad-blue);border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.ucard .ic svg{width:24px;height:24px;stroke:var(--sky-300);fill:none;stroke-width:1.8;transition:stroke .4s}
.ucard:hover .ic svg{stroke:#fff}
.ucard h3{font-size:1.18rem;margin-bottom:11px}
.ucard p{color:#a9c6e8;font-size:.95rem;line-height:1.72}
.ucard .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ucard .tags span{font-size:.76rem;padding:5px 11px;border-radius:100px;background:rgba(98,198,255,.08);
border:1px solid var(--glass-line);color:#9fc0e6}
.ucard .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:'Space Grotesk';
font-weight:600;font-size:.9rem;color:var(--sky-300)}
.ucard .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .3s var(--ease)}
.ucard:hover .more svg{transform:translateX(5px)}
/* numbered corner watermark */
.ucard .num{position:absolute;top:14px;right:20px;font-family:'Space Grotesk';font-weight:700;font-size:3.4rem;
line-height:1;color:rgba(98,198,255,.07);pointer-events:none;transition:color .45s}
.ucard:hover .num{color:rgba(98,198,255,.14)}
/* ============================================================================
4. PROCESS PAGE — sticky rail + step track
============================================================================ */
.proc-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
.proc-rail{position:sticky;top:120px}
.proc-rail h2{font-size:1.6rem;margin-bottom:8px}
.proc-rail p{color:#a9c6e8;font-size:.94rem;margin-bottom:24px}
.rail-list{list-style:none;display:grid;gap:2px;border-left:1px solid var(--glass-line);padding-left:0}
.rail-list a{display:block;padding:11px 16px;font-size:.92rem;color:#8fb4dd;border-left:2px solid transparent;
margin-left:-1px;transition:.3s var(--ease)}
.rail-list a:hover{color:#dbeaff}
.rail-list a.on{color:#fff;border-left-color:var(--sky-400);background:rgba(98,198,255,.07);font-weight:600}
.track{position:relative;display:grid;gap:26px;padding-left:52px}
/* the spine: a dim base line with a bright fill that grows as you scroll */
.track::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:rgba(98,198,255,.14);z-index:0}
.track::after{content:"";position:absolute;left:19px;top:10px;width:2px;height:var(--fill,0%);
background:var(--grad-blue);box-shadow:0 0 14px rgba(57,167,255,.6);transition:height .18s linear;z-index:0}
/* the cards (and their number dots) must sit above the spine — the reveal
animation gives .tstep a transform, so it needs its own z-index to win */
.tstep{position:relative;z-index:1;padding:26px 28px;border-radius:var(--radius);border:1px solid var(--glass-line);
background:rgba(7,26,56,.5);transition:.45s var(--ease)}
.tstep:hover{border-color:rgba(98,198,255,.32);transform:translateX(6px)}
.tstep .dot{position:absolute;left:-52px;top:28px;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
font-family:'Space Grotesk';font-weight:700;font-size:.95rem;color:#8fb4dd;
background:var(--navy-800);border:1px solid var(--glass-line);transition:.45s var(--ease);z-index:2}
.tstep.lit .dot{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 10px 26px -8px rgba(57,167,255,.8)}
.tstep h3{font-size:1.14rem;margin-bottom:9px}
.tstep p{color:#a9c6e8;font-size:.95rem;line-height:1.72}
.tstep .out{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.tstep .out span{font-size:.75rem;padding:5px 11px;border-radius:100px;background:rgba(98,198,255,.07);
border:1px solid var(--glass-line);color:#9fc0e6}
/* ============================================================================
5. STATS
============================================================================ */
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{padding:28px 24px;border-radius:var(--radius);border:1px solid var(--glass-line);
background:rgba(7,26,56,.45);text-align:center;transition:.45s var(--ease)}
.stat:hover{border-color:rgba(98,198,255,.32);transform:translateY(-5px)}
.stat b{display:block;font-family:'Space Grotesk';font-size:clamp(2rem,3.4vw,2.7rem);font-weight:700;
background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.stat span{display:block;color:#9fc0e6;font-size:.9rem;margin-top:8px}
/* FAQ accordion moved to theme.css — the service pages load pages.css, not
ui.css, and they need the same component. */
/* ============================================================================
7. CONTACT PAGE
============================================================================ */
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:start}
.cform{padding:34px;border-radius:var(--radius-lg);border:1px solid var(--glass-line);
background:linear-gradient(165deg,rgba(10,34,72,.7),rgba(4,16,38,.55))}
.cform h2{font-size:1.55rem;margin-bottom:6px}
.cform .hint{color:#9fc0e6;font-size:.93rem;margin-bottom:24px}
.cform .err{display:block;color:#ff9c9c;font-size:.79rem;margin-top:6px;min-height:1em}
.cform .field input[aria-invalid="true"],.cform .field textarea[aria-invalid="true"],
.cform .field select[aria-invalid="true"]{border-color:#ff8f8f;box-shadow:0 0 0 4px rgba(255,120,120,.1)}
.cnote{margin-top:14px;color:#7fa3cb;font-size:.82rem;line-height:1.6}
.cside{display:grid;gap:16px}
.cbox{padding:24px;border-radius:var(--radius);border:1px solid var(--glass-line);background:rgba(7,26,56,.45);
display:flex;gap:16px;align-items:flex-start;transition:.4s var(--ease)}
.cbox:hover{border-color:rgba(98,198,255,.32);transform:translateY(-4px)}
.cbox .ci{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
background:rgba(98,198,255,.1);border:1px solid var(--glass-line)}
.cbox .ci svg{width:21px;height:21px;stroke:var(--sky-300);fill:none;stroke-width:1.8}
.cbox h3{font-size:1rem;margin-bottom:5px}
.cbox p,.cbox a{color:#a9c6e8;font-size:.93rem;line-height:1.65;transition:color .25s}
.cbox a:hover{color:var(--sky-300)}
.form-ok{display:none;text-align:center;padding:36px 10px}
.form-ok.show{display:block;animation:fIn .5s var(--ease)}
.form-ok .ok{width:78px;height:78px;border-radius:22px;background:var(--grad-blue);display:grid;place-items:center;
margin:0 auto 20px;box-shadow:var(--shadow-glow)}
.form-ok .ok svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:2.6}
.form-ok h3{font-size:1.5rem;margin-bottom:10px}
.form-ok p{color:#a9c6e8}
/* ============================================================================
8. CTA BAND
============================================================================ */
.cta-band{position:relative;padding:60px 44px;border-radius:var(--radius-lg);overflow:hidden;text-align:center;
border:1px solid var(--glass-line);background:linear-gradient(150deg,rgba(26,95,212,.34),rgba(7,32,68,.62))}
.cta-band::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;top:-240px;right:-140px;
background:radial-gradient(circle,rgba(57,167,255,.36),transparent 70%);filter:blur(30px);pointer-events:none}
.cta-band h2{position:relative;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px;text-wrap:balance}
.cta-band p{position:relative;color:#cfe4ff;max-width:56ch;margin:0 auto 28px}
.cta-band .row{position:relative;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* ============================================================================
9. LEGAL / LONG-FORM PAGES
============================================================================ */
.legal{max-width:820px;margin:0 auto;color:#c2d6ee;font-size:1rem;line-height:1.85}
.legal h2{font-size:1.42rem;margin:40px 0 12px;color:#fff}
.legal h3{font-size:1.1rem;margin:26px 0 9px;color:#fff}
.legal p{margin-bottom:16px}
.legal ul{list-style:none;display:grid;gap:11px;margin:0 0 20px}
.legal ul li{position:relative;padding-left:26px}
.legal ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:2px;background:var(--grad-blue)}
.legal a{color:var(--sky-300);text-decoration:underline;text-underline-offset:3px}
.updated{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:100px;
border:1px solid var(--glass-line);background:rgba(98,198,255,.06);color:#9fc0e6;font-size:.85rem;margin-bottom:30px}
/* ============================================================================
10. 404
============================================================================ */
.nf{min-height:78vh;display:grid;place-items:center;text-align:center;padding:150px 0 90px}
.nf .code{font-family:'Space Grotesk';font-weight:700;font-size:clamp(6rem,20vw,13rem);line-height:.9;
background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
animation:nfFloat 6s ease-in-out infinite}
@keyframes nfFloat{50%{transform:translateY(-14px)}}
.nf h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:14px 0 14px}
.nf p{color:#a9c6e8;max-width:48ch;margin:0 auto 30px}
/* ============================================================================
11. RESPONSIVE
============================================================================ */
@media(max-width:1080px){
.card-grid.c4{grid-template-columns:repeat(2,1fr)}
.stat-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
.proc-layout{grid-template-columns:1fr;gap:34px}
.proc-rail{position:static}
.rail-list{display:flex;flex-wrap:wrap;border-left:none;gap:8px}
.rail-list a{border:1px solid var(--glass-line);border-radius:100px;padding:9px 16px;margin-left:0}
.rail-list a.on{border-color:var(--sky-400)}
.contact-grid{grid-template-columns:1fr}
.card-grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
.phero{padding:140px 0 60px}
.card-grid.c2,.card-grid.c3,.card-grid.c4{grid-template-columns:1fr}
.stat-strip{grid-template-columns:1fr 1fr}
.track{padding-left:44px}
.track::before,.track::after{left:15px}
.tstep .dot{left:-44px;width:34px;height:34px;font-size:.85rem}
.cta-band{padding:44px 24px}
}
/* ============================================================================
12. REDUCED MOTION
----------------------------------------------------------------------------
Everything above degrades to a static, fully legible page. Entrance states
are reset rather than merely un-transitioned, otherwise elements would stay
stuck at opacity:0.
============================================================================ */
@media(prefers-reduced-motion:reduce){
.js-motion [data-anim],.js-motion [data-anim].is-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.wd>i{transform:none!important;transition:none!important}
.marquee-track{animation:none}
.glow-edge:hover::after{animation:none}
.nf .code{animation:none}
.track::after{transition:none}
}