/* Typeface and base scales */
:root{--bg:#0b0c0f;--panel:#0f1116;--elev:#121521;--card:#0e1118;--text:#e6e8ef;--muted:#9aa3b2;--brand:#6ea8ff;--accent:#7bd2ff;--line:rgba(255,255,255,.08);--blur:rgba(255,255,255,.06);--shadow:0 10px 30px rgba(0,0,0,.4);--radius:16px;--radius-sm:12px;--radius-lg:24px;--container:1200px;--g:24px;--g-sm:14px}
*{box-sizing:border-box}
html{min-height:100%;background:#0b0c0f}
body{padding:0;margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;position:relative;background:#0a0b0e;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-5;background:linear-gradient(180deg, #0b0c0f 0%, #0d0e14 30%, #0a0b0e 60%, #0b0c0f 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-4;background:
  radial-gradient(ellipse 2200px 1300px at 50% 50%, hsla(215,85%,62%,.4), transparent 78%),
  radial-gradient(ellipse 1800px 1100px at 50% 10%, hsla(215,85%,62%,.5), transparent 72%),
  radial-gradient(ellipse 1600px 900px at 10% 28%, hsla(195,85%,68%,.3), transparent 70%);
background-blend-mode: screen;animation:meshBreathe 6s ease-in-out infinite;will-change:transform}
@keyframes meshBreathe{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.08) rotate(.5deg);opacity:1}}
main{position:relative;transform-style:preserve-3d;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:120px 0;border-top:none;position:relative;transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease, filter .6s ease;transform-style:preserve-3d}
.section::before{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg, transparent, rgba(110,168,255,.15) 20%, rgba(110,168,255,.15) 80%, transparent);opacity:.5}
.eyebrow{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#8a95a8;margin:0 0 20px;font-weight:600;position:relative;display:inline-block}
.eyebrow::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:1px;background:linear-gradient(90deg, var(--brand), transparent);transform-origin:left;transform:scaleX(1)}
@keyframes eyebrowLine{to{transform:scaleX(1)}}
.display{font-size: clamp(36px, 7vw, 64px);line-height:1.02;margin:0 0 20px;font-weight:700;text-wrap:balance;letter-spacing:-.03em;opacity:1;transform:translateY(0) scale(1);animation:heroTitle 1.6s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes heroTitle{0%{opacity:0;transform:translateY(40px) scale(.96);filter:blur(8px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.gradient-text{background:linear-gradient(110deg,#fff 0%, #b8d4ff 30%, #7bd2ff 50%, #9ec2ff 70%, #fff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;animation:gradientShift 8s ease-in-out infinite}
@keyframes gradientShift{0%,100%{background-position:0% center}50%{background-position:100% center}}
.gradient-text::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);background-size:200% 100%;animation:textShine 4s ease-in-out infinite;mix-blend-mode:overlay}
@keyframes textShine{0%,100%{background-position:-100% 0}50%{background-position:200% 0}}
.lead{font-size: clamp(17px, 2.6vw, 22px);color:#b8c5d9;margin:0 0 28px;max-width:60ch;line-height:1.65;font-weight:400;opacity:1;transform:translateY(0);animation:heroLead 1.3s cubic-bezier(.16,1,.3,1) .7s both}
@keyframes heroLead{0%{opacity:0;transform:translateY(25px);filter:blur(4px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
.stack-l>*+*{margin-top:16px}
.center{text-align:center}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg, rgba(11,12,15,.9), rgba(11,12,15,.6) 60%, rgba(11,12,15,0));backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:700;letter-spacing:.08em}
.nav-toggle{display:none;background:transparent;border:0;width:40px;height:32px;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--text);margin:5px auto;border-radius:2px}
.nav-menu{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.nav-menu a{display:inline-block;padding:8px 12px;border-radius:10px;color:var(--text)}
.nav-menu a.active{background:rgba(255,255,255,.06);border:1px solid var(--line)}
.nav-menu .btn{padding:10px 14px}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(110,168,255,.35)}
.btn-primary{background:linear-gradient(180deg, #8bb8ff, #3a7bff);border-color:#2f67d7;color:#fff}
.btn-ghost{background:transparent;border-color:var(--line)}
.actions{display:flex;gap:10px;flex-wrap:wrap;opacity:1;transform:translateY(0);animation:heroActions 1s ease-out 1.2s both}
@keyframes heroActions{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

/* Hero - CINEMATIC INTRO (transparent bg, uses body fixed bg) */
.hero{padding-top:140px;padding-bottom:180px;background:transparent;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1400px 600px at 60% -10%,rgba(84,140,255,.15),transparent 65%),radial-gradient(1000px 500px at 10% 5%,rgba(123,210,255,.1),transparent 70%);pointer-events:none;z-index:0}
.hero::after{content:"";position:absolute;inset:auto 0 -250px 0;height:500px;background:linear-gradient(180deg, transparent 0%, rgba(11,12,15,.12) 40%, rgba(11,12,15,.5) 100%);pointer-events:none;z-index:1;opacity:0}
.hero .badges{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:6px 0 0;list-style:none;opacity:1;transform:translateY(0);animation:heroBadges 1s ease-out 1.5s both}
@keyframes heroBadges{0%{opacity:0;transform:translateY(15px)}100%{opacity:1;transform:translateY(0)}}
.hero .badges li{padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);transition:transform .3s ease, box-shadow .3s ease}
.hero .badges li:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.hero-visual{display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(50px) scale(.9);animation:heroVisual 1.5s ease-out 1.8s forwards}
@keyframes heroVisual{to{opacity:1;transform:translateX(0) scale(1)}}
.device-frame{position:relative;width:min(520px,90%);aspect-ratio:16/10;border-radius:28px;background:linear-gradient(180deg,#0b0c0f,#0e1118);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;transform-style:preserve-3d}
.glass-card{position:absolute;inset:16px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);padding:16px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 12px rgba(255,255,255,.08)}
.glass-card::before{content:"";position:absolute;inset:-20% -40% 40% -40%;background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);filter:blur(6px);opacity:.65;transform:translateX(-30%);animation:glassSweep 9s cubic-bezier(.22,.68,.22,1) infinite}
.glass-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.34), transparent 60%)}
@keyframes glassSweep{0%{transform:translateX(-60%)}50%{transform:translateX(60%)}100%{transform:translateX(160%)}}
.logo-display{width:100%;height:100%;display:grid;place-items:center;position:relative;background:transparent;overflow:visible}
.logo-display::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(92deg, transparent, rgba(255,255,255,.16), transparent);animation:textShine 3s ease-in-out infinite reverse;mix-blend-mode:screen;pointer-events:none;opacity:.35}
.brand-logo{width:72%;height:auto;opacity:0;animation:logoReveal 1.2s cubic-bezier(.16,1,.3,1) .6s forwards;filter:contrast(1.18) brightness(1.06) drop-shadow(0 0 24px rgba(255,255,255,.35))}
@keyframes logoReveal{0%{opacity:0;transform:scale(.9) translateY(20px);filter:drop-shadow(0 0 0 transparent) blur(10px)}100%{opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 4px 20px rgba(110,168,255,.4)) blur(0)}}
.brand-logo text{filter:drop-shadow(0 2px 10px rgba(110,168,255,.45))}
.brand-logo circle{stroke-dasharray:100.5;stroke-dashoffset:0;transform-origin:150px 24px}
.brand-logo .orbit{animation:orbitBlink 3s ease-in-out infinite}
.brand-logo .orbit-glow{animation:orbitBlink 3s ease-in-out infinite}
@keyframes orbitBlink{0%,100%{opacity:.9}50%{opacity:.4}}
.brand-logo polygon{filter:drop-shadow(0 2px 10px rgba(110,168,255,.45))}
.glow{position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(60% 80% at 50% 0%,rgba(110,168,255,.35),transparent 60%)}
/* Scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);display:grid;place-items:center;cursor:pointer;transition:opacity .3s ease}
.scroll-cue .dot{width:6px;height:6px;border-radius:50%;background:#9ec2ff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-6px);opacity:.2}50%{transform:translateY(2px);opacity:1}100%{transform:translateY(8px);opacity:.2}}
.scroll-cue.hide{opacity:0;pointer-events:none}
/* Subtle floating animation for hero device */
@keyframes float {
  0% { transform: translateY(0) }
  50% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}
.device-frame{animation: float 8s ease-in-out infinite}

/* Layout grids */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards{margin-top:18px}
.cards.grid-3 .card{position:relative;padding-top:58px}
.cards.grid-3 .card::before{content:"";position:absolute;top:18px;left:18px;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.25), rgba(123,210,255,.15));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.cards.grid-3 .card:nth-child(1)::after{content:"⏱";position:absolute;top:22px;left:26px;opacity:.9}
.cards.grid-3 .card:nth-child(2)::after{content:"✓";position:absolute;top:22px;left:30px;opacity:.9}
.cards.grid-3 .card:nth-child(3)::after{content:"◴";position:absolute;top:22px;left:27px;opacity:.9}
/* Value section - STORYTELLING (transparent, uses fixed bg) */
#value{position:relative;overflow:hidden;background:transparent;isolation:isolate}
#value::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 800px 600px at 50% 30%, rgba(110,168,255,.04), transparent 70%);animation:valueGlow 10s ease-in-out infinite;pointer-events:none}
@keyframes valueGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}
#value::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236ea8ff' fill-opacity='0.015' fill-rule='evenodd'/%3E%3C/svg%3E");animation:particlesDrift 40s linear infinite;opacity:.6;pointer-events:none}
@keyframes particlesDrift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(-100px,-100px) rotate(360deg)}}
#value .eyebrow{position:relative;z-index:2}
#value .cards{gap:18px}
#value .card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-color:rgba(255,255,255,.14);transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08)}
#value .card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(110,168,255,.3), inset 0 1px 0 rgba(255,255,255,.12);border-color:rgba(110,168,255,.4);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03))}
#value .card h3{letter-spacing:.2px;position:relative}
#value .card h3::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg, var(--brand), #3a7bff);transition:width .6s cubic-bezier(.2,.8,.2,1)}
#value .card:hover h3::after{width:100%}
#value .card::after{opacity:1}
#value .note{max-width:100%;margin-top:20px;position:relative;overflow:hidden}
#value .note::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(110,168,255,.1), transparent);animation:noteShimmer 3s ease-in-out infinite}
@keyframes noteShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

/* Benefits section - PREMIUM (transparent, uses fixed bg) */
#benefits{position:relative;overflow:hidden;background:transparent;padding:96px 0 110px;isolation:isolate}
#benefits::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 900px 700px at 50% 50%, rgba(123,210,255,.05), transparent 70%);animation:benefitsGlow 12s ease-in-out infinite;pointer-events:none}
@keyframes benefitsGlow{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}
#benefits::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg, transparent 40%, rgba(110,168,255,.015) 50%, transparent 60%);background-size:200% 200%;animation:diagonalSweep 15s ease-in-out infinite;pointer-events:none}
@keyframes diagonalSweep{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#benefits .eyebrow{position:relative;z-index:2}
#benefits .cards{gap:18px}
#benefits .card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-color:rgba(255,255,255,.14);transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08)}
#benefits .card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 30px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(123,210,255,.3), inset 0 1px 0 rgba(255,255,255,.12);border-color:rgba(123,210,255,.4);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03))}
#benefits .card h3{letter-spacing:.2px;position:relative}
#benefits .card h3::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg, #7bd2ff, #3a7bff);transition:width .6s cubic-bezier(.2,.8,.2,1)}
#benefits .card:hover h3::after{width:100%}
#benefits .card::after{opacity:1}
#benefits .note{max-width:100%;margin-top:20px;position:relative;overflow:hidden}
#benefits .note::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(123,210,255,.1), transparent);animation:benefitsNoteShimmer 3s ease-in-out infinite}
@keyframes benefitsNoteShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

/* Card glow reveal animation */
@keyframes cardGlow{
  0%{box-shadow:0 0 0 rgba(110,168,255,0)}
  30%{box-shadow:0 0 40px rgba(110,168,255,.4), 0 0 80px rgba(110,168,255,.2)}
  100%{box-shadow:none}
}

/* Section transitions - cinematic fades */
#value .container, #benefits .container{position:relative;z-index:2}
.section{position:relative;will-change:transform}

/* Epic card entrance */
#value .card, #benefits .card{position:relative;will-change:transform, opacity;transform-style:preserve-3d}
#value .card::before, #benefits .card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg, rgba(110,168,255,.15), rgba(123,210,255,.08));opacity:0;transition:opacity .4s ease;z-index:-1;filter:blur(10px)}
#value .card:hover::before, #benefits .card:hover::before{opacity:1}

/* Cards */
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.card.feature{padding:28px}
.card.feature.accent{border-color:rgba(110,168,255,.45);box-shadow:0 0 0 1px rgba(110,168,255,.2) inset}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted)}
.features{margin:12px 0 0;padding-left:18px;color:var(--muted)}
/* Card hover lift */
.card{transition:transform .35s ease, border-color .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18);box-shadow:0 12px 30px rgba(0,0,0,.35)}
/* Light tilt only for value cards (grid-3) */
.cards.grid-3 .card{transform-style:preserve-3d}

/* Module cards: title icon badge */
#modules .card.feature h3{position:relative;padding-left:42px}
#modules .card.feature h3{font-weight:700;letter-spacing:.2px}
#modules .card.feature h3::before{content:"";position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
#modules .card.feature:nth-child(1) h3::after{content:"🔊";position:absolute;left:6px;top:2px}
#modules .card.feature:nth-child(2) h3::after{content:"📄";position:absolute;left:6px;top:2px}
#modules .card.feature:nth-child(3) h3::after{content:"⚙";position:absolute;left:7px;top:2px}
#modules .card.feature:nth-child(4) h3::after{content:"👁";position:absolute;left:6px;top:2px}
#modules .card.feature:nth-child(5) h3::after{content:"🧩";position:absolute;left:6px;top:2px}

/* Feature list: checks and dividers */
#modules .features{padding-left:0;list-style:none;margin-top:14px}
#modules .features li{position:relative;padding:8px 0 8px 26px;border-top:1px dashed rgba(255,255,255,.08)}
#modules .features li:hover{color:#cdd6e5}
#modules .features li:first-child{border-top:0}
#modules .features li::before{content:"✓";position:absolute;left:0;top:8px;width:18px;height:18px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));color:#aeddff;font-size:12px}

/* Module card hover glow */
#modules .card.feature{transition:box-shadow .35s ease, border-color .25s ease, transform .35s ease;min-height:170px}
#modules .card.feature:hover{box-shadow:0 0 0 1px rgba(110,168,255,.25) inset, 0 20px 40px rgba(0,0,0,.45);border-color:rgba(110,168,255,.35)}
#modules .card.feature:active{transform:translateY(-2px) scale(.995)}

/* KPI cards */
.kpi{display:grid;grid-template-rows:auto auto auto;gap:12px}
.kpi h3{letter-spacing:.2px}
.kpi .meter{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);overflow:hidden}
.kpi .meter span{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg, var(--brand), #3a7bff);box-shadow:0 6px 16px rgba(58,123,255,.35);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.kpi.low .meter span{background:linear-gradient(90deg, #ffb37a, #ff7a3a)}
.kpi.high .meter span{background:linear-gradient(90deg, #6ee7a0, #24c26a)}
.kpi .value{font-weight:700}

/* Lists and chips */
.list{margin:0;padding-left:18px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text)}
.chip{transition:transform .25s ease, border-color .25s ease}
.chip:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}

/* Verticals chips */
#verticals .chip{position:relative;padding-left:34px}
#verticals .chip::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
#verticals .chips .chip:nth-child(1)::after{content:"🏛";position:absolute;left:12px;top:50%;transform:translateY(-50%)}
#verticals .chips .chip:nth-child(2)::after{content:"🏭";position:absolute;left:12px;top:50%;transform:translateY(-50%)}
#verticals .chips .chip:nth-child(3)::after{content:"💼";position:absolute;left:12px;top:50%;transform:translateY(-50%)}
#verticals .chips .chip:nth-child(4)::after{content:"🧪";position:absolute;left:12px;top:50%;transform:translateY(-50%)}
#verticals .chips .chip:nth-child(5)::after{content:"🚚";position:absolute;left:12px;top:50%;transform:translateY(-50%)}

#verticals .chip{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
#verticals .chip:hover{box-shadow:0 8px 20px rgba(0,0,0,.35)}
#verticals .chip.active{border-color:rgba(110,168,255,.4);box-shadow:0 0 0 1px rgba(110,168,255,.25) inset, 0 10px 24px rgba(0,0,0,.4)}

/* Ethics section */
#ethics .eyebrow{position:relative;padding-left:34px;display:inline-block}
#ethics .eyebrow::before{content:"⚖";position:absolute;left:4px;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));z-index:1}
#ethics .subtitle{margin:0 0 8px;color:#9aa3b2}
#ethics .list.ethics{list-style:none;padding-left:0;margin-top:10px}
#ethics .list.ethics li{position:relative;padding:12px 10px 12px 40px;border-top:1px dashed rgba(255,255,255,.12);transition:background .25s ease, box-shadow .25s ease}
#ethics .list.ethics li:first-child{border-top:0}
#ethics .list.ethics li::before{content:attr(data-icon);position:absolute;left:8px;top:10px;width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
#ethics .list.ethics li:hover{background:rgba(255,255,255,.03);box-shadow:inset 3px 0 0 rgba(110,168,255,.35)}
#ethics .list.ethics li:focus-within{outline:none;box-shadow:0 0 0 3px rgba(110,168,255,.25), inset 3px 0 0 rgba(110,168,255,.35)}

/* Business section */
#business .eyebrow{position:relative;padding-left:34px;display:inline-block}
#business .eyebrow::before{content:"💼";position:absolute;left:4px;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);z-index:1}

#business .grid-2 .list{list-style:none;padding-left:0}
#business .grid-2 .list li{position:relative;padding:10px 10px 10px 34px;border-top:1px dashed rgba(255,255,255,.08);transition:transform .2s ease}
#business .grid-2 .list li:first-child{border-top:0}
#business .grid-2 .list li:hover{transform:translateX(4px)}
#business .grid-2 .list li::before{content:"";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
#business .grid-2 .list li:nth-child(1)::after{content:"🔄";position:absolute;left:4px;top:10px}
#business .grid-2 .list li:nth-child(2)::after{content:"📊";position:absolute;left:4px;top:10px}
#business .grid-2 .list li:nth-child(3)::after{content:"🎯";position:absolute;left:4px;top:10px}
#business .grid-2 ul.list:nth-child(2) li:nth-child(1)::after{content:"🧰"}
#business .grid-2 ul.list:nth-child(2) li:nth-child(2)::after{content:"🏢"}
#business .grid-2 ul.list:nth-child(2) li:nth-child(3)::after{content:"🤝"}

/* Diagram */
.diagram{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.diagram{position:relative}
.diagram::before{content:"";position:absolute;left:10%;right:10%;bottom:44px;height:1px;background:linear-gradient(90deg, rgba(110,168,255,.0), rgba(110,168,255,.3), rgba(110,168,255,.0));filter:blur(.4px);opacity:.85}
.diagram .node{position:relative;padding:16px 18px;border-radius:14px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden;transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
.diagram .node:hover{transform:translateY(-2px);border-color:rgba(110,168,255,.28);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.diagram .node:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(110,168,255,.35)}
.diagram .node:not(.core)::before{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);width:2px;height:22px;background:linear-gradient(180deg, rgba(110,168,255,.25), rgba(110,168,255,.0))}
.diagram .node::after{content:"";position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%, rgba(110,168,255,.22), rgba(123,210,255,.08) 55%, transparent 70%);opacity:0;transition:opacity .6s ease}
.diagram .node.reveal::after{opacity:1}
.diagram .node.core{grid-column:1/-1;border-color:rgba(110,168,255,.45)}
/* Connectors to core */
.diagram .node.core{position:relative}
.diagram .node.core::before{content:"";position:absolute;left:10%;right:10%;top:-22px;height:1px;background:linear-gradient(90deg, rgba(110,168,255,.0), rgba(110,168,255,.25), rgba(110,168,255,.0));filter:blur(.4px)}

/* Left list step-line */
#architecture .list{position:relative}
#architecture .list li{position:relative;padding-left:16px}
#architecture .list li{line-height:1.6}
#architecture .list li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:linear-gradient(180deg,var(--brand),#3a7bff)}
#architecture .list li+li::after{content:"";position:absolute;left:2px;top:-.75em;bottom:.75em;width:2px;background:linear-gradient(180deg, rgba(110,168,255,.0), rgba(110,168,255,.3), rgba(110,168,255,.0))}

/* Security section styling */
#security .eyebrow{position:relative;padding-left:34px;display:inline-block}
#security .eyebrow::before{content:"🔒";position:absolute;left:4px;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);z-index:1}

#security .cards .card{position:relative;padding-top:52px}
#security .cards .card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));border-color:rgba(255,255,255,.12)}
#security .cards .card::before{content:"";position:absolute;top:16px;left:18px;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));display:grid;place-items:center}
#security .cards .card h3{position:relative;padding-left:44px;margin-top:-6px;letter-spacing:.2px}
#security .cards .card p{color:#aeb7c8;line-height:1.55}
#security .cards .card:nth-child(1)::before{content:"🛡"}
#security .cards .card:nth-child(2)::before{content:"🔑"}
#security .cards .card:nth-child(3)::before{content:"🔐"}

#security .cards .card{transition:box-shadow .35s ease, border-color .25s ease}
#security .cards .card:hover{box-shadow:0 0 0 1px rgba(110,168,255,.22) inset, 0 16px 36px rgba(0,0,0,.45);border-color:rgba(110,168,255,.32)}
#security .cards .card:focus-within{box-shadow:0 0 0 3px rgba(110,168,255,.3)}

#security .cards .card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;border-radius:0 0 12px 12px;background:linear-gradient(90deg, rgba(110,168,255,.0), rgba(110,168,255,.4), rgba(110,168,255,.0));opacity:.6}
/* Node micro glow when revealed */
.node{transition:box-shadow .35s ease, border-color .35s ease}
.node.reveal{box-shadow:0 0 0 1px rgba(110,168,255,.12) inset, 0 10px 24px rgba(0,0,0,.35);border-color:rgba(110,168,255,.3)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:step;padding:0;list-style:none}
.steps li{position:relative;padding:18px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));transition:transform .3s ease, box-shadow .3s ease, border-color .25s ease}
.steps li:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.4);border-color:rgba(255,255,255,.18)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;top:-12px;left:-12px;width:30px;height:30px;border-radius:10px;background:linear-gradient(180deg,var(--brand),#3a7bff);display:grid;place-items:center;color:#fff;font-weight:700;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.25)}
.steps li::after{content:"";position:absolute;top:50%;right:-6px;transform:translateY(-50%);width:12px;height:2px;background:linear-gradient(90deg, rgba(110,168,255,.0), rgba(110,168,255,.35), rgba(110,168,255,.0))}
.steps li:last-child::after{display:none}
/* Focus and group hover dynamics */
.steps li:focus-within{box-shadow:0 0 0 3px rgba(110,168,255,.3)}
.steps:hover li{opacity:.9}
.steps:hover li:not(:hover){opacity:.7}

/* References section */
#references .eyebrow{position:relative;padding-left:34px;display:inline-block}
#references .eyebrow::before{content:"🤝";position:absolute;left:4px;top:2px;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg, rgba(110,168,255,.28), rgba(123,210,255,.18));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);z-index:1}
#references .subtitle{margin:0 0 32px;color:#9aa3b2;font-size:16px}
#references .cards.grid-2 .card{position:relative;padding:32px;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border-color:rgba(255,255,255,.14);transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:0 8px 24px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08)}
#references .cards.grid-2 .card:hover{transform:translateY(-8px) scale(1.02);border-color:rgba(110,168,255,.35);box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(110,168,255,.15) inset}
#references .cards.grid-2 .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--brand), var(--accent));border-radius:var(--radius) var(--radius) 0 0;opacity:0;transition:opacity .3s ease}
#references .cards.grid-2 .card:hover::before{opacity:1}
#references .reference-logo{width:80px;height:80px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));border:1px solid var(--line);display:grid;place-items:center;font-size:32px;margin-bottom:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}
#references .reference-logo img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
#references .reference-name{font-size:24px;font-weight:700;margin-bottom:8px;color:var(--text)}
#references .reference-status{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:600;margin-bottom:16px}
#references .reference-status.active{background:rgba(36,194,106,.15);color:#24c26a;border:1px solid rgba(36,194,106,.25)}
#references .reference-status.completed{background:rgba(110,168,255,.15);color:var(--brand);border:1px solid rgba(110,168,255,.25)}
#references .reference-description{color:#aeb7c8;line-height:1.6;margin-bottom:16px}
#references .reference-meta{display:flex;gap:16px;font-size:13px;color:var(--muted)}
#references .reference-meta span{display:flex;align-items:center;gap:6px}

/* Value note ribbon */
.note{position:relative;margin-top:22px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:12px 0 0 12px;background:linear-gradient(180deg, var(--brand), #3a7bff)}
.note::after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%);pointer-events:none}

/* Reveal system */
.will-reveal{opacity:0;transform:translateY(16px) scale(.98)}
.reveal{opacity:1;transform:none;transition:opacity .7s ease, transform .7s cubic-bezier(.21,1,.21,1)}
/* Stagger helpers for common collections */
.cards .card:nth-child(1){transition-delay:.02s}
.cards .card:nth-child(2){transition-delay:.08s}
.cards .card:nth-child(3){transition-delay:.14s}
.cards .card:nth-child(4){transition-delay:.2s}
.cards .card:nth-child(5){transition-delay:.26s}
.cards .card:nth-child(6){transition-delay:.32s}
.steps li:nth-child(1){transition-delay:.02s}
.steps li:nth-child(2){transition-delay:.08s}
.steps li:nth-child(3){transition-delay:.14s}
.steps li:nth-child(4){transition-delay:.2s}
.steps li:nth-child(5){transition-delay:.26s}
.chips .chip:nth-child(1){transition-delay:.02s}
.chips .chip:nth-child(2){transition-delay:.08s}
.chips .chip:nth-child(3){transition-delay:.14s}
.chips .chip:nth-child(4){transition-delay:.2s}
.chips .chip:nth-child(5){transition-delay:.26s}
.diagram .node:nth-child(1){transition-delay:.02s}
.diagram .node:nth-child(2){transition-delay:.08s}
.diagram .node:nth-child(3){transition-delay:.14s}
.diagram .node:nth-child(4){transition-delay:.2s}
.diagram .node:nth-child(5){transition-delay:.26s}

/* Footer */
.site-footer{padding:36px 0;border-top:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00))}
.footer-inner{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.footer-nav a{color:var(--muted)}

/* Brand language & slogans */
#brand .slogans .slogan{display:flex;flex-direction:column;gap:10px}
#brand .slogans .slogan.primary{border-color:rgba(110,168,255,.45);box-shadow:0 0 0 1px rgba(110,168,255,.2) inset}
#brand .slogans .slogan p{font-size:20px}
#brand .slogans .slogan .hint{margin-top:-4px;color:#9aa3b2;font-size:13px}
#brand .copy-btn{align-self:start}
#brand .copy-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(15,17,22,.92);color:#e6e8ef;opacity:0;pointer-events:none;transition:opacity .25s ease}
#brand .copy-toast.show{opacity:1}

/* 30-60-90 plan */
#plan .grid-3>div{position:relative;padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
#plan .grid-3>div:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.4);border-color:rgba(255,255,255,.16)}
#plan h3{margin:0 0 8px;letter-spacing:.2px}
#plan h3::after{content:"";display:block;margin-top:6px;width:42px;height:3px;border-radius:2px;background:linear-gradient(90deg, var(--brand), #3a7bff)}
#plan .sub{margin:2px 0 8px;color:#9aa3b2;font-size:14px}

/* One-liner - CINEMATIC FOCAL POINT (transparent, uses fixed bg) */
#one-liner{position:relative;overflow:hidden;padding:160px 0;background:transparent;margin-top:-60px;isolation:isolate}
#one-liner::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 1200px 800px at center, rgba(110,168,255,.04), transparent 70%);animation:oneLinerGlow 10s ease-in-out infinite;pointer-events:none;backdrop-filter:blur(0px)}
@keyframes oneLinerGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
#one-liner::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%236ea8ff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");animation:gridMove 20s linear infinite;opacity:.4;pointer-events:none}
@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
#one-liner .eyebrow{position:relative;z-index:2;opacity:0;transform:translateY(30px);animation:eyebrowReveal 1s ease-out .3s forwards}
@keyframes eyebrowReveal{to{opacity:1;transform:translateY(0)}}
#one-liner .tagline{font-size: clamp(22px, 3.5vw, 32px);max-width:75ch;margin:24px auto 0;color:#f0f3f8;text-wrap:balance;font-weight:500;line-height:1.5;letter-spacing:-.01em;position:relative;z-index:2;opacity:0;transform:translateY(40px) scale(.95);animation:taglineReveal 1.5s cubic-bezier(.16,1,.3,1) .5s forwards;text-shadow:0 2px 20px rgba(110,168,255,.2)}
@keyframes taglineReveal{0%{opacity:0;transform:translateY(40px) scale(.95);filter:blur(8px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
#one-liner .container{position:relative;z-index:2}
#one-liner .container::after{content:"";position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);width:160px;height:4px;border-radius:3px;background:linear-gradient(90deg, transparent, var(--brand), #7bd2ff, var(--brand), transparent);opacity:0;animation:underlineReveal 1s ease-out 1.2s forwards, underlineGlow 3s ease-in-out 2s infinite}
@keyframes underlineReveal{to{opacity:.8}}
@keyframes underlineGlow{0%,100%{filter:brightness(1);transform:translateX(-50%) scaleX(1)}50%{filter:brightness(1.4);transform:translateX(-50%) scaleX(1.15)}}

/* Contact form */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:8px}
.contact-form input,.contact-form textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);transition:border-color .25s ease, box-shadow .25s ease}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:rgba(110,168,255,.45);box-shadow:0 0 0 3px rgba(110,168,255,.28)}
.contact-form .invalid{border-color:#ff7a7a !important;box-shadow:0 0 0 3px rgba(255,122,122,.25) !important}
.contact-form button{grid-column:1/-1;justify-self:start}

/* Contact toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) scale(.98);padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(15,17,22,.96);color:#e6e8ef;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease}
.toast.show{opacity:1;transform:translateX(-50%) scale(1)}

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

/* Responsive */
@media (max-width: 960px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{margin-left:16px}
  .steps li::after{left:-6px;right:auto;top:auto;bottom:-6px;transform:none;width:2px;height:12px;background:linear-gradient(180deg, rgba(110,168,255,.0), rgba(110,168,255,.35), rgba(110,168,255,.0))}
  .nav-toggle{display:block}
  .nav-menu{position:fixed;inset:64px 16px auto 16px;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:rgba(15,17,22,.9);backdrop-filter:blur(10px);border:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
  .nav-menu.open{opacity:1;transform:none;pointer-events:auto}
}