:root{
  --navy:#04192d;
  --navy2:#072744;
  --blue:#37c6ff;
  --green:#8fca44;
  --gold:#e3ad3d;
  --ink:#082849;
  --paper:#f5f8fb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--navy);color:#fff}
a{text-decoration:none;color:inherit}

.hero{
  position:relative;
  width:100%;
  background:#071b30;
  overflow:hidden;
}
.hero-image{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Transparent interaction map for the exact approved visual */
.hotspots{position:absolute;inset:0;pointer-events:none}
.hs{position:absolute;display:block;pointer-events:auto;border-radius:8px;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
.hs:focus,.hs:focus-visible,.hs:hover,.hs:active{background:transparent!important;box-shadow:none!important}.hs:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}

.nav-hotspots .home{left:26.5%;top:2.1%;width:4.1%;height:5.2%}
.nav-hotspots .why{left:31.9%;top:2.1%;width:5.2%;height:5.2%}
.nav-hotspots .system{left:38.6%;top:2.1%;width:6.4%;height:5.2%}
.nav-hotspots .how{left:46.5%;top:2.1%;width:7.1%;height:5.2%}
.nav-hotspots .evidence{left:55%;top:2.1%;width:5.7%;height:5.2%}
.nav-hotspots .roadmap{left:62%;top:2.1%;width:5.6%;height:5.2%}
.nav-hotspots .vision{left:69%;top:2.1%;width:6%;height:5.2%}
.nav-hotspots .about{left:76%;top:2.1%;width:4.8%;height:5.2%}
.nav-hotspots .civos{left:81.5%;top:1.7%;width:9%;height:5.6%}

.action-hotspots .discover{left:34.8%;top:49%;width:14%;height:5.4%}
.action-hotspots .film{left:50.7%;top:49%;width:12.2%;height:5.4%}
.action-hotspots .whybtn{left:3.5%;top:94%;width:15%;height:4.5%}

.mobile-header{display:none}

.section{
  min-height:60vh;
  padding:90px 8vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.section.light{background:var(--paper);color:var(--ink)}
.section.dark{background:linear-gradient(180deg,#061a2c,#031321)}
.eyebrow{font-size:13px;letter-spacing:2.4px;font-weight:800;color:var(--green);margin-bottom:14px}
.section h2{font-size:clamp(38px,5vw,78px);line-height:1.02;max-width:1100px;margin:0 0 24px}
.section>p{font-size:19px;line-height:1.7;max-width:900px}
.cards,.system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.cards article,.system-grid article{padding:28px;border-radius:14px}
.cards article{background:#fff;border:1px solid #d8e3ec;box-shadow:0 12px 34px rgba(14,41,67,.08)}
.cards article span{color:var(--gold);font-weight:800}
.cards h3,.system-grid b{font-size:21px}
.cards p,.system-grid p{line-height:1.55}
.system-grid article{background:rgba(14,54,87,.55);border:1px solid rgba(75,183,232,.2)}
.system-grid b{color:#57d0ff}

@media (max-width: 900px){
  .hotspots{display:none}
  .mobile-header{
    position:fixed;z-index:100;top:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;background:rgba(3,18,33,.92);
    backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)
  }
  .mobile-brand{font-weight:800;letter-spacing:1.8px}
  .mobile-header button{background:transparent;color:white;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:7px 10px}
  .mobile-header nav{
    position:absolute;display:none;top:57px;left:12px;right:12px;
    background:#04182b;border:1px solid rgba(70,190,240,.25);
    border-radius:10px;padding:12px
  }
  .mobile-header nav.open{display:flex;flex-direction:column}
  .mobile-header nav a{padding:12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .hero{padding-top:57px}
  .hero-image{
    width:170%;
    max-width:none;
    transform:translateX(-20%);
  }
  .section{padding:70px 7vw;min-height:50vh}
  .cards,.system-grid{grid-template-columns:1fr}
}
.wrap{width:min(1240px,100%);margin:auto}.section em{font-style:normal;color:var(--green)}.lead{font-size:clamp(18px,1.5vw,22px)!important;max-width:1000px!important}.four{grid-template-columns:repeat(4,1fr)}.three{grid-template-columns:repeat(3,1fr)}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:48px}.process article{padding:26px 22px;border-top:2px solid #b8cbd8;position:relative}.process strong{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;margin-top:-48px}.process h3{font-size:20px}.process p{line-height:1.55}.callout{margin-top:36px;padding:24px 28px;border-left:4px solid var(--green);background:#eaf1f5;font-size:18px;line-height:1.6}.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}.evidence-grid article{padding:28px;border:1px solid rgba(80,200,255,.22);background:rgba(8,47,76,.55);border-radius:14px}.evidence-grid h3{font-size:26px;color:#55d2ff;margin:0 0 8px}.timeline{display:grid;grid-template-columns:repeat(5,1fr);margin-top:50px;border-top:2px solid #b8cbd8}.timeline article{padding:28px 20px;position:relative}.timeline article:before{content:"";position:absolute;top:-8px;left:20px;width:14px;height:14px;border-radius:50%;background:var(--green)}.timeline span{font-weight:800;color:#4c8125}.timeline h3{font-size:21px}.vision{background:radial-gradient(circle at 70% 30%,#0b4162,#04182b 50%,#020d17)}.quote{margin-top:50px;font-size:clamp(28px,4vw,58px);font-weight:800;line-height:1.15;max-width:1000px;color:#fff}.about{display:grid;grid-template-columns:1.5fr .7fr;gap:70px;align-items:center}.about-card{border:1px solid rgba(90,200,255,.3);border-radius:18px;padding:36px;background:rgba(10,55,84,.45)}.about-card b{font-size:30px;line-height:1.35}.about-card em{color:var(--green);font-style:normal}footer{display:flex;gap:28px;justify-content:space-between;align-items:center;padding:28px 8vw;background:#010b13;border-top:1px solid rgba(255,255,255,.12);color:#b9c9d6;font-size:13px;letter-spacing:.5px}footer b{color:#fff;font-size:17px}@media(max-width:900px){.four,.three,.evidence-grid,.process,.timeline,.about{grid-template-columns:1fr}.process,.timeline{gap:12px;border-top:0}.process article,.timeline article{border-top:1px solid #cad8e1}.process strong{margin-top:0}.timeline article:before{display:none}footer{flex-direction:column;align-items:flex-start}.section h2{font-size:42px}}


/* Why 2100 — visual storytelling section */
.why2100{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(238,188,80,.18), transparent 24%),
    radial-gradient(circle at 90% 14%, rgba(36,171,255,.16), transparent 26%),
    linear-gradient(180deg,#f7fafc 0%,#eef4f8 62%,#e8f0f5 100%);
  color:#092847;
  padding:110px 6vw 90px;
}
.why2100:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.25;
  background-image:
    linear-gradient(rgba(9,40,71,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(9,40,71,.05) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.why-inner{position:relative;z-index:1;max-width:1480px;margin:0 auto}
.why-intro{max-width:980px;margin-bottom:44px}
.why-intro .eyebrow{color:#3f8a38}
.why-intro h2{
  font-size:clamp(42px,5.1vw,82px);
  line-height:.98;
  letter-spacing:-1.6px;
  margin:0 0 24px;
  color:#092847;
}
.why-lead{
  max-width:930px;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.58;
  color:#31536f;
  margin:0;
}
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:48px 0 26px;
}
.why-card{
  min-height:280px;
  border-radius:18px;
  padding:24px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  color:white;
  box-shadow:0 16px 44px rgba(15,44,70,.12);
  border:1px solid rgba(255,255,255,.34);
}
.why-card.warm{background:linear-gradient(145deg,#6f351d,#bd6b35)}
.why-card.violet{background:linear-gradient(145deg,#3a285d,#7650a1)}
.why-card.cyan{background:linear-gradient(145deg,#0d5164,#168da2)}
.why-card.amber{background:linear-gradient(145deg,#674809,#b07b13)}
.why-icon{
  width:54px;height:54px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:27px;
  background:rgba(255,255,255,.08);
}
.why-index{
  display:block;
  font-size:11px;
  letter-spacing:1.8px;
  opacity:.78;
  margin-bottom:10px;
}
.why-card h3{font-size:22px;margin:0 0 11px}
.why-card p{font-size:14px;line-height:1.55;margin:0;color:rgba(255,255,255,.9)}

.why-system-map{
  margin-top:18px;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:470px;
  background:
    linear-gradient(90deg,rgba(2,26,48,.97),rgba(4,43,75,.93)),
    radial-gradient(circle at 75% 50%,rgba(48,197,255,.14),transparent 35%);
  color:white;
  box-shadow:0 18px 48px rgba(5,36,62,.16);
}
.map-copy{
  padding:58px 54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.map-label{
  color:#7fcf54;
  font-size:12px;
  letter-spacing:2.2px;
  font-weight:800;
}
.map-copy h3{
  font-size:clamp(38px,4.1vw,64px);
  line-height:1;
  margin:14px 0 20px;
}
.map-copy p{
  max-width:650px;
  color:#d0deea;
  font-size:18px;
  line-height:1.6;
}
.map-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.map-badges span{
  padding:9px 13px;
  border:1px solid rgba(115,207,249,.28);
  border-radius:999px;
  font-size:12px;
  color:#bfeeff;
  background:rgba(16,84,120,.18);
}

.system-orbit{
  position:relative;
  min-height:470px;
  background:
    radial-gradient(circle at center,rgba(45,198,255,.18),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
.orbit{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(75,200,255,.35);
  border-radius:50%;
}
.orbit-a{width:58%;aspect-ratio:1}
.orbit-b{width:80%;aspect-ratio:1}
.orbit-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;border-radius:50%;
  display:grid;place-items:center;
  align-content:center;
  background:radial-gradient(circle at 38% 35%,#0f76a9,#062b4e 66%);
  border:1px solid #55d5ff;
  box-shadow:0 0 70px rgba(56,197,255,.24);
}
.orbit-center strong{font-size:46px;line-height:1}
.orbit-center small{font-size:10px;letter-spacing:1.7px;color:#8fdcff;margin-top:8px}
.node{
  position:absolute;
  padding:10px 14px;
  border-radius:8px;
  background:rgba(4,31,55,.82);
  border:1px solid rgba(93,206,255,.38);
  font-size:12px;
  font-weight:700;
  box-shadow:0 0 28px rgba(36,171,255,.1);
}
.n1{left:11%;top:23%}
.n2{right:13%;top:20%}
.n3{right:9%;bottom:22%}
.n4{left:12%;bottom:19%}
.n5{left:50%;bottom:7%;transform:translateX(-50%)}

.why-contrast{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:stretch;
}
.contrast-side{
  border-radius:18px;
  padding:32px 34px;
  min-height:210px;
  border:1px solid rgba(15,54,85,.12);
}
.contrast-side.current{
  background:linear-gradient(135deg,#fff5ed,#f6e0d1);
}
.contrast-side.future{
  background:linear-gradient(135deg,#eaf8ee,#d6efdf);
}
.contrast-kicker{
  font-size:11px;
  letter-spacing:2px;
  font-weight:800;
}
.current .contrast-kicker{color:#a4552f}
.future .contrast-kicker{color:#367e42}
.contrast-side h3{font-size:29px;line-height:1.08;margin:10px 0 12px}
.contrast-side p{margin:0;color:#456078;line-height:1.55}
.contrast-arrow{
  display:grid;place-items:center;
  font-size:42px;color:#3f6c8b;
  padding:0 6px;
}

.why-closing{
  margin-top:34px;
  padding:24px 28px;
  border-top:1px solid #afc2d1;
  border-bottom:1px solid #afc2d1;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  font-size:13px;
  letter-spacing:1.2px;
}
.why-closing span{color:#577187}
.why-closing strong{color:#2e7837}

@media(max-width:1100px){
  .why-grid{grid-template-columns:1fr 1fr}
  .why-system-map{grid-template-columns:1fr}
  .system-orbit{min-height:390px}
  .why-contrast{grid-template-columns:1fr}
  .contrast-arrow{transform:rotate(90deg);height:42px}
}
@media(max-width:700px){
  .why2100{padding:80px 5vw 65px}
  .why-grid{grid-template-columns:1fr}
  .why-card{min-height:auto}
  .map-copy{padding:36px 26px}
  .map-copy p{font-size:16px}
  .system-orbit{min-height:330px}
  .orbit-center{width:118px;height:118px}
  .orbit-center strong{font-size:36px}
  .node{font-size:10px;padding:8px 10px}
  .why-closing{flex-direction:column;align-items:flex-start}
}

/* v1.5.1 definitive Why 2100 */
.why2100-v2{position:relative;padding:104px 5vw 88px;color:#08294a;background:linear-gradient(180deg,#f4f8fb,#eaf2f7);overflow:hidden}
.why2100-v2:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 20%,rgba(28,177,226,.12),transparent 28%),radial-gradient(circle at 9% 35%,rgba(145,202,58,.11),transparent 24%);pointer-events:none}
.why-shell{position:relative;max-width:1500px;margin:auto}
.why-head{max-width:1130px}
.why-kicker{font-weight:900;letter-spacing:4px;color:#82c735;font-size:15px;margin-bottom:22px}
.why-head h2{margin:0;line-height:.98;letter-spacing:-2px;font-size:clamp(50px,5.4vw,88px)}
.why-head h2 span,.why-head h2 strong{display:block}.why-head h2 span{color:#08294a}.why-head h2 strong{color:#8dcc38;margin-top:10px}
.why-head p{font-size:clamp(18px,1.45vw,24px);line-height:1.55;max-width:1120px;color:#173d60;margin:30px 0 0}
.why-problems{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.why-problems article{background:rgba(255,255,255,.82);border:1px solid #cfdee8;border-radius:18px;padding:30px;min-height:230px;box-shadow:0 12px 32px rgba(8,41,74,.06)}
.why-problems b{color:#e5a126;font-size:17px}.why-problems h3{font-size:24px;margin:28px 0 16px}.why-problems p{font-size:16px;line-height:1.55;color:#244967;margin:0}
.why-architecture{margin-top:26px;min-height:500px;border-radius:24px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;background:linear-gradient(115deg,#061e36,#073b5b 58%,#052640);box-shadow:0 18px 50px rgba(7,38,63,.17)}
.why-arch-copy{padding:62px 58px;color:#fff;align-self:center}.why-arch-copy>span{color:#77d6f5;font-size:12px;letter-spacing:2.4px;font-weight:800}.why-arch-copy h3{font-size:clamp(38px,4vw,61px);line-height:1.02;margin:15px 0 20px}.why-arch-copy p{max-width:650px;font-size:18px;line-height:1.6;color:#c8dae7}
.why-domain-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.why-domain-row i{font-style:normal;font-size:11px;letter-spacing:1px;padding:9px 12px;border-radius:999px;border:1px solid rgba(89,210,246,.32);color:#9fe8ff;background:rgba(13,101,139,.16)}
.why-network{position:relative;min-height:500px;background:radial-gradient(circle at center,rgba(29,181,230,.22),transparent 42%)}
.why-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border:1px solid rgba(88,210,246,.34);border-radius:50%;aspect-ratio:1}.why-ring.r1{width:52%}.why-ring.r2{width:77%}
.why-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle at 35% 30%,#1592bd,#063052 65%);border:1px solid #61d9fa;box-shadow:0 0 60px rgba(35,189,234,.28);color:white}.why-core em{font-style:normal;font-size:32px;font-weight:900}.why-core small{text-align:center;color:#9ee8fb;font-size:9px;letter-spacing:1.4px;margin-top:8px}
.why-node{position:absolute;color:#d9f5ff;background:rgba(3,29,50,.84);border:1px solid rgba(86,211,246,.38);border-radius:9px;padding:10px 14px;font-size:12px;font-weight:700}.why-node.p1{left:8%;top:20%}.why-node.p2{right:10%;top:19%}.why-node.p3{right:7%;bottom:21%}.why-node.p4{left:8%;bottom:20%}.why-node.p5{left:50%;bottom:7%;translate:-50% 0}
.why-shift{display:grid;grid-template-columns:1fr 130px 1fr;gap:18px;margin-top:28px;align-items:stretch}.why-side{border-radius:18px;padding:34px 36px;min-height:220px}.why-side small{font-size:11px;letter-spacing:2px;font-weight:900}.why-side h3{font-size:30px;line-height:1.08;margin:11px 0 14px}.why-side p{font-size:15px;line-height:1.55;margin:0;color:#35546d}.why-side.legacy{background:#f8e8dd;border:1px solid #ead1c1}.why-side.legacy small{color:#a25d34}.why-side.target{background:#e3f2df;border:1px solid #c7dfbf}.why-side.target small{color:#397d37}
.why-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#356b8b}.why-arrow span{font-size:46px}.why-arrow small{text-align:center;font-size:9px;letter-spacing:1.3px;font-weight:800}
.why-statement{margin-top:36px;border-top:1px solid #b8cbd7;border-bottom:1px solid #b8cbd7;padding:24px 5px;display:flex;justify-content:space-between;gap:20px;letter-spacing:1.6px;font-size:13px}.why-statement span{color:#557289}.why-statement strong{color:#5b9c2e}
@media(max-width:1000px){.why-problems{grid-template-columns:1fr 1fr}.why-architecture{grid-template-columns:1fr}.why-network{min-height:420px}.why-shift{grid-template-columns:1fr}.why-arrow{height:70px}.why-arrow span{transform:rotate(90deg)}}
@media(max-width:650px){.why2100-v2{padding:75px 5vw 60px}.why-head h2{letter-spacing:-1px}.why-problems{grid-template-columns:1fr}.why-problems article{min-height:auto}.why-arch-copy{padding:38px 26px}.why-network{min-height:330px}.why-core{width:115px;height:115px}.why-core em{font-size:25px}.why-node{font-size:10px;padding:7px 9px}.why-statement{flex-direction:column}}


/* v1.5.2 Why 2100 compact approved flow:
   WHY 2100 -> 4 challenges -> integrated architecture -> transition -> conclusion */
.why2100-v2 .why-head{
  max-width:none;
  margin:0;
}
.why2100-v2 .why-kicker{
  margin-bottom:24px;
}
.why2100-v2 .why-problems{
  margin-top:0;
}

/* v1.5.3 streamlined Why 2100:
   WHY 2100 -> integrated architecture -> transition -> conclusion */
.why2100-v2 .why-kicker{margin-bottom:24px}
.why2100-v2 .why-architecture{margin-top:0}


/* v1.5.4 Why 2100 approved narrative flow */
.why2100-v2 .why-context{
  max-width:1050px;
  margin:-4px 0 32px;
}
.why2100-v2 .why-context p{
  margin:0;
  color:#31536f;
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.58;
}
.why2100-v2 .why-problems{
  margin:0 0 26px;
}
.why2100-v2 .why-architecture{
  margin-top:0;
}
@media(max-width:650px){
  .why2100-v2 .why-context{margin-bottom:24px}
}


/* v1.5.5 challenge-card SVG illustrations */
.why2100-v2 .why-problems .challenge-card{
  position:relative;
  overflow:hidden;
}
.why2100-v2 .why-problems .card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  min-height:72px;
}
.why2100-v2 .why-problems .card-top>b{
  padding-top:7px;
}
.why2100-v2 .challenge-icon{
  width:66px;
  height:66px;
  flex:0 0 66px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(244,250,253,.96),rgba(230,241,248,.82));
  border:1px solid rgba(24,91,127,.12);
}
.why2100-v2 .challenge-icon svg{
  width:47px;
  height:47px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.why2100-v2 .icon-human{color:#26a9d6}
.why2100-v2 .icon-planet{color:#78b63d}
.why2100-v2 .icon-resilience{color:#347db7}
.why2100-v2 .icon-future{color:#d89b25}
.why2100-v2 .challenge-card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.why2100-v2 .challenge-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 42px rgba(8,41,74,.10);
  border-color:#b8d1df;
}
.why2100-v2 .challenge-card:hover .challenge-icon{
  transform:scale(1.035);
}
.why2100-v2 .challenge-icon{
  transition:transform .22s ease;
}
@media(max-width:650px){
  .why2100-v2 .challenge-icon{width:58px;height:58px;flex-basis:58px}
  .why2100-v2 .challenge-icon svg{width:41px;height:41px}
}


/* v1.6 THE SYSTEM */
.system-section{
  position:relative;
  overflow:hidden;
  padding:110px 5vw 90px;
  color:#fff;
  background:
    radial-gradient(circle at 50% 34%,rgba(35,178,232,.12),transparent 30%),
    radial-gradient(circle at 10% 85%,rgba(117,194,57,.08),transparent 24%),
    linear-gradient(180deg,#031522 0%,#061d31 55%,#041725 100%);
}
.system-section:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(74,169,212,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,169,212,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,black 10%,black 90%,transparent);
}
.system-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.system-head{max-width:1040px}
.system-kicker{color:#79d0f2;font-size:14px;letter-spacing:3.5px;font-weight:900;margin-bottom:18px}
.system-head h2{
  margin:0;
  font-size:clamp(48px,5.2vw,84px);
  line-height:.98;
  letter-spacing:-1.8px;
}
.system-head h2 span{color:#8fd144}
.system-head p{
  max-width:1000px;
  margin:28px 0 0;
  color:#c5d8e7;
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.62;
}

.system-stage{
  margin-top:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
  align-items:stretch;
}
.system-core{
  position:relative;
  min-height:830px;
  border:1px solid rgba(95,205,246,.22);
  border-radius:24px;
  background:
    radial-gradient(circle at center,rgba(34,170,223,.13),transparent 34%),
    linear-gradient(145deg,rgba(5,38,65,.84),rgba(3,25,43,.95));
  box-shadow:inset 0 0 70px rgba(21,119,163,.05),0 18px 52px rgba(0,0,0,.18);
  overflow:hidden;
}
.core-glow{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:310px;height:310px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,200,255,.18),transparent 66%);
  filter:blur(5px);
}
.core-ring{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(83,207,247,.24);
}
.ring-1{width:30%}.ring-2{width:51%}.ring-3{width:72%}
.core-center{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:190px;height:190px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  background:radial-gradient(circle at 35% 30%,#1688b2,#063052 62%);
  border:1px solid #68dafb;
  box-shadow:0 0 65px rgba(37,192,239,.22);
}
.core-center strong{font-size:44px;letter-spacing:-1px}
.core-center span{font-size:10px;line-height:1.5;letter-spacing:1.7px;color:#9de7fb;margin-top:8px}

.system-node{
  position:absolute;
  width:245px;
  min-height:220px;
  border-radius:18px;
  padding:20px;
  color:#fff;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(145deg,rgba(8,46,76,.94),rgba(3,28,48,.92));
  box-shadow:0 12px 36px rgba(0,0,0,.20);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.system-node:hover{
  transform:translateY(-6px);
  border-color:rgba(89,213,251,.45);
  box-shadow:0 20px 44px rgba(0,0,0,.28);
}
.system-node>span{position:absolute;top:18px;right:18px;font-size:11px;letter-spacing:1.4px;color:#6bbbd8}
.system-node h3{font-size:20px;line-height:1.05;margin:15px 0 9px}
.system-node p{margin:0;color:#c7d7e4;font-size:13px;line-height:1.48}
.system-node button{
  margin-top:14px;padding:7px 10px;border-radius:6px;
  background:transparent;border:1px solid rgba(89,209,247,.28);
  color:#86ddf7;font-size:10px;letter-spacing:1.2px;cursor:pointer
}
.system-node-icon{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  border:1px solid currentColor;background:rgba(255,255,255,.03)
}
.system-node-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.system-node.physical{left:6%;top:9%;color:#80c7f0}
.system-node.digital{right:6%;top:9%;color:#63d6f3}
.system-node.governance{right:3%;bottom:9%;color:#7e98ff}
.system-node.economic{left:50%;bottom:3%;translate:-50% 0;color:#e5b14f}
.system-node.human{left:3%;bottom:9%;color:#92cf52}

.system-detail{
  border-radius:24px;
  border:1px solid rgba(100,205,244,.18);
  background:linear-gradient(180deg,rgba(7,39,64,.96),rgba(4,27,47,.98));
  padding:30px;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}
.detail-label{font-size:11px;letter-spacing:2.3px;font-weight:900;color:#80d9f4}
.system-detail h3{font-size:34px;line-height:1.05;margin:14px 0}
.system-detail>p{color:#bdd0de;line-height:1.55;font-size:14px}
.detail-flow{display:flex;flex-direction:column;gap:8px;margin-top:28px}
.detail-flow span{
  padding:10px 12px;border-radius:8px;text-align:center;font-size:11px;font-weight:800;letter-spacing:1px;
  border:1px solid rgba(96,204,241,.18);background:rgba(19,83,113,.18)
}
.detail-flow i{font-style:normal;text-align:center;color:#6dcaeb}

.system-principles{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-top:26px
}
.system-principles article{
  padding:24px;border-radius:16px;
  background:rgba(7,39,63,.68);
  border:1px solid rgba(93,190,229,.15)
}
.system-principles strong{display:block;font-size:17px;color:#9de3f6;margin-bottom:9px}
.system-principles p{margin:0;color:#bcd0de;font-size:13px;line-height:1.5}
.system-close{
  margin-top:34px;padding:22px 4px;
  border-top:1px solid rgba(122,190,218,.26);
  border-bottom:1px solid rgba(122,190,218,.26);
  display:flex;justify-content:space-between;gap:24px;
  font-size:12px;letter-spacing:1.5px
}
.system-close span{color:#7f9fb4}
.system-close strong{color:#8fd144}

@media(max-width:1200px){
  .system-stage{grid-template-columns:1fr}
  .system-detail{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .detail-flow{margin-top:0}
}
@media(max-width:980px){
  .system-core{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding:22px;
  }
  .core-glow,.core-ring,.core-center{display:none}
  .system-node{
    position:relative!important;
    inset:auto!important;
    width:auto;min-height:210px;translate:none!important;
  }
  .system-node.economic{grid-column:1/-1}
  .system-principles{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .system-section{padding:78px 5vw 62px}
  .system-core{grid-template-columns:1fr}
  .system-node.economic{grid-column:auto}
  .system-detail{grid-template-columns:1fr}
  .system-principles{grid-template-columns:1fr}
  .system-close{flex-direction:column}
}


/* v1.6.1 — The System desktop node collision fix */
@media(min-width:981px){
  .system-core{min-height:900px}

  .system-node{
    width:220px;
    min-height:205px;
    padding:18px;
  }

  /* Five non-overlapping anchor positions around the core */
  .system-node.physical{
    left:4%;
    top:7%;
    right:auto;
    bottom:auto;
  }
  .system-node.digital{
    right:4%;
    top:7%;
    left:auto;
    bottom:auto;
  }
  .system-node.human{
    left:4%;
    bottom:6%;
    top:auto;
    right:auto;
  }
  .system-node.governance{
    right:4%;
    bottom:6%;
    top:auto;
    left:auto;
  }
  .system-node.economic{
    left:50%;
    bottom:3%;
    top:auto;
    right:auto;
    translate:-50% 0;
  }
}

/* Keep a little extra clearance on narrower desktop widths */
@media(min-width:981px) and (max-width:1280px){
  .system-node{
    width:195px;
    min-height:195px;
    padding:16px;
  }
  .system-node h3{font-size:18px}
  .system-node p{font-size:12px}
  .system-node.human{left:2%}
  .system-node.governance{right:2%}
  .system-node.economic{bottom:2%}
}


/* v1.6.2 — contextual colors for The System detail flow */
.system-detail{
  --system-accent:#63d6f3;
  --system-accent-soft:rgba(99,214,243,.18);
  --system-accent-border:rgba(99,214,243,.32);
  transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;
}
.system-detail.theme-default{
  --system-accent:#63d6f3;
  --system-accent-soft:rgba(99,214,243,.18);
  --system-accent-border:rgba(99,214,243,.32);
}
.system-detail.theme-physical{
  --system-accent:#80c7f0;
  --system-accent-soft:rgba(128,199,240,.17);
  --system-accent-border:rgba(128,199,240,.34);
}
.system-detail.theme-digital{
  --system-accent:#63d6f3;
  --system-accent-soft:rgba(99,214,243,.18);
  --system-accent-border:rgba(99,214,243,.34);
}
.system-detail.theme-governance{
  --system-accent:#7e98ff;
  --system-accent-soft:rgba(126,152,255,.16);
  --system-accent-border:rgba(126,152,255,.34);
}
.system-detail.theme-economic{
  --system-accent:#e5b14f;
  --system-accent-soft:rgba(229,177,79,.16);
  --system-accent-border:rgba(229,177,79,.34);
}
.system-detail.theme-human{
  --system-accent:#92cf52;
  --system-accent-soft:rgba(146,207,82,.16);
  --system-accent-border:rgba(146,207,82,.36);
}

.system-detail .detail-label,
.system-detail h3{
  color:var(--system-accent);
}
.system-detail{
  border-color:var(--system-accent-border);
  box-shadow:0 18px 44px rgba(0,0,0,.14),0 0 36px var(--system-accent-soft);
}
.system-detail .detail-flow span{
  color:var(--system-accent);
  border-color:var(--system-accent-border);
  background:linear-gradient(180deg,var(--system-accent-soft),rgba(7,39,63,.18));
}
.system-detail .detail-flow i{
  color:var(--system-accent);
  font-weight:800;
  font-size:18px;
}

.system-node.is-selected{
  border-color:currentColor;
  box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 28px color-mix(in srgb,currentColor 28%,transparent);
}
.system-node.is-selected button{
  color:currentColor;
  border-color:currentColor;
  background:rgba(255,255,255,.04);
}


/* v1.7 HOW IT WORKS */
.how-section{
  position:relative;
  overflow:hidden;
  padding:110px 5vw 92px;
  color:#0a2a4a;
  background:
    radial-gradient(circle at 88% 12%,rgba(61,177,217,.12),transparent 25%),
    radial-gradient(circle at 8% 70%,rgba(142,202,58,.10),transparent 24%),
    linear-gradient(180deg,#f5f9fb,#eaf2f6);
}
.how-section:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,42,74,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,42,74,.035) 1px,transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
}
.how-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.how-head{max-width:1060px}
.how-kicker{color:#66a52f;font-size:14px;letter-spacing:3.4px;font-weight:900;margin-bottom:18px}
.how-head h2{margin:0;font-size:clamp(48px,5.2vw,82px);line-height:.98;letter-spacing:-1.7px}
.how-head h2 span{color:#77bd36}
.how-head p{margin:28px 0 0;max-width:1040px;color:#31536e;font-size:clamp(17px,1.35vw,22px);line-height:1.62}

.how-role-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.role-card{
  border-radius:19px;padding:28px;min-height:270px;
  background:rgba(255,255,255,.82);
  border:1px solid #cadce7;
  box-shadow:0 14px 38px rgba(7,39,67,.07);
}
.role-icon{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;border:1px solid currentColor}
.role-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.people-role{color:#2b7ca7}.civos-role{color:#53a63a}.safeguards-role{color:#7766c3}
.role-card>span{font-size:11px;letter-spacing:2px;font-weight:900}
.role-card h3{font-size:26px;line-height:1.08;margin:11px 0;color:#0a2a4a}
.role-card p{color:#385b75;line-height:1.55;margin:0;font-size:15px}

.decision-engine{
  margin-top:28px;border-radius:24px;padding:34px;
  background:linear-gradient(145deg,#041d32,#073a58 65%,#062b44);
  border:1px solid rgba(100,208,246,.20);
  color:#fff;
  box-shadow:0 18px 52px rgba(7,37,62,.14);
}
.engine-head span{font-size:11px;letter-spacing:2.3px;color:#77d8f5;font-weight:900}
.engine-head h3{font-size:36px;margin:10px 0 8px}
.engine-head p{margin:0;color:#c6d9e7}

.decision-steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap:10px;align-items:stretch;margin-top:30px
}
.decision-step{
  min-height:205px;
  border-radius:15px;padding:17px;
  border:1px solid rgba(100,203,241,.16);
  background:rgba(9,55,83,.46);
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
  cursor:pointer;
}
.decision-step:hover,.decision-step.active{
  transform:translateY(-4px);
  border-color:#69d5f5;
  background:rgba(15,78,111,.62);
}
.step-num{font-size:10px;letter-spacing:1.4px;color:#72cde9}
.step-icon{font-size:27px;color:#93d643;margin:12px 0 9px}
.decision-step h4{font-size:17px;margin:0 0 8px}
.decision-step p{font-size:12px;line-height:1.48;color:#c8d9e5;margin:0}
.flow-arrow{display:grid;place-items:center;color:#6fd3f3;font-size:19px}

.feedback-loop{
  margin-top:24px;padding:16px 18px;border-radius:12px;
  display:flex;justify-content:center;align-items:center;gap:24px;
  border:1px solid rgba(127,206,78,.22);
  background:rgba(122,192,52,.07);
  color:#9edc63;font-size:11px;letter-spacing:1.4px
}
.feedback-loop i{font-style:normal;font-size:25px}

.how-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.how-panel{border-radius:18px;padding:30px;min-height:335px}
.how-panel>span{font-size:11px;letter-spacing:2px;font-weight:900}
.how-panel h3{font-size:29px;line-height:1.08;margin:12px 0 14px}
.how-panel p,.how-panel li{font-size:14px;line-height:1.55}
.how-panel ul{padding-left:19px;margin:18px 0 0}
.how-panel li{margin:7px 0}
.how-panel.authority{background:#e8f3f8;border:1px solid #c6dce7}
.how-panel.authority>span{color:#2d7ca4}
.how-panel.transparency{background:#edf4e7;border:1px solid #d2e1c6}
.how-panel.transparency>span{color:#5e9a34}
.how-panel.local{background:#f2edf8;border:1px solid #d9cdea}
.how-panel.local>span{color:#7559a5}

.how-example{
  margin-top:28px;
  display:grid;grid-template-columns:1.25fr .75fr;gap:22px;
  border-radius:22px;overflow:hidden;
  background:linear-gradient(130deg,#0a2c49,#0b4b63);
  color:#fff
}
.example-copy{padding:46px}
.example-copy>span{color:#9adb59;font-size:11px;letter-spacing:2px;font-weight:900}
.example-copy h3{font-size:40px;line-height:1.02;margin:12px 0 16px}
.example-copy p{font-size:17px;line-height:1.62;color:#d3e2eb}
.example-flow{padding:32px;background:rgba(1,19,32,.22);display:flex;flex-direction:column;justify-content:center;gap:9px}
.example-flow div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(112,210,244,.18)}
.example-flow b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#77bd36;color:#08233b}
.example-flow span{font-size:13px;font-weight:700}
.example-flow i{font-style:normal;text-align:center;color:#70d5f5}

.how-close{
  margin-top:34px;padding:23px 4px;
  border-top:1px solid #b4c8d5;border-bottom:1px solid #b4c8d5;
  display:flex;justify-content:space-between;gap:22px;
  font-size:12px;letter-spacing:1.4px
}
.how-close span{color:#58748a}.how-close strong{color:#5c9d31}

@media(max-width:1150px){
  .decision-steps{grid-template-columns:repeat(2,1fr)}
  .flow-arrow{display:none}
  .how-role-row,.how-detail-grid{grid-template-columns:1fr 1fr}
  .how-role-row .role-card:last-child,.how-detail-grid .how-panel:last-child{grid-column:1/-1}
}
@media(max-width:800px){
  .how-example{grid-template-columns:1fr}
}
@media(max-width:650px){
  .how-section{padding:78px 5vw 62px}
  .how-role-row,.how-detail-grid{grid-template-columns:1fr}
  .how-role-row .role-card:last-child,.how-detail-grid .how-panel:last-child{grid-column:auto}
  .decision-engine{padding:24px 18px}
  .decision-steps{grid-template-columns:1fr}
  .feedback-loop{flex-direction:column;gap:6px;text-align:center}
  .example-copy{padding:32px 24px}
  .how-close{flex-direction:column}
}


/* v1.7.1 — center the water-shortage example text on the vertical flow axis */
.example-flow div{
  position:relative;
  justify-content:center;
  text-align:center;
  min-height:54px;
}
.example-flow div b{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
}
.example-flow div span{
  display:block;
  width:100%;
  padding:0 42px;
  text-align:center;
}
.example-flow i{
  display:block;
  width:100%;
  text-align:center;
}


/* v1.8 EVIDENCE */
.evidence-section{
  position:relative;
  overflow:hidden;
  padding:110px 5vw 92px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 18%,rgba(61,154,228,.14),transparent 26%),
    radial-gradient(circle at 12% 82%,rgba(127,198,64,.08),transparent 22%),
    linear-gradient(180deg,#061725 0%,#09243a 52%,#061827 100%);
}
.evidence-section:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(79,177,218,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,177,218,.04) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,black 7%,black 92%,transparent);
  pointer-events:none;
}
.evidence-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.evidence-head{max-width:1080px}
.evidence-kicker{color:#75d4f2;font-size:14px;letter-spacing:3.5px;font-weight:900;margin-bottom:18px}
.evidence-head h2{font-size:clamp(50px,5.4vw,84px);line-height:.98;letter-spacing:-1.7px;margin:0}
.evidence-head h2 span{color:#91d044}
.evidence-head p{max-width:1030px;color:#c5d7e4;font-size:clamp(17px,1.35vw,22px);line-height:1.62;margin:28px 0 0}

.evidence-top-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.evidence-card{
  min-height:355px;padding:26px;border-radius:19px;
  background:linear-gradient(150deg,rgba(10,50,78,.96),rgba(5,31,51,.98));
  border:1px solid rgba(108,206,242,.16);
  box-shadow:0 14px 38px rgba(0,0,0,.18);
}
.evidence-card-top{display:flex;justify-content:space-between;align-items:center}
.evidence-tag{font-size:11px;letter-spacing:1.7px;font-weight:900;color:#81d8f1}
.evidence-symbol{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  border:1px solid currentColor;font-size:24px
}
.qvf .evidence-symbol{color:#67d2ef}.qvm .evidence-symbol{color:#90ce4b}.ipfr .evidence-symbol{color:#e0ae49}.twin .evidence-symbol{color:#8f87e5}
.evidence-card h3{font-size:24px;line-height:1.08;margin:24px 0 14px}
.evidence-card>p{color:#c4d5e1;line-height:1.55;font-size:14px}
.evidence-card ul{padding-left:18px;margin:18px 0 0;color:#9fb8c9;font-size:13px;line-height:1.55}

.evidence-pipeline{
  margin-top:26px;border-radius:23px;padding:36px;
  background:#f5f9fb;color:#0b2b4b;
  box-shadow:0 18px 48px rgba(0,0,0,.15)
}
.pipeline-intro{max-width:860px}
.pipeline-intro>span{font-size:11px;letter-spacing:2.2px;font-weight:900;color:#4a95b9}
.pipeline-intro h3{font-size:38px;line-height:1.05;margin:10px 0 12px}
.pipeline-intro p{color:#47647a;line-height:1.55;margin:0}
.pipeline-steps{
  margin-top:28px;display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap:10px;align-items:center
}
.pipe-step{
  min-height:120px;padding:18px;border-radius:14px;
  border:1px solid #d2e0e8;background:#fff;
  display:flex;flex-direction:column;justify-content:center
}
.pipe-step b{font-size:11px;color:#d99a27}.pipe-step strong{font-size:17px;margin:9px 0 5px}.pipe-step span{font-size:12px;color:#557185}
.pipeline-steps>i{font-style:normal;color:#4aa4c8;font-size:19px}

.evidence-dashboard{
  margin-top:26px;display:grid;grid-template-columns:.9fr 1.4fr .55fr;gap:20px;
  padding:34px;border-radius:22px;
  background:linear-gradient(140deg,#0a2e48,#0b445e);
  border:1px solid rgba(100,202,239,.18)
}
.dashboard-copy>span,.stress-copy>span{font-size:11px;letter-spacing:2px;font-weight:900;color:#79d6f3}
.dashboard-copy h3{font-size:34px;line-height:1.06;margin:10px 0 14px}
.dashboard-copy p{color:#cadce7;line-height:1.55}
.metric-matrix{display:grid;gap:13px;align-content:center}
.metric-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.metric-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.metric-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#61c6e8,#8fcd43)}
.dashboard-note{
  align-self:center;border-radius:14px;padding:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)
}
.dashboard-note strong{font-size:14px;color:#9adf61}.dashboard-note p{font-size:12px;line-height:1.5;color:#bfd1de}

.stress-panel{
  margin-top:26px;display:grid;grid-template-columns:1.05fr .95fr;gap:20px;
  min-height:470px;border-radius:23px;overflow:hidden;
  background:linear-gradient(125deg,#251821,#091e31 52%,#07283c);
  border:1px solid rgba(235,86,86,.15)
}
.stress-copy{padding:48px}
.stress-copy>span{color:#ff7373}
.stress-copy h3{font-size:42px;line-height:1.03;margin:12px 0 16px}
.stress-copy p{color:#d7c8cb;line-height:1.58;max-width:700px}
.stress-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.stress-tags span{font-size:11px;padding:9px 12px;border-radius:999px;background:rgba(170,49,49,.13);border:1px solid rgba(255,104,104,.24);color:#ffb0b0}
.stress-visual{position:relative;min-height:470px;background:radial-gradient(circle at center,rgba(223,61,61,.15),transparent 42%)}
.stress-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:1px solid rgba(255,94,94,.28);aspect-ratio:1}
.stress-ring.s1{width:38%}.stress-ring.s2{width:60%}.stress-ring.s3{width:80%}
.stress-core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:140px;height:140px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#7c2730,#2e101b 70%);
  border:1px solid #ff6f72;box-shadow:0 0 58px rgba(255,70,70,.20)
}
.stress-core strong{text-align:center;font-size:25px;line-height:.9}.stress-core span{font-size:9px;letter-spacing:1.4px;color:#ffabab;margin-top:8px}
.stress-point{position:absolute;padding:9px 12px;border-radius:8px;background:rgba(26,18,25,.82);border:1px solid rgba(255,107,107,.30);font-size:11px;color:#ffc1c1}
.sp1{left:9%;top:20%}.sp2{right:9%;top:17%}.sp3{right:7%;bottom:20%}.sp4{left:8%;bottom:19%}.sp5{left:50%;bottom:7%;translate:-50% 0}

.evidence-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.evidence-principles article{padding:24px;border-radius:16px;background:rgba(10,45,70,.66);border:1px solid rgba(98,193,231,.14)}
.evidence-principles strong{display:block;color:#8ddbef;font-size:17px;margin-bottom:9px}
.evidence-principles p{margin:0;color:#bfd0dc;line-height:1.5;font-size:13px}

.evidence-close{
  margin-top:34px;padding:23px 4px;border-top:1px solid rgba(117,188,215,.25);border-bottom:1px solid rgba(117,188,215,.25);
  display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.5px
}
.evidence-close span{color:#819eb2}.evidence-close strong{color:#92d145}

@media(max-width:1200px){
  .evidence-top-grid{grid-template-columns:1fr 1fr}
  .evidence-dashboard{grid-template-columns:1fr 1fr}
  .dashboard-note{grid-column:1/-1}
  .pipeline-steps{grid-template-columns:1fr 1fr 1fr}
  .pipeline-steps>i{display:none}
}
@media(max-width:850px){
  .stress-panel{grid-template-columns:1fr}
  .evidence-principles{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .evidence-section{padding:78px 5vw 62px}
  .evidence-top-grid{grid-template-columns:1fr}
  .evidence-dashboard{grid-template-columns:1fr}
  .pipeline-steps{grid-template-columns:1fr}
  .evidence-principles{grid-template-columns:1fr}
  .stress-copy{padding:34px 24px}
  .stress-visual{min-height:350px}
  .evidence-close{flex-direction:column}
}


/* v1.8.1 — Evidence visual library integration */
.evidence-card{
  display:flex;
  flex-direction:column;
}
.evidence-card ul{
  margin-bottom:20px;
}
.visual-actions{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid rgba(111,201,236,.14);
  display:flex;
  flex-direction:column;
  gap:9px;
}
.visual-view,
.visual-download{
  width:100%;
  min-height:42px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 13px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.15px;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.visual-view{
  color:#8ee4fb;
  border:1px solid rgba(92,208,246,.34);
  background:rgba(27,113,150,.10);
}
.visual-download{
  color:#9fc0d0;
  border:1px solid rgba(159,192,208,.16);
  background:rgba(255,255,255,.025);
}
.visual-view:hover,
.visual-download:hover{
  transform:translateY(-2px);
}
.visual-view:hover{
  border-color:#76dcf8;
  background:rgba(40,150,190,.16);
}
.visual-download:hover{
  color:#fff;
  border-color:rgba(255,255,255,.32);
}

.visual-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.visual-modal.open{display:flex}
.visual-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,11,20,.86);
  backdrop-filter:blur(10px);
}
.visual-modal-dialog{
  position:relative;
  width:min(1500px,96vw);
  height:min(92vh,980px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(98,206,245,.30);
  background:#061b2d;
  box-shadow:0 28px 90px rgba(0,0,0,.55);
}
.visual-modal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 20px;
  border-bottom:1px solid rgba(111,204,239,.18);
  background:linear-gradient(180deg,#092844,#061d31);
}
.visual-modal-kicker{
  display:block;
  color:#80d9f4;
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:900;
  margin-bottom:5px;
}
.visual-modal-toolbar h2{
  margin:0;
  font-size:20px;
  color:#fff;
}
.visual-modal-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.visual-modal-actions a{
  padding:10px 13px;
  border-radius:7px;
  border:1px solid rgba(143,208,68,.42);
  color:#a9df72;
  font-size:10px;
  letter-spacing:1px;
  font-weight:800;
}
.visual-modal-close{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:25px;
  cursor:pointer;
}
.visual-modal-stage{
  flex:1;
  overflow:auto;
  padding:18px;
  background:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    #031421;
  background-size:30px 30px;
  background-position:0 0,15px 15px;
}
.visual-modal-stage img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}
.visual-modal-help{
  padding:9px 18px;
  text-align:center;
  font-size:10px;
  letter-spacing:.7px;
  color:#7f9caf;
  border-top:1px solid rgba(111,204,239,.10);
}
body.visual-modal-open{overflow:hidden}

@media(max-width:700px){
  .visual-modal{padding:8px}
  .visual-modal-dialog{width:100%;height:96vh}
  .visual-modal-toolbar{align-items:flex-start;padding:14px}
  .visual-modal-actions a{display:none}
  .visual-modal-toolbar h2{font-size:16px}
  .visual-modal-stage{padding:8px}
}

/* v1.9 ROADMAP */
.roadmap-section{position:relative;overflow:hidden;padding:110px 5vw 92px;color:#0a2b4a;background:radial-gradient(circle at 84% 15%,rgba(61,172,219,.12),transparent 25%),radial-gradient(circle at 10% 82%,rgba(142,202,58,.11),transparent 25%),linear-gradient(180deg,#f5f9fb,#eaf2f6)}
.roadmap-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(8,43,73,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(8,43,73,.03) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.roadmap-shell{position:relative;z-index:1;max-width:1500px;margin:auto}.roadmap-head{max-width:1080px}.roadmap-kicker{color:#69a734;font-size:14px;letter-spacing:3.5px;font-weight:900;margin-bottom:18px}.roadmap-head h2{margin:0;font-size:clamp(50px,5.4vw,84px);line-height:.98;letter-spacing:-1.8px}.roadmap-head h2 span{color:#7fc23d}.roadmap-head>p{max-width:1020px;font-size:clamp(17px,1.35vw,22px);line-height:1.62;color:#31536e;margin:28px 0 0}
.roadmap-note{margin-top:24px;display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-left:3px solid #d6a03a;background:rgba(255,255,255,.62);max-width:1000px;font-size:12px;line-height:1.5;color:#526e82}.roadmap-note b{color:#a86e15;white-space:nowrap}
.roadmap-now{margin-top:44px;border-radius:23px;padding:34px;background:linear-gradient(145deg,#061f35,#0a425d);color:#fff;border:1px solid rgba(93,205,244,.20);box-shadow:0 18px 48px rgba(7,36,61,.13)}.roadmap-now-copy{max-width:850px}.roadmap-now-copy>span,.century-copy>span,.gates-copy>span,.library-copy>span{font-size:11px;letter-spacing:2.2px;font-weight:900;color:#78d8f3}.roadmap-now-copy h3,.century-copy h3,.gates-copy h3,.library-copy h3{font-size:37px;line-height:1.05;margin:10px 0 12px}.roadmap-now-copy p{color:#c7d9e5;line-height:1.55}
.roadmap-now-steps{margin-top:28px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center}.roadmap-now-steps article{min-height:170px;border-radius:15px;padding:19px;background:rgba(8,55,84,.48);border:1px solid rgba(105,205,241,.17)}.roadmap-now-steps b{display:block;font-size:11px;color:#98da5e;margin-bottom:14px}.roadmap-now-steps strong{display:block;font-size:18px}.roadmap-now-steps span{display:block;font-size:12px;line-height:1.45;color:#bdd1de;margin-top:9px}.roadmap-now-steps>i{font-style:normal;color:#72d5f2;font-size:20px}
.roadmap-century{margin-top:26px;border-radius:23px;padding:38px;background:#fff;border:1px solid #cfdee7;box-shadow:0 16px 42px rgba(7,39,67,.07)}.century-copy{max-width:900px}.century-copy>span{color:#4e94b5}.century-copy p{color:#49677c;line-height:1.55}
.century-line{position:relative;margin-top:48px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding-top:28px}.century-track{position:absolute;left:5%;right:5%;top:38px;height:3px;background:linear-gradient(90deg,#7fc23d,#50b9df,#8776cf);border-radius:999px}.phase{position:relative;padding-top:36px}.phase-dot{position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:#fff;border:5px solid #68b7d7;box-shadow:0 0 0 4px #e7f1f6}.p0 .phase-dot,.p1 .phase-dot{border-color:#82c33f}.p2 .phase-dot{border-color:#4bb9d8}.p3 .phase-dot{border-color:#4b95d8}.p4 .phase-dot{border-color:#796fc9}.end-dot{border-color:#a3cf64}.phase>span{font-size:10px;letter-spacing:1.5px;font-weight:900;color:#607e93}.phase>b{display:block;font-size:12px;color:#a87824;margin-top:6px}.phase h4{font-size:20px;line-height:1.05;margin:10px 0 8px}.phase p{font-size:12px;line-height:1.48;color:#597286;margin:0}.phase-end h4{color:#62982e}
.roadmap-gates{margin-top:26px;display:grid;grid-template-columns:.75fr 1.25fr;gap:20px;padding:34px;border-radius:22px;background:linear-gradient(130deg,#f1f6f9,#e6f0f5);border:1px solid #ccdde7}.gates-copy>span{color:#4a96b8}.gates-copy p{color:#4a687d;line-height:1.55}.gate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gate-grid article{padding:22px;border-radius:15px;background:#fff;border:1px solid #d4e1e9}.gate-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#edf6e7;color:#71ad3d;font-size:20px}.gate-grid h4{font-size:18px;margin:15px 0 8px}.gate-grid p{font-size:12px;line-height:1.45;color:#5b7486;margin:0}
.roadmap-library{margin-top:26px;padding:36px;border-radius:23px;background:linear-gradient(150deg,#071e33,#092f49);color:#fff;border:1px solid rgba(99,201,239,.18)}.library-copy>span{color:#7ad8f4}.library-copy p{color:#c6d7e3}.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}.library-grid>article{display:flex;flex-direction:column;min-height:290px;padding:23px;border-radius:16px;background:rgba(9,56,84,.47);border:1px solid rgba(103,201,239,.15)}.library-grid>article>span{font-size:11px;color:#92d34c;font-weight:900;letter-spacing:1.5px}.library-grid h4{font-size:20px;line-height:1.08;margin:14px 0 10px}.library-grid p{font-size:13px;line-height:1.5;color:#c4d5e1}.roadmap-actions{margin-top:auto;padding-top:18px;border-top:1px solid rgba(101,194,229,.13);display:flex;flex-direction:column;gap:8px}.roadmap-actions button,.roadmap-actions a{min-height:39px;border-radius:7px;padding:9px 11px;font-size:9px;letter-spacing:1.1px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.roadmap-actions button{cursor:pointer;background:rgba(37,131,169,.12);border:1px solid rgba(91,207,245,.30);color:#83ddf7}.roadmap-actions a{border:1px solid rgba(255,255,255,.12);color:#a9c2d1}
.roadmap-close{margin-top:34px;padding:23px 4px;border-top:1px solid #b5c8d4;border-bottom:1px solid #b5c8d4;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.4px}.roadmap-close span{color:#5f7a8e}.roadmap-close strong{color:#609a32}
@media(max-width:1200px){.roadmap-now-steps{grid-template-columns:1fr 1fr 1fr}.roadmap-now-steps>i{display:none}.century-line{grid-template-columns:repeat(3,1fr);row-gap:34px}.century-track{display:none}.roadmap-gates{grid-template-columns:1fr}.library-grid{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.gate-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.roadmap-section{padding:78px 5vw 62px}.roadmap-note{flex-direction:column}.roadmap-now{padding:24px 18px}.roadmap-now-steps{grid-template-columns:1fr}.roadmap-century{padding:26px 20px}.century-line{grid-template-columns:1fr}.phase{padding-left:38px;padding-top:0;min-height:145px}.phase-dot{left:0;top:2px}.gate-grid,.library-grid{grid-template-columns:1fr}.roadmap-close{flex-direction:column}}


/* v2.0 VISION 2100 */
.vision-section{
  position:relative;
  overflow:hidden;
  padding:110px 5vw 94px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 18%,rgba(222,178,78,.10),transparent 24%),
    radial-gradient(circle at 84% 20%,rgba(40,177,224,.13),transparent 27%),
    linear-gradient(180deg,#041725,#07253a 52%,#061827);
}
.vision-section:before{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(87,184,222,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(87,184,222,.04) 1px,transparent 1px);
  background-size:46px 46px;pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent,black 7%,black 92%,transparent);
}
.vision-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.vision-head{max-width:1120px}
.vision-kicker{color:#7bd9f4;font-size:14px;letter-spacing:3.5px;font-weight:900;margin-bottom:18px}
.vision-head h2{margin:0;font-size:clamp(50px,5.4vw,84px);line-height:.98;letter-spacing:-1.8px}
.vision-head h2 span{color:#9ad84f}
.vision-head>p{max-width:1050px;font-size:clamp(17px,1.35vw,22px);line-height:1.62;color:#c5d8e5;margin:28px 0 0}

.vision-cinematic{
  position:relative;
  min-height:650px;
  margin-top:48px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(111,211,246,.20);
  box-shadow:0 22px 60px rgba(0,0,0,.25);
}
.vision-image{
  position:absolute;inset:0;
  background-image:url('assets/vision/20-integrated-future-architecture.webp');
  background-size:cover;background-position:center;
  transform:scale(1.02)
}
.vision-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,18,31,.92) 0%,rgba(3,18,31,.70) 36%,rgba(3,18,31,.16) 72%,rgba(3,18,31,.30) 100%)
}
.vision-cinematic-copy{position:absolute;z-index:2;left:5%;top:50%;translate:0 -50%;width:min(600px,46%)}
.vision-cinematic-copy>span{font-size:11px;letter-spacing:2.4px;color:#9ada5e;font-weight:900}
.vision-cinematic-copy h3{font-size:clamp(42px,4.2vw,66px);line-height:1.01;margin:13px 0 18px}
.vision-cinematic-copy p{font-size:17px;line-height:1.62;color:#d4e2ea}
.vision-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.vision-actions button,.vision-actions a{min-height:42px;padding:10px 14px;border-radius:8px;font-size:10px;letter-spacing:1.1px;font-weight:800;display:flex;align-items:center}
.vision-actions button{cursor:pointer;color:#9ee8fa;border:1px solid rgba(100,214,247,.38);background:rgba(24,112,148,.15)}
.vision-actions a{color:#b5dc88;border:1px solid rgba(157,211,86,.30);background:rgba(113,167,49,.08)}

.life-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:27px}
.life-grid article{min-height:285px;padding:27px;border-radius:18px;background:linear-gradient(145deg,rgba(9,49,76,.92),rgba(5,31,51,.96));border:1px solid rgba(99,202,240,.15)}
.life-icon{width:53px;height:53px;border-radius:15px;display:grid;place-items:center;border:1px solid #85d8ef;color:#8bdcf1;font-size:26px;margin-bottom:20px}
.life-grid article:nth-child(2) .life-icon{color:#9dd75e;border-color:#9dd75e}.life-grid article:nth-child(3) .life-icon{color:#e0ae53;border-color:#e0ae53}.life-grid article:nth-child(4) .life-icon{color:#73c994;border-color:#73c994}
.life-grid>article>span{font-size:10px;letter-spacing:2px;font-weight:900;color:#77cce8}.life-grid h3{font-size:24px;line-height:1.07;margin:11px 0 13px}.life-grid p{font-size:14px;line-height:1.55;color:#bfd2de;margin:0}

.day-section{margin-top:27px;padding:38px;border-radius:23px;background:#f4f8fa;color:#0a2b4a;box-shadow:0 18px 48px rgba(0,0,0,.15)}
.day-copy{max-width:900px}.day-copy>span,.outcomes-copy>span,.vision-library-copy>span{font-size:11px;letter-spacing:2.2px;font-weight:900;color:#4a95b7}.day-copy h3,.outcomes-copy h3,.vision-library-copy h3{font-size:38px;line-height:1.04;margin:10px 0 13px}.day-copy p{color:#49677c;line-height:1.55}
.day-timeline{margin-top:29px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.day-timeline article{min-height:170px;padding:21px;border-radius:15px;background:#fff;border:1px solid #d2e0e8}.day-timeline b{font-size:12px;color:#d39726}.day-timeline strong{display:block;font-size:19px;margin:14px 0 9px}.day-timeline p{font-size:12px;line-height:1.48;color:#587184;margin:0}.day-timeline>i{font-style:normal;color:#4da4c7;font-size:20px}

.vision-outcomes{margin-top:27px;display:grid;grid-template-columns:.7fr 1.3fr;gap:22px;padding:36px;border-radius:23px;background:linear-gradient(135deg,#eaf3f7,#dfeef3);color:#0a2b4a}
.outcomes-copy>span{color:#4a96b8}.outcomes-copy p{color:#4b687d;line-height:1.55}
.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.outcome-grid article{padding:20px;border-radius:14px;background:#fff;border:1px solid #cfdee7}.outcome-grid div{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf6e7;color:#6ea83b;font-size:11px;font-weight:900}.outcome-grid strong{display:block;font-size:16px;margin:12px 0 5px}.outcome-grid span{font-size:11px;line-height:1.4;color:#647c8d}

.vision-library{margin-top:27px;padding:36px;border-radius:23px;background:linear-gradient(145deg,#071d31,#0a3853);border:1px solid rgba(98,202,239,.17)}
.vision-library-copy>span{color:#78d7f3}.vision-library-copy p{color:#c4d6e2}
.vision-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:27px}
.vision-library-grid article{display:flex;flex-direction:column;overflow:hidden;border-radius:17px;background:rgba(8,51,78,.55);border:1px solid rgba(103,202,239,.14)}
.vision-thumb{height:190px;background-size:cover;background-position:center}.cell-thumb{background-image:url('assets/vision/06-civilization-cell-001.webp')}.civos-thumb{background-image:url('assets/vision/11-civos-operating-system.webp')}.future-thumb{background-image:url('assets/vision/20-integrated-future-architecture.webp')}
.vision-library-grid article>span,.vision-library-grid h4,.vision-library-grid p,.vision-library-grid button{margin-left:22px;margin-right:22px}.vision-library-grid article>span{font-size:10px;color:#9ad94e;font-weight:900;letter-spacing:1.5px;margin-top:20px}.vision-library-grid h4{font-size:21px;line-height:1.08;margin-top:10px;margin-bottom:8px}.vision-library-grid p{font-size:13px;line-height:1.5;color:#c3d5e0}
.vision-library-grid button{margin-top:auto;margin-bottom:22px;min-height:40px;border-radius:7px;cursor:pointer;border:1px solid rgba(92,208,245,.30);background:rgba(31,126,164,.13);color:#84def7;font-size:9px;letter-spacing:1.1px;font-weight:800}

.vision-close{margin-top:34px;padding:23px 4px;border-top:1px solid rgba(115,190,218,.25);border-bottom:1px solid rgba(115,190,218,.25);display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.45px}.vision-close span{color:#819daf}.vision-close strong{color:#9bd751}

@media(max-width:1150px){.life-grid{grid-template-columns:1fr 1fr}.day-timeline{grid-template-columns:1fr 1fr}.day-timeline>i{display:none}.vision-outcomes{grid-template-columns:1fr}.vision-library-grid{grid-template-columns:1fr 1fr}.vision-library-grid article:last-child{grid-column:1/-1}}
@media(max-width:780px){.vision-cinematic{min-height:620px}.vision-cinematic-copy{width:80%;left:7%}.vision-overlay{background:linear-gradient(90deg,rgba(3,18,31,.92),rgba(3,18,31,.56))}.outcome-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.vision-section{padding:78px 5vw 62px}.life-grid,.day-timeline,.vision-library-grid,.outcome-grid{grid-template-columns:1fr}.vision-library-grid article:last-child{grid-column:auto}.vision-cinematic{min-height:570px}.vision-cinematic-copy{width:86%}.day-section,.vision-outcomes,.vision-library{padding:25px 20px}.vision-close{flex-direction:column}}


/* v2.1 EXPLORE CivOS */
.civos-section{
  position:relative;
  overflow:hidden;
  padding:110px 5vw 94px;
  color:#d9edf7;
  background:
    radial-gradient(circle at 50% 18%,rgba(34,183,233,.14),transparent 28%),
    radial-gradient(circle at 11% 78%,rgba(111,207,80,.07),transparent 24%),
    linear-gradient(180deg,#020f1b 0%,#061a2b 48%,#031421 100%);
}
.civos-section:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(63,182,227,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,182,227,.045) 1px,transparent 1px);
  background-size:38px 38px;
  pointer-events:none;
}
.civos-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.civos-head{max-width:1120px}
.civos-kicker{color:#71d7f5;font-size:14px;letter-spacing:3.6px;font-weight:900;margin-bottom:18px}
.civos-head h2{margin:0;font-size:clamp(50px,5.5vw,86px);line-height:.98;letter-spacing:-1.8px;color:#fff}
.civos-head h2 span{color:#91d34b}
.civos-head>p{max-width:1060px;font-size:clamp(17px,1.35vw,22px);line-height:1.62;color:#bdd2de;margin:28px 0 0}

.civos-core-stage{margin-top:48px;display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
.civos-stack{
  position:relative;min-height:720px;padding:46px;border-radius:24px;
  background:radial-gradient(circle at center,rgba(36,189,236,.12),transparent 36%),linear-gradient(150deg,rgba(5,37,62,.94),rgba(3,22,38,.98));
  border:1px solid rgba(97,207,244,.20);overflow:hidden
}
.civos-stack:after{content:"";position:absolute;left:50%;top:9%;bottom:9%;width:1px;background:linear-gradient(transparent,rgba(99,214,245,.35),transparent)}
.stack-layer{
  position:relative;z-index:2;width:82%;margin:0 auto 17px;min-height:91px;
  border-radius:14px;padding:18px 22px 16px 74px;
  border:1px solid rgba(112,211,246,.20);
  background:linear-gradient(90deg,rgba(9,56,83,.88),rgba(7,41,65,.74));
  cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.stack-layer:hover,.stack-layer.active{transform:translateX(7px);border-color:#72d8f6;background:linear-gradient(90deg,rgba(13,78,110,.96),rgba(7,49,74,.90))}
.stack-layer>span{
  position:absolute;left:19px;top:23px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;font-size:10px;font-weight:900;color:#74d7f5
}
.stack-layer strong{display:block;font-size:19px;color:#fff}.stack-layer small{display:block;margin-top:7px;color:#9eb9c9;font-size:11px;letter-spacing:.3px}
.layer-governance{color:#857ff0}.layer-intelligence{color:#69d6f0}.layer-data{color:#8fcf50}.layer-integration{color:#e0aa45}.layer-infrastructure{color:#55aee0}
.civos-stack-core{
  position:absolute;left:50%;bottom:35px;translate:-50% 0;width:190px;height:82px;border-radius:999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0d769d,#07405f);border:1px solid #6fe0fa;box-shadow:0 0 42px rgba(57,200,242,.18)
}
.civos-stack-core strong{font-size:28px;color:#fff}.civos-stack-core span{font-size:9px;letter-spacing:1.4px;color:#9be8fa;margin-top:5px}

.civos-layer-detail{
  border-radius:24px;padding:31px;background:linear-gradient(180deg,rgba(7,39,63,.98),rgba(4,25,42,.99));
  border:1px solid rgba(96,204,243,.18);box-shadow:0 18px 44px rgba(0,0,0,.16)
}
.civos-layer-detail>span,.ai-copy>span,.conflict-copy>span,.flow-copy>span,.civos-library-copy>span{font-size:11px;letter-spacing:2.2px;font-weight:900;color:#73d7f5}
.civos-layer-detail h3{font-size:34px;line-height:1.05;margin:13px 0 14px;color:#fff}.civos-layer-detail>p{font-size:14px;line-height:1.58;color:#bfd1dd}
.civos-layer-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}.civos-layer-tags b{font-size:10px;font-weight:800;padding:8px 11px;border-radius:999px;border:1px solid rgba(101,207,243,.24);background:rgba(26,104,138,.11);color:#91def5}

.ai-levels{margin-top:27px;padding:36px;border-radius:23px;background:#f3f8fa;color:#0a2b4a;box-shadow:0 17px 46px rgba(0,0,0,.15)}
.ai-copy{max-width:900px}.ai-copy>span{color:#4f98b8}.ai-copy h3,.conflict-copy h3,.flow-copy h3,.civos-library-copy h3{font-size:38px;line-height:1.04;margin:10px 0 13px}.ai-copy p{color:#4b697e;line-height:1.55}
.ai-level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:28px}
.ai-level{min-height:250px;padding:22px;border-radius:16px;background:#fff;border:1px solid #d2e1e9}.level-num{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;font-weight:900;background:#edf6e7;color:#6ca83c}.ai-level h4{font-size:18px;line-height:1.08;margin:17px 0 10px}.ai-level p{font-size:12px;line-height:1.48;color:#587185}.ai-level>span{display:inline-block;margin-top:15px;font-size:9px;letter-spacing:1.3px;color:#4e95b8;font-weight:900}
.l2 .level-num{background:#e9f5fb;color:#398fba}.l3 .level-num{background:#eef0fc;color:#666cc6}.l4 .level-num{background:#fff3df;color:#bd8021}.l5 .level-num{background:#efe9fb;color:#785eb2}

.civos-conflict{margin-top:27px;display:grid;grid-template-columns:.7fr 1.3fr;gap:20px;padding:36px;border-radius:23px;background:linear-gradient(145deg,#151927,#081a2a);border:1px solid rgba(129,116,225,.18)}
.conflict-copy>span{color:#a092ee}.conflict-copy p{color:#c2c8d4;line-height:1.58}
.conflict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.conflict-grid article{padding:20px;border-radius:14px;background:rgba(22,41,62,.70);border:1px solid rgba(119,133,231,.15)}.conflict-grid div{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#222e47;color:#a9a2f5;font-size:10px;font-weight:900}.conflict-grid strong{display:block;font-size:16px;color:#fff;margin:13px 0 7px}.conflict-grid p{font-size:11px;line-height:1.45;color:#aebdca;margin:0}

.civos-flow{margin-top:27px;padding:34px;border-radius:23px;background:linear-gradient(145deg,#06233a,#0a4b64);border:1px solid rgba(103,209,244,.18)}
.flow-copy h3{margin-bottom:0}.civos-flow-line{margin-top:27px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:10px;align-items:center}
.civos-flow-line>div{min-height:125px;padding:17px;border-radius:14px;background:rgba(7,56,84,.52);border:1px solid rgba(99,205,243,.17);display:flex;flex-direction:column;justify-content:center}
.civos-flow-line b{font-size:10px;color:#9ad94e}.civos-flow-line span{font-size:14px;font-weight:900;margin:10px 0 6px}.civos-flow-line small{font-size:10px;color:#a9c3d2}.civos-flow-line i{font-style:normal;color:#73d7f4;font-size:19px}

.civos-library{margin-top:27px;padding:36px;border-radius:23px;background:linear-gradient(145deg,#071d30,#092f49);border:1px solid rgba(99,204,241,.17)}
.civos-library-copy p{color:#bfd3df}.civos-library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:27px}
.civos-library-grid article{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:rgba(8,51,77,.57);border:1px solid rgba(102,201,238,.14)}
.civos-thumb{height:165px;background-size:cover;background-position:center}.civos-main-thumb{background-image:url('assets/civos/11-civos-operating-system.webp')}.cdia-thumb{background-image:url('assets/civos/12-cdia-digital-infrastructure.webp')}.twin2-thumb{background-image:url('assets/civos/07-digital-twin-architecture.webp')}.network-thumb{background-image:url('assets/civos/06-1-civilization-cell-network.webp')}
.civos-library-grid article>span,.civos-library-grid h4,.civos-library-grid p,.civos-library-grid button{margin-left:20px;margin-right:20px}.civos-library-grid article>span{margin-top:18px;font-size:10px;letter-spacing:1.4px;font-weight:900;color:#96d84f}.civos-library-grid h4{font-size:19px;line-height:1.08;margin-top:9px;margin-bottom:8px;color:#fff}.civos-library-grid p{font-size:12px;line-height:1.48;color:#bdd0dc}.civos-library-grid button{margin-top:auto;margin-bottom:20px;min-height:39px;border-radius:7px;border:1px solid rgba(94,208,245,.30);background:rgba(35,129,166,.13);color:#84def7;font-size:9px;letter-spacing:1px;font-weight:800;cursor:pointer}

.civos-close{margin-top:34px;padding:23px 4px;border-top:1px solid rgba(109,187,216,.24);border-bottom:1px solid rgba(109,187,216,.24);display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1.45px}.civos-close span{color:#829dad}.civos-close strong{color:#95d64e}

@media(max-width:1150px){.civos-core-stage{grid-template-columns:1fr}.ai-level-grid{grid-template-columns:repeat(3,1fr)}.civos-conflict{grid-template-columns:1fr}.civos-library-grid{grid-template-columns:1fr 1fr}.civos-flow-line{grid-template-columns:repeat(3,1fr)}.civos-flow-line i{display:none}}
@media(max-width:800px){.ai-level-grid,.conflict-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.civos-section{padding:78px 5vw 62px}.civos-stack{padding:24px 16px;min-height:auto}.stack-layer{width:100%;padding-left:66px}.civos-stack-core{position:relative;left:auto;bottom:auto;translate:none;margin:25px auto 0}.ai-level-grid,.conflict-grid,.civos-library-grid,.civos-flow-line{grid-template-columns:1fr}.ai-levels,.civos-conflict,.civos-flow,.civos-library{padding:25px 20px}.civos-close{flex-direction:column}}


/* v2.1.1 — Autonomous AI Blueprint added to Detailed Architecture */
.autonomous-ai-thumb{
  background-image:url('assets/civos/civos-autonomous-ai-civilization-blueprint.webp');
  background-position:center;
}
@media(min-width:1151px){
  .civos-library-grid{grid-template-columns:repeat(5,1fr)}
}


/* v2.1.2 — CivOS layer color mapping */
.stack-layer{
  --layer-accent:#74d7f5;
}
.layer-infrastructure{--layer-accent:#8fd34f;}
.layer-integration{--layer-accent:#e4ae43;}
.layer-data{--layer-accent:#58d7e9;}
.layer-intelligence{--layer-accent:#668cff;}
.layer-governance{--layer-accent:#b16fe7;}

.stack-layer>span{
  color:var(--layer-accent);
  border-color:var(--layer-accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--layer-accent) 16%,transparent);
}
.stack-layer strong{color:var(--layer-accent)}
.stack-layer:hover,.stack-layer.active{
  border-color:var(--layer-accent);
  box-shadow:inset 3px 0 0 var(--layer-accent),0 0 24px color-mix(in srgb,var(--layer-accent) 9%,transparent);
}
.civos-layer-detail{
  --detail-accent:#8fd34f;
  border-color:color-mix(in srgb,var(--detail-accent) 34%,transparent);
}
.civos-layer-detail>span{
  color:var(--detail-accent);
}
.civos-layer-detail h3{
  color:var(--detail-accent);
}
.civos-layer-tags b{
  color:var(--detail-accent);
  border-color:color-mix(in srgb,var(--detail-accent) 34%,transparent);
  background:color-mix(in srgb,var(--detail-accent) 9%,transparent);
}


/* v2.1.4 — Floating Back to Top */
.back-to-top{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:9998;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(93,218,248,.55);
  background:rgba(4,31,50,.88);
  color:#7ee5fb;
  display:grid;
  place-items:center;
  font-size:27px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.28),0 0 22px rgba(48,197,235,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease,
             border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top:hover{
  background:rgba(7,61,86,.96);
  border-color:#8ceaff;
  box-shadow:0 12px 34px rgba(0,0,0,.32),0 0 28px rgba(66,211,244,.22);
  transform:translateY(-3px);
}
.back-to-top:focus-visible{
  outline:2px solid #9beaff;
  outline-offset:3px;
}
@media(max-width:700px){
  .back-to-top{right:18px;bottom:18px;width:46px;height:46px;font-size:24px}
}


/* v2.2 ABOUT */
.about-section{position:relative;overflow:hidden;padding:112px 5vw 82px;color:#0b2c49;background:radial-gradient(circle at 90% 8%,rgba(67,170,213,.10),transparent 25%),radial-gradient(circle at 7% 64%,rgba(134,193,61,.09),transparent 24%),linear-gradient(180deg,#f5f9fb,#e9f2f6 55%,#f7fafb)}
.about-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,53,82,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(11,53,82,.025) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.about-shell{position:relative;z-index:1;max-width:1500px;margin:auto}
.about-head{max-width:1180px}.about-kicker{font-size:14px;letter-spacing:3.6px;font-weight:900;color:#5298b7;margin-bottom:19px}.about-head h2{margin:0;font-size:clamp(50px,5.5vw,86px);line-height:.98;letter-spacing:-1.8px}.about-head h2 span{color:#7fbd3e}.about-lead{max-width:1100px;margin:30px 0 0;font-size:clamp(18px,1.45vw,23px);line-height:1.65;color:#385a72}

.about-origin{margin-top:48px;display:grid;grid-template-columns:.42fr 1.58fr;gap:40px;padding:43px;border-radius:24px;background:linear-gradient(145deg,#061e33,#0a405a);color:#fff;box-shadow:0 20px 50px rgba(6,39,64,.14)}
.origin-number{font-size:clamp(86px,11vw,170px);font-weight:900;line-height:.8;letter-spacing:-7px;color:transparent;-webkit-text-stroke:1px rgba(115,218,246,.48);opacity:.9;align-self:center}
.origin-copy>span,.mission-copy>span,.architecture-copy>span,.open-copy>span,.method-copy>span,.founder-card>span,.team-card>span,.about-invitation>span{font-size:11px;letter-spacing:2.3px;font-weight:900;color:#7edbf5}.origin-copy h3,.mission-copy h3,.architecture-copy h3,.open-copy h3,.method-copy h3,.founder-card h3,.team-card h3,.about-invitation h3{font-size:clamp(30px,2.7vw,43px);line-height:1.05;margin:11px 0 18px}.origin-copy p{font-size:15px;line-height:1.68;color:#c8d9e4}.origin-copy strong{color:#a5dd69}

.about-mission{margin-top:27px;padding:39px;border-radius:23px;background:#fff;border:1px solid #cedee7;box-shadow:0 15px 42px rgba(8,43,70,.06)}.mission-copy{max-width:930px}.mission-copy>span{color:#4c94b5}.mission-copy p{font-size:15px;line-height:1.6;color:#4b687c}
.mission-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.mission-principles article{padding:22px;border-radius:15px;background:#f4f8fa;border:1px solid #d7e3e9}.mission-principles b{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#eaf4e4;color:#6fa93c;font-size:10px}.mission-principles h4{font-size:18px;margin:14px 0 8px}.mission-principles p{font-size:12px;line-height:1.5;color:#5b7385;margin:0}

.about-is-isnot{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:27px}.is-column,.isnot-column{padding:35px;border-radius:22px}.is-column{background:linear-gradient(145deg,#e9f5f8,#f7fafb);border:1px solid #c8e0e8}.isnot-column{background:linear-gradient(145deg,#111d2a,#09253a);color:#fff;border:1px solid rgba(90,190,225,.18)}.is-column>span,.isnot-column>span{font-size:11px;letter-spacing:2.1px;font-weight:900}.is-column>span{color:#5397b5}.isnot-column>span{color:#e0ae4d}.is-column h3,.isnot-column h3{font-size:31px;line-height:1.06;margin:11px 0 23px}.about-is-isnot ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}.about-is-isnot li{padding:16px 17px;border-radius:12px}.is-column li{background:#fff;border:1px solid #d5e2e8}.isnot-column li{background:rgba(8,54,80,.55);border:1px solid rgba(101,195,229,.13)}.about-is-isnot b{display:block;font-size:15px;margin-bottom:6px}.about-is-isnot small{display:block;font-size:12px;line-height:1.48;color:#60798a}.isnot-column small{color:#b9cbd6}

.about-architecture{margin-top:27px;padding:38px;border-radius:23px;background:linear-gradient(150deg,#071d31,#093d58);color:#fff}.architecture-copy{max-width:980px}.architecture-copy p{color:#c3d6e1;line-height:1.6}.architecture-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin-top:30px}.architecture-map article{min-height:130px;padding:18px;border-radius:14px;background:rgba(8,57,84,.55);border:1px solid rgba(101,204,240,.16)}.architecture-map strong{display:block;font-size:17px;color:#92d751}.architecture-map span{display:block;font-size:11px;line-height:1.5;color:#bcd0dc;margin-top:10px}.architecture-map i{font-style:normal;color:#72d8f4}.architecture-evidence{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}.architecture-evidence div{padding:17px;border-top:2px solid #70c9e6;background:rgba(4,31,50,.38)}.architecture-evidence b{display:block;font-size:12px;color:#83daf2}.architecture-evidence span{display:block;font-size:11px;line-height:1.45;color:#aec4d1;margin-top:6px}

.about-open{margin-top:27px;display:grid;grid-template-columns:.22fr 1.78fr;gap:30px;padding:40px;border-radius:23px;background:#fff;border:1px solid #cedee7}.open-symbol{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;font-size:50px;color:#6db1cf;border:1px solid #a9d6e5;background:radial-gradient(circle,#f7fbfc,#e7f3f7);align-self:center;justify-self:center}.open-copy>span{color:#4e96b5}.open-copy p{font-size:14px;line-height:1.62;color:#4e6b7f}.open-values{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}.open-values b{font-size:9px;letter-spacing:1.2px;padding:9px 12px;border-radius:999px;background:#edf6e8;color:#6d9f3d;border:1px solid #cde3bc}

.about-method{margin-top:27px;padding:38px;border-radius:23px;background:linear-gradient(145deg,#edf5f8,#dfeef3)}.method-copy>span{color:#4d95b5}.method-copy{max-width:930px}.method-copy p{color:#4b687d;line-height:1.55}.method-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin-top:27px}.method-flow article{min-height:145px;padding:18px;border-radius:14px;background:#fff;border:1px solid #d1e0e8}.method-flow b{font-size:10px;color:#74aa3e}.method-flow strong{display:block;font-size:16px;margin:12px 0 8px}.method-flow span{font-size:11px;line-height:1.45;color:#5d7688}.method-flow i{font-style:normal;color:#4ca1c3}

.about-founder{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:27px}.founder-card,.team-card{padding:37px;border-radius:23px}.founder-card{background:linear-gradient(145deg,#061f34,#0a4059);color:#fff}.team-card{background:#fff;border:1px solid #cedee7}.founder-card>span{color:#96d752}.team-card>span{color:#4e96b5}.founder-card p,.team-card p{font-size:14px;line-height:1.65}.founder-card p{color:#c6d7e2}.team-card p{color:#4d6a7e}

.about-invitation{text-align:center;margin-top:27px;padding:60px max(24px,8vw);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(77,190,229,.17),transparent 38%),linear-gradient(145deg,#051a2c,#082d45);color:#fff}.about-invitation>span{color:#82daf3}.about-invitation h3{max-width:1000px;margin:14px auto 20px;font-size:clamp(34px,3.5vw,55px)}.about-invitation p{max-width:950px;margin:0 auto;font-size:16px;line-height:1.65;color:#c6d8e3}.about-invitation .invitation-emphasis{margin-top:22px;color:#a2dc68;font-size:20px;font-weight:700}

.about-finale{margin-top:27px;min-height:230px;padding:38px 42px;border-radius:23px;display:grid;grid-template-columns:.7fr 1.6fr .7fr;gap:30px;align-items:center;background:linear-gradient(120deg,#051725,#0a4059 55%,#153e36);color:#fff;border:1px solid rgba(99,204,240,.17)}.finale-brand span{display:block;font-size:14px;letter-spacing:4px}.finale-brand strong{display:block;font-size:53px;line-height:.9;color:#9bd84f}.finale-message{text-align:center}.finale-message span{display:block;font-size:13px;letter-spacing:3px;color:#82d9f2}.finale-message strong{display:block;font-size:clamp(24px,2.3vw,37px);margin-top:10px}.finale-credit{text-align:right}.finale-credit span{display:block;font-size:15px;font-weight:700}.finale-credit small{display:block;color:#9fb7c6;margin-top:5px}

@media(max-width:1150px){.about-origin{grid-template-columns:1fr}.origin-number{font-size:100px}.mission-principles{grid-template-columns:1fr 1fr}.architecture-map{grid-template-columns:repeat(3,1fr)}.architecture-map i{display:none}.architecture-evidence{grid-template-columns:1fr 1fr}.method-flow{grid-template-columns:repeat(3,1fr)}.method-flow i{display:none}.about-finale{grid-template-columns:1fr;text-align:center}.finale-credit{text-align:center}}
@media(max-width:800px){.about-is-isnot,.about-founder{grid-template-columns:1fr}.about-open{grid-template-columns:1fr}.open-symbol{width:100px;height:100px}.architecture-map{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.about-section{padding:78px 5vw 60px}.about-origin,.about-mission,.is-column,.isnot-column,.about-architecture,.about-open,.about-method,.founder-card,.team-card{padding:25px 20px}.mission-principles,.architecture-map,.architecture-evidence,.method-flow{grid-template-columns:1fr}.about-finale{padding:32px 20px}.origin-number{font-size:78px}}


/* v2.2.1 — Influences & founder expansion */
.about-influences{
  margin-top:27px;
  padding:39px;
  border-radius:23px;
  background:linear-gradient(145deg,#fff,#edf5f8);
  border:1px solid #cedee7;
  box-shadow:0 15px 42px rgba(8,43,70,.055);
}
.influences-intro{max-width:1050px}
.influences-intro>span{font-size:11px;letter-spacing:2.3px;font-weight:900;color:#4e96b5}
.influences-intro h3{font-size:clamp(30px,2.7vw,43px);line-height:1.05;margin:11px 0 17px}
.influences-intro p{font-size:14px;line-height:1.64;color:#4c697d}
.influence-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:27px}
.influence-grid article{position:relative;padding:25px;border-radius:16px;background:#fff;border:1px solid #d4e2e9;overflow:hidden}
.influence-grid article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--influence-accent)}
.influence-grid article>span{font-size:9px;letter-spacing:1.7px;font-weight:900;color:var(--influence-accent)}
.influence-grid h4{font-size:21px;line-height:1.08;margin:11px 0 11px}
.influence-grid p{font-size:13px;line-height:1.55;color:#49687c;margin:0 0 12px}
.influence-grid small{display:block;font-size:11px;line-height:1.5;color:#6a7f8e}
.influence-grid a{display:inline-flex;margin-top:17px;padding:9px 12px;border-radius:7px;border:1px solid color-mix(in srgb,var(--influence-accent) 40%,transparent);color:var(--influence-accent);font-size:9px;letter-spacing:1px;font-weight:900;text-decoration:none}
.influence-capital{--influence-accent:#3e9ec8}.influence-social{--influence-accent:#78ae43}.influence-china{--influence-accent:#d89b35}.influence-rbe{--influence-accent:#756bd1}
.influence-conclusion{margin-top:16px;padding:18px 20px;border-radius:13px;background:#082a42;color:#fff;display:flex;align-items:center;gap:18px}
.influence-conclusion b{font-size:10px;letter-spacing:1.7px;color:#9bd852;text-transform:uppercase}
.influence-conclusion span{font-size:15px;font-weight:700}
.founder-bio{padding-left:15px;border-left:2px solid rgba(150,215,82,.55)}
@media(max-width:800px){.influence-grid{grid-template-columns:1fr}}
@media(max-width:650px){.about-influences{padding:25px 20px}.influence-conclusion{align-items:flex-start;flex-direction:column;gap:7px}}


/* v2.2.2 — Civilization 2100 Team role expansion */
.team-role-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:22px 0;
}
.team-role-grid>div{
  padding:14px 15px;
  border-radius:11px;
  background:#f1f7f9;
  border:1px solid #d5e4ea;
}
.team-role-grid b{
  display:block;
  font-size:9px;
  letter-spacing:1.4px;
  color:#4b96b7;
  margin-bottom:6px;
}
.team-role-grid small{
  display:block;
  font-size:10px;
  line-height:1.45;
  color:#617a8b;
}
.team-closing{
  padding-top:17px;
  border-top:1px solid #d5e2e8;
  font-weight:600;
  color:#365b72 !important;
}
@media(max-width:650px){
  .team-role-grid{grid-template-columns:1fr}
}


/* v2.3 — Expanded site footer */
.site-footer{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 14% 18%,rgba(47,151,192,.17),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(119,173,61,.10),transparent 25%),
    linear-gradient(145deg,#041522 0%,#06253a 52%,#041824 100%);
  border-top:1px solid rgba(91,202,239,.25);
}
.site-footer:before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(78,177,211,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,177,211,.035) 1px,transparent 1px);
  background-size:52px 52px;
  pointer-events:none;
}
.footer-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}
.footer-glow-a{width:340px;height:340px;background:#35bce8;left:-140px;top:-170px}
.footer-glow-b{width:300px;height:300px;background:#8bcf43;right:-130px;bottom:-160px}
.footer-inner{position:relative;z-index:1;max-width:1500px;margin:auto;padding:72px 5vw 28px}
.footer-main{display:grid;grid-template-columns:1.35fr .55fr 1fr;gap:clamp(42px,6vw,100px);align-items:start}
.footer-identity{max-width:520px}
.footer-logo{display:block;width:min(100%,470px);height:auto;border-radius:8px;mix-blend-mode:screen}
.footer-identity>p{max-width:500px;margin:25px 0 19px;color:#afc4d1;font-size:14px;line-height:1.65}
.footer-motto{display:flex;flex-wrap:wrap;gap:7px 16px}
.footer-motto span{font-size:9px;letter-spacing:1.55px;font-weight:900;color:#90d451}
.footer-nav>span,.footer-connect>span,.footer-contact-placeholder>span{display:block;margin-bottom:20px;color:#6dd7f4;font-size:10px;letter-spacing:2px;font-weight:900}
.footer-nav{display:flex;flex-direction:column;align-items:flex-start}
.footer-nav a{position:relative;color:#c3d5df;text-decoration:none;font-size:13px;padding:6px 0;transition:.2s ease}
.footer-nav a:after{content:"";position:absolute;left:0;bottom:3px;width:0;height:1px;background:#83d8f0;transition:.2s ease}
.footer-nav a:hover{color:#fff}.footer-nav a:hover:after{width:100%}
.footer-connect h3{font-size:27px;line-height:1.05;margin:0 0 13px}
.footer-connect>p{max-width:440px;margin:0;color:#a9c0cd;font-size:13px;line-height:1.6}
.footer-socials{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.social-placeholder{
  appearance:none;border:1px solid rgba(102,206,240,.28);background:rgba(5,45,67,.72);color:#fff;
  min-width:62px;height:61px;border-radius:10px;padding:7px 9px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;cursor:default;transition:.2s ease
}
.social-placeholder b{font-size:18px;line-height:1;color:#77daf5}.social-placeholder small{font-size:7px;letter-spacing:.4px;color:#8faeba}
.social-placeholder:hover{transform:translateY(-2px);border-color:rgba(145,215,81,.55);background:rgba(7,59,79,.9)}
.footer-contact-placeholder{margin-top:24px;padding:15px 17px;border-radius:11px;border:1px dashed rgba(144,190,209,.24);background:rgba(4,29,45,.38)}
.footer-contact-placeholder>span{margin:0 0 5px;color:#e0aa43;font-size:8px}
.footer-contact-placeholder p{margin:0;color:#7895a6;font-size:10px}
.footer-divider{height:1px;margin:55px 0 24px;background:linear-gradient(90deg,transparent,rgba(99,199,232,.38),rgba(139,201,70,.24),transparent)}
.footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.footer-bottom>div:first-child strong{display:block;font-size:11px;letter-spacing:1.8px;color:#fff}
.footer-bottom>div:first-child span{display:block;margin-top:5px;color:#718d9d;font-size:9px}
.footer-bottom-center{display:flex;align-items:center;gap:8px;color:#819eac}
.footer-bottom-center span{font-size:8px;letter-spacing:1.25px}.footer-bottom-center i{font-style:normal;color:#d7a43c}
.footer-top-link{justify-self:end;color:#71d7f3;text-decoration:none;font-size:9px;letter-spacing:1.3px;font-weight:900;padding:9px 11px;border:1px solid rgba(91,196,230,.24);border-radius:7px}
.footer-top-link:hover{color:#fff;border-color:#71d7f3}
@media(max-width:1000px){
  .footer-main{grid-template-columns:1.2fr .8fr}.footer-connect{grid-column:1/-1}
  .footer-bottom{grid-template-columns:1fr auto}.footer-bottom-center{display:none}
}
@media(max-width:650px){
  .footer-inner{padding:52px 6vw 24px}.footer-main{grid-template-columns:1fr;gap:38px}
  .footer-connect{grid-column:auto}.footer-logo{width:100%}
  .footer-bottom{grid-template-columns:1fr;gap:18px}.footer-top-link{justify-self:start}
}


/* v2.3.1 — force expanded footer to replace legacy compact footer */
footer.site-footer.expanded-footer{
  min-height:520px !important;
  height:auto !important;
  padding:0 !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 14% 18%,rgba(47,151,192,.17),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(119,173,61,.10),transparent 25%),
    linear-gradient(145deg,#041522 0%,#06253a 52%,#041824 100%) !important;
}
footer.site-footer.expanded-footer .footer-inner{
  display:block !important;
  max-width:1500px !important;
  margin:0 auto !important;
  padding:72px 5vw 28px !important;
}
footer.site-footer.expanded-footer .footer-main{
  display:grid !important;
  grid-template-columns:1.35fr .55fr 1fr !important;
  gap:clamp(42px,6vw,100px) !important;
  align-items:start !important;
}
footer.site-footer.expanded-footer .footer-logo{
  display:block !important;
  width:min(100%,470px) !important;
  max-height:none !important;
  height:auto !important;
}
footer.site-footer.expanded-footer .footer-bottom{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
}
@media(max-width:1000px){
  footer.site-footer.expanded-footer .footer-main{grid-template-columns:1.2fr .8fr !important}
  footer.site-footer.expanded-footer .footer-connect{grid-column:1/-1 !important}
}
@media(max-width:650px){
  footer.site-footer.expanded-footer{min-height:auto !important}
  footer.site-footer.expanded-footer .footer-main{grid-template-columns:1fr !important}
  footer.site-footer.expanded-footer .footer-connect{grid-column:auto !important}
  footer.site-footer.expanded-footer .footer-bottom{grid-template-columns:1fr !important}
}


/* v2.3.2 — Footer rebuild from the approved v2.3.3 visual concept, based on v2.3.1 */
footer.site-footer.footer-v232{
  position:relative !important;
  display:block !important;
  min-height:500px !important;
  height:auto !important;
  overflow:hidden !important;
  color:#fff !important;
  padding:0 !important;
  border-top:1px solid rgba(40,184,237,.55) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(16,119,168,.12),transparent 24%),
    linear-gradient(180deg,#03111d 0%,#041827 56%,#03131f 100%) !important;
}
footer.footer-v232:before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,rgba(58,194,241,.035) 50%,transparent 100%),
    repeating-linear-gradient(90deg,transparent 0,transparent 63px,rgba(47,146,180,.022) 64px);
}
.footer-v232-topline{
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent 5%,#16a9e8 38%,#f6b53e 50%,#17b3ed 62%,transparent 95%);
  box-shadow:0 0 16px rgba(31,181,236,.65);
}
.footer-v232-topline:after{
  content:"";position:absolute;left:50%;top:-8px;width:15px;height:15px;translate:-50% 0;border-radius:50%;
  background:#ffd477;box-shadow:0 0 22px #ffb742,0 0 48px rgba(49,190,244,.8);
}
.footer-v232-earth{
  position:absolute;left:0;right:0;bottom:67px;height:120px;
  background-image:linear-gradient(to top,rgba(3,18,30,.03),rgba(3,18,30,.12)),url('assets/footer-earth-horizon-v232.png');
  background-repeat:no-repeat;background-size:100% 100%;background-position:center bottom;
  opacity:.98;pointer-events:none;
}
.footer-v232-inner{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:46px 3.3vw 128px}
.footer-v232-grid{display:grid;grid-template-columns:1.55fr .62fr .82fr .68fr;gap:0;align-items:start}
.footer-v232-grid>section,.footer-v232-grid>nav{min-height:270px;padding:0 24px;border-left:1px solid rgba(61,163,200,.24)}
.footer-v232-grid>.footer-v232-brand{padding-left:0;padding-right:30px;border-left:0}

.footer-brand-lockup{display:flex;align-items:center;gap:22px}
.footer-brand-mark{position:relative;flex:0 0 102px;width:102px;height:102px}
.brand-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:50%;border:2px solid #d7a33e}
.brand-ring.r1{width:86px;height:86px}.brand-ring.r2{width:65px;height:65px;opacity:.7}.brand-ring.r3{width:42px;height:42px;opacity:.55}
.brand-spire{position:absolute;left:50%;top:17px;translate:-50% 0;width:8px;height:51px;background:linear-gradient(#ffe39a,#d79824);clip-path:polygon(50% 0,100% 100%,0 100%)}
.brand-spire:before,.brand-spire:after{content:"";position:absolute;bottom:0;width:15px;background:#dda432;clip-path:polygon(50% 0,100% 100%,0 100%)}
.brand-spire:before{height:28px;left:-19px}.brand-spire:after{height:35px;right:-19px}
.brand-leaf{position:absolute;left:50%;bottom:11px;translate:-50% 0;width:14px;height:25px;border-radius:80% 0 80% 0;background:#d8a039;rotate:45deg}
.footer-brand-title{font-size:clamp(25px,2.2vw,38px);letter-spacing:4px;font-weight:600;white-space:nowrap}
.footer-brand-subtitle{margin-top:9px;color:#d9a637;font-size:11px;letter-spacing:1.4px;white-space:nowrap}.footer-brand-subtitle b{color:#b8892d;font-weight:400}

.footer-v232-mission{max-width:520px;margin:20px 0 18px;font-size:13px;line-height:1.58;color:#d7e1e8}
.footer-v232-motto{display:flex;align-items:center;justify-content:center;gap:9px;max-width:520px;padding:8px 0;border-top:1px solid rgba(50,157,197,.18);border-bottom:1px solid rgba(50,157,197,.18)}
.footer-v232-motto i{display:block;flex:1;max-width:58px;height:2px;background:#d69c2f}
.footer-v232-motto span{white-space:nowrap;color:#69d9f7;font-size:8px;font-weight:900;letter-spacing:1.15px}.footer-v232-motto b{color:#73cfe9;font-size:8px}

.footer-v232 h3{margin:0;color:#70dbf6;font-size:15px;letter-spacing:.2px}
.footer-accent-line{width:53px;height:3px;margin:12px 0 13px;background:#e2a52e}
.footer-v232-links{display:flex;flex-direction:column}
.footer-v232-links a{display:grid;grid-template-columns:26px 1fr 14px;gap:7px;align-items:center;min-height:34px;color:#e1e8ed;text-decoration:none;font-size:11px}
.footer-v232-links a:hover{color:#7ee1f8}.footer-v232-links a b{justify-self:end;color:#23c6ed;font-size:23px;font-weight:300}.link-icon{color:#23c9ed;font-size:18px;text-align:center}

.footer-v232-share>p,.footer-v232-updates>p{margin:0 0 17px;color:#d5e0e6;font-size:10px;line-height:1.45}
.footer-social-row{display:flex;align-items:center;flex-wrap:nowrap;gap:9px;margin-bottom:22px}
.social-round{flex:0 0 37px;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.30);background:#0c3b59;cursor:default;font-size:15px;font-weight:700;box-shadow:inset 0 0 12px rgba(255,255,255,.08),0 0 12px rgba(0,0,0,.23)}
.social-round.linkedin{background:#0869bd;border-color:#2b9ee8}.social-round.x-social{background:#171b21;border-color:#636971}.social-round.facebook{background:#1856a7;border-color:#4085d7}.social-round.youtube{background:#c71918;border-color:#e4544a;font-size:12px}.social-round.share{background:#006e7a;border-color:#12b6c2}
.footer-contact-card{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:15px;border-radius:8px;border:1px solid #35c6ec;background:rgba(5,49,71,.66)}
.footer-contact-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:2px solid #39cff6;color:#39cff6;font-size:22px;font-weight:700}
.footer-contact-card strong{display:block;color:#d8edf5;font-size:10px;letter-spacing:.8px}.footer-contact-card p{margin:6px 0 0;color:#bdd0db;font-size:8px;line-height:1.45}

.footer-email-form{display:grid;grid-template-columns:28px 1fr 38px;align-items:center;height:38px;border-radius:7px;border:1px solid rgba(56,186,231,.72);background:rgba(4,30,47,.72);overflow:hidden}
.email-icon{text-align:center;color:#d5e2e8;font-size:15px}.footer-email-form input{min-width:0;border:0;outline:0;background:transparent;color:#7ba8bd;font-size:9px}.footer-email-form input::placeholder{color:#5f8da4}.footer-email-form button{width:34px;height:34px;justify-self:end;margin-right:2px;border:0;border-radius:50%;color:#052136;background:#55cef1;font-size:20px}.footer-v232-updates small{display:block;margin-top:11px;color:#c8d5dc;font-size:8px}

.footer-v232-bottom{position:absolute;z-index:4;left:0;right:0;bottom:0;min-height:67px;display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;padding:0 2.8vw;border-top:1px solid rgba(43,172,218,.45);background:rgba(2,17,28,.94)}
.footer-bottom-left,.footer-bottom-center,.footer-bottom-right{display:flex;align-items:center}
.footer-bottom-left{gap:12px;font-size:8px;color:#d3dce2}.footer-bottom-left i,.footer-bottom-right i{width:1px;height:18px;background:#1c718f}
.footer-bottom-center{gap:9px;color:#63d6f3;font-size:8px;letter-spacing:1.45px;font-weight:900}.footer-bottom-center em{display:block;width:74px;height:1px;background:linear-gradient(90deg,transparent,#d5992b)}.footer-bottom-center em:last-child{background:linear-gradient(90deg,#d5992b,transparent)}.footer-bottom-center b{color:#67bfd7}
.footer-bottom-right{justify-self:end;gap:9px;font-size:7px;color:#c9d5dc}.footer-bottom-right a{color:#c9d5dc;text-decoration:none}
.footer-circle-top{width:45px;height:45px;margin-left:10px;border-radius:50%;border:1px solid #36c8ef;color:#63daf8;background:rgba(5,54,79,.68);font-size:24px;cursor:pointer;box-shadow:0 0 20px rgba(51,196,237,.12)}
.footer-circle-top:hover{color:#fff;background:#075273}

@media(max-width:1150px){
  .footer-v232-grid{grid-template-columns:1.4fr .8fr 1fr}
  .footer-v232-updates{grid-column:1/-1;min-height:auto!important;margin-top:25px;border-left:0!important;padding-left:0!important;max-width:500px}
  .footer-v232-bottom{grid-template-columns:1fr auto}.footer-bottom-center{display:none}
}
@media(max-width:800px){
  .footer-v232-grid{grid-template-columns:1fr 1fr;row-gap:34px}
  .footer-v232-grid>section,.footer-v232-grid>nav{border-left:0;padding-left:0}
  .footer-v232-bottom{position:relative;grid-template-columns:1fr;padding:20px 5vw}
  .footer-v232-earth{bottom:0}.footer-v232-inner{padding-bottom:120px}.footer-bottom-right{justify-self:start}
}
@media(max-width:570px){
  .footer-v232-grid{grid-template-columns:1fr}.footer-v232-inner{padding:38px 6vw 125px}
  .footer-brand-lockup{align-items:flex-start}.footer-brand-title,.footer-brand-subtitle{white-space:normal}
  .footer-social-row{gap:7px}.social-round{flex-basis:34px;width:34px;height:34px}
  .footer-v232-motto{justify-content:flex-start;flex-wrap:wrap}.footer-v232-earth{opacity:.65}
}


/* v2.3.2 Fix2 — footer overlap/layering corrections */
footer.site-footer.footer-v232{
  min-height:0 !important;
  overflow:hidden !important;
}

/* Main footer content creates its own height; no absolute bottom bar overlap. */
.footer-v232-inner{
  padding-bottom:150px !important;
}
.footer-v232-grid{
  position:relative;
  z-index:3;
}
.footer-v232-grid>section,
.footer-v232-grid>nav{
  min-height:300px !important;
}

/* Clean CSS-built Earth horizon; no screenshot/UI artifacts. */
.footer-v232-earth{
  position:absolute !important;
  z-index:1 !important;
  left:0 !important;
  right:0 !important;
  bottom:68px !important;
  height:126px !important;
  overflow:hidden !important;
  background:none !important;
  opacity:1 !important;
  pointer-events:none !important;
}
.footer-v232-earth .earth-body{
  position:absolute;
  left:-6%;
  width:62%;
  height:180px;
  bottom:-108px;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(ellipse at 55% 20%,rgba(255,210,105,.24) 0 1px,transparent 2px),
    radial-gradient(ellipse at 35% 35%,rgba(255,229,155,.18) 0 1px,transparent 2px),
    radial-gradient(ellipse at 72% 42%,rgba(255,218,128,.15) 0 1px,transparent 2px),
    radial-gradient(ellipse at 50% 0%,#123f62 0%,#06233a 44%,#031522 72%);
  box-shadow:
    0 -3px 4px rgba(62,204,255,.95),
    0 -7px 18px rgba(42,184,241,.62),
    0 -18px 55px rgba(39,154,217,.22);
}
.footer-v232-earth .earth-glow{
  position:absolute;
  left:-4%;
  width:66%;
  height:100px;
  bottom:0;
  border-radius:50%;
  background:radial-gradient(ellipse at center bottom,rgba(34,171,237,.24),transparent 64%);
  filter:blur(12px);
}
.footer-v232-earth .earth-sun{
  position:absolute;
  left:50%;
  bottom:-2px;
  width:15px;
  height:15px;
  translate:-50% 0;
  border-radius:50%;
  background:#ffd36e;
  box-shadow:
    0 0 14px #ffb63b,
    0 0 32px rgba(255,191,65,.75),
    0 0 55px rgba(45,190,244,.48);
}

/* The bottom bar participates in layout and can no longer overlap the main footer. */
.footer-v232-bottom{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  z-index:4 !important;
  min-height:68px !important;
  margin-top:0 !important;
}

/* Existing floating Back to Top is the only one shown. */
.footer-circle-top{
  display:none !important;
}

/* Give Connect / Share and Contact enough room. */
.footer-v232-share{
  min-width:0;
}
.footer-contact-card{
  margin-top:0 !important;
  min-height:98px;
}
.footer-social-row{
  margin-bottom:20px !important;
}

/* Protect the grid from narrow-desktop collisions. */
@media(min-width:1151px) and (max-width:1370px){
  .footer-v232-grid{
    grid-template-columns:1.4fr .68fr .9fr .72fr !important;
  }
  .footer-v232-grid>section,
  .footer-v232-grid>nav{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .footer-v232-grid>.footer-v232-brand{
    padding-left:0 !important;
  }
  .footer-brand-title{
    font-size:29px !important;
    letter-spacing:3px !important;
  }
  .footer-brand-subtitle{
    font-size:9px !important;
  }
  .social-round{
    flex-basis:34px !important;
    width:34px !important;
    height:34px !important;
  }
}
@media(max-width:800px){
  .footer-v232-inner{
    padding-bottom:70px !important;
  }
  .footer-v232-earth{
    bottom:0 !important;
  }
}


/* v2.3.2 Fix3 — exact title-page logo + visible Earth */
.footer-v232-brand .exact-footer-logo{
  display:block !important;
  width:100% !important;
  max-width:520px !important;
  margin:0 0 16px !important;
}
.footer-v232-brand .exact-footer-logo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:500px !important;
  background:transparent !important;
}

/* Hide the previous CSS-drawn mark/text components if any remain from legacy styling. */
.footer-v232-brand .footer-brand-mark,
.footer-v232-brand .footer-brand-copy{
  display:none !important;
}

/* Restore a clearly visible photographic Earth horizon using a clean crop from the approved reference. */
.footer-v232-earth.exact-earth{
  position:absolute !important;
  z-index:1 !important;
  left:0 !important;
  right:0 !important;
  bottom:68px !important;
  height:150px !important;
  overflow:hidden !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 100%,rgba(255,179,55,.24),transparent 13%),
    url('assets/footer-earth-exact.png') left bottom / min(67vw,850px) auto no-repeat !important;
}
.footer-v232-earth.exact-earth:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  background:linear-gradient(90deg,#21b7ef 0%,#4fd3ff 46%,#ffbd47 50%,#42c7f5 55%,transparent 85%);
  box-shadow:0 0 16px rgba(50,194,240,.65);
}

/* Remove previous CSS planet pieces. */
.footer-v232-earth .earth-glow,
.footer-v232-earth .earth-body,
.footer-v232-earth .earth-sun{
  display:none !important;
}

/* Give the Earth enough visual breathing space below the content. */
.footer-v232-inner{
  padding-bottom:175px !important;
}
.footer-v232-grid>section,
.footer-v232-grid>nav{
  min-height:285px !important;
}
@media(max-width:800px){
  .footer-v232-earth.exact-earth{
    height:115px !important;
    background-size:900px auto !important;
    bottom:0 !important;
  }
  .footer-v232-inner{
    padding-bottom:135px !important;
  }
}


/* v2.3.2 Fix4 — full-width Earth + clear legal area */

/* Stretch the photographic Earth/horizon across the entire footer width. */
.footer-v232-earth.exact-earth{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:165px !important;
  bottom:68px !important;
  background-image:
    linear-gradient(to right,rgba(3,17,29,0) 0%,rgba(3,17,29,.02) 65%,rgba(3,17,29,.12) 100%),
    url('assets/footer-earth-exact.png') !important;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:cover !important;
}

/* Keep the horizon/light line continuous across the whole viewport. */
.footer-v232-earth.exact-earth:after{
  left:0 !important;
  right:0 !important;
  width:100% !important;
}

/* Reserve a protected area at the right for the existing floating Back to Top button. */
.footer-v232-bottom{
  padding-right:120px !important;
}
.footer-bottom-right{
  justify-self:end !important;
  padding-right:0 !important;
  white-space:nowrap !important;
}

/* Move the site's approved floating Back to Top slightly inward/up so it never covers legal/version text. */
.back-to-top,
#backToTop,
.back-top,
.scroll-top,
[class*="back-to-top"],
[class*="backTop"]{
  right:24px !important;
  bottom:82px !important;
  z-index:20 !important;
}

/* If the existing control uses only a title/aria-label selector, protect that too. */
button[aria-label="Back to top"],
a[aria-label="Back to top"]{
  right:24px !important;
  bottom:82px !important;
  z-index:20 !important;
}

@media(max-width:1150px){
  .footer-v232-bottom{
    padding-right:100px !important;
  }
}
@media(max-width:800px){
  .footer-v232-earth.exact-earth{
    height:125px !important;
    bottom:0 !important;
    background-size:cover !important;
  }
  .footer-v232-bottom{
    padding-right:72px !important;
  }
  button[aria-label="Back to top"],
  a[aria-label="Back to top"],
  .back-to-top,
  #backToTop,
  .back-top,
  .scroll-top,
  [class*="back-to-top"],
  [class*="backTop"]{
    right:16px !important;
    bottom:18px !important;
  }
}


/* v2.3.2 Fix5 — Earth image removed */
.footer-v232-earth,
.footer-v232-earth.exact-earth{
  display:none !important;
}

.footer-v232-inner{
  padding-bottom:38px !important;
}

/* Keep a clean separation before the legal bar. */
.footer-v232-bottom{
  position:relative !important;
  margin-top:0 !important;
  border-top:1px solid rgba(68,198,239,.22) !important;
}

/* Keep Back to Top clear of legal/version links. */
.back-to-top,
#backToTop,
.back-top,
.scroll-top,
[class*="back-to-top"],
[class*="backTop"],
button[aria-label="Back to top"],
a[aria-label="Back to top"]{
  right:24px !important;
  bottom:82px !important;
}


/* Final legal-bar alignment — keep Privacy / Terms / Credits / version on the far right */
.footer-v232-bottom{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  width:100% !important;
}

.footer-bottom-left{
  justify-self:start !important;
}

.footer-bottom-right{
  justify-self:end !important;
  margin-left:auto !important;
  text-align:right !important;
  white-space:nowrap !important;
}

/* The center motto was removed; make sure no empty center column remains. */
.footer-bottom-center{
  display:none !important;
}

@media(max-width:800px){
  .footer-v232-bottom{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .footer-bottom-right{
    justify-self:start !important;
    margin-left:0 !important;
    text-align:left !important;
  }
}


/* v2.4.0 — standalone legal/info pages */
.legal-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 8%,rgba(36,196,240,.08),transparent 28rem),
    linear-gradient(180deg,#061b2b 0,#08263a 32%,#eef5f8 32%,#f7fafc 100%);
  color:#082b4c;
}
.legal-topbar{
  position:relative;
  z-index:2;
  min-height:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:20px clamp(24px,5vw,76px);
  border-bottom:1px solid rgba(77,207,244,.24);
  background:rgba(3,20,33,.94);
}
.legal-topbar .legal-logo{
  display:block;
  width:min(410px,55vw);
}
.legal-topbar .legal-logo img{
  display:block;width:100%;height:auto;background:transparent;
}
.legal-nav{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end;
}
.legal-nav a{
  color:#e9f7ff;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.04em;
}
.legal-nav a:hover,.legal-nav a[aria-current="page"]{color:#56d6ff;}
.legal-back{
  border:1px solid rgba(80,210,248,.55);
  border-radius:8px;
  padding:10px 14px;
}
.legal-hero{
  max-width:1180px;
  margin:0 auto;
  padding:72px 34px 82px;
  color:white;
}
.legal-eyebrow{
  color:#8edb32;font-size:13px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}
.legal-hero h1{
  margin:12px 0 14px;
  font-size:clamp(44px,7vw,82px);
  line-height:.98;
  letter-spacing:-.035em;
}
.legal-hero p{
  max-width:760px;margin:0;color:#c6d9e6;font-size:18px;line-height:1.65;
}
.legal-content{
  max-width:1180px;
  margin:-34px auto 70px;
  padding:0 34px;
  position:relative;
  z-index:3;
}
.legal-card{
  background:white;
  border:1px solid #d4e3eb;
  border-radius:22px;
  padding:clamp(28px,5vw,62px);
  box-shadow:0 24px 60px rgba(4,38,62,.09);
}
.legal-meta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px;
  color:#557086;font-size:13px;
}
.legal-meta span{
  padding:7px 11px;border-radius:999px;background:#edf6fa;border:1px solid #d5e7ef;
}
.legal-card h2{
  margin:38px 0 12px;color:#062d51;font-size:25px;line-height:1.2;
}
.legal-card h2:first-of-type{margin-top:0;}
.legal-card h3{margin:24px 0 8px;color:#0a456b;font-size:18px;}
.legal-card p,.legal-card li{
  color:#274b66;font-size:16px;line-height:1.75;
}
.legal-card ul{padding-left:22px;}
.legal-note{
  margin:30px 0 0;
  padding:18px 20px;
  border-left:4px solid #e5a51b;
  background:#fff8e8;
  border-radius:0 10px 10px 0;
}
.legal-credit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:22px 0 6px;
}
.legal-credit-item{
  border:1px solid #d7e7ee;border-radius:14px;padding:20px;background:#f8fbfd;
}
.legal-credit-item strong{display:block;color:#062d51;margin-bottom:6px;}
.legal-simple-footer{
  background:#031521;
  color:#a9c2d1;
  border-top:1px solid rgba(70,199,240,.24);
  padding:24px clamp(24px,5vw,76px);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:13px;
}
.legal-simple-footer a{color:#cceeff;text-decoration:none;}
.legal-simple-footer .links{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
@media(max-width:760px){
  .legal-topbar{align-items:flex-start;flex-direction:column;}
  .legal-topbar .legal-logo{width:min(360px,90vw);}
  .legal-nav{justify-content:flex-start;gap:16px;}
  .legal-hero{padding-top:50px;}
  .legal-credit-grid{grid-template-columns:1fr;}
}


/* v2.4.3 — robust locked-hero action hotspots */
.action-hotspots{
  z-index:30 !important;
}
.action-hotspots .hero-action-hit{
  z-index:31 !important;
  cursor:pointer !important;
  pointer-events:auto !important;
}

/* Slightly enlarge the clickable areas while keeping them invisible. */
.action-hotspots .discover{
  left:34.1% !important;
  top:48.2% !important;
  width:15.3% !important;
  height:6.8% !important;
}
.action-hotspots .film{
  left:49.9% !important;
  top:48.2% !important;
  width:13.8% !important;
  height:6.8% !important;
}

/* CSS-only film information card */
.action-hotspots .film .film-hover-card{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  width:360px;
  max-width:min(360px,88vw);
  padding:17px 19px 16px;
  translate:-50% 7px;
  border:1px solid rgba(74,205,244,.62);
  border-radius:13px;
  color:#fff;
  text-align:left;
  background:
    radial-gradient(circle at 90% 0%,rgba(62,196,236,.13),transparent 38%),
    linear-gradient(145deg,rgba(4,24,39,.98),rgba(6,42,63,.99));
  box-shadow:0 18px 52px rgba(0,0,0,.42),0 0 24px rgba(42,185,229,.11);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,translate .16s ease,visibility .16s ease;
  white-space:normal;
}
.action-hotspots .film .film-hover-card:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:13px;
  height:13px;
  translate:-50% 0;
  rotate:45deg;
  border-right:1px solid rgba(74,205,244,.62);
  border-bottom:1px solid rgba(74,205,244,.62);
  background:#06293d;
}
.action-hotspots .film:hover .film-hover-card,
.action-hotspots .film:focus .film-hover-card,
.action-hotspots .film:focus-visible .film-hover-card{
  opacity:1;
  visibility:visible;
  translate:-50% 0;
}
.action-hotspots .film .film-hover-card small{
  display:block;
  color:#69d8f5;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.45px;
  margin-bottom:7px;
}
.action-hotspots .film .film-hover-card strong{
  display:block;
  color:#fff;
  font-size:17px;
  line-height:1.15;
  margin-bottom:7px;
}
.action-hotspots .film .film-hover-card>span{
  display:block;
  color:#c5d8e3;
  font-size:12px;
  line-height:1.52;
}
.action-hotspots .film .film-hover-card b{
  display:block;
  margin-top:9px;
  color:#9bd94f;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Keep hotspot outline useful for keyboard users, invisible otherwise. */
.action-hotspots .hero-action-hit:focus-visible{
  outline:2px solid rgba(255,255,255,.86) !important;
  outline-offset:2px !important;
}

/* Mobile uses the existing mobile navigation; hero hotspots are intentionally hidden there. */


/* v2.4.4 — exact hotspot alignment to the locked 1536×1024 hero artwork
   Discover button: x 573–772, y 460–501
   Film button:     x 784–948, y 460–501
*/
.action-hotspots .discover{
  left:37.305% !important;
  top:44.922% !important;
  width:12.956% !important;
  height:4.004% !important;
}
.action-hotspots .film{
  left:51.042% !important;
  top:44.922% !important;
  width:10.677% !important;
  height:4.004% !important;
}

/* Keep the film tooltip centered over the actual film button. */
.action-hotspots .film .film-hover-card{
  left:50% !important;
  bottom:calc(100% + 12px) !important;
}


/* =========================================================
   v2.5.0 — Mobile & Tablet Refinement
   Desktop >= 1181px remains visually unchanged.
   ========================================================= */

/* Mobile hero actions are hidden on desktop. */
.mobile-hero-actions{display:none}

/* Tablet: preserve the locked hero composition instead of the old 170% crop. */
@media (min-width:901px) and (max-width:1180px){
  .hero-image{
    width:100% !important;
    max-width:none;
    transform:none !important;
  }

  /* Desktop artwork hotspots scale with the image and remain available on tablets. */
  .hotspots{display:block}

  /* General section breathing room. */
  .section{padding-left:6vw;padding-right:6vw}
  .why2100-v2,.system-section,.how-section,.evidence-section,
  .roadmap-section,.vision-section,.civos-section,.about-section{
    padding-left:5vw !important;
    padding-right:5vw !important;
  }

  /* Footer: two-column layout before collapsing to phone. */
  .footer-v232-grid{
    grid-template-columns:1.35fr 1fr !important;
    row-gap:36px;
  }
  .footer-v232-grid>section,
  .footer-v232-grid>nav{
    border-left:0 !important;
  }
}

/* Phone / small tablet */
@media (max-width:900px){
  html{scroll-padding-top:68px}
  body{overflow-x:hidden}

  .mobile-header{
    min-height:60px;
    padding:12px 16px;
  }
  .mobile-brand{
    font-size:13px;
    letter-spacing:1.5px;
    white-space:nowrap;
  }
  .mobile-header button{
    min-width:42px;
    min-height:38px;
    cursor:pointer;
  }
  .mobile-header nav{
    top:61px;
    max-height:calc(100vh - 76px);
    overflow:auto;
    box-shadow:0 18px 45px rgba(0,0,0,.38);
  }
  .mobile-header nav a{
    min-height:45px;
    display:flex;
    align-items:center;
  }

  /* Hero: show the complete locked composition, not a cropped 170% image. */
  .hero{
    padding-top:60px;
    overflow:visible;
  }
  .hero-image{
    width:100% !important;
    max-width:none !important;
    height:auto;
    transform:none !important;
  }

  /* The image-embedded buttons are too small for touch; provide accessible equivalents. */
  .mobile-hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px 5vw 18px;
    background:linear-gradient(180deg,#071b30,#061827);
    position:relative;
    z-index:5;
  }
  .mobile-hero-actions>a,
  .mobile-hero-actions>button{
    min-height:46px;
    border-radius:8px;
    font:800 11px/1.2 Inter,Segoe UI,Arial,sans-serif;
    letter-spacing:.08em;
    cursor:pointer;
  }
  .mobile-discover{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    color:#071b30;
    background:#e3ad3d;
    border:1px solid #f2c45d;
  }
  .mobile-film-trigger{
    color:#dff7ff;
    background:#0a4669;
    border:1px solid #42c8ef;
  }
  .mobile-film-notice{
    grid-column:1/-1;
    display:none;
    padding:16px 17px;
    border:1px solid rgba(73,203,241,.5);
    border-radius:11px;
    background:linear-gradient(145deg,#061b2b,#082b42);
    box-shadow:0 14px 35px rgba(0,0,0,.25);
  }
  .mobile-film-notice.is-open{display:block}
  .mobile-film-notice small{
    display:block;color:#69d8f5;font-size:8px;font-weight:900;letter-spacing:1.3px;margin-bottom:6px
  }
  .mobile-film-notice strong{display:block;font-size:16px;margin-bottom:6px}
  .mobile-film-notice p{margin:0;color:#c6d9e4;font-size:12px;line-height:1.5}
  .mobile-film-notice b{display:block;margin-top:8px;color:#9bd94f;font-size:9px;letter-spacing:.09em;text-transform:uppercase}

  /* Common mobile typography / spacing */
  .section{padding:64px 5vw;min-height:auto}
  .section h2{font-size:clamp(34px,10vw,46px)}
  .section>p,.lead{font-size:16px !important;line-height:1.6}

  /* Avoid oversized inner blocks and horizontal clipping. */
  .wrap,.why-inner,.system-inner,.how-inner,.evidence-inner,
  .roadmap-inner,.vision-inner,.civos-inner,.about-inner{
    width:100%;
    max-width:100%;
  }
  img,svg,video{max-width:100%}

  /* Touch targets for buttons and links in feature sections. */
  .visual-btn,.explore-btn,.evidence-visual-btn,
  .roadmap-btn,.vision-btn,.civos-btn{
    min-height:42px;
  }

  /* Footer becomes a clean single-column stack. */
  .footer-v232-inner{padding-left:5vw !important;padding-right:5vw !important}
  .footer-v232-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .footer-v232-grid>section,
  .footer-v232-grid>nav{
    border-left:0 !important;
    padding-left:0 !important;
  }
  .footer-v232-brand .exact-footer-logo{
    max-width:440px;
    width:100%;
  }
  .footer-social-row{flex-wrap:wrap}
  .footer-v232-bottom{
    padding-left:5vw !important;
    padding-right:5vw !important;
    gap:14px !important;
  }
  .footer-bottom-left,.footer-bottom-right,.footer-bottom-center{
    width:100%;
    justify-content:flex-start !important;
    text-align:left !important;
  }
  .footer-circle-top{
    right:14px !important;
    bottom:18px !important;
  }

  /* Legal pages */
  .legal-topbar{padding:16px 5vw}
  .legal-hero{padding-left:5vw;padding-right:5vw}
  .legal-content{padding-left:5vw;padding-right:5vw}
}

/* Narrow phones */
@media (max-width:560px){
  .mobile-hero-actions{grid-template-columns:1fr}
  .mobile-film-notice{grid-column:1}
  .mobile-brand{font-size:11px;letter-spacing:1.1px}

  .why2100-v2,.system-section,.how-section,.evidence-section,
  .roadmap-section,.vision-section,.civos-section,.about-section{
    padding-left:5vw !important;
    padding-right:5vw !important;
  }

  .footer-v232-share .footer-social-row{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px !important;
  }
  .footer-social{
    min-width:0 !important;
    width:100% !important;
  }
  .footer-v232-bottom{padding-bottom:76px !important}
  .footer-circle-top{bottom:12px !important}
}


/* =========================================================
   v2.5.1 — Mobile Hero Refinement
   Dedicated hero only for phones <= 600px.
   Tablet/Desktop keep the locked artwork unchanged.
   ========================================================= */

.mobile-hero-composition{display:none}

@media (max-width:600px){
  /* Hide the original poster-style hero artwork and its desktop hotspots on phones. */
  .hero > .hero-image,
  .hero > img.hero-image,
  .hero .action-hotspots,
  .hero .hotspots{
    display:none !important;
  }

  .hero{
    padding-top:60px !important;
    background:#051827;
    overflow:visible !important;
  }

  .mobile-hero-composition{
    display:block;
    position:relative;
    min-height:760px;
    overflow:hidden;
    color:#fff;
    background:#061725;
  }

  .mobile-hero-bg{
    position:absolute;
    inset:0;
    background-image:url('assets/mobile-hero-city-clean.webp');
    background-size:auto 760px;
    background-position:58% 48%;
    background-repeat:no-repeat;
    transform:scale(1.03);
  }

  .mobile-hero-overlay{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg,rgba(4,20,34,.78) 0%,rgba(4,20,34,.24) 18%,rgba(4,20,34,.28) 48%,rgba(4,20,34,.82) 82%,#051827 100%),
      linear-gradient(90deg,rgba(4,20,34,.18),rgba(4,20,34,.04),rgba(4,20,34,.34));
  }

  .mobile-hero-content{
    position:relative;
    z-index:2;
    min-height:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:34px 20px 24px;
  }

  .mobile-hero-kicker{
    display:none;
  }

  .mobile-hero-content h1{
    margin:4px 0 3px;
    color:#fff;
    font-size:clamp(37px,11.8vw,51px);
    line-height:.92;
    letter-spacing:-1.2px;
    text-shadow:0 3px 20px rgba(0,0,0,.22);
  }

  .mobile-hero-content h1 span{
    display:block;
    margin-top:3px;
    color:#a7d9f8;
    font-size:1.05em;
  }

  .mobile-hero-slogan{
    margin-top:10px;
    color:#9dd856;
    font-size:9px;
    line-height:1.35;
    font-weight:900;
    letter-spacing:.8px;
  }

  .mobile-hero-rule{
    width:min(240px,70vw);
    margin:17px auto 15px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:7px;
  }
  .mobile-hero-rule i{
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(120,210,242,.8));
  }
  .mobile-hero-rule i:last-child{
    background:linear-gradient(90deg,rgba(120,210,242,.8),transparent);
  }
  .mobile-hero-rule b{
    width:6px;height:6px;border-radius:50%;
    background:#81d5ef;
    box-shadow:0 0 12px rgba(94,207,242,.55);
  }

  .mobile-hero-content h2{
    margin:0;
    max-width:330px;
    color:#fff;
    font-size:23px;
    line-height:1.06;
    text-shadow:0 2px 12px rgba(0,0,0,.35);
  }

  .mobile-hero-content>p{
    max-width:330px;
    margin:12px auto 0;
    color:#e1edf3;
    font-size:12px !important;
    line-height:1.48 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.38);
  }

  .mobile-hero-cta{
    width:100%;
    max-width:350px;
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .mobile-hero-btn{
    min-height:45px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 10px;
    font:800 9.5px/1.15 Inter,Segoe UI,Arial,sans-serif;
    letter-spacing:.35px;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.20);
  }

  .mobile-hero-btn.primary{
    color:#fff;
    border:1px solid #e9bd5c;
    background:linear-gradient(180deg,#d3a63c,#a97418);
  }

  .mobile-hero-btn.secondary{
    color:#fff;
    border:1px solid #52cdec;
    background:linear-gradient(180deg,#0b5275,#07314d);
  }

  .mobile-hero-film-note{
    display:none;
    width:100%;
    max-width:350px;
    margin-top:9px;
    padding:13px 14px;
    text-align:left;
    border-radius:9px;
    border:1px solid rgba(86,209,244,.50);
    background:rgba(4,24,39,.94);
    box-shadow:0 14px 32px rgba(0,0,0,.27);
  }
  .mobile-hero-film-note.is-open{display:block}
  .mobile-hero-film-note small{
    display:block;color:#70d9f5;font-size:7px;font-weight:900;letter-spacing:1.15px;margin-bottom:5px
  }
  .mobile-hero-film-note strong{display:block;font-size:14px;margin-bottom:5px}
  .mobile-hero-film-note p{margin:0;color:#c6d9e4;font-size:10.5px;line-height:1.45}
  .mobile-hero-film-note b{display:block;margin-top:7px;color:#9edb56;font-size:8px;letter-spacing:.08em;text-transform:uppercase}

  .mobile-hero-principles{
    width:100%;
    max-width:360px;
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .mobile-hero-principles>div{
    min-height:70px;
    padding:10px 10px 9px;
    text-align:left;
    border:1px solid rgba(89,194,231,.22);
    border-radius:10px;
    background:rgba(4,30,48,.72);
    backdrop-filter:blur(3px);
  }

  .mobile-hero-principles strong{
    display:block;
    color:#68d8f5;
    font-size:8px;
    letter-spacing:.55px;
    margin-bottom:5px;
  }

  .mobile-hero-principles div:nth-child(2) strong{color:#9dd955}
  .mobile-hero-principles div:nth-child(3) strong{color:#e5ae45}
  .mobile-hero-principles div:nth-child(4) strong{color:#66b7f0}

  .mobile-hero-principles span{
    display:block;
    color:#d0dee6;
    font-size:8.5px;
    line-height:1.35;
  }

  /* Why 2100 should begin immediately after the mobile hero. */
  #why{
    margin-top:0 !important;
  }
}

@media (max-width:420px){
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:735px;
  }
  .mobile-hero-bg{
    background-size:auto 735px;
    background-position:57% 47%;
  }
  .mobile-hero-content{
    padding-left:16px;
    padding-right:16px;
  }
  .mobile-hero-content h2{
    font-size:21px;
  }
}

@media (max-width:360px){
  .mobile-hero-cta{
    grid-template-columns:1fr;
  }
  .mobile-hero-principles{
    grid-template-columns:1fr;
  }
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:890px;
  }
}

@media(max-width:600px){.mobile-hero-actions{display:none!important}}


/* =========================================================
   v2.5.2 — Clean Mobile Hero
   Uses a clean city crop, not the full baked desktop poster.
   ========================================================= */
@media (max-width:600px){
  .mobile-hero-composition{
    min-height:760px !important;
    background:#061725 !important;
  }

  .mobile-hero-bg{
    inset:0 !important;
    background-image:url('assets/mobile-hero-city-clean.webp') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    transform:none !important;
    filter:saturate(.95) contrast(1.02);
  }

  .mobile-hero-overlay{
    background:
      linear-gradient(180deg,
        rgba(3,17,29,.90) 0%,
        rgba(3,17,29,.62) 20%,
        rgba(3,17,29,.30) 46%,
        rgba(3,17,29,.58) 72%,
        #051827 100%) !important;
  }

  .mobile-hero-content{
    min-height:760px !important;
    padding:30px 18px 22px !important;
  }

  .mobile-hero-content h1{
    margin-top:2px !important;
    font-size:clamp(39px,12vw,52px) !important;
    line-height:.92 !important;
    color:#fff !important;
    text-shadow:0 4px 20px rgba(0,0,0,.38) !important;
  }

  .mobile-hero-content h1 span{
    color:#8bc7ef !important;
  }

  .mobile-hero-slogan{
    margin-top:10px !important;
    font-size:9px !important;
    color:#9edb56 !important;
    text-shadow:0 2px 9px rgba(0,0,0,.42);
  }

  .mobile-hero-content h2{
    margin-top:0 !important;
    max-width:330px !important;
    font-size:22px !important;
    line-height:1.08 !important;
    text-shadow:0 3px 13px rgba(0,0,0,.45) !important;
  }

  .mobile-hero-content>p{
    max-width:325px !important;
    color:#e7f1f5 !important;
    text-shadow:0 2px 10px rgba(0,0,0,.52) !important;
  }

  .mobile-hero-cta{
    margin-top:17px !important;
  }

  .mobile-hero-principles{
    margin-top:auto !important;
    padding-top:18px !important;
  }

  .mobile-hero-principles>div{
    background:rgba(3,27,44,.84) !important;
    border-color:rgba(83,196,232,.28) !important;
  }

  /* Absolute guarantee that the original poster and its hotspots never render on phones. */
  .hero-image,
  .action-hotspots,
  .hotspots{
    display:none !important;
  }
}

@media (max-width:420px){
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:735px !important;
  }
}

@media (max-width:360px){
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:880px !important;
  }
}


/* =========================================================
   v2.5.3 — Native Mobile Hero
   Clean, phone-specific composition. No baked desktop text.
   ========================================================= */

@media (max-width:600px){

  /* Ensure the poster version is completely removed on phones. */
  .hero > .hero-image,
  .hero img.hero-image,
  .hero .action-hotspots,
  .hero .hotspots{
    display:none !important;
  }

  .hero{
    padding-top:60px !important;
    background:#041522 !important;
    overflow:visible !important;
  }

  .mobile-hero-composition{
    display:block !important;
    position:relative !important;
    min-height:760px !important;
    overflow:hidden !important;
    color:#fff !important;
    background:
      radial-gradient(circle at 50% 37%,rgba(54,182,224,.10),transparent 25%),
      linear-gradient(180deg,#041521 0%,#062239 51%,#041726 100%) !important;
  }

  /* No full poster image. This layer is now only the clean lower city strip. */
  .mobile-hero-bg{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:300px !important;
    bottom:145px !important;
    background-image:
      linear-gradient(180deg,#062239 0%,rgba(6,34,57,.18) 17%,rgba(4,22,36,.15) 78%,#041726 100%),
      url('assets/mobile-native-city.jpg') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    transform:none !important;
    filter:saturate(.92) brightness(.83) contrast(1.05) !important;
  }

  .mobile-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    background:
      radial-gradient(circle at 50% 53%,rgba(46,190,232,.09),transparent 30%),
      linear-gradient(180deg,rgba(3,17,29,.08) 0%,rgba(3,17,29,.02) 30%,rgba(3,17,29,.18) 67%,rgba(3,17,29,.92) 100%) !important;
  }

  .mobile-hero-content{
    position:relative !important;
    z-index:2 !important;
    min-height:760px !important;
    padding:31px 18px 21px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }

  .mobile-hero-content h1{
    margin:3px 0 0 !important;
    width:100% !important;
    color:#fff !important;
    font-size:clamp(30px,9.3vw,38px) !important;
    line-height:1 !important;
    letter-spacing:-1px !important;
    white-space:nowrap !important;
    text-shadow:0 3px 17px rgba(0,0,0,.35) !important;
  }

  .mobile-hero-content h1 span{
    display:inline !important;
    margin:0 !important;
    color:inherit !important;
    font-size:inherit !important;
  }

  .mobile-hero-slogan{
    margin-top:9px !important;
    color:#9edb53 !important;
    font-size:8.5px !important;
    line-height:1.35 !important;
    font-weight:900 !important;
    letter-spacing:.65px !important;
  }

  .mobile-hero-rule{
    width:min(225px,68vw) !important;
    margin:15px auto 13px !important;
  }

  .mobile-hero-content h2{
    max-width:335px !important;
    margin:0 !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1.08 !important;
    text-shadow:0 2px 11px rgba(0,0,0,.32) !important;
  }

  .mobile-hero-content>p{
    max-width:330px !important;
    margin:11px auto 0 !important;
    color:#cfe0e9 !important;
    font-size:11.5px !important;
    line-height:1.48 !important;
    text-shadow:none !important;
  }

  .mobile-hero-cta{
    width:100% !important;
    max-width:350px !important;
    margin-top:17px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }

  .mobile-hero-btn{
    min-height:44px !important;
    border-radius:8px !important;
    padding:9px 9px !important;
    font-size:9px !important;
  }

  .mobile-hero-film-note{
    width:100% !important;
    max-width:350px !important;
  }

  /* Principles sit in a real footer-like band instead of on top of the image. */
  .mobile-hero-principles{
    width:calc(100% + 36px) !important;
    max-width:none !important;
    margin:auto -18px -21px !important;
    padding:15px 18px 18px !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    background:linear-gradient(180deg,rgba(3,19,31,.18),#031827 28%,#031827 100%) !important;
    border-top:1px solid rgba(83,196,232,.14) !important;
  }

  .mobile-hero-principles>div{
    min-height:66px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
    background:#06263b !important;
    border:1px solid rgba(84,198,234,.18) !important;
    backdrop-filter:none !important;
  }

  .mobile-hero-principles strong{
    font-size:7.7px !important;
  }

  .mobile-hero-principles span{
    font-size:8px !important;
    line-height:1.35 !important;
  }

  #why{
    margin-top:0 !important;
  }
}

@media (max-width:420px){
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:735px !important;
  }

  .mobile-hero-bg{
    top:288px !important;
    bottom:140px !important;
  }

  .mobile-hero-content h1{
    font-size:clamp(29px,9vw,35px) !important;
  }
}

@media (max-width:360px){
  .mobile-hero-composition,
  .mobile-hero-content{
    min-height:840px !important;
  }

  .mobile-hero-cta{
    grid-template-columns:1fr !important;
  }

  .mobile-hero-principles{
    grid-template-columns:1fr !important;
  }

  .mobile-hero-bg{
    top:330px !important;
    bottom:250px !important;
  }
}


/* =========================================================
   v2.6.0 — Website Content & Functionality Polish
   ========================================================= */
.skip-link{
  position:fixed;left:16px;top:-80px;z-index:10000;
  padding:10px 14px;border-radius:7px;
  background:#fff;color:#06233a;font-weight:800;text-decoration:none;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.skip-link:focus{top:16px}

a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid #62d8f5;
  outline-offset:3px;
}

a[aria-disabled="true"]{
  cursor:not-allowed;
}

.site-toast{
  position:fixed;
  left:50%;bottom:26px;
  transform:translate(-50%,18px);
  z-index:9999;
  max-width:min(420px,calc(100vw - 32px));
  padding:11px 16px;
  border:1px solid rgba(86,210,244,.45);
  border-radius:9px;
  background:rgba(3,24,39,.96);
  color:#eaf7fb;
  font:600 13px/1.4 Inter,Segoe UI,Arial,sans-serif;
  box-shadow:0 14px 35px rgba(0,0,0,.30);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.site-toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   v2.6.1 — Navigation / CTA / Lightbox / Download polish
   ========================================================= */
section[id]{scroll-margin-top:74px}

.mobile-header nav a.is-current,
.footer-v232-links a.is-current{
  color:#66daf6 !important;
}
.mobile-header nav a.is-current::after{
  content:"";
  width:5px;height:5px;border-radius:50%;
  background:#9bd94f;margin-left:auto;
}

.visual-modal-actions{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
#visualModalDownload,#visualModalSave{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(82,204,241,.32);
  border-radius:7px;
  color:#8fe3f9;
  background:rgba(8,61,86,.30);
  text-decoration:none;
  font-size:9px;
  font-weight:900;
  letter-spacing:.75px;
}
#visualModalSave{
  border-color:rgba(151,211,78,.38);
  color:#a4dc64;
}
#visualModalDownload:hover,#visualModalSave:hover{
  background:rgba(12,79,107,.55);
  color:#fff;
}

.visual-modal-stage img{
  cursor:zoom-in;
  transition:width .18s ease,max-width .18s ease;
}
.visual-modal-stage.is-zoomed img{
  max-width:none !important;
  width:auto !important;
  cursor:zoom-out;
}

.stack-layer[role="button"]:focus-visible,
.decision-step[role="button"]:focus-visible{
  outline:2px solid #6edaf6;
  outline-offset:3px;
}

.social-round{cursor:pointer !important}
.social-round[data-social]:active{transform:translateY(1px)}

@media(max-width:650px){
  .visual-modal-actions{justify-content:flex-start}
  #visualModalDownload,#visualModalSave{flex:1 1 auto}
}


/* =========================================================
   v2.7.1 — Performance & Asset Optimization
   ========================================================= */

/* Let the browser skip off-screen rendering work for long sections. */
#why,#system,#how,#evidence,#roadmap,#vision,#civos,#about{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

/* Reduce paint cost for large decorative sections without changing appearance. */
.roadmap-section,.vision-section,.civos-section,.about-section{
  contain:layout paint;
}

/* GPU-friendly transforms for the two recurring floating/interactive layers. */
.back-to-top,
.film-hover-card{
  will-change:transform,opacity;
}

/* Avoid expensive background attachment behaviors on smaller devices. */
@media(max-width:900px){
  *{
    background-attachment:scroll !important;
  }
}


/* =========================================================
   v2.7.2 — Accessibility & Browser QA
   ========================================================= */

/* Consistent focus treatment */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:3px solid #6edaf6 !important;
  outline-offset:3px !important;
}

/* Ensure links remain identifiable in long-form legal/content text */
.legal-card a,
.about-section p a,
.about-section li a{
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* High-contrast support */
@media (prefers-contrast: more){
  :root{
    --qa-border:#a7e8fa;
  }
  .visual-modal,
  .film-hover-card,
  .mobile-film-notice,
  .footer-contact-card{
    border-color:var(--qa-border) !important;
  }
  .mobile-hero-content>p,
  .legal-card p,
  .about-section p{
    color:#e9f4f8 !important;
  }
}

/* Forced-colors support for Windows High Contrast */
@media (forced-colors: active){
  *{
    forced-color-adjust:auto;
  }
  .mobile-hero-btn,
  .social-round,
  .back-to-top,
  .visual-modal-close{
    border:1px solid ButtonText !important;
  }
}

/* Safari/WebKit backdrop filter fallback */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  .film-progress-backdrop,
  .footer-v232,
  .mobile-film-notice,
  .visual-modal{
    background-color:#041827 !important;
  }
}
@supports (-webkit-backdrop-filter: blur(8px)){
  .film-progress-backdrop{
    -webkit-backdrop-filter:blur(8px);
  }
}

/* Prevent accidental text clipping at browser zoom / OS scaling */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button,input,select,textarea{
  font:inherit;
}
img,svg{
  height:auto;
}

/* Improve touch behavior */
button,
a,
[role="button"]{
  -webkit-tap-highlight-color:rgba(110,218,246,.18);
}
@media (pointer:coarse){
  button,
  a.mobile-hero-btn,
  .social-round,
  [role="button"]{
    min-height:44px;
  }
}

/* Reduced motion: disable all non-essential motion */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto !important;
  }
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* Zoom robustness at 200% */
@media (max-width:700px){
  .visual-modal-toolbar{
    flex-wrap:wrap !important;
  }
  .visual-modal-actions{
    width:100%;
  }
}

/* Guard against overflow in all major content regions */
section,
article,
nav,
footer,
header{
  min-width:0;
}
pre,code{
  max-width:100%;
  overflow:auto;
}

/* Make hidden regions truly unavailable to assistive tech */
[hidden]{
  display:none !important;
}


/* v2.8-BG.2 — explicit EN/BG language switch */
.language-switch{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font:700 12px/1 Inter,Segoe UI,Arial,sans-serif;
  letter-spacing:.06em;
}
.language-switch a{
  color:#d8edf5;
  text-decoration:none;
  opacity:.72;
}
.language-switch a:hover,
.language-switch a.active{
  color:#fff;
  opacity:1;
}
.language-switch span{
  color:#6acfe9;
  opacity:.65;
}
@media(max-width:900px){
  .language-switch{
    font-size:11px;
    margin-left:auto;
    margin-right:10px;
  }
}


/* =========================================================
   v2.8-BG.3 — explicit language switch + native BG desktop Home
   ========================================================= */
.desktop-language-switch{
  position:absolute;
  top:28px;
  right:24px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(95,211,242,.32);
  border-radius:8px;
  background:rgba(3,24,39,.72);
  backdrop-filter:blur(5px);
  font:800 11px/1 Inter,Segoe UI,Arial,sans-serif;
}
.desktop-language-switch a,
.mobile-language-switch a{color:#d7eef6;text-decoration:none;opacity:.65}
.desktop-language-switch a.active,
.mobile-language-switch a.active{color:#fff;opacity:1}
.desktop-language-switch span,
.mobile-language-switch span{color:#62d3f2;opacity:.6}

.mobile-language-switch{display:none}

/* English desktop: place switch directly over the baked EN control */
html[lang="en"] #home>.desktop-language-switch{
  top:22px;
  right:28px;
}

/* Native BG desktop hero */
.bg-desktop-hero{display:none}

@media(min-width:901px){
  html[lang="bg"] #home>.hero-image,
  html[lang="bg"] #home>.hotspots,
  html[lang="bg"] #home>.action-hotspots,
  html[lang="bg"] #home>.desktop-language-switch{
    display:none !important;
  }

  html[lang="bg"] .bg-desktop-hero{
    display:block;
    position:relative;
    min-height:780px;
    overflow:hidden;
    color:#fff;
    background:#061827;
  }
  .bg-desktop-hero-bg{
    position:absolute;
    inset:0;
    background:url('assets/bg-home-city-wide.jpg') center 56%/cover no-repeat;
    filter:saturate(1.03) brightness(.92);
  }
  .bg-desktop-hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(2,17,30,.72) 0%,rgba(2,17,30,.13) 18%,rgba(2,17,30,.04) 52%,rgba(2,17,30,.72) 100%),
      radial-gradient(circle at 50% 34%,rgba(245,248,246,.80) 0%,rgba(245,248,246,.32) 24%,transparent 49%);
  }
  .bg-desktop-topbar{
    position:relative;z-index:3;
    height:92px;
    display:grid;
    grid-template-columns:300px 1fr auto;
    align-items:center;
    gap:24px;
    padding:18px 28px;
    background:linear-gradient(180deg,rgba(3,20,34,.86),rgba(3,20,34,.26));
  }
  .bg-wordmark{display:flex;flex-direction:column;gap:5px}
  .bg-wordmark strong{font-size:24px;letter-spacing:.16em}
  .bg-wordmark span{color:#e3ad3a;font-size:10px;letter-spacing:.13em}
  .bg-desktop-nav{
    display:flex;justify-content:center;align-items:center;gap:19px;min-width:0;
  }
  .bg-desktop-nav a{
    color:#f2f7fa;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap;
  }
  .bg-desktop-nav a:hover{color:#66daf6}
  .bg-desktop-nav .civos-link{
    padding:10px 12px;border:1px solid #4fd0f2;border-radius:5px;color:#74dcf6;
  }
  .bg-switch{position:static;justify-self:end}

  .bg-desktop-copy{
    position:relative;z-index:2;
    width:min(920px,72vw);
    margin:70px auto 0;
    text-align:center;
  }
  .bg-desktop-copy h1{
    margin:0;color:#0b3476;
    font-size:clamp(64px,7.5vw,112px);
    line-height:.92;letter-spacing:-.045em;
    text-shadow:0 1px 0 rgba(255,255,255,.18);
  }
  .bg-desktop-slogan{
    margin-top:14px;
    color:#388634;font-size:clamp(16px,1.6vw,24px);font-weight:900;letter-spacing:.04em;
  }
  .bg-desktop-rule{
    width:330px;margin:20px auto 18px;display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center
  }
  .bg-desktop-rule i{height:1px;background:#285886}.bg-desktop-rule b{width:8px;height:8px;border-radius:50%;background:#153e73}
  .bg-desktop-copy h2{
    color:#082e69;font-size:clamp(26px,2.3vw,38px);line-height:1.08;margin:0;
  }
  .bg-desktop-copy p{
    color:#102d4c;font-size:clamp(14px,1.1vw,17px);line-height:1.5;margin:17px 0 0;
  }
  .bg-desktop-actions{
    margin-top:24px;display:flex;justify-content:center;gap:14px
  }
  .bg-desktop-actions a,.bg-desktop-actions button{
    min-width:210px;min-height:48px;border-radius:7px;padding:12px 16px;
    display:inline-flex;align-items:center;justify-content:center;
    font:800 12px/1 Inter,Segoe UI,Arial,sans-serif;text-decoration:none;cursor:pointer
  }
  .bg-desktop-actions a{color:#fff;border:1px solid #e7bd59;background:linear-gradient(#d2a53a,#a77317)}
  .bg-desktop-actions button{color:#fff;border:1px solid #4fd0f2;background:linear-gradient(#0b5276,#07314e)}
  .bg-desktop-film-note{
    display:none;width:min(620px,80%);margin:14px auto 0;padding:14px 16px;
    border:1px solid rgba(70,205,241,.5);border-radius:10px;background:rgba(4,28,45,.94);
    text-align:left;color:#d8e9ef
  }
  .bg-desktop-film-note.is-open{display:block}
  .bg-desktop-film-note strong{display:block;color:#fff;margin-bottom:5px}
  .bg-desktop-film-note span{display:block;font-size:12px;line-height:1.5}
  .bg-desktop-film-note b{display:block;margin-top:7px;color:#9bd94f;font-size:10px;letter-spacing:.09em;text-transform:uppercase}

  .bg-desktop-principles{
    position:absolute;z-index:2;left:50%;bottom:20px;translate:-50% 0;
    width:min(1240px,88vw);display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(3,27,44,.83);border:1px solid rgba(84,199,236,.24);border-radius:10px;overflow:hidden;
  }
  .bg-desktop-principles>div{padding:17px 20px;border-right:1px solid rgba(84,199,236,.18)}
  .bg-desktop-principles>div:last-child{border-right:0}
  .bg-desktop-principles strong{display:block;color:#65daf6;font-size:12px;margin-bottom:6px}
  .bg-desktop-principles div:nth-child(2) strong{color:#9bd94f}
  .bg-desktop-principles div:nth-child(3) strong{color:#e3aa37}
  .bg-desktop-principles span{display:block;color:#d1dfe7;font-size:11px;line-height:1.4}
}

@media(max-width:900px){
  .desktop-language-switch{display:none !important}
  .mobile-language-switch{
    display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:8px;
    font:800 10px/1 Inter,Segoe UI,Arial,sans-serif;
  }
}


/* =========================================================
   v2.8-BG.4 — language dropdown + BG hero asset path fix
   ========================================================= */
.desktop-language-switch,
.mobile-language-switch,
.language-switch{
  display:none !important;
}

.language-dropdown{
  position:relative;
  z-index:120;
  font-family:Inter,Segoe UI,Arial,sans-serif;
}
.language-dropdown-toggle{
  min-width:64px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border:1px solid rgba(91,210,242,.34);
  border-radius:8px;
  color:#eef9fd;
  background:rgba(3,24,39,.78);
  font:800 11px/1 Inter,Segoe UI,Arial,sans-serif;
  letter-spacing:.06em;
  cursor:pointer;
}
.language-caret{
  color:#80dff7;
  font-size:12px;
  transform:translateY(-1px);
}
.language-dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:86px;
  padding:6px;
  border:1px solid rgba(91,210,242,.34);
  border-radius:8px;
  background:rgba(3,24,39,.97);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  transition:.15s ease;
}
.language-dropdown.open .language-dropdown-menu,
.language-dropdown:focus-within .language-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.language-dropdown-menu a{
  display:block;
  padding:9px 11px;
  border-radius:6px;
  color:#d9eef6;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.language-dropdown-menu a:hover,
.language-dropdown-menu a.active{
  color:#fff;
  background:rgba(44,179,220,.16);
}

/* Overlay English dropdown directly where the baked language control sits. */
html[lang="en"] #home>.desktop-lang-dropdown{
  position:absolute;
  top:20px;
  right:24px;
}

/* Native BG topbar dropdown is part of the grid, not absolute. */
.bg-native-lang-dropdown{
  justify-self:end;
}

/* Keep BG native desktop grid balanced. */
@media(min-width:901px){
  html[lang="bg"] .bg-desktop-topbar{
    grid-template-columns:300px 1fr auto !important;
  }
}

/* Mobile dropdown lives inside the compact header. */
.mobile-lang-dropdown{
  display:none;
}
@media(max-width:900px){
  .desktop-lang-dropdown,
  .bg-native-lang-dropdown{
    display:none !important;
  }
  .mobile-lang-dropdown{
    display:block;
    margin-left:auto;
    margin-right:8px;
  }
  .mobile-lang-dropdown .language-dropdown-toggle{
    min-width:54px;
    height:34px;
    font-size:10px;
  }
}


/* =========================================================
   v2.8-BG.5 — approved Bulgarian Home artwork
   ========================================================= */

/* Desktop/tablet Bulgarian Home uses the approved Bulgarian poster.
   Phone <=600px keeps the already approved native mobile hero. */
@media (min-width:601px){
  html[lang="bg"] #home>.hero-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    transform:none !important;
  }

  html[lang="bg"] #home>.action-hotspots,
  html[lang="bg"] #home>.hotspots{
    display:block !important;
  }

  html[lang="bg"] .bg-desktop-hero{
    display:none !important;
  }

  html[lang="bg"] #home>.bg-image-lang-dropdown{
    position:absolute;
    top:18px;
    right:18px;
    z-index:180;
  }
}

/* CTA coordinates on the approved 1536×1024 BG artwork. */
@media (min-width:901px){
  html[lang="bg"] .action-hotspots .discover{
    left:36.55% !important;
    top:47.15% !important;
    width:13.85% !important;
    height:4.85% !important;
  }
  html[lang="bg"] .action-hotspots .film{
    left:51.35% !important;
    top:47.15% !important;
    width:12.9% !important;
    height:4.85% !important;
  }
}

@media (min-width:601px) and (max-width:900px){
  html[lang="bg"] #home>.bg-image-lang-dropdown{
    top:10px;
    right:12px;
  }
}

@media (max-width:600px){
  html[lang="bg"] #home>.bg-image-lang-dropdown{
    display:none !important;
  }
}


/* v2.8-BG.6 — Bulgarian WATCH THE FILM hover card */
@media (min-width:601px){
  html[lang="bg"] .action-hotspots .film .film-hover-card{
    width:390px;
    max-width:min(390px,90vw);
  }
}


/* =========================================================
   v2.8-BG.8 — Language control mask fix
   The desktop hero artwork already contains a baked language
   indicator. The live dropdown now uses an opaque backing
   plate large enough to fully cover that baked indicator.
   ========================================================= */

@media (min-width:601px){
  /* EN desktop hero */
  html[lang="en"] #home .language-dropdown,
  /* BG desktop hero */
  html[lang="bg"] #home .bg-image-lang-dropdown{
    background:#061b2a !important;
    border:1px solid rgba(71,202,245,.48) !important;
    border-radius:12px !important;
    box-shadow:0 0 0 8px #061b2a !important;
    min-width:92px !important;
    height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    isolation:isolate;
  }

  html[lang="en"] #home .language-dropdown::before,
  html[lang="bg"] #home .bg-image-lang-dropdown::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
    background:#061b2a;
    border-radius:14px;
    pointer-events:none;
  }

  html[lang="en"] #home .language-dropdown-toggle,
  html[lang="bg"] #home .bg-image-lang-dropdown .language-dropdown-toggle{
    position:relative;
    z-index:2;
    width:100% !important;
    height:100% !important;
    background:#061b2a !important;
  }

  html[lang="en"] #home .language-dropdown-menu,
  html[lang="bg"] #home .bg-image-lang-dropdown .language-dropdown-menu{
    z-index:210 !important;
  }
}


/* =========================================================
   v2.8-BG.9 — Compact language dropdown
   Keeps the baked EN/BG indicator covered without overlapping
   the Explore CivOS button.
   ========================================================= */

@media (min-width:901px){
  html[lang="en"] #home .language-dropdown,
  html[lang="bg"] #home .bg-image-lang-dropdown{
    min-width:64px !important;
    width:64px !important;
    height:36px !important;
    border-radius:8px !important;
    box-shadow:0 0 0 5px #061b2a !important;
  }

  html[lang="en"] #home .language-dropdown::before,
  html[lang="bg"] #home .bg-image-lang-dropdown::before{
    top:-6px !important;
    right:-6px !important;
    bottom:-6px !important;
    left:-6px !important;
    border-radius:10px !important;
  }

  html[lang="en"] #home .language-dropdown-toggle,
  html[lang="bg"] #home .bg-image-lang-dropdown .language-dropdown-toggle{
    min-width:64px !important;
    width:64px !important;
    height:36px !important;
    padding:0 8px !important;
    gap:5px !important;
    font-size:10px !important;
    border-radius:8px !important;
  }

  html[lang="en"] #home .language-dropdown-menu,
  html[lang="bg"] #home .bg-image-lang-dropdown .language-dropdown-menu{
    min-width:64px !important;
    width:64px !important;
    padding:4px !important;
    top:calc(100% + 5px) !important;
    right:0 !important;
    border-radius:7px !important;
  }

  html[lang="en"] #home .language-dropdown-menu a,
  html[lang="bg"] #home .bg-image-lang-dropdown .language-dropdown-menu a{
    padding:7px 8px !important;
    font-size:10px !important;
  }

  html[lang="en"] #home>.desktop-lang-dropdown{
    top:18px !important;
    right:18px !important;
  }

  html[lang="bg"] #home>.bg-image-lang-dropdown{
    top:16px !important;
    right:16px !important;
  }
}


/* =========================================================
   v2.8-BG.10 — Bulgarian How It Works card title fit
   Prevents longer Bulgarian labels from overflowing the cards.
   ========================================================= */
html[lang="bg"] .decision-step{
  min-width:0;
}

html[lang="bg"] .decision-step h3,
html[lang="bg"] .decision-step strong,
html[lang="bg"] .decision-step .step-title{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

@media (min-width:901px){
  html[lang="bg"] .decision-step h3,
  html[lang="bg"] .decision-step strong,
  html[lang="bg"] .decision-step .step-title{
    font-size:clamp(18px,1.55vw,24px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.02em;
  }

  html[lang="bg"] .decision-step{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}

/* Slightly smaller treatment for the two longest Bulgarian labels. */
html[lang="bg"] .decision-step[data-step="sense"] h3,
html[lang="bg"] .decision-step[data-step="sense"] strong,
html[lang="bg"] .decision-step[data-step="model"] h3,
html[lang="bg"] .decision-step[data-step="model"] strong{
  font-size:clamp(17px,1.4vw,22px) !important;
}


/* =========================================================
   v2.8-BG.11 — Precise Bulgarian decision-card title fit
   ========================================================= */

/* Target the real Bulgarian decision cards directly. */
html[lang="bg"] .bg-decision-card{
  min-width:0 !important;
  overflow:hidden !important;
}

/* Give the title its own bounded line box. */
html[lang="bg"] .bg-decision-title{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
}

/* Desktop / large tablet: use a slightly smaller title and tighter side padding. */
@media (min-width:901px){
  html[lang="bg"] .bg-decision-card{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  html[lang="bg"] .bg-decision-title{
    font-size:18px !important;
    line-height:1.08 !important;
    letter-spacing:-0.03em !important;
  }

  html[lang="bg"] .bg-decision-card-long .bg-decision-title{
    font-size:16px !important;
    letter-spacing:-0.04em !important;
  }
}

/* Mid-size widths: shrink a touch more so the labels always stay inside. */
@media (min-width:601px) and (max-width:1100px){
  html[lang="bg"] .bg-decision-title{
    font-size:16px !important;
  }

  html[lang="bg"] .bg-decision-card-long .bg-decision-title{
    font-size:14px !important;
  }
}

/* Phone layout: keep titles readable but never wider than the card. */
@media (max-width:600px){
  html[lang="bg"] .bg-decision-card{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  html[lang="bg"] .bg-decision-title{
    font-size:18px !important;
    line-height:1.12 !important;
  }
}


/* =========================================================
   v2.8-BG.12 — Final Bulgarian decision-card title fit
   ========================================================= */

/* The first two Bulgarian labels are unusually long.
   Keep them on one line and fit them inside the card cleanly. */
html[lang="bg"] .bg-decision-card-long{
  padding-left:12px !important;
  padding-right:12px !important;
}

html[lang="bg"] .bg-decision-card-long .bg-decision-title{
  white-space:nowrap !important;
  overflow:visible !important;
  max-width:100% !important;
  width:100% !important;
  font-size:14px !important;
  line-height:1.05 !important;
  letter-spacing:-0.055em !important;
}

/* A little extra room at common laptop/desktop widths. */
@media (min-width:1200px){
  html[lang="bg"] .bg-decision-card-long .bg-decision-title{
    font-size:15px !important;
    letter-spacing:-0.05em !important;
  }
}

/* On medium/tablet widths, reduce slightly further to avoid clipping. */
@media (min-width:601px) and (max-width:1199px){
  html[lang="bg"] .bg-decision-card-long .bg-decision-title{
    font-size:13px !important;
    letter-spacing:-0.06em !important;
  }
}

/* Phones stack the cards, so normal readable sizing is fine. */
@media (max-width:600px){
  html[lang="bg"] .bg-decision-card-long .bg-decision-title{
    white-space:normal !important;
    font-size:18px !important;
    letter-spacing:-0.02em !important;
  }
}


/* =========================================================
   v2.8-BG.13 — Wider first two How It Works cards
   ========================================================= */

/* At desktop/tablet widths, give the first two Bulgarian cards
   more horizontal room instead of shrinking their titles further. */
@media (min-width:701px){
  html[lang="bg"] .decision-flow{
    column-gap:18px !important;
  }

  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(1),
  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(2){
    width:205px !important;
    min-width:205px !important;
    max-width:205px !important;
    flex:0 0 205px !important;
  }

  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(1) .bg-decision-title,
  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(2) .bg-decision-title{
    font-size:16px !important;
    letter-spacing:-0.025em !important;
    white-space:nowrap !important;
  }
}

/* On large desktop screens there is room for a little more width. */
@media (min-width:1200px){
  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(1),
  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(2){
    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;
    flex-basis:220px !important;
  }

  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(1) .bg-decision-title,
  html[lang="bg"] .decision-flow .bg-decision-card:nth-of-type(2) .bg-decision-title{
    font-size:17px !important;
  }
}


/* =========================================================
   v2.8-BG.14 — Actual grid fix for first two BG cards
   Previous rule targeted .decision-flow, but the real container
   is .decision-steps. This rule changes the actual grid columns.
   ========================================================= */

@media (min-width:1101px){
  html[lang="bg"] .decision-steps{
    /* card 1 | arrow | card 2 | arrow | remaining cards/arrows */
    grid-template-columns:
      190px auto
      190px auto
      minmax(125px,1fr) auto
      minmax(125px,1fr) auto
      minmax(125px,1fr) auto
      minmax(125px,1fr) auto
      minmax(125px,1fr) !important;
    gap:8px !important;
  }

  html[lang="bg"] .decision-steps > .decision-step:nth-child(1),
  html[lang="bg"] .decision-steps > .decision-step:nth-child(3){
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }

  html[lang="bg"] .decision-steps > .decision-step:nth-child(1) h4,
  html[lang="bg"] .decision-steps > .decision-step:nth-child(3) h4{
    font-size:16px !important;
    line-height:1.1 !important;
    letter-spacing:-0.02em !important;
    white-space:nowrap !important;
  }
}

/* At narrower tablet widths the existing 2-column responsive layout remains intact. */


/* =========================================================
   v2.8-BG.15 — Balanced Bulgarian How It Works grid
   ========================================================= */

/* The previous 190px columns were too wide and pushed card 07
   outside the site boundary. These values give the first two
   cards only the extra width they actually need and redistribute
   the remaining space across cards 03–07. */
@media (min-width:1151px){
  html[lang="bg"] .decision-steps{
    grid-template-columns:
      140px 18px
      140px 18px
      minmax(105px,1fr) 18px
      minmax(105px,1fr) 18px
      minmax(105px,1fr) 18px
      minmax(105px,1fr) 18px
      minmax(105px,1fr) !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  html[lang="bg"] .decision-steps > .decision-step{
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    padding-left:13px !important;
    padding-right:13px !important;
  }

  html[lang="bg"] .decision-steps > .flow-arrow{
    width:18px !important;
    min-width:18px !important;
    font-size:16px !important;
  }

  html[lang="bg"] .decision-steps > .decision-step:nth-child(1) h4,
  html[lang="bg"] .decision-steps > .decision-step:nth-child(3) h4{
    font-size:14px !important;
    line-height:1.1 !important;
    letter-spacing:-0.025em !important;
    white-space:nowrap !important;
  }
}

/* Preserve the existing responsive 2-column / 1-column behavior below 1150px. */


/* =========================================================
   v2.8-BG.16 — Equal height for all How It Works cards
   ========================================================= */

@media (min-width:1151px){
  html[lang="bg"] .decision-steps{
    align-items:stretch !important;
  }

  html[lang="bg"] .decision-steps > .decision-step{
    height:100% !important;
    min-height:0 !important;
    align-self:stretch !important;
    box-sizing:border-box !important;
  }

  /* Normalize the first card, which inherited a larger height
     from an earlier BG-specific override. */
  html[lang="bg"] .decision-steps > .decision-step:nth-child(1){
    min-height:0 !important;
    height:auto !important;
  }

  /* Make the whole row use one common card height. */
  html[lang="bg"] .decision-steps{
    grid-auto-rows:1fr !important;
  }
}


/* =========================================================
   v2.8-BG.17 — Align first decision card vertically
   The issue is position, not height: card 01 has an inherited
   negative/top offset. Normalize its vertical placement.
   ========================================================= */

@media (min-width:1151px){
  html[lang="bg"] .decision-steps > .decision-step:nth-child(1){
    position:relative !important;
    top:0 !important;
    bottom:auto !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    transform:none !important;
    translate:none !important;
    align-self:stretch !important;
  }

  /* Normalize every card to the same grid start/end so no earlier
     special-card rule can move card 01 independently. */
  html[lang="bg"] .decision-steps > .decision-step{
    grid-row:1 !important;
    margin-block:0 !important;
  }

  html[lang="bg"] .decision-steps > .flow-arrow{
    grid-row:1 !important;
    align-self:center !important;
  }
}


/* =========================================================
   v2.8-BG.19 — Equal heading size for first two BG decision cards
   Keep the approved card widths/layout; only normalize title typography.
   ========================================================= */
@media (min-width:1151px){
  html[lang="bg"] .decision-steps > .decision-step:nth-child(1) h4,
  html[lang="bg"] .decision-steps > .decision-step:nth-child(3) h4{
    font-size:17px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    letter-spacing:normal !important;
    white-space:nowrap !important;
  }
}


/* =========================================================
   v2.8-BG.21 — Evidence validation pipeline alignment
   Equal card dimensions + aligned title/subtitle baselines.
   ========================================================= */

@media (min-width:901px){
  html[lang="bg"] .validation-pipeline,
  html[lang="bg"] .evidence-pipeline,
  html[lang="bg"] .pipeline-row{
    align-items:stretch !important;
  }

  html[lang="bg"] .pipe-step{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    min-height:192px !important;
    height:100% !important;
    padding:24px 26px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
  }

  html[lang="bg"] .pipe-step .pipe-num,
  html[lang="bg"] .pipe-step > span:first-child{
    min-height:20px !important;
    margin-bottom:16px !important;
  }

  html[lang="bg"] .pipe-step h3,
  html[lang="bg"] .pipe-step h4,
  html[lang="bg"] .pipe-step strong{
    display:flex !important;
    align-items:flex-start !important;
    min-height:54px !important;
    margin:0 0 10px !important;
    line-height:1.08 !important;
  }

  html[lang="bg"] .pipe-step p{
    margin:0 !important;
    min-height:56px !important;
    line-height:1.45 !important;
  }

  /* Make all six cards share equal grid width. */
  html[lang="bg"] .pipeline-grid,
  html[lang="bg"] .validation-pipeline,
  html[lang="bg"] .evidence-pipeline{
    grid-template-columns:
      minmax(0,1fr) auto
      minmax(0,1fr) auto
      minmax(0,1fr) auto
      minmax(0,1fr) auto
      minmax(0,1fr) auto
      minmax(0,1fr) !important;
  }
}

/* Tablet: keep cards equal within the responsive layout. */
@media (min-width:601px) and (max-width:900px){
  html[lang="bg"] .pipe-step{
    min-height:180px !important;
    height:100% !important;
  }
  html[lang="bg"] .pipe-step h3,
  html[lang="bg"] .pipe-step h4,
  html[lang="bg"] .pipe-step strong{
    min-height:48px !important;
  }
}


/* =========================================================
   v2.8-BG.22 — Evidence pipeline secondary-text alignment
   Raise and align the descriptive copy while preserving the
   approved equal card dimensions and title alignment.
   ========================================================= */
@media (min-width:901px){
  html[lang="bg"] .pipeline-steps .pipe-step{
    justify-content:flex-start !important;
  }

  html[lang="bg"] .pipeline-steps .pipe-step b{
    display:block !important;
    margin:0 0 4px !important;
  }

  html[lang="bg"] .pipeline-steps .pipe-step strong{
    display:flex !important;
    align-items:flex-start !important;
    min-height:44px !important;
    margin:0 0 10px !important;
  }

  html[lang="bg"] .pipeline-steps .pipe-step span{
    display:block !important;
    margin:0 !important;
    min-height:0 !important;
    line-height:1.45 !important;
  }
}


/* v2.8-BG.23 — Bulgarian Vision 2100 cinematic background */
html[lang="bg"] .vision-image{
  background-image:url('assets/bg-visuals/20-integrated-future-architecture-bg.webp') !important;
}


/* =========================================================
   v2.8-BG.24 — Vision "A Day in the System" card alignment
   Equal card dimensions and aligned time/title/body baselines.
   ========================================================= */

@media (min-width:901px){
  html[lang="bg"] .day-timeline{
    align-items:stretch !important;
  }

  html[lang="bg"] .day-timeline article{
    box-sizing:border-box !important;
    min-height:225px !important;
    height:100% !important;
    padding:22px 24px !important;
    display:grid !important;
    grid-template-rows:22px 58px 1fr !important;
    align-content:start !important;
  }

  html[lang="bg"] .day-timeline article > b{
    display:block !important;
    margin:0 !important;
    align-self:start !important;
  }

  html[lang="bg"] .day-timeline article > strong{
    display:flex !important;
    align-items:flex-start !important;
    margin:10px 0 0 !important;
    min-height:48px !important;
    line-height:1.08 !important;
  }

  html[lang="bg"] .day-timeline article > p{
    margin:8px 0 0 !important;
    align-self:start !important;
    line-height:1.48 !important;
  }

  html[lang="bg"] .day-timeline > i{
    align-self:center !important;
  }
}

/* Tablet keeps the same alignment while allowing natural height. */
@media (min-width:601px) and (max-width:900px){
  html[lang="bg"] .day-timeline article{
    min-height:210px !important;
    height:100% !important;
  }

  html[lang="bg"] .day-timeline article > strong{
    min-height:46px !important;
  }
}


/* =========================================================
   v2.8-BG.25 — Bulgarian Vision Library thumbnails
   Use the localized BG visuals for cards 06, 11 and 20.
   ========================================================= */
html[lang="bg"] .vision-library-grid .cell-thumb{
  background-image:url('assets/bg-visuals/06-civilization-cell-001-bg.webp') !important;
}
html[lang="bg"] .vision-library-grid .civos-thumb{
  background-image:url('assets/bg-visuals/11-civos-operating-system-bg.webp') !important;
}
html[lang="bg"] .vision-library-grid .future-thumb{
  background-image:url('assets/bg-visuals/20-integrated-future-architecture-bg.webp') !important;
}


/* =========================================================
   v2.8-BG.26 — CivOS core badge Bulgarian text fit
   Keeps the ellipse dimensions unchanged; fits the longer BG
   tagline cleanly inside it.
   ========================================================= */
html[lang="bg"] .civos-stack-core{
  overflow:hidden !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

html[lang="bg"] .civos-stack-core strong{
  line-height:1 !important;
  margin:0 !important;
}

html[lang="bg"] .civos-stack-core span{
  display:block !important;
  width:100% !important;
  max-width:158px !important;
  margin:6px auto 0 !important;
  text-align:center !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  font-size:7.4px !important;
  line-height:1.28 !important;
  letter-spacing:.72px !important;
}


/* =========================================================
   v2.8-BG.27 — AI level "Обхват" bottom alignment
   Only the scope label is moved; other card content unchanged.
   ========================================================= */
html[lang="bg"] .ai-level{
  display:flex !important;
  flex-direction:column !important;
}

html[lang="bg"] .ai-level > span:last-child{
  margin-top:auto !important;
  padding-top:16px !important;
  align-self:stretch !important;
}


/* =========================================================
   v2.8-BG.28 — AI level "Обхват" readability
   Preserve bottom alignment; increase only scope text size.
   ========================================================= */
html[lang="bg"] .ai-level > span:last-child{
  font-size:12px !important;
  line-height:1.35 !important;
  letter-spacing:.7px !important;
}


/* =========================================================
   v2.8-BG.30 — CivOS technical library localized thumbnails
   ========================================================= */
html[lang="bg"] .civos-library-grid .civos-main-thumb{
  background-image:url('assets/bg-visuals/11-civos-operating-system-bg.webp') !important;
}
html[lang="bg"] .civos-library-grid .cdia-thumb{
  background-image:url('assets/bg-visuals/12-cdia-digital-infrastructure-bg.webp') !important;
}
html[lang="bg"] .civos-library-grid .twin2-thumb{
  background-image:url('assets/bg-visuals/07-digital-twin-architecture-bg.webp') !important;
}
html[lang="bg"] .civos-library-grid .network-thumb{
  background-image:url('assets/bg-visuals/06-1-civilization-cell-network-bg.webp') !important;
}
html[lang="bg"] .civos-library-grid .autonomous-ai-thumb{
  background-image:url('assets/bg-visuals/civos-extra-1.webp') !important;
}


/* =========================================================
   v2.8-BG.32 — About Method process cards alignment
   Equal card sizes + aligned number/title/body baselines.
   ========================================================= */
@media (min-width:901px){
  html[lang="bg"] .method-flow{
    align-items:stretch !important;
  }

  html[lang="bg"] .method-flow article{
    box-sizing:border-box !important;
    min-height:190px !important;
    height:100% !important;
    padding:18px 20px !important;
    display:grid !important;
    grid-template-rows:20px 50px 1fr !important;
    align-content:start !important;
  }

  html[lang="bg"] .method-flow article > b{
    display:block !important;
    margin:0 !important;
    align-self:start !important;
  }

  html[lang="bg"] .method-flow article > strong{
    display:flex !important;
    align-items:flex-start !important;
    min-height:44px !important;
    margin:8px 0 0 !important;
    line-height:1.08 !important;
  }

  html[lang="bg"] .method-flow article > span{
    display:block !important;
    margin:8px 0 0 !important;
    align-self:start !important;
    line-height:1.48 !important;
  }

  html[lang="bg"] .method-flow > i{
    align-self:center !important;
  }
}

@media (min-width:601px) and (max-width:900px){
  html[lang="bg"] .method-flow article{
    min-height:180px !important;
    height:100% !important;
  }
  html[lang="bg"] .method-flow article > strong{
    min-height:42px !important;
  }
}


/* =========================================================
   v2.8-BG.33 — Flag-based language selector
   Removes the caret and replaces EN/BG text with flag images.
   ========================================================= */
.language-caret{
  display:none !important;
}

.language-dropdown-toggle{
  gap:0 !important;
}

.language-flag{
  display:block;
  width:28px;
  height:17px;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
}

.language-current-flag{
  width:30px;
  height:18px;
}

.language-dropdown-menu a{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Keep the selector compact now that the text/caret are gone. */
@media (min-width:901px){
  #home .language-dropdown,
  #home .bg-image-lang-dropdown{
    width:50px !important;
    min-width:50px !important;
    height:34px !important;
  }

  #home .language-dropdown-toggle,
  #home .bg-image-lang-dropdown .language-dropdown-toggle{
    width:50px !important;
    min-width:50px !important;
    height:34px !important;
    padding:0 !important;
  }

  #home .language-dropdown-menu,
  #home .bg-image-lang-dropdown .language-dropdown-menu{
    width:50px !important;
    min-width:50px !important;
    padding:5px !important;
  }

  #home .language-dropdown-menu a,
  #home .bg-image-lang-dropdown .language-dropdown-menu a{
    padding:7px 4px !important;
  }
}

.mobile-header .language-dropdown-toggle{
  min-width:48px !important;
  padding:0 8px !important;
}
.mobile-header .language-dropdown-menu{
  min-width:48px !important;
}


/* =========================================================
   v2.8-BG.34 — Smaller language flags
   ========================================================= */
.language-flag{
  width:22px !important;
  height:13px !important;
}

.language-current-flag{
  width:23px !important;
  height:14px !important;
}


/* v2.8-BG.35 — clickable site logos */
.hero-logo-home-link{
  position:absolute;
  z-index:18;
  display:block;
  left:1.8%;
  top:2.3%;
  width:24%;
  height:10%;
}
.footer-brand-lockup[href]{
  display:inline-block;
}
.footer-brand-lockup[href] img{
  display:block;
}

/* v2.8-BG.36 */
#about{scroll-margin-top:84px;}


/* =========================================================
   v2.8-BG.37 — ABOUT navigation root-cause fix
   The performance optimization `content-visibility:auto`
   used estimated heights for late sections. That made the
   browser calculate #about from placeholder heights and
   could land around Vision/Roadmap instead.
   Keep the late-page sections fully laid out so #about has
   a stable, exact document position.
   ========================================================= */
#roadmap,
#vision,
#civos,
#about{
  content-visibility:visible !important;
  contain-intrinsic-size:none !important;
}

#about{
  scroll-margin-top:84px !important;
}


/* v2.9.3 — Public Library: native-style three-button hero CTA */
.desktop-library-nav{display:none!important}
@media (min-width:901px){
  #home>.action-hotspots{z-index:7}
  #home>.action-hotspots .hero-cta-real{
    top:49%!important;height:5.4%!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:8px!important;box-sizing:border-box!important;
    color:#fff!important;text-decoration:none!important;
    font-family:inherit!important;font-weight:700!important;
    font-size:clamp(10px,.82vw,16px)!important;letter-spacing:.01em!important;
    text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
    transition:filter .18s ease,box-shadow .18s ease,transform .18s ease!important;
    overflow:visible!important;
  }
  #home>.action-hotspots .hero-cta-real>span:first-child{white-space:nowrap;position:relative;z-index:2}
  #home>.action-hotspots .discover{
    left:34.8%!important;width:13.0%!important;
    background:linear-gradient(180deg,rgba(201,151,35,.98),rgba(141,91,3,.98))!important;
    border:1px solid rgba(255,218,116,.78)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 12px rgba(85,53,0,.28)!important;
  }
  #home>.action-hotspots .library{
    left:48.45%!important;width:14.1%!important;
    background:linear-gradient(180deg,rgba(12,122,147,.98),rgba(4,73,102,.98))!important;
    border:1px solid rgba(91,211,229,.78)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 12px rgba(0,48,69,.30)!important;
  }
  #home>.action-hotspots .film{
    left:63.2%!important;width:12.2%!important;
    background:linear-gradient(180deg,rgba(2,63,105,.98),rgba(1,39,72,.98))!important;
    border:1px solid rgba(48,156,206,.72)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 3px 12px rgba(0,30,55,.30)!important;
    gap:.7rem!important;
  }
  #home>.action-hotspots .film>i{
    width:24px;height:24px;border:2px solid rgba(74,218,240,.95);border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;font-style:normal;
    color:#fff;font-size:10px;line-height:1;padding-left:2px;box-sizing:border-box;
  }
  #home>.action-hotspots .hero-cta-real:hover,
  #home>.action-hotspots .hero-cta-real:focus-visible{filter:brightness(1.12);transform:translateY(-1px)}
  html[lang="bg"] #home>.action-hotspots .hero-cta-real{font-size:clamp(9px,.73vw,14px)!important}
  html[lang="bg"] #home>.action-hotspots .library{width:15.1%!important;left:48.1%!important}
  html[lang="bg"] #home>.action-hotspots .film{left:63.85%!important;width:12.2%!important}
}
.mobile-hero-btn.library-mobile{
  background:linear-gradient(180deg,rgba(12,122,147,.98),rgba(4,73,102,.98));
  border-color:rgba(91,211,229,.78);color:#fff;
}

/* v2.9.4 — Hero CTA alignment & icons */
@media (min-width:901px){
  #home>.action-hotspots .hero-cta-real{top:46.8%!important;gap:.65rem!important}
  #home>.action-hotspots .discover{left:32.9%!important}
  #home>.action-hotspots .library{left:46.55%!important}
  #home>.action-hotspots .film{left:61.3%!important}
  #home>.action-hotspots .cta-icon{flex:0 0 auto;position:relative;z-index:2}
  #home>.action-hotspots .arrow-icon{width:24px;height:24px;border:2px solid rgba(255,232,167,.95);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;line-height:1;color:#fff}
  #home>.action-hotspots .book-icon{width:25px;height:20px;display:inline-block;border-bottom:2px solid rgba(190,244,250,.98)}
  #home>.action-hotspots .book-icon:before,#home>.action-hotspots .book-icon:after{content:"";position:absolute;top:1px;width:11px;height:16px;border:2px solid rgba(190,244,250,.98);border-bottom:0}
  #home>.action-hotspots .book-icon:before{left:0;border-radius:3px 0 0 1px;transform:skewY(5deg)}
  #home>.action-hotspots .book-icon:after{right:0;border-radius:0 3px 1px 0;transform:skewY(-5deg)}
  #home>.action-hotspots .book-icon>span{position:absolute;left:50%;top:1px;height:18px;border-left:1px solid rgba(190,244,250,.9)}
  html[lang="bg"] #home>.action-hotspots .library{width:15.1%!important;left:46.2%!important}
  html[lang="bg"] #home>.action-hotspots .film{left:61.95%!important}
}

/* =========================================================
   v2.9.5 — Original Hero CTA Match
   Restores the locked v1.3 CTA proportions and visual rhythm.
   Original locked CTA geometry on 1536×1024 artwork:
   y 460–501 => top 44.922%, height 4.004%
   ========================================================= */
@media (min-width:901px){
  #home>.action-hotspots .hero-cta-real{
    top:44.922%!important;
    height:4.004%!important;
    border-radius:7px!important;
    gap:.48rem!important;
    padding:0 .78rem!important;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif!important;
    font-size:clamp(10px,.78vw,13px)!important;
    font-weight:600!important;
    letter-spacing:0!important;
    line-height:1!important;
    text-shadow:0 1px 1px rgba(0,0,0,.22)!important;
    transform:none!important;
  }

  /* Three-button composition: shifted left while preserving the
     original 12px-ish visual gaps and original CTA height. */
  #home>.action-hotspots .discover{
    left:29.80%!important;
    width:12.956%!important;
    background:linear-gradient(180deg,#c99422 0%,#a76805 100%)!important;
    border:1px solid rgba(236,190,72,.92)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 7px rgba(76,48,0,.22)!important;
  }
  #home>.action-hotspots .library{
    left:43.55%!important;
    width:14.10%!important;
    background:linear-gradient(180deg,#14849a 0%,#075a73 100%)!important;
    border:1px solid rgba(74,190,207,.88)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 7px rgba(0,48,65,.22)!important;
  }
  #home>.action-hotspots .film{
    left:58.45%!important;
    width:10.677%!important;
    background:linear-gradient(180deg,#075078 0%,#023756 100%)!important;
    border:1px solid rgba(45,135,173,.90)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 7px rgba(0,31,49,.24)!important;
    gap:.52rem!important;
  }

  /* Discover: match the original simple arrow — no circle. */
  #home>.action-hotspots .arrow-icon{
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    display:inline-block!important;
    font-family:Arial,sans-serif!important;
    font-size:18px!important;
    font-weight:400!important;
    line-height:1!important;
    color:#fff!important;
    transform:translateY(-.5px)!important;
  }

  /* Library book icon: compact, line-weight matched to the film icon. */
  #home>.action-hotspots .book-icon{
    width:21px!important;
    height:16px!important;
    border-bottom:1.5px solid rgba(208,247,251,.96)!important;
  }
  #home>.action-hotspots .book-icon:before,
  #home>.action-hotspots .book-icon:after{
    top:1px!important;
    width:9px!important;
    height:13px!important;
    border-width:1.5px!important;
    border-color:rgba(208,247,251,.96)!important;
    border-bottom:0!important;
  }
  #home>.action-hotspots .book-icon>span{
    top:1px!important;
    height:15px!important;
    border-left:1px solid rgba(208,247,251,.9)!important;
  }

  /* Film icon: scale back to the locked button's original visual size. */
  #home>.action-hotspots .film>i{
    width:20px!important;
    height:20px!important;
    border-width:1.5px!important;
    font-size:8px!important;
    padding-left:1px!important;
  }

  #home>.action-hotspots .hero-cta-real:hover,
  #home>.action-hotspots .hero-cta-real:focus-visible{
    filter:brightness(1.08)!important;
    transform:translateY(-1px)!important;
  }

  /* Bulgarian needs a little more room but keeps the same height/style. */
  html[lang="bg"] #home>.action-hotspots .hero-cta-real{
    font-size:clamp(9px,.69vw,12px)!important;
  }
  html[lang="bg"] #home>.action-hotspots .discover{
    left:28.90%!important;
    width:13.45%!important;
  }
  html[lang="bg"] #home>.action-hotspots .library{
    left:43.10%!important;
    width:15.20%!important;
  }
  html[lang="bg"] #home>.action-hotspots .film{
    left:59.05%!important;
    width:10.90%!important;
  }
}

/* v2.9.6 — BG Hero CTA Vertical Alignment Fix
   EN remains locked at v2.9.5. Lower only the Bulgarian desktop CTA row
   to restore the same breathing room below the localized hero copy. */
@media (min-width:901px){
  html[lang="bg"] #home>.action-hotspots .hero-cta-real{
    top:46.15%!important;
  }
}