/* ══════════════════════════════════════════════════════════════════════
XALEN · Turnkey-port component system (css/xa-turnkey.css)
----------------------------------------------------------------------
Shared, REUSABLE design system for the multi-page Turnkey→XALEN port
(ai-agents · pricing · demo · more). Editorial light theme, true to
XALEN: Newsreader serif display, Inter body, JetBrains Mono kickers,
#F97316 accent on warm cream. Depends on css/style.css tokens.
HOW TO USE ON A NEW PAGE:
1.
2.
3. …
4. Compose from the primitives + section components below.
COMPONENT INDEX
[tokens] .xa (local vars)
[primitives] .xa-kicker · .xa-display · .xa-lead · .xa-section ·
.xa-head · .reveal · .xa-cta · .xa-micro
[media] .xa-console · .xa-player · .xa-float
[strip] .xa-strip · .xa-chips
[features] .xa-safety-grid/.xa-safe · .xa-speed-grid/.xa-spec ·
.xa-ctrl-grid/.xa-ctrl (+mini-viz) · .xa-uc-grid/.xa-uc
[proof] .xa-case-card (challenge/solution/result + stat band)
[gallery] .xa-gallery · .xa-tabs/.xa-tab (multi-video switcher)
[columns] .xa-how-grid/.xa-how · .xa-infra (stack) · .xa-pillars
[close] .xa-final (CTA) · .xa-res-grid/.xa-res
══════════════════════════════════════════════════════════════════════ */
/* ── [tokens] page-local warm vars (fills gaps in style.css :root) ── */
.xa {
--cream:#FFFAF5; --peach:#FFF7ED; --paper:#FFFDFB; --wline:#EFE5D9;
--ink:#111827; --sub:#4B5563; --mut:#6B7280; --faint:#9CA3AF;
--primary-300:#FDBA74;
}
.xa * { box-sizing:border-box; }
/* ── [primitives] type + kicker ── */
.xa-kicker {
display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.14em;
text-transform:uppercase; color:var(--primary);
}
.xa-kicker::before { content:''; width:22px; height:1px; background:var(--primary); opacity:.55; }
.xa-kicker.center::before { display:none; }
.xa-display {
font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:-0.035em;
line-height:1.04; color:var(--ink);
}
.xa-display em { font-style:italic; color:var(--primary); }
.xa-lead { font-family:var(--sans); font-size:clamp(16px,1.6vw,18.5px); color:var(--sub); line-height:1.62; }
.xa-section { padding:clamp(64px,9vw,110px) 0; position:relative; }
.xa-section.alt { background:var(--gray-50); }
.xa-head { max-width:660px; margin:0 auto clamp(38px,5vw,60px); text-align:center; }
.xa-head .xa-kicker { margin-bottom:16px; }
.xa-head h2 { font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:-0.03em; line-height:1.08; font-size:clamp(28px,4.2vw,44px); color:var(--ink); margin:0 0 14px; }
.xa-head p { margin:0 auto; max-width:560px; }
.xa-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.xa-micro { margin-top:22px; font-family:var(--mono); font-size:12.5px; color:var(--faint); letter-spacing:0.01em; }
/* ── reveal (scroll-in) ── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
/* ══ [media] browser console + video player ══ */
.xa-console {
position:relative; border-radius:18px; overflow:hidden; background:#fff;
border:1px solid var(--wline);
box-shadow:0 44px 90px -46px rgba(234,88,12,0.42), 0 10px 30px -18px rgba(17,24,39,0.16);
}
.xa-console-bar { display:flex; align-items:center; gap:7px; padding:12px 15px; border-bottom:1px solid #F1E9DE; background:linear-gradient(180deg,#FFFFFF,#FFFBF6); }
.xa-tl { width:11px; height:11px; border-radius:50%; }
.xa-tl.a{ background:#FDBA74;} .xa-tl.b{ background:#FED7AA;} .xa-tl.c{ background:#FDE7CE;}
.xa-console-url { margin-left:9px; font-family:var(--mono); font-size:11.5px; color:var(--mut); display:flex; align-items:center; gap:6px; min-width:0; }
.xa-console-url svg{ color:var(--primary); flex:0 0 auto; }
.xa-console-url span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xa-console-tag { margin-left:auto; font-family:var(--mono); font-size:10.5px; font-weight:600; color:var(--primary); background:var(--primary-glow); padding:3px 9px; border-radius:6px; letter-spacing:0.04em; flex:0 0 auto; }
.xa-player { position:relative; background:#FFF7ED; cursor:pointer; }
.xa-player video { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; background:#FFF7ED; }
.xa-player .xa-play {
position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
background:rgba(255,255,255,0.92); color:var(--primary);
box-shadow:0 12px 30px -8px rgba(234,88,12,0.5); transition:transform .2s var(--ease), background .2s;
}
.xa-player .xa-play:hover { transform:scale(1.06); background:#fff; }
.xa-player .xa-play svg { margin-left:3px; }
.xa-player.playing .xa-play { display:none; }
.xa-player .xa-vlabel {
position:absolute; left:14px; bottom:14px; z-index:2; pointer-events:none;
font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
color:#fff; background:rgba(17,24,39,0.55); backdrop-filter:blur(4px);
padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:7px;
}
.xa-player.playing .xa-vlabel { opacity:0; transition:opacity .3s; }
.xa-player .xa-vlabel .lv { width:6px; height:6px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,0.25); }
/* floating trust pill (overlaps console corner) */
.xa-float {
position:absolute; z-index:3; right:-14px; bottom:22px;
background:#fff; border:1px solid var(--wline); border-radius:13px; padding:12px 15px;
box-shadow:0 20px 44px -22px rgba(17,24,39,0.28);
display:flex; align-items:center; gap:11px;
}
.xa-float .fi { width:34px; height:34px; border-radius:9px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.xa-float b { display:block; font-size:12.5px; font-weight:650; color:var(--ink); line-height:1.2; }
.xa-float span { font-family:var(--mono); font-size:10.5px; color:var(--mut); }
/* ══ [hero] generic hero shell ══ */
.xa-hero {
position:relative; overflow:hidden;
padding:clamp(120px,15vw,168px) 0 clamp(60px,8vw,96px);
background:
radial-gradient(120% 90% at 88% -8%, rgba(249,115,22,0.14), transparent 55%),
radial-gradient(90% 70% at -6% 10%, rgba(249,115,22,0.06), transparent 55%),
linear-gradient(180deg,#FFFAF5 0%,#FFFFFF 70%);
}
.xa-hero::after {
content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
background-image:radial-gradient(rgba(234,88,12,0.10) 1px, transparent 1.4px);
background-size:24px 24px;
-webkit-mask-image:radial-gradient(120% 80% at 80% 0%, #000 0%, transparent 62%);
mask-image:radial-gradient(120% 80% at 80% 0%, #000 0%, transparent 62%);
}
.xa-hero .container { position:relative; z-index:1; }
.xa-hero-grid { display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(40px,5vw,64px); align-items:center; }
.xa-hero h1 { font-size:clamp(40px,6.2vw,70px); margin:20px 0 22px; }
.xa-hero .xa-lead { max-width:520px; }
/* ══ [strip] context strip + chips ══ */
.xa-strip { background:var(--gray-50); border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light); padding:34px 0; }
.xa-strip .line { text-align:center; font-size:13.5px; color:var(--mut); margin-bottom:16px; }
.xa-strip .line b { color:var(--ink); font-weight:600; }
.xa-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.xa-chip { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--gray-600); background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px 13px; }
.xa-chip.more { color:var(--primary); border-color:var(--primary-200); background:var(--primary-glow); }
/* ══ [features] Agent-safety — numbered accent cards ══ */
.xa-safety-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.xa-safe {
position:relative; background:#fff; border:1px solid var(--border); border-radius:16px;
padding:30px 28px 28px; overflow:hidden; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.xa-safe::before { content:''; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:3px; background:linear-gradient(var(--primary-200),var(--primary)); }
.xa-safe:hover { transform:translateY(-4px); box-shadow:0 26px 54px -34px rgba(234,88,12,0.4); border-color:var(--primary-200); }
.xa-safe .num { position:absolute; top:16px; right:22px; font-family:var(--serif); font-style:italic; font-size:48px; line-height:1; color:var(--primary); opacity:0.12; }
.xa-safe .ic { width:46px; height:46px; border-radius:12px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.xa-safe h3 { font-family:var(--sans); font-size:18px; font-weight:650; color:var(--ink); margin:0 0 9px; letter-spacing:-0.01em; }
.xa-safe p { font-size:14px; color:var(--mut); line-height:1.62; margin:0; }
/* ══ [features] Speed — 4-up spec row ══ */
.xa-speed-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.xa-spec { background:#fff; padding:30px 26px; transition:background .2s; }
.xa-spec:hover { background:var(--paper); }
.xa-spec .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.xa-spec .ic { width:40px; height:40px; border-radius:11px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.xa-spec .idx { font-family:var(--mono); font-size:11px; color:var(--faint); font-weight:600; letter-spacing:0.08em; }
.xa-spec h3 { font-family:var(--sans); font-size:16px; font-weight:650; color:var(--ink); margin:0 0 8px; letter-spacing:-0.01em; }
.xa-spec p { font-size:13.5px; color:var(--mut); line-height:1.6; margin:0; }
/* ══ [features] Modular controls — cards + mini-viz ══ */
.xa-ctrl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.xa-ctrl { background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px; display:flex; flex-direction:column; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.xa-ctrl:hover { transform:translateY(-4px); box-shadow:0 24px 50px -34px rgba(17,24,39,0.26); border-color:var(--primary-200); }
.xa-ctrl .cap { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.xa-ctrl .ic { width:38px; height:38px; border-radius:10px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.xa-ctrl h3 { font-family:var(--sans); font-size:16.5px; font-weight:650; color:var(--ink); margin:0; letter-spacing:-0.01em; }
.xa-ctrl p { font-size:13.5px; color:var(--mut); line-height:1.6; margin:0 0 18px; }
.xa-viz { margin-top:auto; background:var(--cream); border:1px solid var(--wline); border-radius:12px; padding:15px; }
.xa-viz .vrow { display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--gray-600); margin-bottom:9px; }
.xa-viz .vrow b { color:var(--primary); font-weight:600; }
.xa-gauge { height:8px; border-radius:999px; background:#FBEAD9; overflow:hidden; }
.xa-gauge i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--primary-200),var(--primary)); border-radius:999px; transition:width 1.1s var(--ease); }
.in .xa-gauge i { width:38%; }
.xa-appr { display:flex; flex-direction:column; gap:9px; }
.xa-appr .ar { display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; color:var(--gray-600); }
.xa-appr .ar .lbl { flex:1; }
.xa-tog { width:30px; height:17px; border-radius:999px; background:var(--primary); position:relative; flex:0 0 30px; }
.xa-tog::after { content:''; position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#fff; }
.xa-tog.off { background:var(--gray-300); }
.xa-tog.off::after { right:auto; left:2px; }
.xa-appr .ar .st { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.xa-appr .ar .st.hold { color:var(--primary); }
.xa-appr .ar .st.auto { color:var(--gray-400); }
.xa-nodes { display:flex; align-items:center; justify-content:center; gap:0; padding:4px 0; }
.xa-node { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.xa-node .b { width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--primary-200); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.xa-node span { font-family:var(--mono); font-size:9.5px; color:var(--mut); }
.xa-wire { width:26px; height:2px; background:linear-gradient(90deg,var(--primary-200),var(--primary)); align-self:flex-start; margin-top:16px; }
/* ══ [features] Use-case grid — horizontal cards (breadth) ══ */
.xa-uc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.xa-uc { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 22px 22px 20px; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.xa-uc:hover { border-color:var(--primary-200); transform:translateY(-3px); box-shadow:0 20px 44px -34px rgba(234,88,12,0.34); }
.xa-uc .ic { width:40px; height:40px; flex:0 0 40px; border-radius:11px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.xa-uc b { display:block; font-family:var(--sans); font-size:15.5px; font-weight:650; color:var(--ink); letter-spacing:-0.01em; margin-bottom:5px; }
.xa-uc p { font-size:13px; color:var(--mut); line-height:1.55; margin:0; }
.xa-uc .tagpill { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--primary); background:var(--primary-glow); border-radius:999px; padding:2px 8px; margin-left:8px; vertical-align:middle; }
/* ══ [proof] Case study card + stat band ══ */
.xa-case-card {
background:#fff; border:1px solid var(--border); border-radius:22px; overflow:hidden;
box-shadow:0 30px 70px -50px rgba(17,24,39,0.3);
}
.xa-case-top { display:grid; grid-template-columns:0.82fr 1.18fr; }
.xa-case-meta { background:linear-gradient(160deg,#FFF7ED,#FFFAF5); border-right:1px solid var(--wline); padding:clamp(28px,3.5vw,44px); }
.xa-case-meta .tag { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--primary); }
.xa-case-meta h3 { font-family:var(--serif) !important; font-weight:500 !important; font-size:clamp(24px,2.8vw,32px); letter-spacing:-0.02em; line-height:1.14; color:var(--ink); margin:16px 0 18px; }
.xa-case-who { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.xa-case-who .r { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--sub); line-height:1.5; }
.xa-case-who .r svg { flex:0 0 18px; margin-top:1px; color:var(--primary); }
.xa-case-body { padding:clamp(28px,3.5vw,44px); display:flex; flex-direction:column; gap:24px; }
.xa-cb h4 { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; }
.xa-cb p { font-size:14.5px; color:var(--sub); line-height:1.66; margin:0; }
.xa-cb.sol h4 { color:var(--primary); }
.xa-case-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--wline); }
.xa-stat { padding:clamp(24px,3vw,34px); text-align:center; border-right:1px solid var(--wline); }
.xa-stat:last-child { border-right:none; }
.xa-stat .n { font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.5vw,52px); line-height:1; color:var(--primary); letter-spacing:-0.02em; }
.xa-stat .l { margin-top:10px; font-size:13px; color:var(--mut); line-height:1.4; }
/* ══ [gallery] Multi-video switcher ══ */
.xa-gallery { max-width:920px; margin:0 auto; }
.xa-gallery .foot { text-align:center; margin-top:20px; font-size:13.5px; color:var(--mut); }
.xa-gallery .foot a { color:var(--primary); font-weight:600; }
.xa-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.xa-tab {
display:flex; gap:11px; align-items:center; text-align:left; background:#fff;
border:1px solid var(--border); border-radius:12px; padding:10px; cursor:pointer;
font-family:var(--sans); transition:border-color .18s, box-shadow .18s, transform .18s var(--ease);
}
.xa-tab:hover { border-color:var(--primary-200); transform:translateY(-2px); }
.xa-tab.active { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 16px 30px -22px rgba(234,88,12,0.5); }
.xa-tab .tth { width:52px; height:34px; flex:0 0 52px; border-radius:7px; background-size:cover; background-position:center; border:1px solid var(--wline); }
.xa-tab .ttx { display:flex; flex-direction:column; min-width:0; }
.xa-tab .ttx b { font-size:13px; font-weight:650; color:var(--ink); letter-spacing:-0.01em; }
.xa-tab .ttx span { font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xa-tab.active .ttx b { color:var(--primary); }
/* ══ [columns] How-it-works 3-col ══ */
.xa-how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.xa-how { position:relative; padding:30px 26px; border:1px solid var(--border); border-radius:16px; background:#fff; transition:border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.xa-how:hover { border-color:var(--primary-200); transform:translateY(-3px); box-shadow:0 22px 46px -34px rgba(234,88,12,0.36); }
.xa-how .step { font-family:var(--mono); font-size:12px; font-weight:600; color:var(--primary); letter-spacing:0.06em; }
.xa-how h3 { font-family:var(--serif) !important; font-weight:500 !important; font-size:23px; letter-spacing:-0.02em; color:var(--ink); margin:14px 0 10px; }
.xa-how p { font-size:14px; color:var(--mut); line-height:1.62; margin:0 0 18px; }
.xa-how a { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--primary); transition:gap .18s; }
.xa-how a:hover { gap:10px; }
/* ══ [columns] Infrastructure stack ══ */
.xa-infra-grid { display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(38px,5vw,64px); align-items:center; }
.xa-infra-text .xa-kicker { margin-bottom:16px; }
.xa-infra-text h2 { font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:-0.03em; line-height:1.1; font-size:clamp(26px,3.6vw,40px); color:var(--ink); margin:0 0 14px; }
.xa-stack { display:flex; flex-direction:column-reverse; gap:9px; }
.xa-layer {
display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:13px;
border:1px solid var(--wline); background:#fff; position:relative;
}
.xa-layer .lc { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 36px; background:var(--primary-glow); color:var(--primary); }
.xa-layer .lt b { display:block; font-size:14px; font-weight:650; color:var(--ink); }
.xa-layer .lt span { font-size:12.5px; color:var(--mut); }
.xa-layer .depth { margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:0.05em; }
.xa-layer.base { background:linear-gradient(120deg,#FFF7ED,#FFFFFF); border-color:var(--primary-200); }
.xa-cap { align-self:center; margin-bottom:2px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:var(--ink); padding:8px 16px; border-radius:999px; }
.xa-cap .lv { width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px rgba(249,115,22,0.3); }
/* ══ [columns] Pillars (secure/observable/scalable) ══ */
.xa-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.xa-pillar { background:#fff; border:1px solid var(--border); border-radius:16px; padding:30px 28px; }
.xa-pillar .ic { width:48px; height:48px; border-radius:13px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.xa-pillar .kick { font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--primary); }
.xa-pillar h3 { font-family:var(--serif) !important; font-weight:500 !important; font-size:24px; letter-spacing:-0.02em; color:var(--ink); margin:8px 0 12px; }
.xa-pillar > p { font-size:14px; color:var(--mut); line-height:1.62; margin:0 0 18px; }
.xa-pillar ul { list-style:none; margin:18px 0 0; padding:18px 0 0; border-top:1px solid var(--rule-light); display:flex; flex-direction:column; gap:11px; }
.xa-pillar li { display:flex; gap:10px; font-size:13.5px; color:var(--gray-600); line-height:1.45; }
.xa-pillar li svg { flex:0 0 18px; margin-top:1px; color:var(--primary); }
/* ══ [close] Final CTA ══ */
.xa-final { background:linear-gradient(165deg,#FFF7ED 0%,#FFFAF5 60%,#FFFFFF 100%); border-top:1px solid var(--primary-100); text-align:center; position:relative; overflow:hidden; }
.xa-final::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.4; background-image:radial-gradient(rgba(234,88,12,0.10) 1px, transparent 1.4px); background-size:26px 26px; -webkit-mask-image:radial-gradient(90% 90% at 50% 40%, #000, transparent 70%); mask-image:radial-gradient(90% 90% at 50% 40%, #000, transparent 70%); }
.xa-final .container { position:relative; z-index:1; }
.xa-final h2 { font-family:var(--serif) !important; font-weight:500 !important; letter-spacing:-0.03em; font-size:clamp(32px,5vw,54px); line-height:1.05; color:var(--ink); margin:0 0 16px; }
.xa-final h2 em { font-style:italic; color:var(--primary); }
.xa-final p { font-size:clamp(16px,2vw,19px); color:var(--sub); max-width:540px; margin:0 auto 30px; line-height:1.6; }
.xa-final .xa-cta { justify-content:center; }
.xa-final .xa-micro { text-align:center; }
/* ══ [close] Resources grid ══ */
.xa-res-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.xa-res { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:15px; padding:24px; transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.xa-res:hover { transform:translateY(-3px); border-color:var(--primary-300); box-shadow:0 18px 40px -30px rgba(234,88,12,0.42); }
.xa-res .ic { width:40px; height:40px; border-radius:11px; background:var(--primary-glow); color:var(--primary); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.xa-res .rk { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--primary); }
.xa-res h4 { font-family:var(--sans); font-size:16px; font-weight:650; color:var(--ink); margin:7px 0 7px; letter-spacing:-0.01em; }
.xa-res p { font-size:13px; color:var(--mut); line-height:1.55; margin:0 0 16px; }
.xa-res .go { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--primary); transition:gap .18s; }
.xa-res:hover .go { gap:10px; }
/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width:1000px) {
.xa-speed-grid { grid-template-columns:1fr 1fr; }
.xa-uc-grid { grid-template-columns:1fr 1fr; }
.xa-res-grid { grid-template-columns:1fr 1fr; }
.xa-tabs { grid-template-columns:1fr 1fr; }
}
@media (max-width:880px) {
.xa-hero-grid { grid-template-columns:1fr; gap:44px; }
.xa-hero .xa-lead { max-width:none; }
.xa-float { right:14px; }
.xa-safety-grid, .xa-ctrl-grid, .xa-how-grid, .xa-pillars { grid-template-columns:1fr; }
.xa-case-top { grid-template-columns:1fr; }
.xa-case-meta { border-right:none; border-bottom:1px solid var(--wline); }
.xa-infra-grid { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:560px) {
.xa-speed-grid { grid-template-columns:1fr; }
.xa-uc-grid { grid-template-columns:1fr; }
.xa-res-grid { grid-template-columns:1fr; }
.xa-tabs { grid-template-columns:1fr; }
.xa-case-stats { grid-template-columns:1fr; }
.xa-stat { border-right:none; border-bottom:1px solid var(--wline); }
.xa-stat:last-child { border-bottom:none; }
.xa-cta .btn { width:100%; justify-content:center; }
.xa-float { display:none; }
}
/* ══════════════════════ REDUCED MOTION ══════════════════════ */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity:1 !important; transform:none !important; transition:none !important; }
.in .xa-gauge i { transition:none; }
.xa-safe, .xa-ctrl, .xa-how, .xa-res, .xa-uc, .xa-tab, .xa-play { transition:none; }
}