/* R13 desktop-first design candidate — BBXNEXUS, 26 October 2026.
   One existing WebGL renderer, unchanged nine-stage freight mechanics.  The
   hero Earth is displayed in a dedicated visual aperture; all trade copy,
   Incoterms education and blockchain illustration have separate zones. */
:root{
 --bbx-ink:#f3f2ea;
 --bbx-ink-subtle:#bdceca;
 --bbx-green:#0a1d20;
 --bbx-green-2:#123034;
 --bbx-outline:#668b83;
 --bbx-warm:#dfb083;
 --bbx-soft:#efdcc1;
}
html{scroll-behavior:smooth}
body[data-hero="true"] #experience{
 background:radial-gradient(ellipse at 7% 45%,#173336 0%,#0b2225 39%,transparent 66%),#071719;
}
body[data-hero="true"] #experience::before{
 content:"";position:absolute;inset:6rem 50% 0 0;pointer-events:none;opacity:.28;
 background-image:linear-gradient(#b7d2c00b 1px,transparent 1px),linear-gradient(90deg,#b7d2c00b 1px,transparent 1px);
 background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent);
}
body[data-hero="true"] header,
body[data-hero="false"] header{
 height:92px;left:6%;right:6%;background:rgba(8,27,30,.97);
 border-bottom:1px solid rgba(194,213,203,.22);backdrop-filter:none;
 -webkit-backdrop-filter:none;z-index:12;gap:1.25rem;
}
header .brand{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.055em;font-weight:850;font-size:clamp(1.35rem,2vw,1.8rem);color:#f5f4ec}
header .brand>span:last-child{color:inherit}
header .brand-icon{color:var(--bbx-warm);font-size:2.2rem;margin-right:.65rem}
header .brand-line{margin-left:.8rem;padding-left:1.25rem;border-left:1px solid #cde2d05c;color:#bcd0c8;letter-spacing:.11em;font-size:.62rem;text-transform:uppercase;opacity:1}
header .preview-tag{
 margin-left:auto!important;margin-right:0!important;padding:.55rem .75rem;
 border:1px solid #b9d1c743;border-radius:.35rem;color:#bdd2ca;
 font-size:.63rem;font-weight:700;letter-spacing:.13em;opacity:1;
}
header #incoterms-open,
body[data-scene-tone="light"] header #incoterms-open,
body[data-scene-tone="ocean"] header #incoterms-open{
 position:static;inset:auto;transform:none;flex:0 0 auto;margin:0;
 min-height:44px;padding:.65rem 1rem;background:#204040;color:#f0ede1;
 border:1px solid #8bb6a799;border-radius:7px;font:700 .8rem/1.2 Arial,Helvetica,sans-serif;
 transition:background .18s,border-color .18s;
}
header #incoterms-open:hover{background:#345852;border-color:#dfb083}
header #incoterms-open[aria-expanded="true"]{border-color:var(--bbx-warm);color:#ffe4bd}
#incoterms-panel{
 top:6.5rem;right:6%;bottom:1.5rem;border-radius:12px;border:1px solid #84a79b;
 border-top:3px solid #dfa06f;background:#10292e;color:var(--bbx-ink);
 box-shadow:0 20px 60px #021315ba;
}
#incoterms-panel .incoterms-heading,#incoterms-panel button{background:#15383b}
#incoterms-panel input,#incoterms-panel select{background:#1c3f42;border-color:#829b95}
#incoterms-panel a{color:#ffd4ac}

/* Desktop hero: left editorial banner, separate right globe and proof trail. */
@media(min-width:901px){
 body[data-hero="true"] #hero{
  left:6.6%;top:21%;width:40.3%;max-width:630px;text-align:left;z-index:5;
  transform:translateY(calc(var(--hero-progress,0)*-100px));
 }
 body[data-hero="true"] .hero-kicker{
  display:flex;align-items:center;gap:11px;color:#dfb083;
  font:700 .68rem/1.3 Arial,Helvetica,sans-serif;letter-spacing:.22em;margin:0 0 1.4rem;
 }
 body[data-hero="true"] .hero-kicker::before{width:25px;background:#dfb083}
 body[data-hero="true"] #hero-title{
  margin:0 0 1.5rem;color:var(--bbx-ink);font-size:clamp(3.1rem,5.05vw,5.7rem);
  line-height:.96;letter-spacing:-.067em;font-weight:800;text-wrap:balance;
  text-shadow:none;overflow-wrap:normal;
 }
 body[data-hero="true"] #hero-title .hero-subtitle{
  display:block;margin-top:1.2rem;font-size:clamp(1.65rem,2.85vw,3rem);
  line-height:1.09;letter-spacing:-.048em;color:#e0e5da;font-weight:650;
 }
 body[data-hero="true"] .hero-copy{
  max-width:29rem;margin:0 0 1.5rem;color:#c5d4d0;
  font:400 clamp(.87rem,1.06vw,1rem)/1.68 Arial,Helvetica,sans-serif;text-shadow:none;
 }
 body[data-hero="true"] .hero-copy br{display:none}
 body[data-hero="true"] .hero-actions{justify-content:flex-start;gap:.65rem}
 body[data-hero="true"] .hero-actions button{
  min-height:48px;border-radius:8px;padding:.85rem 1.2rem;font-size:.78rem;
  transition:background .2s,color .2s,transform .2s,border-color .2s;
 }
 body[data-hero="true"] .hero-actions #hero-enter{
  background:#e8ccaa;color:#10292c;border:1px solid #e8ccaa;box-shadow:none;
 }
 body[data-hero="true"] .hero-actions #hero-enter:hover{background:#f2dfc1;color:#10292c}
 body[data-hero="true"] .hero-actions #hero-pause{
  border:1px solid #b8d2c36b;background:#163337;color:#f4f2eb;backdrop-filter:none;
 }
 body[data-hero="true"] .hero-actions #hero-pause:hover{background:#275158}
 body[data-hero="true"] .atlas-picker{
  justify-content:flex-start;margin-top:1.3rem;color:#cadbd4;font-size:.76rem;
 }
 body[data-hero="true"] .atlas-picker select{
  min-height:42px;max-width:17.5rem;padding:.65rem .8rem;background:#16373b;
  border:1px solid #7faaa0a6;border-radius:7px;color:#e7f0e7;font-size:.76rem;
 }
 body[data-hero="true"] .hero-note{
  margin-top:1.15rem;max-width:29rem;color:#b0c4bc;letter-spacing:.01em;
  font:400 .65rem/1.5 Arial,Helvetica,sans-serif;
 }
 body[data-hero="true"] .hero-note a{color:#e6bc91;text-underline-offset:2px}

 /* Leave the full WebGL canvas and camera untouched. A right-hand aperture
    masks only the landing view; freight gets the entire original viewport. */
 body[data-hero="true"] #scene{
  clip-path:inset(14.5% 6% 39% 51% round 15px);
  background:#0d282b;
  z-index:1;
 }
 body[data-hero="true"] #scene canvas{
  transform-origin:50% 50%;
  transform:translate(22.5vw,var(--earth-offset,-12vh)) scale(.39)!important;
  filter:none!important;
 }
 /* Country labels were painted for the full-screen lens. Scaling them would
    make unreadable labels; the accessible country selector still orients Earth. */
 body[data-hero="true"] #scene .atlas-labels{display:none}
 body[data-hero="true"] #scene::after{display:none}
 body[data-hero="true"] .hero-visual-frame{
  display:block;position:absolute;z-index:2;left:51%;right:6%;top:14.5%;height:46.5%;
  border:1px solid #b9d5ca68;border-radius:15px;pointer-events:none;
  box-shadow:inset 0 0 45px #122d301a,0 14px 38px #061a1d55;
  opacity:var(--hero-opacity,1);
 }
 body[data-hero="true"] .hero-visual-frame::before{
  content:"THE WORLD · ONE CONNECTED EXIM NETWORK";position:absolute;
  left:1.25rem;top:1.1rem;color:#e1eee9;font:700 .64rem/1.2 Arial,sans-serif;
  letter-spacing:.15em;text-shadow:0 2px 6px #001013;
 }
 body[data-hero="true"] .hero-visual-frame::after{
  content:"INTERACTIVE EARTH · 3D";position:absolute;right:1.25rem;bottom:1rem;
  color:#d9e9e1;font:700 .61rem/1 Arial,sans-serif;letter-spacing:.13em;
  text-shadow:0 2px 5px #001013;
 }

 /* The on-chain explainer is a content section, never a translucent overlay
    obscuring the globe. Its five connected events remain interactive/animated. */
 body[data-hero="true"] .chain-panel{
  position:absolute;left:51%;right:6%;top:calc(61% + 13px);width:auto;max-width:none;
  margin:0;z-index:4;border-radius:13px;border:1px solid #557b75;
  background:#102e32;color:#edf1e9;box-shadow:0 12px 30px #07191b55;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;
 }
 body[data-hero="true"] .chain-panel:hover{background:#123438}
 body[data-hero="true"] #chain-toggle{
  min-height:38px;padding:.65rem 1rem;gap:.7rem;font-size:.67rem;letter-spacing:.15em;
 }
 body[data-hero="true"] #chain-toggle small{
  display:inline;font-size:.66rem;margin:0 0 0 .7rem;color:#bcd2c8;
 }
 body[data-hero="true"] .chain-signal{background:#b3c9a9;box-shadow:0 0 0 3px #b3c9a91b}
 body[data-hero="true"] #chain-content{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(185px,.85fr);
  grid-template-areas:"heading heading" "diagram current" "events current" "disclosure disclosure";
  gap:1px 1rem;padding:0 1rem .75rem;
 }
 body[data-hero="true"] .chain-heading{grid-area:heading;margin:0 0 .15rem;font-size:.73rem;color:#f4e9d6}
 body[data-hero="true"] .chain-linkage{grid-area:diagram;height:58px;max-width:300px}
 body[data-hero="true"] .chain-events{grid-area:events;margin:-5px 0 0;color:#b8d1c5;font-size:.53rem}
 body[data-hero="true"] .chain-current{grid-area:current;padding:.4rem 0 .2rem .7rem;margin:0;border-left:2px solid #d7a276}
 body[data-hero="true"] .chain-current strong{font-size:.7rem;line-height:1.35}
 body[data-hero="true"] .chain-current p{font-size:.64rem;line-height:1.4;margin:.3rem 0 0}
 body[data-hero="true"] .chain-disclosure{
  grid-area:disclosure;margin-top:.3rem;padding-top:.45rem;
  border-color:#91a79f37;font-size:.58rem;line-height:1.35;color:#c0d1c8;
 }
 body[data-hero="true"] .chain-blocks rect{fill:#254b4e;stroke:#9fc3b0}
 body[data-hero="true"] .chain-blocks rect.chain-visited{fill:#35685f;stroke:#e6b487}
 body[data-hero="true"] .chain-pulse-path{stroke:#e4b080}
 body[data-hero="true"] #chain-content[hidden]{display:none}
}

/* Remove the flat wireframe/svg Earth from the landing fallback. Keep the
   accessible static route available for freight if WebGL is unsupported. */
body[data-hero="true"]:is([data-rendering="loading"],[data-rendering="static"]) #fallback{
 display:flex;justify-content:center;align-items:center;inset:0;
 background:#0b272a;
}
@media(min-width:901px){
 body[data-hero="true"]:is([data-rendering="loading"],[data-rendering="static"]) #fallback{transform:translate3d(22vw,0,0)}
}
body[data-rendering="webgl"] #fallback{display:none!important}
body[data-hero="true"] #fallback svg{display:none!important}
body[data-hero="true"] #fallback p{
 position:static;visibility:visible!important;max-width:15rem;
 margin:0;text-align:center;color:#bfd3cc;letter-spacing:.06em;font-size:0;
}
body[data-hero="true"][data-rendering="loading"] #fallback p::after{
 content:"Preparing the BBXNEXUS 3D Earth view…";
 font:600 .9rem/1.5 Arial,Helvetica,sans-serif;
}
body[data-hero="true"][data-rendering="static"] #fallback p::after{
 content:"3D rendering is unavailable on this device. The trade journey remains accessible.";
 font:600 .9rem/1.5 Arial,Helvetica,sans-serif;
}

@media(min-width:901px) and (max-height:780px){
 body[data-hero="true"]{--earth-offset:-13.5vh}
 body[data-hero="true"] #hero{top:19%}
 body[data-hero="true"] #hero-title{font-size:clamp(3rem,4.4vw,4.7rem);margin-bottom:1.05rem}
 body[data-hero="true"] #hero-title .hero-subtitle{font-size:clamp(1.5rem,2.4vw,2.5rem);margin-top:.9rem}
 body[data-hero="true"] .hero-copy{margin-bottom:1rem;line-height:1.5}
 body[data-hero="true"] .hero-kicker{margin-bottom:1.05rem}
 body[data-hero="true"] .atlas-picker{margin-top:.9rem}
 body[data-hero="true"] #scene{clip-path:inset(14.5% 6% 43% 51% round 15px)}
 body[data-hero="true"] .hero-visual-frame{height:42.5%}
 body[data-hero="true"] .chain-panel{top:calc(57% + 12px)}
}

/* R13 browser review: readable proofs and controls, with the physical cargo
   left clear by default. Expanded traces remain intentional user actions. */
@media(min-width:901px){
 body[data-hero="true"] .hero-note{font-size:.72rem}
 body[data-hero="true"] #chain-toggle{font-size:.72rem;min-height:44px}
 body[data-hero="true"] .chain-heading{font-size:.86rem;line-height:1.4}
 body[data-hero="true"] .chain-events{max-width:300px;font-size:.63rem;line-height:1.4;margin-top:0}
 body[data-hero="true"] .chain-current strong{font-size:.8rem}
 body[data-hero="true"] .chain-current p{font-size:.72rem;line-height:1.5}
 body[data-hero="true"] .chain-current>span{font-size:.57rem;letter-spacing:.06em}
 body[data-hero="true"] .chain-disclosure{font-size:.65rem;line-height:1.5}
 body[data-hero="true"] #chain-toggle small{font-size:.7rem}
 body[data-hero="false"] #chain-panel{
  top:260px;right:6%;width:305px;max-width:32%;background:#123237;
  backdrop-filter:none;border-radius:10px;z-index:8;
 }
 body[data-hero="false"] #chain-content{max-height:38vh;overflow:auto}
 body[data-hero="false"] #experience #journey-panel .record,
 body[data-hero="false"] #experience #journey-panel .record:has(details[open]){
  display:block!important;left:auto;right:6%;top:330px;bottom:auto;
  width:305px;max-width:32%;border-radius:8px;background:#123237;
  border:1px solid #6b8e85;z-index:8;
 }
 body[data-hero="false"] #experience .record .record-top{display:none}
 body[data-hero="false"] #experience .record summary{font-size:12px;min-height:44px;padding:14px;color:#f3f2ea}
 body[data-hero="false"] #experience .record:has(details[open]){
  left:auto;right:6%;top:330px;bottom:auto;width:305px;
  max-height:calc(100vh - 555px);overflow:auto;
 }
 body[data-hero="false"] #experience .record .record-body{max-height:calc(100vh - 660px);font-size:12px;line-height:1.5;background:#123237}
 body[data-hero="false"] .scene-caption{display:none}
 body[data-hero="false"] #experience footer#journey-dock{
  background:rgba(8,27,30,calc(.72 + var(--dock-alpha,.2)*.3))!important;
  border:1px solid #6b8e85!important;border-radius:12px!important;
  padding:9px 15px 10px;bottom:12px;
 }
 body[data-hero="false"] #experience footer#journey-dock .dock-toolbar{font-size:11px}
 body[data-hero="false"] #experience footer#journey-dock .dock-active-label{font-size:11px}
 body[data-hero="false"] #experience footer#journey-dock .control-heading{font-size:10px;letter-spacing:.08em}
 body[data-hero="false"] #experience footer#journey-dock .stage .label{font-size:12px}
 body[data-hero="false"] #experience footer#journey-dock .transport label{font-size:11px}
 body[data-hero="false"] #experience footer#journey-dock .transport>span{font-size:10px;letter-spacing:.06em}
 body[data-hero="false"] #experience footer#journey-dock[data-floating="true"]{bottom:auto;right:auto}
 body[data-hero="false"] #experience footer#journey-dock[data-compact="true"] #stages{
  display:flex;flex-direction:row;justify-content:space-between;overflow-x:auto;
 }
 body[data-hero="false"] #experience footer#journey-dock[data-compact="true"] .stage{flex:0 0 42px}
 body[data-hero="false"] #experience footer#journey-dock[data-compact="true"] .stage .label{display:none}
 body[data-hero="false"] #experience .narrative-actions button{font-size:12px}
 body[data-hero="false"] #stage-caption{font-size:14px}
 body[data-hero="false"] #chain-panel:has(#chain-toggle[aria-expanded="true"])~#journey-panel .record{visibility:hidden!important}
}
@media(min-width:901px) and (max-width:1170px){
 header .brand-line{display:none}
 body[data-hero="true"] #hero{width:41.8%}
 body[data-hero="true"] #hero-title{font-size:clamp(2.9rem,5vw,4rem)}
 body[data-hero="true"] #hero-title .hero-subtitle{font-size:clamp(1.5rem,2.5vw,2.2rem)}
 body[data-hero="true"] .chain-panel #chain-content{grid-template-columns:minmax(0,1fr) minmax(155px,.85fr);gap:1px .6rem}
 body[data-hero="true"] #chain-toggle small{display:block;margin:.18rem 0 0}
 body[data-hero="true"] .chain-disclosure{font-size:.53rem}
}
@media(max-width:900px){
 /* Mobile refinement follows Founder desktop acceptance. Keep the existing
    tested portrait/landscape interaction layout, with readable new copy. */
 header .preview-tag{display:none}
 header #incoterms-open{border-radius:6px;background:#204040;color:#f0ede1}
 body[data-hero="true"] #hero-title .hero-subtitle{
  display:block;margin-top:.75rem;color:#e0e5da;
  font-size:.72em;line-height:1.08;letter-spacing:-.035em;
 }
 body[data-hero="true"] .hero-visual-frame{display:none}
}
@media(prefers-reduced-motion:reduce){
 body[data-hero="true"] .hero-actions button{transition:none}
}
@media(forced-colors:active){
 body[data-hero="true"] .chain-panel{border:2px solid CanvasText;background:Canvas;color:CanvasText}
 body[data-hero="true"] .hero-visual-frame{border-color:CanvasText}
}