:root {
  --bg:#f6f8f3;
  --panel:#fbfcf8;
  --ink:#0b1518;
  --muted:#5e7074;
  --line:#d4dfda;
  --green:#23efa4;
  --green2:#06bb7b;
  --dark:#0b1a1d;
  --shadow:0 18px 50px rgba(22,54,47,.08);
  --max:1480px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:
  radial-gradient(circle at 68% 16%,rgba(35,239,164,.065),transparent 28%),
  var(--bg);
  color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(calc(100% - 44px),var(--max));margin:auto}
header{
  position:sticky;top:0;z-index:50;height:70px;
  background:rgba(246,248,243,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:flex;align-items:center;gap:14px;font:700 15px/1 monospace;letter-spacing:.26em}
.logo b{font-size:30px;letter-spacing:-8px;color:var(--green2);transform:skew(-12deg)}
.navlinks{display:flex;gap:34px;font:13px/1 monospace}
.navlinks a{opacity:.68;position:relative}
.navlinks a:hover,.navlinks a.active{opacity:1}
.navlinks a.active:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:-10px;background:var(--green)}
.connect{
  border:1px solid var(--ink);background:transparent;border-radius:8px;padding:10px 16px;
  display:flex;align-items:center;gap:10px;cursor:pointer
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(35,239,164,.6)}

.hero{
  min-height:540px;display:grid;grid-template-columns:.95fr 1.35fr 1.15fr;
  align-items:center;gap:28px;padding:50px 0 30px;position:relative
}
.hero-art{
  min-width:0;position:relative;align-self:stretch;display:flex;align-items:center
}
.artframe{
  width:100%;height:100%;min-height:430px;background-repeat:no-repeat;background-size:contain;background-position:center;
  filter:saturate(1.02) contrast(1.01)
}
.left-art{background-image:url('illustration-01.webp');background-position:left center}
.right-art{background-image:url('illustration-02.webp');background-position:right center}
.hero-copy{text-align:center;z-index:2}
.kicker{font:14px/1 monospace;letter-spacing:.32em;text-transform:uppercase;margin-bottom:22px}
h1{font:700 clamp(52px,5.5vw,90px)/.9 Georgia,serif;letter-spacing:-.055em;margin:0}
h1 span{display:block}
.brush{width:220px;height:8px;background:var(--green);border-radius:100px;margin:17px auto 18px;transform:rotate(-2deg)}
.sub{font:13px/1.5 monospace;letter-spacing:.17em;text-transform:uppercase;color:#435459;margin-bottom:30px}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  min-width:190px;border:1px solid var(--ink);border-radius:8px;padding:15px 22px;background:rgba(255,255,255,.55);
  font:15px/1 monospace;cursor:pointer;transition:.18s ease
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,40,35,.11)}
.btn.primary{background:var(--dark);color:var(--green)}

.features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.card{min-height:230px;padding:26px 28px;position:relative;overflow:hidden;background:rgba(255,255,255,.12)}
.card+.card{border-left:1px solid var(--line)}
.num{font:11px monospace;color:#789095;letter-spacing:.14em}
.icon{width:53px;height:53px;border:1px solid #cbd7d3;border-radius:8px;display:grid;place-items:center;margin:12px 0 8px;font:23px monospace;background:#fff7}
.card h2{font:700 26px Georgia,serif;margin:8px 0}
.card p{font:13px/1.55 monospace;color:var(--muted);max-width:290px}
.card a{display:inline-block;color:var(--green2);font:700 13px monospace;border-bottom:1px solid var(--green);padding-bottom:2px}
.card-art{
  position:absolute;right:4px;bottom:-4px;width:46%;height:72%;background-repeat:no-repeat;background-size:contain;background-position:right bottom;
  pointer-events:none
}
.learn{background-image:url('illustration-03.webp')}
.build{background-image:url('illustration-04.webp')}
.belong{background-image:url('illustration-05.webp')}

.bottom{display:grid;grid-template-columns:1.1fr .6fr 1.15fr;gap:34px;padding:34px 0}
.term{background:var(--dark);border:1px solid #101c1f;border-radius:10px;min-height:160px;color:var(--green);padding:28px;font:14px/1.5 monospace;box-shadow:var(--shadow);position:relative}
.dots{position:absolute;top:17px;right:18px;display:flex;gap:7px}
.dots i{width:7px;height:7px;background:var(--green);border-radius:50%;opacity:.65}
.term p{margin:20px 0 8px}
.term small{color:#b7c7c3}
.center-note{display:grid;place-items:center;text-align:center;font:12px/1.5 monospace;letter-spacing:.14em;color:#6c8083}
.globe{width:58px;height:58px;border:2px solid #81999b;border-radius:50%;margin:0 auto 14px;position:relative}
.globe:before{content:"";position:absolute;left:8px;right:8px;top:27px;border-top:1px solid #81999b}
.globe:after{content:"";position:absolute;top:7px;bottom:7px;left:21px;right:21px;border-left:1px solid #81999b;border-right:1px solid #81999b;border-radius:50%}
.sky{
  min-height:160px;border:1px solid #a6c8c1;border-radius:10px;overflow:hidden;background:url('illustration-06.webp') center/cover no-repeat;position:relative
}
.sky:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(210,249,239,.22),transparent 45%)}


footer{border-top:1px solid var(--line);min-height:70px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:11px monospace;color:#607477}
footer .flinks{display:flex;gap:16px;flex-wrap:wrap}

.modal{
  position:fixed;inset:0;background:rgba(6,15,17,.52);z-index:100;display:none;align-items:center;justify-content:center;padding:20px
}
.modal.open{display:flex}
.modal-box{width:min(600px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.22)}
.modal-box h3{font:700 34px Georgia,serif;margin:0 0 12px}
.modal-box p{font:14px/1.65 monospace;color:#4c6265}
.close{float:right;border:0;background:transparent;font-size:24px;cursor:pointer}
.toast{position:fixed;right:24px;bottom:24px;background:var(--dark);color:var(--green);padding:13px 16px;border-radius:8px;font:13px monospace;opacity:0;transform:translateY(12px);transition:.2s;pointer-events:none;z-index:200}
.toast.show{opacity:1;transform:none}

@media(max-width:1100px){
  .hero{grid-template-columns:1fr;padding-top:34px}
  .hero-copy{order:-2}
  .hero-art{min-height:340px}
  .artframe{min-height:340px}
  .left-art{background-position:center}
  .right-art{background-position:center}
  .features{grid-template-columns:1fr}
  .card+.card{border-left:0;border-top:1px solid var(--line)}
  .bottom{grid-template-columns:1fr}
}
@media(max-width:720px){
  .wrap{width:calc(100% - 24px)}
  .navlinks{display:none}
  .logo{font-size:12px}
  .connect{padding:8px 10px;font-size:12px}
  .hero{gap:4px}
  .hero-art{min-height:275px}
  .artframe{min-height:275px}
  .hero h1{font-size:clamp(45px,14vw,68px)}
  .sub{font-size:10px}
  .btn{width:100%}
  .card{min-height:270px;padding:23px 20px}
  .card-art{width:58%;opacity:.9}
  footer{align-items:flex-start;flex-direction:column;padding:18px 0}
}

/* v6 card-art refinement */
.card-art.learn{
  width:38%;
  height:78%;
  right:10px;
  bottom:-2px;
  background-size:contain;
  background-position:right bottom;
}
.card-art.build{
  width:34%;
  height:80%;
  right:10px;
  bottom:-3px;
  background-size:contain;
  background-position:right bottom;
}
.card-art.belong{
  width:48%;
  height:80%;
  right:0;
  bottom:-3px;
  background-size:contain;
  background-position:right bottom;
}

.card{
  transition:transform .18s ease, background .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.22);
}
.card:hover .card-art{
  transform:translateY(-2px);
}
.card-art{
  transition:transform .18s ease;
}

@media(max-width:720px){
  .card-art.learn{width:46%;height:70%}
  .card-art.build{width:40%;height:70%}
  .card-art.belong{width:56%;height:68%}
}


.nullspace-accent{color:var(--green2)}