/* =========================================================================
   FlexiRider UI v2 - synced to live brand (orange #E64E12, warm, Plus Jakarta Sans)
   Upgrades: warm dark-grey (no pure black), orange CTA band, brand-framed portrait,
   hero product visual, market stat strip, richer color interplay (orange+gold+green).
   Standalone - loads none of the production SPA bundle.
   ========================================================================= */

:root {
  /* Brand orange (warm) */
  --brand:#E64E12; --brand-2:#F0612B; --brand-deep:#C8420B;
  --brand-dim:rgba(230,78,18,.08); --brand-bd:rgba(230,78,18,.24);
  /* Secondary accents (from live tokens) */
  --gold:#D4920A; --gold-dim:rgba(212,146,10,.10);
  --green:#059669; --green-dim:rgba(5,150,105,.10);
  --red:#DC2626;
  /* Neutrals (warm) */
  --ink:#0B0D12; --body:#43495C; --muted:#8891A4;
  --line:#E8E3DC; --line2:#D7D0C6;
  --bg:#FFFFFF; --bg-warm:#FFF8F3; --bg-cream:#FBEFE5; --surface:#F4F1EC;
  --dark:#262220;        /* warm dark GREY - footer + dark sections (NOT black) */
  --dark-2:#322C28;
  /* radius / shadow */
  --r-sm:9px; --r-md:16px; --r-lg:20px; --r-xl:24px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(38,30,24,.06),0 1px 2px rgba(38,30,24,.04);
  --sh-md:0 6px 20px rgba(38,30,24,.08),0 2px 6px rgba(38,30,24,.05);
  --sh-warm:0 28px 64px rgba(230,78,18,.12),0 8px 24px rgba(38,30,24,.08);
  --maxw:1140px;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-wordmark:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-stat:'Plus Jakarta Sans',system-ui,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--body); background:var(--bg); line-height:1.62; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--brand); text-decoration:none; } a:hover { color:var(--brand-deep); }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section { padding:90px 0; }
.section--warm { background:var(--bg-warm); }
.section--cream { background:var(--bg-cream); }
.section--dark { background:var(--dark); color:#CFC8C2; }
.center { text-align:center; } .narrow { max-width:760px; margin-left:auto; margin-right:auto; }

/* Type */
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.12; letter-spacing:-.025em; margin:0 0 .4em; font-weight:800; }
.display { font-size:clamp(36px,5.4vw,58px); font-weight:800; letter-spacing:-.035em; }
.h2 { font-size:clamp(27px,3.4vw,40px); font-weight:800; }
.h3 { font-size:20px; font-weight:700; }
.lead { font-size:clamp(17px,1.6vw,20px); color:var(--body); margin:0 0 1.6em; }
.muted { color:var(--muted); }
.hl { color:var(--brand); }
.section--dark h1,.section--dark h2,.section--dark h3 { color:#fff; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; }
.eyebrow::before { content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.section--dark .eyebrow { color:var(--brand-2); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font); font-weight:600; font-size:15px; padding:13px 22px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:.15s ease; white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn--primary { background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(230,78,18,.28); }
.btn--primary:hover { background:var(--brand-deep); color:#fff; transform:translateY(-1px); box-shadow:0 10px 26px rgba(230,78,18,.34); }
.btn--secondary { background:#fff; color:var(--ink); border-color:var(--line2); }
.btn--secondary:hover { border-color:var(--brand); color:var(--brand); }
.btn--light { background:#fff; color:var(--brand-deep); }
.btn--light:hover { color:var(--brand-deep); transform:translateY(-1px); box-shadow:var(--sh-md); }
.btn--ghost { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost:hover { background:rgba(255,255,255,.16); color:#fff; }

/* Nav */
.nav { position:sticky; top:0; z-index:40; background:rgba(255,250,247,.86); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand-logo { width:30px; height:30px; border-radius:7px; }
.wm { font-family:var(--font-wordmark); font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.wm b,.wm span { font-weight:700; }
.nav-links { display:flex; gap:26px; align-items:center; }
.nav-link { color:var(--body); font-weight:600; font-size:15px; } .nav-link:hover { color:var(--ink); }
.nav-right { display:flex; align-items:center; gap:18px; }

/* Hero */
.hero { position:relative; overflow:hidden; padding:84px 0 72px; background:linear-gradient(168deg,#FFF4EF 0%,#FDE6D6 52%,#FFF1E9 100%); }
.hero--grid::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(180,55,8,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(180,55,8,.06) 1px,transparent 1px);
  background-size:36px 36px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 35%,transparent 80%); mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 35%,transparent 80%); }
.hero--grid::after { content:""; position:absolute; top:-140px; right:-100px; width:520px; height:520px; background:radial-gradient(circle,rgba(230,78,18,.20),transparent 62%); z-index:0; pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero-split { display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.founder-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:center; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.trust { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:32px; align-items:center; color:var(--body); font-size:14px; }
.trust b { color:var(--ink); font-weight:700; } .trust .dot { width:5px; height:5px; border-radius:50%; background:var(--brand-bd); display:inline-block; }

/* Hero product visual - "Live Dispatch" panel */
.panel-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-warm); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.panel-title { display:flex; align-items:center; gap:9px; font-weight:700; font-size:13.5px; color:var(--ink); }
.brand-mini { width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,var(--brand-2),var(--brand-deep)); }
.live { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--green); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px var(--green-dim); }
.panel-map { background:linear-gradient(180deg,#FFF7F1,#FDEEE2); }
.panel-rows { padding:14px 18px; display:grid; gap:11px; border-top:1px solid var(--line); }
.prow { display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--body); font-weight:500; }
.pdot { width:9px; height:9px; border-radius:50%; flex:none; }
.pdot.o { background:var(--brand); } .pdot.g { background:var(--gold); } .pdot.ok { background:var(--green); }

/* Market stat strip */
.stat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.stat { border-left:3px solid var(--brand-bd); padding-left:18px; }
.stat:nth-child(2) { border-color:var(--gold); } .stat:nth-child(3) { border-color:var(--green); }
.snum { font-family:var(--font-stat); font-weight:800; font-size:clamp(26px,3vw,34px); letter-spacing:-.03em; color:var(--brand); line-height:1; }
.stat:nth-child(2) .snum { color:var(--gold); } .stat:nth-child(3) .snum { color:var(--green); }
.slabel { color:var(--body); font-size:14.5px; margin-top:8px; }

/* Built For */
.builtfor { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.builtfor .label { font-weight:700; color:var(--ink); font-size:15px; margin-right:4px; }

/* Cards */
.grid { display:grid; gap:22px; } .grid--2 { grid-template-columns:repeat(2,1fr); } .grid--3 { grid-template-columns:repeat(3,1fr); }
.card { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:28px; box-shadow:var(--sh-sm); transition:.18s ease; overflow:hidden; }
.card::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--brand),var(--gold)); opacity:0; transition:.18s; }
.card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); border-color:var(--brand-bd); }
.card:hover::before { opacity:1; }
.card h3 { margin-bottom:8px; } .card p { margin:0; color:var(--muted); font-size:15.5px; }
.card-icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-dim),var(--gold-dim)); color:var(--brand); margin-bottom:18px; }
.card-icon svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

.sec-head { max-width:720px; margin-bottom:46px; } .sec-head.center { margin-left:auto; margin-right:auto; }

/* Panels */
.split { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.panel { border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; background:#fff; box-shadow:var(--sh-sm); }
.panel--accent { background:linear-gradient(160deg,var(--brand-dim),var(--gold-dim)); border-color:var(--brand-bd); }

/* Timeline */
.timeline { position:relative; max-width:600px; margin:0 auto; padding-left:40px; }
.timeline::before { content:""; position:absolute; left:9px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--brand),var(--gold)); }
.tnode { position:relative; padding-bottom:32px; } .tnode:last-child { padding-bottom:0; }
.tnode::before { content:""; position:absolute; left:-39px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 5px var(--brand-dim); }
.tnode:nth-child(2)::before { background:var(--gold); box-shadow:0 0 0 5px var(--gold-dim); }
.tnode:nth-child(3)::before { background:var(--green); box-shadow:0 0 0 5px var(--green-dim); }
.tnode .tdate { font-family:var(--font-stat); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--brand); }
.tnode:nth-child(2) .tdate { color:var(--gold); } .tnode:nth-child(3) .tdate { color:var(--green); }
.tnode h3 { margin:3px 0 5px; font-size:19px; } .tnode p { margin:0; color:var(--muted); }

/* Quote */
.quote { border-left:3px solid var(--brand-2); padding:8px 0 8px 30px; }
.quote p { font-family:var(--font-display); font-size:clamp(20px,2.4vw,28px); color:var(--ink); font-weight:700; letter-spacing:-.015em; line-height:1.4; margin:0 0 14px; }
.quote cite { color:var(--muted); font-style:normal; font-weight:600; font-size:15px; }

/* Founder portrait - brand frame, warm shadow (NOT black) */
.portrait-wrap { position:relative; max-width:380px; margin-left:auto; }
.portrait-wrap::before { content:""; position:absolute; inset:-14px -14px 14px 14px; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--brand),var(--gold)); opacity:.16; z-index:0; }
.portrait { position:relative; z-index:1; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-lg); border:4px solid #fff; box-shadow:0 24px 56px rgba(230,78,18,.18); background:var(--bg-cream); }

/* Chips */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-size:14px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 15px; }

/* Tick list */
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.ticks li { position:relative; padding-left:30px; color:var(--body); }
.ticks li::before { content:""; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%; background:var(--green);
  -webkit-mask:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask:center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* CTA band - BRAND ORANGE gradient (no black) */
.cta-band { position:relative; overflow:hidden; border-radius:var(--r-xl); padding:60px; text-align:center;
  background:linear-gradient(135deg,#F0612B 0%,#E64E12 48%,#C8420B 100%); box-shadow:0 30px 70px rgba(230,78,18,.30); }
.cta-band::after { content:""; position:absolute; top:-60px; right:-40px; width:360px; height:360px; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%); }
.cta-band > * { position:relative; }
.cta-band h2 { color:#fff; margin-bottom:10px; } .cta-band p { color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 26px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Accordion */
.acc { border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:12px; overflow:hidden; }
.acc summary { cursor:pointer; list-style:none; padding:20px 24px; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; gap:16px; align-items:center; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after { content:"+"; color:var(--brand); font-size:22px; } .acc[open] summary::after { content:"\2212"; }
.acc .acc-body { padding:0 24px 22px; color:var(--muted); }

/* Footer - warm dark grey */
.footer { background:var(--dark); color:#A79E96; padding:64px 0 30px; }
.footer .wm { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer-col h4 { color:#fff; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.footer-col a { display:block; color:#A79E96; font-size:15px; margin-bottom:11px; } .footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:#8A817A; }

/* Responsive */
@media (max-width:880px){ .hero-split,.founder-grid,.split{grid-template-columns:1fr;} .grid--3{grid-template-columns:1fr 1fr;} .stat-strip{grid-template-columns:1fr;} .portrait-wrap{margin:0 auto;} .footer-grid{grid-template-columns:1fr 1fr;} .hero-visual{order:2;} }
@media (max-width:620px){ .section{padding:62px 0;} .hero{padding:60px 0 50px;} .nav-links{display:none;} .grid--2,.grid--3{grid-template-columns:1fr;} .cta-band{padding:40px 22px;} }

/* ============ v3: vibrancy + motion (Stripe/Cloudflare-grade) ============ */

/* Motion keyframes */
@keyframes auroraShift { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-46px,26px) scale(1.18)} }
@keyframes dashMarch { to { stroke-dashoffset:-120; } }
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,.45)} 70%{box-shadow:0 0 0 7px rgba(5,150,105,0)} }
@keyframes ringPulse { 0%{r:7;opacity:.55} 100%{r:19;opacity:0} }
@keyframes nodeGlow { 0%,100%{box-shadow:0 14px 30px rgba(230,78,18,.40)} 50%{box-shadow:0 16px 46px rgba(230,78,18,.66)} }
@keyframes flowDown { 0%{transform:translateY(-16px);opacity:0} 16%{opacity:1} 84%{opacity:1} 100%{transform:translateY(48px);opacity:0} }
@keyframes hlSheen { to { background-position:220% center; } }

/* animate the hero glow */
.hero--grid::after { animation:auroraShift 16s ease-in-out infinite alternate; }

/* animated headline highlight - gradient sheen */
.hl { background:linear-gradient(100deg,var(--brand) 0%,var(--gold) 45%,var(--brand) 90%); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--brand); animation:hlSheen 5.5s linear infinite; }

/* dispatch panel motion */
.panel-map .route { animation:dashMarch 1.3s linear infinite; }
.live-dot { animation:livePulse 1.8s ease-in-out infinite; }
.panel-map .rider-ring { animation:ringPulse 1.9s ease-out infinite; transform-origin:center; }
.panel-card { transition:transform .25s ease, box-shadow .25s ease; }
.panel-card:hover { transform:translateY(-4px); }

/* richer card hover glow */
.card:hover { box-shadow:0 16px 40px rgba(230,78,18,.16); }

/* VIBRANT mission / vision panels (high contrast) */
.panel--mission { background:linear-gradient(150deg,#FFF1E8 0%,#FBE0CB 100%); border-color:var(--brand-bd); }
.panel--vision { position:relative; overflow:hidden; background:linear-gradient(155deg,#2B2420 0%,#3E2A1B 100%);
  border:1px solid rgba(230,78,18,.42); color:#E9DFD8; box-shadow:0 24px 50px rgba(40,28,18,.28); }
.panel--vision h3 { color:#fff; } .panel--vision p { color:#DBD1CA; }
.panel--vision::after { content:""; position:absolute; top:-56px; right:-44px; width:250px; height:250px;
  background:radial-gradient(circle,rgba(230,78,18,.55),transparent 62%); pointer-events:none; }

/* DARK animated platform-architecture section (Cloudflare-style) */
.section--arch { position:relative; overflow:hidden; color:#CFC8C2;
  background:#221E1B; background-image:radial-gradient(820px 360px at 50% -6%,rgba(230,78,18,.24),transparent 60%),
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px; }
.section--arch h2 { color:#fff; } .section--arch .eyebrow { color:var(--brand-2); }
.section--arch .lead { color:#B7AEA7; }
.arch { max-width:540px; margin:40px auto 0; display:flex; flex-direction:column; align-items:stretch; }
.arch-node { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:13px;
  padding:16px 22px; text-align:center; color:#EDE6E0; font-weight:600; font-size:15.5px; backdrop-filter:blur(3px); }
.arch-core { background:linear-gradient(135deg,var(--brand-2),var(--brand-deep)); border:none; color:#fff; font-weight:700;
  font-size:16px; animation:nodeGlow 2.6s ease-in-out infinite; }
.arch-link { height:30px; width:2px; margin:0 auto; background:rgba(255,255,255,.16); position:relative; overflow:hidden; }
.arch-link .flow { position:absolute; left:-3px; top:0; width:8px; height:15px; border-radius:4px;
  background:linear-gradient(var(--gold),var(--brand)); filter:blur(.4px); animation:flowDown 1.7s linear infinite; }

/* reveal on scroll (progressive, accessible) */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.07s; } .reveal:nth-child(3){ transition-delay:.14s; }
.reveal:nth-child(4){ transition-delay:.21s; } .reveal:nth-child(5){ transition-delay:.28s; } .reveal:nth-child(6){ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero--grid::after,.panel-map .route,.live-dot,.panel-map .rider-ring,.arch-core,.arch-link .flow,.hl{animation:none}
  .hl{-webkit-text-fill-color:var(--brand);}
}

/* ============ v4: multi-sided ecosystem diagram (converging cloud) ============ */
.eco { max-width:880px; margin:40px auto 0; }
.eco-tag { text-align:center; color:var(--brand-2); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; }
.eco-tag.bottom { margin:14px 0 0; }
.eco-chips2 { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 10px; }
.eco-chip { font-size:13.5px; font-weight:600; color:#EDE6E0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:8px 15px; }
.eco-chip.out { color:#FAD9C6; border-color:rgba(230,78,18,.45); background:rgba(230,78,18,.12); }
.eco-lines { width:100%; height:60px; display:block; }
.eco-line { fill:none; stroke:rgba(230,78,18,.55); stroke-width:1.3; stroke-dasharray:2 7; animation:dashMarch 1.3s linear infinite; }
.eco-core { margin:6px auto; max-width:540px; text-align:center; background:linear-gradient(135deg,var(--brand-2),var(--brand-deep)); border-radius:16px; padding:18px 22px; box-shadow:0 16px 42px rgba(230,78,18,.45); animation:nodeGlow 2.8s ease-in-out infinite; }
.eco-core-title { display:flex; align-items:center; justify-content:center; gap:9px; color:#fff; font-weight:800; font-size:17px; }
.eco-core-sub { display:block; color:rgba(255,255,255,.85); font-size:12.5px; margin-top:5px; }
@media (prefers-reduced-motion:reduce){ .eco-line,.eco-core{animation:none} }
@media (max-width:620px){ .eco-lines{height:38px} .eco-chip{font-size:12.5px;padding:7px 12px} }

/* vibrant LIGHT background variant for the ecosystem section (warm peach + orange/gold glow) */
.section--eco { position:relative; overflow:hidden; background:linear-gradient(160deg,#FFF1E6 0%,#FFE0C9 50%,#FFEAD9 100%); }
.section--eco::before { content:""; position:absolute; top:-130px; left:-90px; width:480px; height:480px; background:radial-gradient(circle,rgba(230,78,18,.24),transparent 62%); pointer-events:none; }
.section--eco::after { content:""; position:absolute; bottom:-150px; right:-100px; width:520px; height:520px; background:radial-gradient(circle,rgba(212,146,10,.22),transparent 62%); pointer-events:none; }
.section--eco .container { position:relative; z-index:1; }
.section--eco .eco-tag { color:var(--brand-deep); }
.section--eco .eco-chip { color:var(--ink); background:#fff; border:1px solid var(--brand-bd); box-shadow:var(--sh-sm); }
.section--eco .eco-chip.out { color:var(--brand-deep); background:var(--brand-dim); border-color:var(--brand-bd); }
.section--eco .eco-line { stroke:rgba(230,78,18,.62); }
/* light-bg variant of the linear architecture component */
.section--eco .arch-node { background:#fff; border:1px solid var(--brand-bd); color:var(--ink); box-shadow:var(--sh-sm); }
.section--eco .arch-core { background:linear-gradient(135deg,var(--brand-2),var(--brand-deep)); border:none; color:#fff; }
.section--eco .arch-link { background:rgba(230,78,18,.22); }