@layer layout {
.iq-stage {
position: relative;
min-height: 100%;
min-height: 100svh;
width: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows:
minmax(var(--clear-top), 1fr)
auto
minmax(var(--clear-bottom), 1fr)
auto;
padding: var(--space-edge) var(--gutter);
overflow: hidden;
isolation: isolate;
background:
radial-gradient(1100px 760px at 14% -12%, color-mix(in oklab, var(--sg-3) 42%, transparent), transparent 64%),
radial-gradient(900px 640px at 88% 108%, color-mix(in oklab, var(--sg-4) 34%, transparent), transparent 62%),
linear-gradient(168deg, var(--sg-2) 0%, var(--sg-1) 60%, var(--sg-1) 100%);
}
.iq-stage.iq-error {
--sg-3: var(--sg-err-3);
--sg-4: var(--sg-err-4);
--sg-intensity: .60;
--sg-speed: .40;
--sg-ribbon: 0;
--sg-reed: 0;
}
.iq-gl {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity var(--motion-ground) var(--ease-calm);
}
.iq-gl.iq-on { opacity: 1; }
.iq-stage::after {
content: "";
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background: var(--shade);
}
.iq-grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: .5;
background-image: radial-gradient(var(--grain) 1px, transparent 1px);
background-size: 3px 3px;
}
.iq-stage > *:not(.iq-gl):not(.iq-grain):not(.iq-head) { position: relative; z-index: 3; }
}
@layer components {
.iq-hcta, .iq-burger, .iq-gwi, .iq-mega-x { position: relative; }
.iq-hcta::after, .iq-burger::after,
.iq-gwi::after, .iq-mega-x::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc((var(--target-hit) - 100%) / -2);
bottom: calc((var(--target-hit) - 100%) / -2);
}
.iq-burger::after,
.iq-mega-x::after {
left: calc((var(--target-hit) - 100%) / -2);
right: calc((var(--target-hit) - 100%) / -2);
}
.iq-btn:focus-visible,
.iq-hcta:focus-visible,
.iq-mbtn:focus-visible { background: var(--focus-fill); }
.iq-gwi:focus-visible { color: var(--paper); border-bottom-color: var(--paper); }
.iq-burger:focus-visible { background: var(--focus-ghost); }
.iq-mega-x:focus-visible { box-shadow: inset 0 0 0 1px var(--edge-on-dark-strong); }
.iq-stage .iq-head {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 9px var(--gutter);
background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
backdrop-filter: blur(22px) saturate(1.8);
-webkit-backdrop-filter: blur(22px) saturate(1.8);
border-bottom: 1px solid var(--glass-rim);
box-shadow: var(--glass-cast), inset 0 1px 0 var(--glass-inner);
}
.iq-head .iq-mark { display: inline-flex; align-items: center; height: 26px; color: var(--paper); }
.iq-head .iq-wm { height: 21px; width: auto; color: var(--paper); }
.iq-hright { display: flex; align-items: center; gap: 12px; }
.iq-hcta {
height: var(--control-header);
padding: 0 17px;
border-radius: var(--pill);
background: var(--paper);
color: var(--deep);
font-size: var(--text-chip);
font-weight: 500;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
transition: transform var(--motion-site) var(--ease-site),
box-shadow var(--motion-site) var(--ease-site);
}
.iq-hcta:hover { transform: translateY(-1px); box-shadow: var(--shadow-header); }
@media (max-width: 640px) { .iq-hcta { display: none; } }
.iq-burger {
width: 38px; height: 38px;
background: transparent; border: 0; cursor: pointer; padding: 0;
border-radius: var(--r-control);
transition: background var(--motion-site) var(--ease-site);
display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6.5px;
}
.iq-burger i { width: 30px; height: 1.5px; background: var(--paper); border-radius: 1px;
transition: transform var(--motion-site) var(--ease-site); }
.iq-burger:hover i:nth-child(1) { transform: translateY(-2px); }
.iq-burger:hover i:nth-child(2) { transform: translateY(2px); }
.iq-mid {
grid-row: 2;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(18px, 2.6vh, 34px);
width: 100%;
max-width: 1400px;
justify-items: start;
}
.iq-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--text-xs); font-weight: 500; letter-spacing: .08em;
text-transform: uppercase; color: var(--on-dark-label);
}
.iq-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.iq-h1 {
margin: 0;
font-family: var(--font-display);
font-size: var(--display);
font-weight: 600;
letter-spacing: var(--track-display);
line-height: var(--line-display);
text-shadow: var(--halo-display);
}
.iq-h1 .iq-l { display: block; }
.iq-h1 em { font-style: normal; color: var(--on-dark-recede); }
.iq-w { white-space: nowrap; }
.iq-ch {
display: inline-block;
opacity: 0;
transform: translateY(.32em);
animation: chrise var(--entrance) var(--ease-calm) forwards;
animation-delay: calc(var(--stagger) * 2 + var(--i) * var(--stagger-char));
}
@keyframes chrise { to { opacity: 1; transform: none; } }
.iq-sub {
margin: 0;
width: min(560px, 100%);
font-size: var(--text-lead);
font-weight: 500;
letter-spacing: var(--track-body);
line-height: var(--line-body);
color: var(--on-dark-lead);
}
.iq-acts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.iq-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: var(--control-cta); padding: 0 clamp(20px, 1.9vw, 28px);
border-radius: var(--pill);
font-size: var(--text-control); font-weight: 500; letter-spacing: -0.02em;
background: var(--paper); color: var(--deep);
transition: transform var(--motion-site) var(--ease-site),
box-shadow var(--motion-site) var(--ease-site);
}
.iq-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.iq-btn svg { width: clamp(13px, 1.05vw, 15px); height: clamp(13px, 1.05vw, 15px); flex: none; }
.iq-bot {
grid-row: 4;
display: flex; align-items: center; justify-content: space-between;
gap: 22px; flex-wrap: wrap; min-width: 0;
padding-top: 16px;
border-top: 1px solid var(--hair-light);
}
.iq-botmark svg { width: 21px; height: 21px; color: var(--paper); }
.iq-gwi {
font-size: var(--text-xs); font-weight: 500;
color: var(--on-dark-meta);
border-bottom: 1px solid var(--edge-on-dark-quiet);
padding-bottom: 2px;
transition: color var(--motion-site) var(--ease-site),
border-color var(--motion-site) var(--ease-site);
}
.iq-gwi:hover { color: var(--paper); border-color: var(--edge-on-dark-strong); }
.iq-mega {
position: fixed; inset: 0; z-index: 95;
background: var(--glass-menu);
backdrop-filter: blur(30px) saturate(1.6);
-webkit-backdrop-filter: blur(30px) saturate(1.6);
opacity: 0; pointer-events: none; visibility: hidden;
transition: opacity var(--motion-surface) var(--ease-calm),
visibility 0s linear var(--motion-surface);
color: var(--paper);
}
.iq-mega.iq-open {
opacity: 1; pointer-events: auto; visibility: visible;
transition: opacity var(--motion-surface) var(--ease-calm),
visibility 0s linear 0s;
}
.iq-mega-in {
height: 100%;
padding: clamp(16px, 2.2vh, 32px) var(--gutter) clamp(26px, 4.2vh, 56px);
display: flex; flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
}
.iq-mega-top { display: flex; justify-content: space-between; align-items: center; }
.iq-mega-mark svg { width: 21px; height: 21px; color: var(--paper); }
.iq-mega-x {
width: 32px; height: 32px;
flex: none;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--edge-on-dark-quiet);
background: transparent; border: 0; cursor: pointer; color: var(--paper);
display: inline-flex; align-items: center; justify-content: center;
transition: box-shadow var(--motion-site) var(--ease-site),
transform var(--motion-site) var(--ease-site);
}
.iq-mega-x svg { width: 14px; height: 14px; }
.iq-mega-x:hover { box-shadow: inset 0 0 0 1px var(--paper); transform: rotate(90deg); }
.iq-mega-nav { margin: auto 0; display: grid; max-width: 1520px; width: 100%; }
.iq-mrow {
display: flex; align-items: baseline; gap: clamp(14px, 1.5vw, 26px);
color: var(--paper);
font-size: clamp(1.5rem, 3.1vw, 3.25rem);
font-weight: 600; letter-spacing: -0.04em; line-height: 1.1;
padding: clamp(10px, 1.4vh, 20px) 0;
border-bottom: 1px solid var(--hair-light);
}
.iq-mrow:last-child { border-bottom: 0; }
.iq-mrow b { font-weight: inherit; white-space: nowrap; }
.iq-mrow span { font-size: var(--text-sm); font-weight: 500; color: var(--on-dark-meta);
letter-spacing: 0; margin-left: auto; white-space: nowrap;
padding-left: clamp(14px, 1.5vw, 28px); }
.iq-mega.iq-open .iq-mrow { opacity: 0; transform: translateY(10px);
animation: megain var(--entrance) var(--ease-calm) forwards; }
.iq-mega.iq-open .iq-mrow:nth-child(1) { animation-delay: 0ms; }
.iq-mega.iq-open .iq-mrow:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.iq-mega.iq-open .iq-mrow:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.iq-mega.iq-open .iq-mrow:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
@keyframes megain { to { opacity: 1; transform: none; } }
.iq-mega-foot { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 28px); flex-wrap: wrap; }
.iq-mbtn {
margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
height: var(--control-cta); padding: 0 clamp(20px, 1.9vw, 34px); border-radius: var(--pill);
background: var(--paper); color: var(--deep);
font-size: var(--text-control); font-weight: 500; letter-spacing: -0.02em;
transition: transform var(--motion-site) var(--ease-site);
}
.iq-mbtn:hover { transform: translateY(-1px); }
@media (max-width: 820px) {
.iq-mega-nav { margin: 28px 0 auto; }
.iq-mrow { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px;
align-items: baseline; padding: 14px 0; }
.iq-mrow span { margin-left: 0; padding-left: 0; white-space: normal; }
.iq-mega-in { padding-bottom: 32px; }
.iq-mega-foot { gap: 14px; }
.iq-mbtn { margin-left: 0; width: 100%; }
}
}
@layer utilities {
.iq-rv { opacity: 0; transform: translateY(10px);
animation: rise var(--entrance) var(--ease-calm) forwards; }
.iq-rv.iq-d1 { animation-delay: calc(var(--stagger) * 1); }
.iq-rv.iq-d2 { animation-delay: calc(var(--stagger) * 2); }
.iq-rv.iq-d3 { animation-delay: calc(var(--stagger) * 3); }
.iq-rv.iq-d4 { animation-delay: calc(var(--stagger) * 4); }
.iq-rv.iq-d5 { animation-delay: calc(var(--stagger) * 5); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.iq-rv { opacity: 1; transform: none; }
.iq-ch { opacity: 1; transform: none; }
.iq-gl { opacity: 1; }
}
}
@layer overrides {
@media (max-width: 1180px) {
.iq-stage {
--sg-intensity: .60;
--sg-ribbon: .70;
--sg-gloss: .17;
--sg-reed: .78;
--sg-reed-width: 46;
}
}
@media (max-width: 820px) {
.iq-stage {
--sg-intensity: .50;
--sg-ribbon: .45;
--sg-gloss: .12;
--sg-reed: .55;
--sg-reed-width: 40;
}
}
.iq-error .iq-h1 { font-size: clamp(2.125rem, 6.6vw, 7rem); }
.iq-error .iq-mid { justify-items: center; text-align: center; margin-inline: auto; }
.iq-error .iq-acts { justify-content: center; }
.iq-error .iq-sub { margin-inline: auto; }
.iq-error .iq-eyebrow i { background: var(--coral); }
@media (max-height: 620px) {
.iq-stage {
grid-template-rows:
var(--clear-top)
auto
minmax(var(--clear-bottom), 1fr)
auto;
}
}
.iq-stage.iq-tight {
--clear-top: calc(var(--header-h) - var(--space-edge) + 14px);
--clear-bottom: 20px;
}
@media (max-height: 620px) {
.iq-mrow {
font-size: min(clamp(1.5rem, 3.1vw, 3.25rem), 10.5vh, 9.2vw);
padding: clamp(6px, 1.1vh, 16px) 0;
}
.iq-mega-in { padding-top: clamp(12px, 2vh, 20px); padding-bottom: clamp(16px, 3vh, 28px); }
}
@media (max-height: 620px) and (min-width: 600px) {
.iq-mrow { display: flex; align-items: baseline; gap: clamp(14px, 1.6vw, 26px); }
.iq-mrow span { margin-left: auto; white-space: nowrap; padding-left: clamp(14px, 1.5vw, 28px); }
.iq-mega-nav { margin: auto 0; }
.iq-mbtn { margin-left: auto; width: auto; }
}
}