.iyven-experience { position:fixed; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity .7s ease; } .webgl-ready .iyven-experience { opacity:.92; } .experience-fallback { position:fixed; z-index:1; right:9vw; top:23vh; width:min(42vw,480px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--ink) 18%,transparent); border-radius:50%; opacity:.35; pointer-events:none; } .experience-fallback::before,.experience-fallback::after,.experience-fallback span,.experience-fallback i,.experience-fallback b { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--orange) 65%,transparent); border-radius:50%; inset:12%; } .experience-fallback::after { inset:22%; } .experience-fallback span { inset:32%; } .experience-fallback i { inset:42%; } .experience-fallback b { inset:47%; background:var(--ink); border:0; } .webgl-ready .experience-fallback { display:none; } main,.footer { position:relative; z-index:2; } [data-story] { min-height:88svh; display:grid; align-content:center; } .hero { min-height:calc(100svh - 76px); grid-template-columns:1fr; } .hero-copy { max-width:630px; } .hero-object,.technology-art { display:none; } .statement,.solutions,.technology { padding-block:clamp(110px,16vw,220px); } .statement-grid { max-width:760px; grid-template-columns:1fr; gap:28px; } .statement-grid p { max-width:470px; } .solutions .section-heading { max-width:590px; } .how-section { background:transparent; color:var(--ink); } .how-section .eyebrow { color:var(--orange); } html[data-theme="dark"] .how-section .eyebrow { color:var(--blue); } .how-section .steps { color:var(--ink); } .how-section .steps li { border-color:var(--line); } .how-section .steps p { color:var(--muted); } .how-section .step-number { color:var(--orange); } html[data-theme="dark"] .how-section .step-number { color:var(--blue); } .how-inner { width:min(var(--max),calc(100% - 48px)); margin-inline:auto; } .technology { grid-template-columns:1fr; } .technology-copy { max-width:590px; margin-left:auto; } .contact { min-height:62svh; padding:0; background:transparent; color:var(--ink); border:0; border-radius:0; } .contact .eyebrow { color:var(--orange); } .contact p:not(.eyebrow) { color:var(--muted); } .contact .button { background:var(--orange); border-color:var(--orange); color:#fff; } html[data-theme="dark"] .contact .eyebrow { color:var(--blue); } html[data-theme="dark"] .contact .button { background:var(--blue); border-color:var(--blue); color:#071020; } .solution-grid { position:relative; z-index:3; } .solution-card,.solution-featured { min-height:200px; background:transparent; backdrop-filter:none; border-color:color-mix(in srgb,var(--ink) 26%,transparent); box-shadow:none; } .solution-card:hover { border-color:var(--orange); } .solution-featured { color:var(--ink); } .solution-featured p,.solution-card p { color:var(--muted); } .solution-featured .solution-icon { background:color-mix(in srgb,var(--orange) 12%,transparent); color:var(--orange); } .solution-icon { margin-bottom:44px; border:1px solid color-mix(in srgb,var(--orange) 40%,transparent); background:transparent; } .card-orbit { opacity:.55; } html[data-theme="dark"] .solution-card:hover { border-color:var(--blue); } html[data-theme="dark"] .solution-featured .solution-icon { color:var(--blue); background:color-mix(in srgb,var(--blue) 14%,transparent); } html[data-theme="dark"] .solution-icon { border-color:color-mix(in srgb,var(--blue) 45%,transparent); } html[data-theme="dark"] .iyven-experience { opacity:.96; } html[data-theme="dark"] .experience-fallback::before,html[data-theme="dark"] .experience-fallback::after,html[data-theme="dark"] .experience-fallback span,html[data-theme="dark"] .experience-fallback i { border-color:color-mix(in srgb,var(--blue) 70%,transparent); }
@media (max-width:760px) { .experience-fallback { right:7vw; top:12vh; width:70vw; opacity:.24; } [data-story] { min-height:72svh; } .hero { padding-top:56svh; min-height:100svh; } .hero-copy { padding:0 0 0 18px; border-radius:0; border-left:1px solid color-mix(in srgb,var(--orange) 58%,transparent); background:transparent; backdrop-filter:none; } html[data-theme="dark"] .hero-copy { border-color:color-mix(in srgb,var(--blue) 62%,transparent); } .statement,.solutions,.technology { padding-block:100px; } .how-inner { width:min(100% - 36px,var(--max)); } .contact { min-height:auto; } }

/* The closing CTA deliberately lives directly on the particle field. */
#contact.contact { background:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0 !important; padding:0 !important; }
@media (prefers-reduced-motion:reduce) { .iyven-experience { display:none; } .experience-fallback { display:block; } }

/* The final mark is a deliberate accessibility-safe fallback for the particle wordmark. */
.experience-logo-mark { position:fixed; z-index:1; top:21vh; right:8vw; width:min(42vw,560px); height:150px; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; }
.experience-logo-mark img { position:absolute; top:-102px; left:0; display:block; width:100%; height:auto; }
.experience-logo-mark .logo-dark { display:none; }
html[data-theme="dark"] .experience-logo-mark .logo-light { display:none; }
html[data-theme="dark"] .experience-logo-mark .logo-dark { display:block; }
html.show-final-logo .experience-logo-mark { opacity:1; transform:translateY(0); }
html.show-final-logo .iyven-experience { opacity:0; }
@media (max-width:760px) { .experience-logo-mark { top:15vh; right:8vw; width:72vw; height:120px; } .experience-logo-mark img { top:-72px; } }

/* Full-screen entrance visual supplied for Iyven. It replaces the particle system. */
.hero { position:relative; isolation:isolate; width:100vw; max-width:none; min-height:100svh; margin-left:calc(50% - 50vw); margin-right:0; padding-left:max(24px,calc((100vw - var(--max)) / 2)); padding-right:max(24px,calc((100vw - var(--max)) / 2)); overflow:hidden; background:#010716; }
.circuit-particle-field { position:fixed; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; background:#010716; }
.hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(1,7,20,.66) 0%,rgba(1,7,20,.30) 47%,rgba(1,7,20,.06) 100%),linear-gradient(0deg,rgba(1,7,20,.22),transparent 48%); }
.hero::after { display:none; }
.hero-copy { position:relative; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.48); }
.hero-copy .eyebrow,.hero-description { color:rgba(255,255,255,.84); }
.hero-copy h1,.hero-copy h1 em { color:#fff; }
.hero-copy .button:not(.button-ghost) { background:#fff; border-color:#fff; color:#071020; }
.hero-copy .button-ghost { color:#fff; }
@media (max-width:760px) { .hero { min-height:100svh; padding-inline:18px; } .hero::before { background-position:58% center; } .hero::after { background:linear-gradient(0deg,rgba(2,10,24,.80) 0%,rgba(2,10,24,.40) 68%,rgba(2,10,24,.22) 100%); } }

html.earth-particle-stage .statement,html.earth-particle-stage .statement h2,html.earth-particle-stage .statement p { color:#f6f8ff; text-shadow:0 2px 18px rgba(0,0,0,.72); }
html.earth-particle-stage .statement .eyebrow { color:#79dfff; }
html.solution-particle-stage .solutions,html.solution-particle-stage .solutions h2,html.solution-particle-stage .solutions p { color:#f4f9ff; text-shadow:0 2px 18px rgba(0,0,0,.72); }
html.solution-particle-stage .solutions .eyebrow { color:#79dfff; }

/* Keep the particle field visible behind all page copy. */
.circuit-particle-field { z-index:3; }
main,.footer { z-index:4; }
.hero { background:transparent; }