/* =================================================================
Industry Page V2 — premium-agency design system.
Scoped under .iv2 so it cannot collide with the rest of the site.
Loaded only by industry pages.
================================================================= */
.iv2{
--iv2-navy:#0B1933;
--iv2-navy-2:#101F40;
--iv2-ivory:#F8F7F5;
--iv2-fog:#E8EDF5;
--iv2-red:#C52127;
--iv2-mint:#5FD3A3;
--iv2-mute:#5D6B85;
--iv2-display:'Bricolage Grotesque', system-ui, sans-serif;
--iv2-sans:'Inter', system-ui, sans-serif;
/* These two need to apply page-wide; we set them on the wrapping div
and inherit downward. The site-wide body styling is kept untouched. */
background:var(--iv2-ivory);
color:var(--iv2-navy);
font-family:var(--iv2-sans);
}
/* Reset only what we own */
.iv2 *,.iv2 *::before,.iv2 *::after{box-sizing:border-box}
.iv2 img,.iv2 svg{max-width:100%;display:block}
.iv2 a{color:inherit;text-decoration:none}
.iv2 button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
.iv2-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.iv2-wrap{padding:0 20px}}
/* ════ HERO ════ */
.iv2-hero{
position:relative;overflow:hidden;
background:
radial-gradient(1200px 600px at 90% -10%, rgba(95,211,163,.18), transparent 60%),
radial-gradient(900px 700px at -10% 110%, rgba(197,33,39,.22), transparent 65%),
linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
color:var(--iv2-ivory);
padding:140px 0 120px;
}
.iv2-hero::before{
content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
}
.iv2-hero-inner{
position:relative;z-index:2;
display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;
}
@media(max-width:980px){.iv2-hero-inner{grid-template-columns:1fr;gap:48px}}
.iv2-hero-eyebrow{
display:inline-flex;align-items:center;gap:12px;
padding:8px 16px;
background:rgba(95,211,163,.12);
border:1px solid rgba(95,211,163,.32);
border-radius:999px;
font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--iv2-mint);
margin-bottom:32px;
}
.iv2-hero-eyebrow::before{
content:'';width:8px;height:8px;border-radius:50%;background:var(--iv2-mint);
box-shadow:0 0 12px rgba(95,211,163,.8);
animation:iv2-pulse 2s ease-in-out infinite;
}
@keyframes iv2-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.iv2-hero h1{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(40px,5.4vw,76px);
line-height:1.02;letter-spacing:-.025em;
margin:0 0 24px;
}
.iv2-hero h1 em{
font-style:normal;
background:linear-gradient(120deg, var(--iv2-mint), #BEE3D2);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.iv2-hero-sub{
font-size:19px;line-height:1.55;color:rgba(248,247,245,.7);
max-width:54ch;margin:0 0 40px;
}
.iv2-hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:56px}
.iv2-btn-primary{
background:var(--iv2-red);color:var(--iv2-ivory);
font-family:var(--iv2-sans);font-weight:600;font-size:15px;
padding:16px 28px;border-radius:999px;
display:inline-flex;align-items:center;gap:10px;
transition:transform .2s, box-shadow .2s;
box-shadow:0 8px 24px rgba(197,33,39,.32);
}
.iv2-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(197,33,39,.48)}
.iv2-btn-primary::after{content:'→';transition:transform .2s}
.iv2-btn-primary:hover::after{transform:translateX(4px)}
.iv2-btn-ghost{
color:var(--iv2-ivory);font-family:var(--iv2-sans);font-weight:500;font-size:15px;
padding:16px 24px;border-radius:999px;
border:1px solid rgba(248,247,245,.24);
transition:background .2s, border-color .2s;
}
.iv2-btn-ghost:hover{background:rgba(248,247,245,.06);border-color:rgba(248,247,245,.4)}
.iv2-hero-stats{display:flex;gap:48px;padding-top:32px;border-top:1px solid rgba(248,247,245,.12)}
@media(max-width:600px){.iv2-hero-stats{flex-wrap:wrap;gap:32px}}
.iv2-stat-num{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(36px,4vw,48px);
line-height:1;letter-spacing:-.02em;
background:linear-gradient(180deg, var(--iv2-ivory) 0%, rgba(248,247,245,.6) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.iv2-stat-suf{color:var(--iv2-mint);font-family:var(--iv2-display);font-weight:700;font-size:.7em}
.iv2-stat-lbl{font-size:13px;color:rgba(248,247,245,.55);margin-top:6px;line-height:1.4;max-width:18ch}
/* ── Hero art root (all variants share this) ────────────────── */
.iv2-hero-art{position:relative;height:520px}
.iv2-hero-art-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* ── Shared floating chip (used by all variants) ─────────────── */
.iv2-orbit-chip{
position:absolute;
background:rgba(248,247,245,.06);
backdrop-filter:blur(12px);
border:1px solid rgba(248,247,245,.18);
border-radius:14px;
padding:12px 18px;
font-size:12px;font-weight:500;color:var(--iv2-ivory);
display:flex;align-items:center;gap:10px;
white-space:nowrap;
box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
animation:iv2-bob 6s ease-in-out infinite;
}
.iv2-orbit-chip svg{width:14px;height:14px;flex-shrink:0}
@keyframes iv2-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* ──────────────────────────────────────────────────────────────
VARIANT 1 — SHIELD (Government, default)
Three concentric dashed rings rotating at different speeds,
defensive shield emblem at centre. Signals: sovereignty,
protection, classification.
────────────────────────────────────────────────────────────── */
.iv2-art-shield .iv2-orbit-ring{
position:absolute;border:1px dashed rgba(95,211,163,.3);
border-radius:50%;animation:iv2-spin 32s linear infinite;
}
.iv2-art-shield .iv2-orbit-ring.r1{width:80%;height:80%}
.iv2-art-shield .iv2-orbit-ring.r2{width:62%;height:62%;animation-duration:24s;animation-direction:reverse;border-color:rgba(197,33,39,.3)}
.iv2-art-shield .iv2-orbit-ring.r3{width:42%;height:42%;animation-duration:18s;border-color:rgba(248,247,245,.2)}
@keyframes iv2-spin{to{transform:rotate(360deg)}}
.iv2-art-shield .iv2-orbit-chip.c1{top:8%;left:20%;animation-delay:0s}
.iv2-art-shield .iv2-orbit-chip.c2{top:18%;right:8%;animation-delay:1.2s;border-color:rgba(95,211,163,.36)}
.iv2-art-shield .iv2-orbit-chip.c3{bottom:22%;left:6%;animation-delay:.6s;border-color:rgba(197,33,39,.36)}
.iv2-art-shield .iv2-orbit-chip.c4{bottom:8%;right:18%;animation-delay:2.1s}
.iv2-art-shield .iv2-orbit-chip.c5{top:48%;left:48%;animation-delay:.3s;background:rgba(95,211,163,.16);border-color:rgba(95,211,163,.4)}
.iv2-hero-shield{
position:relative;z-index:2;
width:180px;height:200px;
background:linear-gradient(180deg, rgba(95,211,163,.18), rgba(95,211,163,.04));
border:1px solid rgba(95,211,163,.4);
border-radius:16px 16px 90px 90px / 16px 16px 100px 100px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 24px 80px rgba(95,211,163,.24), inset 0 1px 0 rgba(255,255,255,.1);
}
.iv2-hero-shield svg{width:64px;height:64px;color:var(--iv2-mint)}
/* ──────────────────────────────────────────────────────────────
VARIANT 8 — BOOST (Startups & SMEs)
Rising trajectory line from bottom-left to top-right with four
stage markers along it (Idea / MVP / Traction / Scale). Each
marker is a small node. Around the curve: tile chips showing
what Huawei brings at each stage (credits · mentorship · GTM ·
co-sell · talent). Signals: growth trajectory, the journey,
partnership at every step.
────────────────────────────────────────────────────────────── */
.iv2-art-boost{position:absolute;inset:0}
.iv2-art-boost svg{position:absolute;inset:0;width:100%;height:100%}
/* The rising trajectory line + filled area underneath */
.iv2-boost-fill{fill:url(#iv2-boost-grad)}
.iv2-boost-line{
fill:none;stroke:var(--iv2-mint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px rgba(95,211,163,.6));
}
/* Stage markers along the curve */
.iv2-boost-marker{
fill:#fff;stroke:var(--iv2-mint);stroke-width:1.4;
filter:drop-shadow(0 0 4px rgba(95,211,163,.7));
}
.iv2-boost-marker.last{fill:var(--iv2-red);stroke:var(--iv2-red);filter:drop-shadow(0 0 6px rgba(197,33,39,.8))}
/* Stage labels under markers (rendered as HTML so they don't compete with SVG scaling) */
.iv2-boost-stage{
position:absolute;z-index:3;
background:rgba(11,25,51,.7);
backdrop-filter:blur(10px);
border:1px solid rgba(248,247,245,.18);
border-radius:10px;
padding:5px 9px 6px;
display:flex;flex-direction:column;align-items:center;gap:1px;
white-space:nowrap;
box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.iv2-boost-stage-name{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.06em;
text-transform:uppercase;color:var(--iv2-ivory);
}
.iv2-boost-stage-sub{font-size:8.5px;color:rgba(248,247,245,.55);letter-spacing:.04em}
/* Position stage labels just below their curve marker */
.iv2-boost-stage.s1{bottom:18%;left:12%;border-color:rgba(95,211,163,.4)}
.iv2-boost-stage.s2{bottom:32%;left:30%}
.iv2-boost-stage.s3{bottom:52%;left:52%;border-color:rgba(95,211,163,.4)}
.iv2-boost-stage.s4{bottom:74%;left:74%;border-color:rgba(197,33,39,.45)}
/* Floating "what Huawei brings" tile chips */
.iv2-boost-chip{
position:absolute;z-index:2;
background:rgba(95,211,163,.16);
border:1px solid rgba(95,211,163,.4);
backdrop-filter:blur(8px);
border-radius:999px;
padding:5px 12px;
font-family:var(--iv2-sans);font-weight:600;font-size:10.5px;color:var(--iv2-ivory);
letter-spacing:.03em;
animation:iv2-bob 7s ease-in-out infinite;
box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.iv2-boost-chip.alt{background:rgba(197,33,39,.16);border-color:rgba(197,33,39,.4)}
/* Position 5 floating chips around the trajectory */
.iv2-boost-chip.c1{top:12%;left:8%;animation-delay:0s}
.iv2-boost-chip.c2{top:8%;right:18%;animation-delay:.6s}
.iv2-boost-chip.c3{top:38%;right:6%;animation-delay:1.2s}
.iv2-boost-chip.c4{top:62%;left:6%;animation-delay:1.8s}
.iv2-boost-chip.c5{top:22%;left:42%;animation-delay:2.4s}
/* Headline "credit ceiling" badge at top-right */
.iv2-boost-ceiling{
position:absolute;z-index:4;top:6%;right:6%;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border:1px solid rgba(95,211,163,.45);
border-radius:14px;
padding:10px 14px 11px;
display:flex;flex-direction:column;align-items:flex-end;gap:2px;
box-shadow:0 18px 40px rgba(95,211,163,.18), inset 0 1px 0 rgba(255,255,255,.1);
}
.iv2-boost-ceiling-eyebrow{font-family:var(--iv2-display);font-weight:700;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(95,211,163,.85)}
.iv2-boost-ceiling-num{font-family:var(--iv2-display);font-weight:700;font-size:24px;color:var(--iv2-ivory);line-height:1;letter-spacing:-.01em}
.iv2-boost-ceiling-sub{font-size:9px;color:rgba(248,247,245,.55);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:980px){
.iv2-boost-stage{padding:4px 7px 5px}
.iv2-boost-stage-name{font-size:9px}
.iv2-boost-stage-sub{font-size:7.5px}
.iv2-boost-chip{font-size:9px;padding:4px 9px}
.iv2-boost-ceiling{padding:8px 11px 9px}
.iv2-boost-ceiling-num{font-size:18px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 7 — CAST (Media & Entertainment)
Central content-origin core broadcasting outward to a ring of
viewer-location pins via animated arc beams. Each beam pulses
toward its destination in sequence. Signals: content delivered
everywhere, global CDN reach, the broadcast moment.
────────────────────────────────────────────────────────────── */
.iv2-art-cast{position:absolute;inset:0}
.iv2-art-cast svg{position:absolute;inset:0;width:100%;height:100%}
/* The arc beams from origin to each viewer pin */
.iv2-cast-beam{
fill:none;stroke:rgba(95,211,163,.18);stroke-width:.4;
stroke-dasharray:1 1.4;
}
/* A traveling pulse on each beam — SMIL animateMotion */
.iv2-cast-pulse{
fill:var(--iv2-mint);
filter:drop-shadow(0 0 4px rgba(95,211,163,.9));
}
.iv2-cast-pulse.p2{fill:var(--iv2-red);filter:drop-shadow(0 0 4px rgba(197,33,39,.9))}
/* Viewer-location pins around the edge */
.iv2-cast-pin{
position:absolute;z-index:3;
width:72px;height:72px;border-radius:50%;
background:linear-gradient(180deg, rgba(11,25,51,.75), rgba(11,25,51,.5));
backdrop-filter:blur(14px);
border:1px solid rgba(248,247,245,.18);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;line-height:1.1;
box-shadow:0 14px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation:iv2-bob 7s ease-in-out infinite;
}
.iv2-cast-pin svg{width:18px;height:18px;color:var(--iv2-mint);margin-bottom:3px}
.iv2-cast-pin-label{
font-family:var(--iv2-display);font-weight:700;font-size:9.5px;letter-spacing:.06em;
text-transform:uppercase;color:var(--iv2-ivory);
}
/* Position 6 pins around the edge */
.iv2-cast-pin.p1{top:6%;left:14%;animation-delay:0s;border-color:rgba(95,211,163,.4)}
.iv2-cast-pin.p2{top:6%;right:14%;animation-delay:.6s}
.iv2-cast-pin.p3{top:50%;left:0;transform:translateY(-50%);animation-delay:1.2s;border-color:rgba(197,33,39,.4)}
.iv2-cast-pin.p4{top:50%;right:0;transform:translateY(-50%);animation-delay:1.8s}
.iv2-cast-pin.p5{bottom:6%;left:14%;animation-delay:2.4s}
.iv2-cast-pin.p6{bottom:6%;right:14%;animation-delay:3.0s;border-color:rgba(95,211,163,.4)}
/* Central origin core — a play-button-style rounded square */
.iv2-cast-core{
position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
width:178px;height:140px;border-radius:18px;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border:1px solid rgba(95,211,163,.45);
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:14px;gap:6px;
box-shadow:0 30px 80px rgba(95,211,163,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.iv2-cast-core::before{
content:'';position:absolute;inset:-5px;border-radius:18px;
border:1px dashed rgba(95,211,163,.4);
animation:iv2-spin 26s linear infinite;
}
.iv2-cast-core svg{width:30px;height:30px;color:var(--iv2-mint)}
.iv2-cast-core-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:9px;letter-spacing:.14em;
text-transform:uppercase;color:rgba(95,211,163,.85);
}
.iv2-cast-core-num{
font-family:var(--iv2-display);font-weight:700;font-size:22px;color:var(--iv2-ivory);
line-height:1;letter-spacing:-.01em;
}
.iv2-cast-core-sub{font-size:9.5px;color:rgba(248,247,245,.55);letter-spacing:.06em;text-transform:uppercase;text-align:center}
@media(max-width:980px){
.iv2-cast-pin{width:56px;height:56px}
.iv2-cast-pin svg{width:14px;height:14px}
.iv2-cast-pin-label{font-size:8px}
.iv2-cast-core{width:138px;height:108px}
.iv2-cast-core-num{font-size:17px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 6 — GRID (Real Estate)
Plan view of a smart district: building blocks at varying
heights connected by an optical-fibre mesh, with a central
Campus Digital Platform node. Signals: portfolio, infra
underneath the assets, city-scale connectivity.
────────────────────────────────────────────────────────────── */
.iv2-art-grid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.iv2-art-grid svg{position:absolute;inset:0;width:100%;height:100%}
/* The fibre-mesh paths — animated stroke gives a subtle flowing look */
.iv2-grid-fibre{
fill:none;
stroke:rgba(95,211,163,.35);
stroke-width:.4;
stroke-dasharray:1 1.5;
animation:iv2-fibre-flow 14s linear infinite;
}
@keyframes iv2-fibre-flow{
from {stroke-dashoffset:0}
to {stroke-dashoffset:-40}
}
/* Tinted accent fibres */
.iv2-grid-fibre.f2{stroke:rgba(197,33,39,.32);animation-duration:11s;animation-direction:reverse}
.iv2-grid-fibre.f3{stroke:rgba(248,247,245,.22);animation-duration:18s}
/* Building blocks — varying heights, slight perspective via shadows */
.iv2-grid-bldg{
position:absolute;z-index:3;
background:linear-gradient(180deg, rgba(11,25,51,.85), rgba(11,25,51,.55));
border:1px solid rgba(248,247,245,.18);
border-radius:6px;
display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
padding-bottom:6px;
box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
/* The "window" lighting effect — soft repeating grid */
.iv2-grid-bldg::before{
content:'';position:absolute;inset:4px 4px 18px;
background:
repeating-linear-gradient(0deg, transparent 0 4px, rgba(95,211,163,.12) 4px 5px),
repeating-linear-gradient(90deg, transparent 0 3px, rgba(95,211,163,.08) 3px 4px);
border-radius:3px;
opacity:.7;
}
.iv2-grid-bldg-label{
position:relative;z-index:2;
font-family:var(--iv2-display);font-weight:700;font-size:8.5px;letter-spacing:.08em;
text-transform:uppercase;color:var(--iv2-ivory);
background:rgba(11,25,51,.85);padding:2px 5px;border-radius:3px;
}
/* Position + size each building uniquely — 5 around the central platform */
.iv2-grid-bldg.b1{top:6%;left:14%;width:54px;height:108px;border-color:rgba(95,211,163,.32)}
.iv2-grid-bldg.b2{top:9%;right:16%;width:46px;height:78px;border-color:rgba(197,33,39,.32)}
.iv2-grid-bldg.b3{bottom:10%;left:8%;width:62px;height:64px}
.iv2-grid-bldg.b4{bottom:6%;right:8%;width:50px;height:90px;border-color:rgba(95,211,163,.32)}
.iv2-grid-bldg.b5{top:48%;left:8%;width:42px;height:54px;transform:translateY(-50%)}
.iv2-grid-bldg.b6{top:48%;right:6%;width:44px;height:58px;transform:translateY(-50%);border-color:rgba(197,33,39,.32)}
/* Central Campus Digital Platform node — wider, lower, gives a "foundation" feel */
.iv2-grid-core{
position:relative;z-index:4;
width:200px;max-width:55%;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border:1px solid rgba(95,211,163,.45);
border-radius:14px;
padding:14px 16px 12px;
box-shadow:0 30px 80px rgba(95,211,163,.22), inset 0 1px 0 rgba(255,255,255,.1);
display:flex;flex-direction:column;align-items:center;gap:6px;
}
.iv2-grid-core::before{
/* Subtle pulse halo */
content:'';position:absolute;inset:-5px;border-radius:14px;
border:1px dashed rgba(95,211,163,.4);
animation:iv2-spin 30s linear infinite;
}
.iv2-grid-core svg{width:22px;height:22px;color:var(--iv2-mint)}
.iv2-grid-core-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:9px;letter-spacing:.12em;
text-transform:uppercase;color:rgba(95,211,163,.85);
}
.iv2-grid-core-num{
font-family:var(--iv2-display);font-weight:700;font-size:20px;color:var(--iv2-ivory);
line-height:1;letter-spacing:-.01em;
}
.iv2-grid-core-sub{font-size:9.5px;color:rgba(248,247,245,.55);letter-spacing:.06em;text-transform:uppercase;text-align:center}
@media(max-width:980px){
.iv2-grid-bldg{transform:scale(.8)}
.iv2-grid-bldg.b5{transform:translateY(-50%) scale(.8)}
.iv2-grid-bldg.b6{transform:translateY(-50%) scale(.8)}
.iv2-grid-core{width:160px}
.iv2-grid-core-num{font-size:17px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 5 — VITALS (Healthcare)
Central heart-monitor core with a live ECG waveform animating
across it, surrounded by care-environment tiles (Bed/ICU/
Imaging/Lab/Pharmacy). Signals: continuity of care, monitoring,
patient at the centre.
────────────────────────────────────────────────────────────── */
.iv2-art-vitals{position:absolute;inset:0}
.iv2-art-vitals svg{position:absolute;inset:0;width:100%;height:100%}
/* Care-setting tiles around the perimeter */
.iv2-vitals-tile{
position:absolute;z-index:3;
width:84px;height:84px;border-radius:18px;
background:linear-gradient(180deg, rgba(11,25,51,.7), rgba(11,25,51,.4));
backdrop-filter:blur(14px);
border:1px solid rgba(248,247,245,.18);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;line-height:1.1;
box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation:iv2-bob 7s ease-in-out infinite;
}
.iv2-vitals-tile svg{width:20px;height:20px;color:var(--iv2-mint);margin-bottom:4px}
.iv2-vitals-tile-label{
font-family:var(--iv2-display);font-weight:600;font-size:10px;
letter-spacing:.04em;color:var(--iv2-ivory);text-transform:uppercase;
}
.iv2-vitals-tile.t1{top:6%;left:18%;animation-delay:0s;border-color:rgba(95,211,163,.4)}
.iv2-vitals-tile.t2{top:6%;right:18%;animation-delay:.7s;border-color:rgba(197,33,39,.4)}
.iv2-vitals-tile.t3{top:50%;left:0;transform:translateY(-50%);animation-delay:1.4s}
.iv2-vitals-tile.t4{top:50%;right:0;transform:translateY(-50%);animation-delay:2.1s;border-color:rgba(95,211,163,.4)}
.iv2-vitals-tile.t5{bottom:6%;left:50%;transform:translateX(-50%);animation-delay:2.8s}
/* Central monitor core — landscape rectangle, NOT a circle, so the
ECG line has room to scroll across it */
.iv2-vitals-core{
position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
width:240px;max-width:60%;height:130px;border-radius:18px;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border:1px solid rgba(95,211,163,.4);
box-shadow:0 30px 80px rgba(95,211,163,.22), inset 0 1px 0 rgba(255,255,255,.12);
overflow:hidden;
display:flex;flex-direction:column;
}
.iv2-vitals-core::before{
/* The chrome bezel — top status row */
content:'';position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg, transparent, rgba(95,211,163,.5), transparent);
}
.iv2-vitals-screen{
position:relative;flex:1;
background:
radial-gradient(120% 100% at 50% 100%, rgba(95,211,163,.06), transparent),
repeating-linear-gradient(0deg, transparent 0 13px, rgba(95,211,163,.05) 13px 14px),
repeating-linear-gradient(90deg, transparent 0 13px, rgba(95,211,163,.05) 13px 14px);
overflow:hidden;
}
.iv2-vitals-ecg{
position:absolute;inset:0;
}
.iv2-vitals-ecg path{
fill:none;stroke:var(--iv2-mint);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px rgba(95,211,163,.7));
stroke-dasharray:240;
animation:iv2-ecg-scan 3.8s linear infinite;
}
@keyframes iv2-ecg-scan{
0% {stroke-dashoffset:240}
100% {stroke-dashoffset:0}
}
.iv2-vitals-bottom{
display:flex;justify-content:space-between;align-items:center;
padding:6px 12px;
border-top:1px solid rgba(95,211,163,.18);
background:rgba(11,25,51,.6);
}
.iv2-vitals-num{
font-family:var(--iv2-display);font-weight:700;font-size:18px;color:var(--iv2-ivory);
line-height:1;letter-spacing:-.01em;
}
.iv2-vitals-num em{color:var(--iv2-mint);font-style:normal;font-size:.6em;margin-left:2px}
.iv2-vitals-sub{font-size:9px;color:rgba(248,247,245,.55);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:980px){
.iv2-vitals-tile{width:64px;height:64px}
.iv2-vitals-core{width:200px;height:108px}
.iv2-vitals-num{font-size:15px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 4 — PULSE (Retail)
Central storefront core with concentric pulse waves rippling
outward to channel tiles (Mobile / In-store / Marketplace / Live
/ Social). Transaction chips orbit at varied speeds.
Signals: every channel alive at once, commerce in motion.
────────────────────────────────────────────────────────────── */
.iv2-art-pulse{position:absolute;inset:0}
.iv2-art-pulse svg{position:absolute;inset:0;width:100%;height:100%}
.iv2-art-pulse .iv2-pulse-ring{
fill:none;stroke:rgba(197,33,39,.38);stroke-width:1.6;
transform-origin:50% 50%;
animation:iv2-pulse-wave 3.4s ease-out infinite;
}
.iv2-art-pulse .iv2-pulse-ring.r2{
animation-delay:1.1s;stroke:rgba(95,211,163,.32);stroke-width:1.2;
}
.iv2-art-pulse .iv2-pulse-ring.r3{
animation-delay:2.2s;stroke:rgba(248,247,245,.22);stroke-width:1;
}
@keyframes iv2-pulse-wave{
0% {transform:scale(.18);opacity:0}
18% {opacity:1}
100% {transform:scale(1.7);opacity:0}
}
/* Channel tiles arranged around the perimeter — Mobile / In-store /
Marketplace / Live / Social */
.iv2-pulse-ch{
position:absolute;z-index:3;
width:84px;height:84px;border-radius:18px;
background:linear-gradient(180deg, rgba(11,25,51,.7), rgba(11,25,51,.4));
backdrop-filter:blur(14px);
border:1px solid rgba(248,247,245,.18);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;line-height:1.1;
box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation:iv2-bob 6s ease-in-out infinite;
}
.iv2-pulse-ch svg{width:20px;height:20px;color:var(--iv2-mint);margin-bottom:4px}
.iv2-pulse-ch-label{
font-family:var(--iv2-display);font-weight:600;font-size:10px;
letter-spacing:.04em;color:var(--iv2-ivory);text-transform:uppercase;
}
.iv2-pulse-ch.c1{top:6%;left:18%;animation-delay:0s;border-color:rgba(95,211,163,.4)}
.iv2-pulse-ch.c2{top:6%;right:18%;animation-delay:.6s;border-color:rgba(197,33,39,.4)}
.iv2-pulse-ch.c3{top:50%;left:0;transform:translateY(-50%);animation-delay:1.2s}
.iv2-pulse-ch.c4{top:50%;right:0;transform:translateY(-50%);animation-delay:1.8s;border-color:rgba(95,211,163,.4)}
.iv2-pulse-ch.c5{bottom:6%;left:50%;transform:translateX(-50%);animation-delay:2.4s}
/* Central storefront core */
.iv2-pulse-core{
position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
width:148px;height:148px;border-radius:24px;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border:1px solid rgba(95,211,163,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:14px;
box-shadow:0 30px 80px rgba(197,33,39,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.iv2-pulse-core::before{
content:'';position:absolute;inset:-5px;border-radius:24px;
border:1px dashed rgba(197,33,39,.45);
animation:iv2-spin 24s linear infinite;
}
.iv2-pulse-core svg{width:24px;height:24px;color:var(--iv2-red);margin-bottom:6px}
.iv2-pulse-core-num{
font-family:var(--iv2-display);font-weight:700;font-size:22px;line-height:1;
color:var(--iv2-ivory);letter-spacing:-.01em;
}
.iv2-pulse-core-sub{font-size:10px;color:rgba(248,247,245,.55);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
@media(max-width:980px){
.iv2-pulse-ch{width:64px;height:64px}
.iv2-pulse-core{width:116px;height:116px}
.iv2-pulse-core-num{font-size:18px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 3 — BLOOM (Education)
Central knowledge core with expanding concentric arcs (growth
metaphor). Audience nodes (Student / Teacher / Researcher /
Parent) around the perimeter. Subject-area chips drift between
them. Signals: learning, expansion, multiple audiences served.
────────────────────────────────────────────────────────────── */
.iv2-art-bloom{position:absolute;inset:0}
.iv2-art-bloom svg{position:absolute;inset:0;width:100%;height:100%}
/* The expanding arcs — three concentric, animating outward */
.iv2-art-bloom .iv2-bloom-arc{
fill:none;stroke:rgba(95,211,163,.4);stroke-width:1.5;
transform-origin:50% 50%;
animation:iv2-bloom-pulse 5s ease-in-out infinite;
}
.iv2-art-bloom .iv2-bloom-arc.a2{
animation-delay:1.6s;stroke:rgba(197,33,39,.32);stroke-width:1.2;
}
.iv2-art-bloom .iv2-bloom-arc.a3{
animation-delay:3.2s;stroke:rgba(248,247,245,.25);stroke-width:1;
}
@keyframes iv2-bloom-pulse{
0% {transform:scale(.3);opacity:0}
20% {opacity:1}
100% {transform:scale(1.5);opacity:0}
}
/* Audience nodes — Student, Teacher, Researcher, Parent */
.iv2-bloom-aud{
position:absolute;z-index:3;
width:88px;height:88px;border-radius:18px;
background:linear-gradient(180deg, rgba(11,25,51,.7), rgba(11,25,51,.4));
backdrop-filter:blur(14px);
border:1px solid rgba(248,247,245,.18);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;line-height:1.1;
box-shadow:0 18px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation:iv2-bob 7s ease-in-out infinite;
}
.iv2-bloom-aud svg{width:22px;height:22px;color:var(--iv2-mint);margin-bottom:4px}
.iv2-bloom-aud-label{
font-family:var(--iv2-display);font-weight:600;font-size:11px;
color:var(--iv2-ivory);letter-spacing:.04em;
}
.iv2-bloom-aud.a1{top:4%;left:18%;animation-delay:0s}
.iv2-bloom-aud.a2{top:4%;right:18%;animation-delay:.6s;border-color:rgba(95,211,163,.4)}
.iv2-bloom-aud.a3{bottom:4%;left:24%;animation-delay:1.2s}
.iv2-bloom-aud.a4{bottom:4%;right:24%;animation-delay:1.8s;border-color:rgba(197,33,39,.4)}
/* Central knowledge core — round, glowing */
.iv2-bloom-core{
position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
width:140px;height:140px;border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(95,211,163,.45) 0%, rgba(95,211,163,.06) 70%);
border:1px solid rgba(95,211,163,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
box-shadow:0 30px 80px rgba(95,211,163,.32), inset 0 1px 0 rgba(255,255,255,.14);
}
.iv2-bloom-core svg{width:28px;height:28px;color:var(--iv2-mint);margin-bottom:8px}
.iv2-bloom-core-num{
font-family:var(--iv2-display);font-weight:700;font-size:24px;
color:var(--iv2-ivory);line-height:1;letter-spacing:-.01em;
}
.iv2-bloom-core-sub{font-size:10px;color:rgba(248,247,245,.55);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
/* Subject chips drifting between audience and core */
.iv2-bloom-chip{
position:absolute;z-index:2;
background:rgba(248,247,245,.06);
border:1px solid rgba(248,247,245,.18);
backdrop-filter:blur(10px);
border-radius:999px;padding:6px 14px;
font-size:11px;font-weight:500;color:var(--iv2-ivory);letter-spacing:.03em;
animation:iv2-bob 8s ease-in-out infinite;
}
.iv2-bloom-chip.s1{top:32%;left:6%;animation-delay:.4s;border-color:rgba(95,211,163,.32)}
.iv2-bloom-chip.s2{top:32%;right:6%;animation-delay:1.0s;border-color:rgba(197,33,39,.32)}
.iv2-bloom-chip.s3{bottom:32%;left:8%;animation-delay:1.6s}
.iv2-bloom-chip.s4{bottom:32%;right:8%;animation-delay:2.2s;border-color:rgba(95,211,163,.32)}
@media(max-width:980px){
.iv2-bloom-aud{width:68px;height:68px}
.iv2-bloom-core{width:108px;height:108px}
.iv2-bloom-core-num{font-size:20px}
.iv2-bloom-chip{font-size:10px;padding:4px 10px}
}
/* ──────────────────────────────────────────────────────────────
VARIANT 2 — FLOW (Fintech)
Animated payment-rail network: nodes connected by curves with
pulses travelling along them. Signals: throughput, money in
motion, real-time processing.
────────────────────────────────────────────────────────────── */
.iv2-art-flow{position:absolute;inset:0}
.iv2-art-flow svg{
position:absolute;inset:0;width:100%;height:100%;
}
/* Curve path styling */
.iv2-art-flow .iv2-rail{
fill:none;stroke:rgba(95,211,163,.22);stroke-width:1.5;
stroke-dasharray:3 6;
}
/* Pulse — a moving glyph along a curve via offset-path */
.iv2-art-flow .iv2-pulse{
fill:var(--iv2-mint);
filter:drop-shadow(0 0 6px rgba(95,211,163,.8));
}
/* Animate the SMIL ; fallback applied for browsers without */
/* Network nodes — bigger merchant/issuer/PSP discs */
.iv2-flow-node{
position:absolute;z-index:3;
width:96px;height:96px;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;line-height:1.1;
background:linear-gradient(180deg, rgba(11,25,51,.6), rgba(11,25,51,.3));
backdrop-filter:blur(14px);
border:1px solid rgba(248,247,245,.18);
box-shadow:0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
animation:iv2-bob 7s ease-in-out infinite;
}
.iv2-flow-node-label{
font-family:var(--iv2-display);font-weight:700;font-size:11px;
letter-spacing:.04em;color:var(--iv2-ivory);
}
.iv2-flow-node-sub{
font-size:9px;color:rgba(248,247,245,.55);
text-transform:uppercase;letter-spacing:.08em;margin-top:2px;
}
.iv2-flow-node.n1{top:6%;left:6%;animation-delay:0s;border-color:rgba(95,211,163,.4)}
.iv2-flow-node.n2{top:6%;right:6%;animation-delay:.7s;border-color:rgba(197,33,39,.4)}
.iv2-flow-node.n3{bottom:6%;left:14%;animation-delay:1.4s}
.iv2-flow-node.n4{bottom:6%;right:14%;animation-delay:2.1s}
/* The central "Riyadh region" badge — payments converge here */
.iv2-flow-core{
position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);
width:148px;height:148px;border-radius:50%;
background:radial-gradient(circle at 30% 30%, rgba(95,211,163,.32) 0%, rgba(95,211,163,.04) 70%);
border:1px solid rgba(95,211,163,.5);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
box-shadow:0 30px 80px rgba(95,211,163,.28), inset 0 1px 0 rgba(255,255,255,.12);
}
.iv2-flow-core::before{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:1px dashed rgba(95,211,163,.4);
animation:iv2-spin 28s linear infinite;
}
.iv2-flow-core-label{
font-family:var(--iv2-display);font-weight:700;font-size:13px;color:var(--iv2-mint);
letter-spacing:.06em;
}
.iv2-flow-core-num{
font-family:var(--iv2-display);font-weight:700;font-size:28px;color:var(--iv2-ivory);
line-height:1;margin:6px 0 2px;letter-spacing:-.01em;
}
.iv2-flow-core-sub{font-size:10px;color:rgba(248,247,245,.55);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:980px){
.iv2-hero-art{height:380px}
.iv2-flow-node{width:74px;height:74px}
.iv2-flow-core{width:118px;height:118px}
.iv2-flow-core-num{font-size:22px}
}
/* ════ SECTION SCAFFOLD ════ */
.iv2-section{padding:120px 0;position:relative}
.iv2-eyebrow{
display:inline-block;
font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--iv2-red);margin-bottom:20px;
}
.iv2-title{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(32px,4vw,52px);
line-height:1.05;letter-spacing:-.02em;
margin:0 0 20px;max-width:22ch;
}
.iv2-lede{font-size:19px;line-height:1.55;color:var(--iv2-mute);max-width:60ch;margin:0 0 64px}
/* ════ SIGNATURE container — light gradient lab background ════ */
.iv2-lab{background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%)}
/* Signature: NCA Classification Ladder (Government) */
.iv2-ladder{
display:grid;grid-template-columns:340px 1fr;gap:48px;
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
@media(max-width:900px){.iv2-ladder{grid-template-columns:1fr;padding:20px;gap:24px}}
.iv2-ladder-rail{
background:var(--iv2-navy);border-radius:18px;padding:16px;
position:relative;overflow:hidden;
}
.iv2-ladder-rail::before{
content:'';position:absolute;left:0;width:4px;background:var(--iv2-mint);
border-radius:0 4px 4px 0;
box-shadow:0 0 24px var(--iv2-mint), 0 0 8px var(--iv2-mint);
transition:top .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1);
top:var(--rail-top, 16px);height:var(--rail-h, 96px);
}
.iv2-ladder-rail h5{
font-family:var(--iv2-display);font-weight:600;font-size:14px;color:rgba(248,247,245,.7);
letter-spacing:.02em;margin:8px 16px 16px;
}
.iv2-tier{
display:block;width:100%;text-align:left;
padding:18px 16px;border-radius:12px;
color:rgba(248,247,245,.65);
transition:background .2s, color .2s;position:relative;
}
.iv2-tier:hover{background:rgba(248,247,245,.04);color:var(--iv2-ivory)}
.iv2-tier[aria-selected="true"]{background:rgba(95,211,163,.1);color:var(--iv2-ivory)}
.iv2-tier-code{
font-family:var(--iv2-display);font-weight:700;font-size:13px;letter-spacing:.06em;
color:var(--iv2-mint);margin-bottom:4px;
}
.iv2-tier-name{font-family:var(--iv2-display);font-weight:600;font-size:20px;line-height:1.2;margin-bottom:4px}
.iv2-tier-desc{font-size:12px;line-height:1.45;opacity:.7}
.iv2-ladder-detail{padding:8px 8px 8px 12px}
.iv2-detail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}
.iv2-detail-pill{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;border-radius:999px;
background:rgba(95,211,163,.12);color:#1F8A5B;
font-size:12px;font-weight:600;letter-spacing:.04em;
}
.iv2-detail-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#1F8A5B}
.iv2-detail-count{font-size:13px;color:var(--iv2-mute)}
.iv2-ladder-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:32px;line-height:1.15;
margin:0 0 12px;letter-spacing:-.01em;
}
.iv2-ladder-summary{font-size:16px;line-height:1.6;color:var(--iv2-mute);margin:0 0 28px;max-width:54ch}
.iv2-svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:600px){.iv2-svc-grid{grid-template-columns:1fr}}
.iv2-svc-chip{
background:var(--iv2-fog);border-radius:12px;padding:14px 16px;
display:flex;align-items:center;gap:12px;
transition:background .2s, transform .2s;
animation:iv2-chipIn .4s cubic-bezier(.2,.8,.2,1) backwards;
}
.iv2-svc-chip:hover{background:#D9E1F0;transform:translateY(-2px)}
@keyframes iv2-chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.iv2-svc-code{
font-family:var(--iv2-display);font-weight:700;font-size:11px;
background:var(--iv2-navy);color:var(--iv2-ivory);
padding:4px 8px;border-radius:6px;letter-spacing:.04em;
}
.iv2-svc-name{font-size:14px;font-weight:500;color:var(--iv2-navy);flex:1}
.iv2-svc-note{font-size:11px;color:var(--iv2-mute);font-weight:500}
/* ════ SIGNATURE: SAMA Path (Fintech) ═════════════════════════════
Horizontal 4-stage timeline. Each stage button is a node on the rail;
the active stage drives a detail panel with what SAMA requires + what
the cloud must do. */
.iv2-path{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
.iv2-path-rail{
position:relative;
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
padding:8px 0 40px;
margin-bottom:32px;
}
.iv2-path-rail::before{
/* the connecting line */
content:'';position:absolute;
top:48px;left:6%;right:6%;height:2px;
background:rgba(11,25,51,.12);
border-radius:2px;
}
.iv2-path-rail::after{
/* the filled portion up to active stage; width set via custom property */
content:'';position:absolute;
top:48px;left:6%;height:2px;
width:calc(var(--path-fill, 0%) - 0%);
background:linear-gradient(90deg, var(--iv2-mint), var(--iv2-red));
border-radius:2px;
transition:width .4s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 12px rgba(95,211,163,.5);
}
.iv2-stage{
display:flex;flex-direction:column;align-items:center;text-align:center;
cursor:pointer;padding:0 8px;
position:relative;z-index:2;
transition:transform .2s;
}
.iv2-stage:hover{transform:translateY(-2px)}
.iv2-stage-node{
width:64px;height:64px;border-radius:50%;
background:#fff;border:2px solid rgba(11,25,51,.12);
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:20px;color:var(--iv2-mute);
margin-bottom:16px;
transition:background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.iv2-stage[aria-selected="true"] .iv2-stage-node{
background:var(--iv2-navy);border-color:var(--iv2-mint);color:var(--iv2-mint);
transform:scale(1.08);
box-shadow:0 0 0 6px rgba(95,211,163,.16), 0 12px 32px -10px rgba(11,25,51,.28);
}
.iv2-stage.is-done .iv2-stage-node{
background:var(--iv2-mint);border-color:var(--iv2-mint);color:var(--iv2-navy);
}
.iv2-stage-code{
font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--iv2-mute);margin-bottom:4px;
}
.iv2-stage[aria-selected="true"] .iv2-stage-code{color:var(--iv2-red)}
.iv2-stage-name{
font-family:var(--iv2-display);font-weight:600;font-size:15px;line-height:1.2;
color:var(--iv2-navy);
}
.iv2-stage-desc{font-size:11px;color:var(--iv2-mute);margin-top:4px;max-width:18ch}
@media(max-width:760px){
.iv2-path-rail{grid-template-columns:1fr 1fr;gap:24px 16px;padding-bottom:24px}
.iv2-path-rail::before,.iv2-path-rail::after{display:none}
}
/* Path detail card */
.iv2-path-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:32px;
}
.iv2-path-detail-head{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;
margin-bottom:24px;flex-wrap:wrap;
}
.iv2-path-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:26px;line-height:1.2;
margin:0;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-path-detail .iv2-detail-pill{background:rgba(197,33,39,.08);color:var(--iv2-red)}
.iv2-path-detail .iv2-detail-pill::before{background:var(--iv2-red)}
.iv2-path-detail .iv2-ladder-summary{
font-size:15px;line-height:1.6;color:var(--iv2-mute);margin:0 0 24px;max-width:64ch;
}
.iv2-path-cols{
display:grid;grid-template-columns:1fr 1fr;gap:24px;
margin-top:16px;
}
@media(max-width:720px){.iv2-path-cols{grid-template-columns:1fr;gap:16px}}
.iv2-path-col{
background:#fff;border-radius:14px;padding:20px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-path-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 12px;color:var(--iv2-mute);
}
.iv2-path-col ul{margin:0;padding-left:18px;list-style:none}
.iv2-path-col li{
font-size:14px;line-height:1.5;color:var(--iv2-navy);
position:relative;padding-left:18px;margin-bottom:10px;
}
.iv2-path-col li::before{
content:'';position:absolute;left:0;top:8px;width:8px;height:8px;
border-radius:50%;background:var(--iv2-mint);
}
.iv2-path-col.is-sama li::before{background:var(--iv2-red)}
/* ════ SIGNATURE: Growth Curve (Startups & SMEs) ════════════════
Horizontal curve from Idea ($0) up to Scale ($150k credit
ceiling). Four stage markers along the curve. Below the curve:
row of stage pills. Active stage drives a detail panel
showing what the founder is building, what cloud they need,
what the Spark program gives them, and the platform that
fits. */
.iv2-growth{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
/* Top: the cost/growth curve on dark canvas */
.iv2-growth-curve{
position:relative;
background:
radial-gradient(800px 320px at 80% 0%, rgba(95,211,163,.12), transparent),
linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border-radius:18px;
height:240px;
padding:24px 8% 36px;
overflow:hidden;
margin-bottom:0;
}
.iv2-growth-curve svg{
position:absolute;
left:8%;right:8%;top:24px;bottom:36px;
width:84%;
height:calc(100% - 60px);
}
.iv2-growth-curve-fill{fill:url(#iv2-growth-grad)}
.iv2-growth-curve-line{
fill:none;stroke:var(--iv2-mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 8px rgba(95,211,163,.5));
}
/* Stage dots — one per stage, faint by default */
.iv2-growth-dot{
fill:rgba(248,247,245,.5);
transition:fill .3s, r .3s;
}
.iv2-growth-dot.is-active{
fill:var(--iv2-red);
filter:drop-shadow(0 0 8px rgba(197,33,39,.9));
}
.iv2-growth-halo{
fill:none;stroke:var(--iv2-red);stroke-width:1.2;opacity:0;
transform-origin:var(--halo-cx, 50%) var(--halo-cy, 50%);
transform-box:fill-box;
}
.iv2-growth-halo.is-active{
opacity:.6;
animation:iv2-halo-pulse 2.4s ease-out infinite;
}
/* "Spark ceiling" line — horizontal dashed line at the top of the canvas */
.iv2-growth-ceiling{
stroke:rgba(197,33,39,.45);stroke-width:.6;stroke-dasharray:1.2 1.2;
fill:none;
}
/* HTML labels overlaid on the curve canvas — positioned absolutely so they
never collide with the curve regardless of viewBox scaling. */
.iv2-growth-curve-ylabels{
position:absolute;top:24px;bottom:36px;left:14px;
display:flex;flex-direction:column;justify-content:space-between;
pointer-events:none;
z-index:2;
}
.iv2-growth-curve-ylabel{
font-family:var(--iv2-display);font-weight:600;font-size:10.5px;
letter-spacing:.04em;color:rgba(248,247,245,.55);line-height:1;
}
.iv2-growth-ceiling-tag{
position:absolute;top:14px;right:14px;
font-family:var(--iv2-display);font-weight:700;font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--iv2-red);
background:rgba(197,33,39,.12);border:1px solid rgba(197,33,39,.32);
padding:3px 8px;border-radius:4px;
pointer-events:none;z-index:2;
}
/* Stage pills below the curve — aligned to curve x-extent */
.iv2-growth-stages{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
padding:14px 8% 0;
margin-bottom:24px;
}
.iv2-gstage{
background:none;border:0;
padding:10px 6px;cursor:pointer;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:3px;
border-top:2px solid transparent;
transition:border-color .25s, color .25s;
position:relative;
}
.iv2-gstage::before{
content:'';position:absolute;top:-1px;left:50%;
width:1px;height:14px;
background:linear-gradient(180deg, var(--iv2-mint), transparent);
transform:translateX(-50%) translateY(-100%);
opacity:.3;
transition:opacity .25s, background .25s;
}
.iv2-gstage:hover{border-top-color:rgba(95,211,163,.4)}
.iv2-gstage:hover::before{opacity:.6}
.iv2-gstage[aria-selected="true"]{border-top-color:var(--iv2-red)}
.iv2-gstage[aria-selected="true"]::before{
opacity:1;
background:linear-gradient(180deg, var(--iv2-red), transparent);
}
.iv2-gstage-num{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--iv2-mute);
transition:color .25s;
}
.iv2-gstage[aria-selected="true"] .iv2-gstage-num{color:var(--iv2-red)}
.iv2-gstage-name{
font-family:var(--iv2-display);font-weight:700;font-size:14px;line-height:1.15;
color:var(--iv2-navy);
}
.iv2-gstage-spend{
font-family:var(--iv2-display);font-weight:600;font-size:10.5px;letter-spacing:.04em;
color:var(--iv2-mint);
}
@media(max-width:760px){
.iv2-growth-stages{grid-template-columns:repeat(4,1fr);padding:14px 4px 0;gap:4px}
.iv2-gstage-name{font-size:12px}
.iv2-gstage-num{font-size:9px}
.iv2-gstage-spend{font-size:9.5px}
}
/* Detail panel for active stage */
.iv2-growth-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-growth-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--iv2-red);margin-bottom:8px;
}
.iv2-growth-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-growth-detail-summary{
font-size:15px;line-height:1.6;color:var(--iv2-mute);margin:0 0 20px;
}
.iv2-growth-cols{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
@media(max-width:720px){.iv2-growth-cols{grid-template-columns:1fr;gap:10px}}
.iv2-growth-col{
background:#fff;border-radius:14px;padding:16px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-growth-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 10px;color:var(--iv2-mute);
}
.iv2-growth-col.is-founder h5{color:var(--iv2-red)}
.iv2-growth-col p{
font-size:13px;line-height:1.5;color:var(--iv2-navy);margin:0;
}
/* ════ SIGNATURE: Stream Pipeline (Media & Entertainment) ══════
Horizontal flow pipeline: content flows through 5 stages
(Ingest → Transcode → Package → Deliver → Engage). Each stage
is a block in the pipeline with a content-packet icon flowing
between them. Active stage highlights and the detail panel
below shows what's happening, the latency budget, and the
Huawei capability that handles it. */
.iv2-pipeline{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
/* Top row: the 5 pipeline stages */
.iv2-pipeline-flow{
position:relative;
display:grid;grid-template-columns:repeat(5,1fr);gap:0;
padding:24px 16px 0;
margin-bottom:32px;
}
@media(max-width:780px){.iv2-pipeline-flow{grid-template-columns:repeat(2,1fr);gap:12px 8px}}
.iv2-stage{
position:relative;
background:var(--iv2-fog);border:1px solid transparent;border-radius:14px;
padding:18px 14px;cursor:pointer;text-align:left;
display:flex;flex-direction:column;gap:8px;
transition:background .2s, border-color .25s, transform .2s, box-shadow .25s;
min-height:100px;
}
.iv2-stage:hover{background:#D9E1F0;transform:translateY(-2px)}
.iv2-stage[aria-selected="true"]{
background:var(--iv2-navy);border-color:var(--iv2-mint);
box-shadow:0 12px 28px -10px rgba(11,25,51,.4);
transform:translateY(-2px);
}
.iv2-stage[aria-selected="true"] .iv2-stage-num{background:var(--iv2-mint);color:var(--iv2-navy)}
.iv2-stage[aria-selected="true"] .iv2-stage-name{color:var(--iv2-ivory)}
.iv2-stage[aria-selected="true"] .iv2-stage-latency{color:rgba(95,211,163,.85)}
.iv2-stage-num{
width:26px;height:26px;border-radius:50%;
background:#fff;color:var(--iv2-mute);
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:11px;
transition:background .25s, color .25s;
}
.iv2-stage-name{
font-family:var(--iv2-display);font-weight:700;font-size:14px;line-height:1.15;
color:var(--iv2-navy);
}
.iv2-stage-latency{
font-family:var(--iv2-display);font-weight:600;font-size:10px;letter-spacing:.08em;
text-transform:uppercase;color:var(--iv2-mute);margin-top:auto;
}
/* Connector arrows between stages — small chevron between cards */
.iv2-stage::after{
content:'';position:absolute;
top:50%;right:-12px;transform:translateY(-50%);
width:0;height:0;
border-left:8px solid rgba(11,25,51,.18);
border-top:6px solid transparent;
border-bottom:6px solid transparent;
z-index:2;
}
.iv2-stage:last-child::after{display:none}
@media(max-width:780px){.iv2-stage::after{display:none}}
/* Flow-line under the pipeline showing the active stage's position */
.iv2-pipeline-rail{
position:relative;
margin:8px 16px 28px;height:2px;
background:rgba(11,25,51,.08);
border-radius:2px;
overflow:hidden;
}
.iv2-pipeline-rail::after{
content:'';position:absolute;left:0;top:0;height:100%;
width:var(--pipeline-fill, 10%);
background:linear-gradient(90deg, var(--iv2-mint), var(--iv2-red));
border-radius:2px;
box-shadow:0 0 10px rgba(95,211,163,.4);
transition:width .35s cubic-bezier(.2,.8,.2,1);
}
/* Detail panel below the pipeline */
.iv2-pipeline-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-pipeline-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--iv2-red);margin-bottom:8px;
}
.iv2-pipeline-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-pipeline-detail-summary{
font-size:15px;line-height:1.6;color:var(--iv2-mute);margin:0 0 20px;
}
.iv2-pipeline-cols{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
@media(max-width:720px){.iv2-pipeline-cols{grid-template-columns:1fr;gap:10px}}
.iv2-pipeline-col{
background:#fff;border-radius:14px;padding:16px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-pipeline-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 10px;color:var(--iv2-mute);
}
.iv2-pipeline-col.is-content h5{color:var(--iv2-red)}
.iv2-pipeline-col p{
font-size:13px;line-height:1.5;color:var(--iv2-navy);margin:0;
}
/* ════ SIGNATURE: Portfolio Stack (Real Estate) ════════════════
Vertical stack of asset-class layers (Commercial Complex /
Residential / Industrial Park / Smart Venue / Hotel) sitting
on top of a unified Campus Digital Platform foundation. Active
layer expands to show: tenant experience / operator KPIs / what
the platform underneath delivers. Layers visually stack like
floors of a building cross-section. */
.iv2-portfolio{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
display:grid;grid-template-columns:340px 1fr;gap:36px;
}
@media(max-width:900px){.iv2-portfolio{grid-template-columns:1fr;gap:24px;padding:24px}}
/* LEFT: the stack of asset layers + foundation base */
.iv2-stack-rail{
position:relative;
display:flex;flex-direction:column;gap:8px;
}
.iv2-asset{
background:#fff;border:1px solid rgba(11,25,51,.1);
border-radius:12px;padding:14px 18px;
display:flex;align-items:center;gap:14px;
cursor:pointer;text-align:left;width:100%;
transition:transform .2s, border-color .25s, background .25s, box-shadow .25s;
position:relative;
}
.iv2-asset:hover{
transform:translateX(3px);
border-color:rgba(95,211,163,.4);
background:linear-gradient(90deg, rgba(95,211,163,.04), transparent);
}
.iv2-asset[aria-selected="true"]{
background:var(--iv2-navy);border-color:var(--iv2-mint);color:var(--iv2-ivory);
transform:translateX(6px);
box-shadow:-6px 8px 22px -10px rgba(11,25,51,.4);
}
.iv2-asset[aria-selected="true"] .iv2-asset-icon{background:rgba(95,211,163,.18);color:var(--iv2-mint)}
.iv2-asset[aria-selected="true"] .iv2-asset-name{color:var(--iv2-ivory)}
.iv2-asset[aria-selected="true"] .iv2-asset-desc{color:rgba(248,247,245,.65)}
/* Floor-number — left-side strip */
.iv2-asset-floor{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--iv2-mute);
min-width:30px;
}
.iv2-asset[aria-selected="true"] .iv2-asset-floor{color:var(--iv2-mint)}
.iv2-asset-icon{
width:34px;height:34px;border-radius:8px;
background:linear-gradient(135deg, rgba(95,211,163,.16), rgba(197,33,39,.1));
display:flex;align-items:center;justify-content:center;
color:var(--iv2-red);flex-shrink:0;
transition:background .25s, color .25s;
}
.iv2-asset-icon svg{width:18px;height:18px}
.iv2-asset-body{flex:1;min-width:0}
.iv2-asset-name{
font-family:var(--iv2-display);font-weight:700;font-size:15px;line-height:1.15;
color:var(--iv2-navy);
}
.iv2-asset-desc{
font-size:11px;line-height:1.4;color:var(--iv2-mute);margin-top:2px;
}
/* Foundation block at the bottom — visually distinct from the asset cards above */
.iv2-stack-foundation{
margin-top:12px;
background:linear-gradient(135deg, var(--iv2-navy), var(--iv2-navy-2));
border-radius:12px;padding:16px 18px;
display:flex;align-items:center;gap:14px;
color:var(--iv2-ivory);
border:1px solid rgba(95,211,163,.4);
position:relative;
}
.iv2-stack-foundation::before{
/* Foundation hatching pattern */
content:'';position:absolute;inset:0;border-radius:12px;
background-image:repeating-linear-gradient(45deg, transparent 0 6px, rgba(95,211,163,.06) 6px 7px);
pointer-events:none;
}
.iv2-stack-foundation-icon{
width:34px;height:34px;border-radius:8px;
background:rgba(95,211,163,.16);color:var(--iv2-mint);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.iv2-stack-foundation-icon svg{width:18px;height:18px}
.iv2-stack-foundation-name{font-family:var(--iv2-display);font-weight:700;font-size:14px;line-height:1.15}
.iv2-stack-foundation-desc{font-size:10.5px;color:rgba(248,247,245,.6);margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
/* RIGHT: detail panel for the active asset */
.iv2-portfolio-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-portfolio-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--iv2-red);margin-bottom:8px;
}
.iv2-portfolio-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-portfolio-detail-summary{
font-size:15px;line-height:1.6;color:var(--iv2-mute);margin:0 0 20px;
}
.iv2-portfolio-cols{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
@media(max-width:720px){.iv2-portfolio-cols{grid-template-columns:1fr;gap:10px}}
.iv2-portfolio-col{
background:#fff;border-radius:14px;padding:16px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-portfolio-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 10px;color:var(--iv2-mute);
}
.iv2-portfolio-col.is-tenant h5{color:var(--iv2-red)}
.iv2-portfolio-col p{
font-size:13px;line-height:1.5;color:var(--iv2-navy);margin:0;
}
/* ════ SIGNATURE: Care Path (Healthcare) ═══════════════════════
Vertical patient-journey timeline. Five touchpoints stacked
top-to-bottom — Arrival → Diagnosis → Treatment → Discharge →
Follow-up. A vertical line connects them. Clicking a touchpoint
highlights it and brings up a detail panel on the right with
what the patient experiences, what the clinician needs, and
the platform capability that delivers it. */
.iv2-careplan{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
display:grid;grid-template-columns:280px 1fr;gap:36px;
}
@media(max-width:900px){.iv2-careplan{grid-template-columns:1fr;gap:24px;padding:24px}}
/* LEFT: vertical journey rail */
.iv2-careplan-rail{
position:relative;
padding-left:48px;
}
.iv2-careplan-rail::before{
/* connecting vertical line */
content:'';position:absolute;
left:23px;top:24px;bottom:24px;width:2px;
background:linear-gradient(180deg, rgba(11,25,51,.12) 0%, rgba(11,25,51,.12) 100%);
border-radius:2px;
}
.iv2-careplan-rail::after{
/* mint progress segment that grows as active moves down */
content:'';position:absolute;
left:22px;top:24px;width:4px;
height:var(--care-progress, 0%);
background:linear-gradient(180deg, var(--iv2-mint), var(--iv2-red));
border-radius:4px;
box-shadow:0 0 12px rgba(95,211,163,.5);
transition:height .4s cubic-bezier(.2,.8,.2,1);
}
.iv2-step{
display:flex;align-items:flex-start;gap:18px;
padding:10px 0;cursor:pointer;
position:relative;
transition:transform .2s;
background:none;border:0;width:100%;text-align:left;
}
.iv2-step:hover{transform:translateX(3px)}
.iv2-step-num{
position:absolute;left:-32px;top:14px;
width:32px;height:32px;border-radius:50%;
background:#fff;border:2px solid rgba(11,25,51,.16);
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:13px;color:var(--iv2-mute);
transition:background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
z-index:2;
}
.iv2-step:hover .iv2-step-num{border-color:rgba(95,211,163,.5);color:var(--iv2-navy)}
.iv2-step[aria-selected="true"] .iv2-step-num{
background:var(--iv2-mint);border-color:var(--iv2-mint);color:var(--iv2-navy);
transform:scale(1.12);
box-shadow:0 0 0 6px rgba(95,211,163,.18), 0 10px 24px -8px rgba(11,25,51,.25);
}
.iv2-step.is-done .iv2-step-num{
background:var(--iv2-mint);border-color:var(--iv2-mint);color:var(--iv2-navy);
}
.iv2-step-body{flex:1;min-width:0;padding:8px 0}
.iv2-step-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--iv2-mute);margin-bottom:2px;
transition:color .25s;
}
.iv2-step[aria-selected="true"] .iv2-step-eyebrow{color:var(--iv2-red)}
.iv2-step-name{
font-family:var(--iv2-display);font-weight:700;font-size:16px;line-height:1.2;
color:var(--iv2-navy);
}
/* RIGHT: detail panel for active step */
.iv2-careplan-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-careplan-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--iv2-red);margin-bottom:8px;
}
.iv2-careplan-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-careplan-detail-summary{
font-size:15px;line-height:1.6;color:var(--iv2-mute);margin:0 0 20px;
}
/* Three-column row for patient/clinician/platform */
.iv2-careplan-cols{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;
}
@media(max-width:720px){.iv2-careplan-cols{grid-template-columns:1fr;gap:10px}}
.iv2-careplan-col{
background:#fff;border-radius:14px;padding:16px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-careplan-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 10px;color:var(--iv2-mute);
}
.iv2-careplan-col.is-patient h5{color:var(--iv2-red)}
.iv2-careplan-col p{
font-size:13px;line-height:1.5;color:var(--iv2-navy);margin:0;
}
/* ════ SIGNATURE: Surge Map (Retail) ═══════════════════════════
Horizontal traffic-curve timeline showing 5 phases of a peak
event. The curve renders as a single smooth SVG with markers
embedded at each phase position. Phase labels live in a separate
HTML row beneath the curve, perfectly aligned via CSS grid —
never overlapping. The active phase shows a glowing dot on the
curve and a soft pulse halo around it. */
.iv2-surge{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
/* Top: the live SVG traffic curve. NO text inside the SVG — labels
live in a separate aligned row below. */
.iv2-surge-curve{
position:relative;
background:
radial-gradient(1000px 400px at 40% 100%, rgba(95,211,163,.08), transparent),
linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
border-radius:18px;
height:220px;
margin-bottom:0;
overflow:hidden;
padding:20px 8% 36px;
}
.iv2-surge-curve svg{
position:absolute;
left:8%;right:8%;top:20px;bottom:36px;
width:84%;
height:calc(100% - 56px);
}
/* The filled area under the curve — gradient fades down */
.iv2-surge-curve-fill{fill:url(#iv2-surge-grad)}
/* The curve line itself — bright mint, glowing */
.iv2-surge-curve-line{
fill:none;stroke:var(--iv2-mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 8px rgba(95,211,163,.5));
}
/* Each phase has a small dot on the curve (inactive: faint mint) */
.iv2-surge-dot{
fill:rgba(248,247,245,.5);
transition:fill .3s, r .3s;
}
.iv2-surge-dot.is-active{
fill:var(--iv2-red);
filter:drop-shadow(0 0 8px rgba(197,33,39,.9));
}
/* Halo around the active dot — pulses outward */
.iv2-surge-halo{
fill:none;stroke:var(--iv2-red);stroke-width:1.2;opacity:0;
transform-origin:var(--halo-cx, 50%) var(--halo-cy, 50%);
transform-box:fill-box;
}
.iv2-surge-halo.is-active{
opacity:.6;
animation:iv2-halo-pulse 2.4s ease-out infinite;
}
@keyframes iv2-halo-pulse{
0% {transform:scale(.3);opacity:.8}
100% {transform:scale(4);opacity:0}
}
/* Vertical drop-line under the active dot — visual anchor to the label */
.iv2-surge-droppath{
stroke:rgba(197,33,39,.5);stroke-width:1;stroke-dasharray:2 3;
transition:opacity .3s;
}
/* Phase row sits flush UNDER the curve, perfectly aligned to the curve x-extent.
Same 84% width as the SVG, 8% left/right padding to match. */
.iv2-surge-phases{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:0;
padding:14px 8% 0;
margin-bottom:24px;
}
.iv2-phase{
background:none;border:0;
padding:10px 6px;cursor:pointer;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:4px;
border-top:2px solid transparent;
transition:border-color .25s, color .25s;
position:relative;
}
.iv2-phase::before{
/* Small connector tab from the curve dot down to the pill */
content:'';position:absolute;top:-1px;left:50%;
width:1px;height:14px;
background:linear-gradient(180deg, var(--iv2-mint), transparent);
transform:translateX(-50%) translateY(-100%);
opacity:.3;
transition:opacity .25s, background .25s;
}
.iv2-phase:hover{border-top-color:rgba(95,211,163,.4)}
.iv2-phase:hover::before{opacity:.6}
.iv2-phase[aria-selected="true"]{border-top-color:var(--iv2-red)}
.iv2-phase[aria-selected="true"]::before{
opacity:1;
background:linear-gradient(180deg, var(--iv2-red), transparent);
}
.iv2-phase-time{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--iv2-mute);
transition:color .25s;
}
.iv2-phase[aria-selected="true"] .iv2-phase-time{color:var(--iv2-red)}
.iv2-phase-name{
font-family:var(--iv2-display);font-weight:600;font-size:13px;line-height:1.2;
color:var(--iv2-navy);
max-width:14ch;
}
.iv2-phase[aria-selected="true"] .iv2-phase-name{color:var(--iv2-navy)}
@media(max-width:760px){
.iv2-surge-phases{grid-template-columns:repeat(5,1fr);padding:14px 4px 0;gap:4px}
.iv2-phase-name{font-size:11px}
.iv2-phase-time{font-size:9px}
}
/* Detail panel for active phase */
.iv2-surge-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-surge-detail-head{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;
margin-bottom:16px;flex-wrap:wrap;
}
.iv2-surge-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;color:var(--iv2-red);
letter-spacing:.14em;text-transform:uppercase;
}
.iv2-surge-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;flex-basis:100%;
}
.iv2-surge-detail-summary{
font-size:15px;line-height:1.55;color:var(--iv2-mute);margin:0 0 20px;
}
.iv2-surge-cols{
display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
@media(max-width:680px){.iv2-surge-cols{grid-template-columns:1fr}}
.iv2-surge-col{
background:#fff;border-radius:14px;padding:18px;
border:1px solid rgba(11,25,51,.06);
}
.iv2-surge-col h5{
font-family:var(--iv2-display);font-weight:700;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;margin:0 0 10px;color:var(--iv2-mute);
}
.iv2-surge-col.is-shop h5{color:var(--iv2-red)}
.iv2-surge-col ul{margin:0;padding:0;list-style:none}
.iv2-surge-col li{
font-size:13px;line-height:1.5;color:var(--iv2-navy);
padding-left:18px;position:relative;margin-bottom:8px;
}
.iv2-surge-col li:last-child{margin-bottom:0}
.iv2-surge-col li::before{
content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
border-radius:50%;background:var(--iv2-mint);
}
.iv2-surge-col.is-shop li::before{background:var(--iv2-red)}
/* ════ SIGNATURE: Academic Year (Education) ═══════════════════
Four moments around a circle — Term Launch / Mid-term Exams /
Final Exams / Results. Each moment shows the load curve, the
peak metric, and what the platform decisions matter at that
moment. Click a moment to bring it forward. */
.iv2-year{
background:#fff;border-radius:24px;padding:32px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 24px 60px -20px rgba(11,25,51,.18), 0 8px 24px -8px rgba(11,25,51,.08);
}
.iv2-year-grid{
display:grid;grid-template-columns:1fr 1fr;gap:32px;
align-items:start;
}
@media(max-width:880px){.iv2-year-grid{grid-template-columns:1fr;gap:24px}}
/* LEFT: the circle/wheel of moments */
.iv2-year-wheel{
position:relative;
width:100%;aspect-ratio:1/1;max-width:380px;margin:0 auto;
}
/* Centre orb showing the active moment's label */
.iv2-year-orb{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
width:42%;height:42%;border-radius:50%;
background:linear-gradient(180deg, var(--iv2-navy) 0%, var(--iv2-navy-2) 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
color:var(--iv2-ivory);padding:8px;
box-shadow:0 18px 50px rgba(11,25,51,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
.iv2-year-orb-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.16em;color:var(--iv2-mint);
text-transform:uppercase;margin-bottom:6px;
}
.iv2-year-orb-num{
font-family:var(--iv2-display);font-weight:700;font-size:clamp(20px,4vw,30px);line-height:1;letter-spacing:-.01em;
}
.iv2-year-orb-sub{font-size:10px;color:rgba(248,247,245,.6);letter-spacing:.04em;margin-top:4px}
/* Ring around the orb showing the calendar arc */
.iv2-year-ring{
position:absolute;inset:0;border-radius:50%;
border:2px dashed rgba(11,25,51,.08);
}
/* The four moment buttons positioned at 12/3/6/9 */
.iv2-moment{
position:absolute;width:96px;height:96px;border-radius:50%;
background:#fff;border:2px solid rgba(11,25,51,.1);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
cursor:pointer;padding:8px;
transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s, background .25s;
}
.iv2-moment:hover{transform:scale(1.04);border-color:rgba(95,211,163,.5)}
.iv2-moment[aria-selected="true"]{
background:var(--iv2-mint);border-color:var(--iv2-mint);
transform:scale(1.12);
box-shadow:0 18px 40px -10px rgba(95,211,163,.5);
}
.iv2-moment[aria-selected="true"] .iv2-moment-code{color:var(--iv2-navy)}
.iv2-moment[aria-selected="true"] .iv2-moment-name{color:var(--iv2-navy)}
.iv2-moment-code{
font-family:var(--iv2-display);font-weight:700;font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--iv2-mute);margin-bottom:2px;
}
.iv2-moment-name{font-family:var(--iv2-display);font-weight:700;font-size:12px;line-height:1.15;color:var(--iv2-navy)}
/* Position the four moments at 12/3/6/9 around the wheel */
.iv2-moment.m1{top:0;left:50%;transform:translate(-50%,-30%)}
.iv2-moment.m1[aria-selected="true"]{transform:translate(-50%,-30%) scale(1.12)}
.iv2-moment.m1:hover{transform:translate(-50%,-30%) scale(1.04)}
.iv2-moment.m2{top:50%;right:0;transform:translate(30%,-50%)}
.iv2-moment.m2[aria-selected="true"]{transform:translate(30%,-50%) scale(1.12)}
.iv2-moment.m2:hover{transform:translate(30%,-50%) scale(1.04)}
.iv2-moment.m3{bottom:0;left:50%;transform:translate(-50%,30%)}
.iv2-moment.m3[aria-selected="true"]{transform:translate(-50%,30%) scale(1.12)}
.iv2-moment.m3:hover{transform:translate(-50%,30%) scale(1.04)}
.iv2-moment.m4{top:50%;left:0;transform:translate(-30%,-50%)}
.iv2-moment.m4[aria-selected="true"]{transform:translate(-30%,-50%) scale(1.12)}
.iv2-moment.m4:hover{transform:translate(-30%,-50%) scale(1.04)}
/* RIGHT: detail panel for the active moment */
.iv2-year-detail{
background:linear-gradient(180deg, var(--iv2-ivory) 0%, var(--iv2-fog) 100%);
border-radius:18px;padding:28px;
}
.iv2-year-detail-eyebrow{
font-family:var(--iv2-display);font-weight:700;font-size:11px;color:var(--iv2-red);
letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;
}
.iv2-year-detail h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 12px;color:var(--iv2-navy);letter-spacing:-.01em;
}
.iv2-year-detail-summary{
font-size:15px;line-height:1.55;color:var(--iv2-mute);margin:0 0 20px;
}
.iv2-year-curve{
height:64px;margin:8px 0 20px;
background:rgba(11,25,51,.04);border-radius:12px;
position:relative;overflow:hidden;padding:8px;
}
.iv2-year-curve svg{width:100%;height:100%}
.iv2-year-curve-path{
fill:none;stroke:var(--iv2-mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px rgba(95,211,163,.5));
stroke-dasharray:300;stroke-dashoffset:300;
animation:iv2-draw 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes iv2-draw{to{stroke-dashoffset:0}}
.iv2-year-list{margin:0;padding-left:0;list-style:none}
.iv2-year-list li{
font-size:14px;line-height:1.5;color:var(--iv2-navy);
padding:8px 0 8px 22px;
position:relative;border-bottom:1px solid rgba(11,25,51,.06);
}
.iv2-year-list li:last-child{border-bottom:none}
.iv2-year-list li::before{
content:'';position:absolute;left:0;top:14px;width:10px;height:10px;
border-radius:50%;background:var(--iv2-mint);
}
/* Signature placeholder (industries without a custom widget yet) */
.iv2-sig-placeholder{
background:#fff;border-radius:24px;padding:80px 48px;text-align:center;
border:2px dashed rgba(11,25,51,.12);
box-shadow:0 8px 24px -16px rgba(11,25,51,.12);
}
.iv2-sig-placeholder svg{width:56px;height:56px;color:var(--iv2-mint);margin:0 auto 20px}
.iv2-sig-placeholder h3{
font-family:var(--iv2-display);font-weight:700;font-size:24px;line-height:1.2;
margin:0 0 8px;color:var(--iv2-navy);
}
.iv2-sig-placeholder p{font-size:15px;color:var(--iv2-mute);margin:0 auto;max-width:48ch}
/* ════ OUTCOMES strip — proof block for what's already shipped ════ */
.iv2-outcomes{
background:#fff;
border-top:1px solid rgba(11,25,51,.06);
border-bottom:1px solid rgba(11,25,51,.06);
padding:80px 0;
}
.iv2-outcomes-head{
display:flex;align-items:baseline;justify-content:space-between;gap:32px;
margin-bottom:48px;flex-wrap:wrap;
}
.iv2-outcomes-head h2{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.015em;
margin:0;max-width:24ch;color:var(--iv2-navy);
}
.iv2-outcomes-head .iv2-outcomes-source{
font-size:12px;color:var(--iv2-mute);font-style:italic;text-align:right;max-width:32ch;
}
.iv2-outcomes-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:rgba(11,25,51,.08);
border-radius:16px;overflow:hidden;
}
@media(max-width:980px){.iv2-outcomes-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.iv2-outcomes-grid{grid-template-columns:1fr}}
.iv2-outcome{
background:#fff;padding:28px 24px;
display:flex;flex-direction:column;gap:8px;
transition:background .2s;
}
.iv2-outcome:hover{background:linear-gradient(180deg, var(--iv2-ivory), #fff)}
.iv2-outcome-stat{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(28px,3vw,38px);line-height:1;letter-spacing:-.02em;
color:var(--iv2-navy);
}
.iv2-outcome-stat em{color:var(--iv2-red);font-style:normal}
.iv2-outcome-label{
font-size:13px;font-weight:600;color:var(--iv2-navy);
text-transform:uppercase;letter-spacing:.04em;
}
.iv2-outcome-desc{font-size:13px;line-height:1.5;color:var(--iv2-mute)}
/* ════ SOLUTIONS section ═══════════════════════════════════════
Curated product grid. Each card: icon, name, 1-sentence purpose,
2-3 capability bullets, "Learn more" link with arrow that slides
on hover. 3 across on desktop, 2 tablet, 1 mobile. */
.iv2-solutions-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:980px){.iv2-solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.iv2-solutions-grid{grid-template-columns:1fr}}
.iv2-solution{
background:#fff;border-radius:18px;padding:28px 24px;
display:flex;flex-direction:column;gap:14px;
position:relative;overflow:hidden;
border:1px solid rgba(11,25,51,.06);
transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 12px 30px -18px rgba(11,25,51,.14);
}
.iv2-solution:hover{
transform:translateY(-4px);
border-color:rgba(95,211,163,.4);
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 22px 44px -16px rgba(11,25,51,.22);
}
.iv2-solution::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg, var(--iv2-mint), var(--iv2-red));
transform:scaleX(0);transform-origin:left;
transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.iv2-solution:hover::after{transform:scaleX(1)}
.iv2-solution-icon{
width:44px;height:44px;border-radius:12px;
background:linear-gradient(135deg, rgba(95,211,163,.16), rgba(197,33,39,.1));
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:15px;color:var(--iv2-red);
letter-spacing:.02em;
}
.iv2-solution-icon svg{width:22px;height:22px;color:var(--iv2-red)}
.iv2-solution-name{
font-family:var(--iv2-display);font-weight:700;font-size:18px;line-height:1.2;
color:var(--iv2-navy);margin:0;
}
.iv2-solution-purpose{
font-size:14px;line-height:1.5;color:var(--iv2-mute);margin:0;
}
.iv2-solution-caps{
margin:0;padding-left:0;list-style:none;
display:flex;flex-direction:column;gap:6px;
border-top:1px solid rgba(11,25,51,.06);padding-top:14px;
}
.iv2-solution-caps li{
font-size:13px;line-height:1.45;color:var(--iv2-navy);
padding-left:18px;position:relative;
}
.iv2-solution-caps li::before{
content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
border-radius:50%;background:var(--iv2-mint);
}
.iv2-solution-more{
margin-top:auto;font-family:var(--iv2-sans);font-weight:600;font-size:13px;
color:var(--iv2-red);text-decoration:none;
display:inline-flex;align-items:center;gap:8px;
align-self:flex-start;
padding-top:6px;
}
.iv2-solution-more::after{
content:'→';transition:transform .2s;
}
.iv2-solution:hover .iv2-solution-more::after{transform:translateX(4px)}
/* ════ CASE STUDIES section ════════════════════════════════════
Standout-metric cards. Each: sector context line, the metric in
big display type, paragraph context, "Read the case" link. */
.iv2-cases-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
@media(max-width:760px){.iv2-cases-grid{grid-template-columns:1fr}}
.iv2-case{
background:#fff;border-radius:20px;padding:32px;
display:flex;flex-direction:column;gap:16px;
border:1px solid rgba(11,25,51,.06);
transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 16px 36px -18px rgba(11,25,51,.16);
position:relative;overflow:hidden;
}
.iv2-case:hover{
transform:translateY(-4px);
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 28px 60px -20px rgba(11,25,51,.26);
}
.iv2-case-head{
display:flex;align-items:center;gap:14px;
padding-bottom:14px;border-bottom:1px solid rgba(11,25,51,.06);
}
.iv2-case-mark{
width:42px;height:42px;border-radius:10px;
background:linear-gradient(135deg, var(--iv2-navy), var(--iv2-navy-2));
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:14px;color:var(--iv2-mint);
letter-spacing:.04em;
flex-shrink:0;
}
.iv2-case-id .iv2-case-name{
font-family:var(--iv2-display);font-weight:700;font-size:17px;line-height:1.15;
color:var(--iv2-navy);margin:0;
}
.iv2-case-id .iv2-case-sector{
font-size:11px;color:var(--iv2-mute);text-transform:uppercase;letter-spacing:.1em;
margin-top:2px;
}
.iv2-case-metric{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(36px,4vw,52px);line-height:1;letter-spacing:-.02em;
color:var(--iv2-navy);
}
.iv2-case-metric em{
font-style:normal;color:var(--iv2-red);
/* Make the suffix part smaller and tinted, matching hero-counter style */
font-size:.65em;margin-left:2px;
}
.iv2-case-metric-label{
font-family:var(--iv2-display);font-weight:600;font-size:12px;
text-transform:uppercase;letter-spacing:.12em;color:var(--iv2-mute);
margin-top:6px;
}
.iv2-case-body{
font-size:14px;line-height:1.6;color:var(--iv2-mute);margin:0;
flex:1;
}
.iv2-case-source{
font-size:11px;color:var(--iv2-mute);font-style:italic;
padding-top:10px;border-top:1px solid rgba(11,25,51,.06);
display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.iv2-case-source a{
color:var(--iv2-red);font-style:normal;font-weight:600;text-decoration:none;
font-size:12px;display:inline-flex;align-items:center;gap:6px;
}
.iv2-case-source a::after{content:'→';transition:transform .2s}
.iv2-case-source a:hover::after{transform:translateX(3px)}
/* ════ GAIN cards ════ */
.iv2-gain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.iv2-gain-grid{grid-template-columns:1fr;gap:16px}}
.iv2-gain-card{
background:#fff;border-radius:20px;padding:32px;
position:relative;overflow:hidden;
transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
box-shadow:0 1px 0 rgba(11,25,51,.05), 0 12px 32px -16px rgba(11,25,51,.12);
}
.iv2-gain-card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(11,25,51,.05), 0 24px 48px -16px rgba(11,25,51,.2)}
.iv2-gain-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg, var(--iv2-red), var(--iv2-mint));
transform:scaleX(0);transform-origin:left;
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.iv2-gain-card:hover::before{transform:scaleX(1)}
.iv2-gain-icon{
width:48px;height:48px;border-radius:14px;
background:linear-gradient(135deg, rgba(197,33,39,.12), rgba(95,211,163,.12));
display:flex;align-items:center;justify-content:center;
margin-bottom:20px;
}
.iv2-gain-icon svg{width:24px;height:24px;color:var(--iv2-red)}
.iv2-gain-card h4{
font-family:var(--iv2-display);font-weight:700;font-size:22px;line-height:1.2;
margin:0 0 10px;color:var(--iv2-navy);
}
.iv2-gain-card p{font-size:15px;line-height:1.55;color:var(--iv2-mute);margin:0}
/* ════ COMPLIANCE ════ */
.iv2-compl{background:var(--iv2-navy);color:var(--iv2-ivory)}
.iv2-compl .iv2-eyebrow{color:var(--iv2-mint)}
.iv2-compl .iv2-title{color:var(--iv2-ivory)}
.iv2-compl .iv2-lede{color:rgba(248,247,245,.6)}
.iv2-compl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:980px){.iv2-compl-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.iv2-compl-grid{grid-template-columns:repeat(2,1fr)}}
.iv2-compl-card{
background:rgba(248,247,245,.04);
border:1px solid rgba(248,247,245,.08);
border-radius:14px;padding:24px 16px;text-align:center;
transition:background .2s, border-color .2s, transform .2s;
}
.iv2-compl-card:hover{background:rgba(248,247,245,.08);border-color:rgba(95,211,163,.3);transform:translateY(-2px)}
.iv2-compl-mark{
width:48px;height:48px;border-radius:10px;
background:rgba(248,247,245,.08);margin:0 auto 12px;
display:flex;align-items:center;justify-content:center;
font-family:var(--iv2-display);font-weight:700;font-size:13px;color:var(--iv2-mint);
letter-spacing:.04em;
}
.iv2-compl-name{font-size:13px;font-weight:600;margin-bottom:4px}
.iv2-compl-issuer{font-size:11px;color:rgba(248,247,245,.5)}
/* ════ FAQ ════ */
.iv2-faq{max-width:880px;margin:0 auto}
.iv2-faq-row{
background:#fff;border-radius:16px;margin-bottom:12px;
box-shadow:0 1px 0 rgba(11,25,51,.04), 0 8px 24px -16px rgba(11,25,51,.16);
overflow:hidden;
}
.iv2-faq-q{
display:flex;align-items:center;gap:20px;
padding:24px 28px;cursor:pointer;
font-family:var(--iv2-display);font-weight:600;font-size:18px;line-height:1.35;
color:var(--iv2-navy);
}
.iv2-faq-q-num{
font-family:var(--iv2-display);font-weight:700;font-size:13px;color:var(--iv2-mint);
letter-spacing:.06em;min-width:40px;
}
.iv2-faq-q-text{flex:1}
.iv2-faq-q-icon{
width:32px;height:32px;border-radius:50%;
background:var(--iv2-fog);color:var(--iv2-navy);
display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:600;
transition:transform .25s, background .25s, color .25s;
}
.iv2-faq-row.is-open .iv2-faq-q-icon{transform:rotate(45deg);background:var(--iv2-red);color:var(--iv2-ivory)}
.iv2-faq-a{
max-height:0;overflow:hidden;
transition:max-height .35s ease;
padding:0 28px;
font-size:15px;line-height:1.65;color:var(--iv2-mute);
}
.iv2-faq-row.is-open .iv2-faq-a{max-height:240px;padding:0 28px 28px 88px}
/* ════ CTA band ════ */
.iv2-cta-band{
margin:120px auto 80px;max-width:1180px;
background:
radial-gradient(800px 400px at 80% 50%, rgba(95,211,163,.16), transparent),
linear-gradient(135deg, var(--iv2-red), #8E1518);
border-radius:32px;padding:80px 64px;
color:var(--iv2-ivory);text-align:center;
position:relative;overflow:hidden;
}
.iv2-cta-band::before{
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;pointer-events:none;
}
.iv2-cta-band > *{position:relative;z-index:2}
.iv2-cta-band h2{
font-family:var(--iv2-display);font-weight:700;
font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.02em;
margin:0 0 20px;max-width:24ch;margin-inline:auto;
}
.iv2-cta-band p{font-size:18px;line-height:1.55;color:rgba(248,247,245,.88);max-width:54ch;margin:0 auto 36px}
.iv2-cta-band .iv2-btn-primary{background:var(--iv2-ivory);color:var(--iv2-red);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.iv2-cta-band .iv2-btn-primary:hover{background:#fff;transform:translateY(-2px)}
/* ════ Reveal (always-visible default, decoration only) ════ */
.iv2 .iv2-reveal{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.iv2.js-ready .iv2-reveal.is-pending{transform:translateY(14px)}
.iv2.js-ready .iv2-reveal.is-in{transform:none}
.iv2.js-ready .iv2-reveal.delay-1{transition-delay:.08s}
.iv2.js-ready .iv2-reveal.delay-2{transition-delay:.16s}
.iv2.js-ready .iv2-reveal.delay-3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
.iv2-reveal,.iv2-orbit-ring,.iv2-orbit-chip,.iv2-hero-eyebrow::before{
animation:none;transition:none;transform:none;
}
}
/* The live nav is fixed-position 56px tall — push the iv2 hero down so it
doesn't tuck under the nav. */
.iv2-hero{margin-top:0;padding-top:160px}