:root {
  --bg:    #060608;
  --bg2:   #0C0D10;
  --bg3:   #12141A;
  --bg4:   #1A1D26;
  --green: #00FF88;
  --green2:#00CC6A;
  --green-dim: rgba(0,255,136,0.12);
  --green-glow: 0 0 20px rgba(0,255,136,0.4);
  --orange:#FF6B35;
  --blue:  #4D9FFF;
  --red:   #FF4D6D;
  --yellow:#FFD166;
  --cream: #E8E8F0;
  --muted: #5A5D6E;
  --muted2:#3A3D4E;
  --border:rgba(0,255,136,0.15);
  --border2:rgba(0,255,136,0.06);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'IBM Plex Mono',monospace;
  overflow-x:hidden;
  cursor:none;
}

/* CURSOR */
#cur{position:fixed;width:10px;height:10px;background:var(--green);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference}
#cur2{position:fixed;width:28px;height:28px;border:1px solid rgba(0,255,136,0.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .12s}

/* SCANLINE overlay */
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px);
  pointer-events:none;z-index:9997;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2.5rem;
  background:rgba(6,6,8,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border2);
}
.nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;
  color:var(--green);letter-spacing:0.05em;
  display:flex;align-items:center;gap:0.5rem;
}
.nav-logo span{color:var(--cream);font-weight:400}
.nav-dot{
  width:12px;height:12px;background:var(--green);border-radius:50%;
  animation:blink 1.4s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.2}}
.nav-items{display:flex;gap:1.5rem;list-style:none}
.nav-items a{
  font-size:0.9rem;color:var(--muted);text-decoration:none;
  letter-spacing:0.12em;text-transform:uppercase;transition:color .2s;
}
.nav-items a:hover{color:var(--green)}

/* HERO */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 2.5rem 3rem;overflow:hidden;
}
.hero-label{
  font-size:0.9rem;color:var(--green);letter-spacing:0.3em;
  text-transform:uppercase;margin-bottom:1.5rem;
  display:flex;align-items:center;gap:0.8rem;
}
.hero-label::before{content:'';width:30px;height:1px;background:var(--green)}
.hero-h1{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(3rem,8vw,7rem);line-height:1;
  letter-spacing:-0.03em;margin-bottom:1rem;
}
.hero-h1 em{color:var(--green);font-style:normal}
.hero-sub{
  font-size:1.1rem;color:var(--muted);max-width:650px;
  line-height:1.7;margin-bottom:3rem;
}

/* FULL SYSTEM DIAGRAM (Hero) */
.hero-diagram{
  width:100%;max-width:900px;
  border:1px solid var(--border);
  background:var(--bg3);
  padding:2rem;position:relative;
}
.hero-diagram::before{
  content:'LIVE SYSTEM OVERVIEW';
  position:absolute;top:-0.55rem;left:1rem;
  font-size:0.85rem;color:var(--green);
  background:var(--bg3);padding:0 0.5rem;letter-spacing:0.15em;
}

/* ─── ANIMATED PACKET ─── */
@keyframes pkt-lr{
  0%{left:0;opacity:0}2%{opacity:1}95%{opacity:1}100%{left:calc(100% - 10px);opacity:0}
}
@keyframes pkt-tb{
  0%{top:0;opacity:0}2%{opacity:1}95%{opacity:1}100%{top:calc(100% - 10px);opacity:0}
}
@keyframes pkt-bt{
  0%{bottom:0;opacity:0}2%{opacity:1}95%{opacity:1}100%{bottom:calc(100% - 10px);opacity:0}
}

.pkt{
  position:absolute;width:12px;height:12px;
  border-radius:50%;z-index:10;
}
.pkt.green{background:var(--green);box-shadow:0 0 8px var(--green)}
.pkt.orange{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.pkt.blue{background:var(--blue);box-shadow:0 0 8px var(--blue)}
.pkt.red{background:var(--red);box-shadow:0 0 8px var(--red)}

/* ─── NODE BOX ─── */
.node{
  border:1px solid var(--border);
  background:var(--bg4);
  padding:0.8rem 1.2rem;
  font-size:0.85rem;text-align:center;
  border-radius:3px;position:relative;
  transition:border-color .3s;
  white-space:nowrap;
}
.node.active-node{
  border-color:var(--green);
  box-shadow:0 0 14px rgba(0,255,136,0.2);
}
.node .node-label{color:var(--green);font-weight:500;display:block;margin-bottom:0.4rem;font-size:1.0rem}
.node .node-sub{color:var(--muted);font-size:0.75rem}
.node.orange-node{border-color:rgba(255,107,53,0.4);background:rgba(255,107,53,0.06)}
.node.orange-node .node-label{color:var(--orange)}
.node.blue-node{border-color:rgba(77,159,255,0.4);background:rgba(77,159,255,0.06)}
.node.blue-node .node-label{color:var(--blue)}
.node.red-node{border-color:rgba(255,77,109,0.4);background:rgba(255,77,109,0.06)}
.node.red-node .node-label{color:var(--red)}
.node.yellow-node{border-color:rgba(255,209,102,0.4);background:rgba(255,209,102,0.06)}
.node.yellow-node .node-label{color:var(--yellow)}

/* ARROW LINE */
.arrow-line{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:0.85rem;gap:0.3rem;
  overflow:visible;
}
.arrow-line::before{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--border),var(--muted2));
}
.arrow-line::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--muted2),var(--border));
}
.arrow-v{
  display:flex;flex-direction:column;align-items:center;gap:0.2rem;
  color:var(--muted);font-size:0.75rem;
}
.arrow-v .shaft{width:2px;height:32px;background:var(--border)}

/* ─── SECTION ─── */
section{position:relative;z-index:1;padding:5rem 2.5rem}
section:nth-child(even){background:var(--bg2)}

.sec-header{margin-bottom:2.5rem}
.sec-eyebrow{
  font-size:0.85rem;color:var(--green);letter-spacing:0.25em;
  text-transform:uppercase;margin-bottom:0.5rem;
  display:flex;align-items:center;gap:0.6rem;
}
.sec-eyebrow::before{content:'';width:20px;height:1px;background:var(--green)}
.sec-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;
}
.sec-title em{color:var(--green);font-style:normal}
.sec-desc{
  font-size:1.05rem;color:var(--muted);margin-top:0.6rem;
  max-width:550px;line-height:1.7;
}

/* DIAGRAM CARD */
.diag-card{
  border:1px solid var(--border);
  background:var(--bg3);padding:3rem;
  position:relative;overflow:hidden;
}
.diag-card::before{
  content:attr(data-title);
  position:absolute;top:-0.8rem;padding:0.2rem 0.8rem;font-weight:bold;left:1rem;
  font-size:1.1rem;color:var(--green);
  background:var(--bg3);padding:0 0.4rem;
  letter-spacing:0.12em;text-transform:uppercase;
}
.diag-card .diag-note{
  position:absolute;bottom:1rem;right:1rem;
  font-size:1.1rem;color:var(--muted2);letter-spacing:0.05em;
}

/* ─── LAYOUT HELPERS ─── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem}
.center-col{display:flex;flex-direction:column;align-items:center;gap:0.8rem}
.row{display:flex;align-items:center;gap:1rem}
.row-gap{display:flex;align-items:stretch;gap:0.6rem}
.spacer{height:1rem}

/* ─────────────────────────────────────────
   ANIMATED DIAGRAMS
─────────────────────────────────────────── */

/* ── 1. HERO FULL SYSTEM ── */
.hero-sys{
  display:grid;
  grid-template-columns:auto 40px auto 40px auto 40px auto 40px auto;
  align-items:center;gap:0;
}
.hero-sys .wire{
  position:relative;height:3px;
  background:linear-gradient(90deg,transparent,var(--muted2),transparent);
  overflow:visible;
}
.hero-sys .wire .pkt{
  top:-5px;
  animation:pkt-lr 2s linear infinite;
}

/* ── 2. LOAD BALANCER ANIMATION ── */
.lb-diagram{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.lb-servers{
  display:flex;gap:1.5rem;
  justify-content:center;
}
.lb-wire{
  position:relative;width:3px;height:80px;
  background:linear-gradient(180deg,var(--muted2),transparent);
}
.lb-wire .pkt{
  left:-5px;
  animation:pkt-tb 1.5s linear infinite;
}
.lb-wire.s2 .pkt{animation-delay:0.5s}
.lb-wire.s3 .pkt{animation-delay:1s}

/* progress bar inside server */
.srv-bar{
  height:3px;background:var(--bg);margin-top:0.4rem;border-radius:1px;overflow:hidden;
}
.srv-bar-fill{
  height:100%;background:var(--green);
  animation:fillbar 2s ease-in-out infinite alternate;
  border-radius:1px;
}
.srv-bar-fill.d2{animation-delay:0.6s;animation-duration:2.5s}
.srv-bar-fill.d3{animation-delay:1.2s;animation-duration:1.8s}
@keyframes fillbar{0%{width:20%}100%{width:85%}}

/* ── 3. CACHING ── */
@keyframes flash-green{
  0%,80%{border-color:var(--border)}
  85%,95%{border-color:var(--green);box-shadow:0 0 16px rgba(0,255,136,0.4)}
  100%{border-color:var(--border)}
}
@keyframes flash-orange{
  0%,80%{border-color:var(--border)}
  85%,95%{border-color:var(--orange);box-shadow:0 0 16px rgba(255,107,53,0.4)}
  100%{border-color:var(--border)}
}
.cache-hit-node{animation:flash-green 3s ease-in-out infinite}
.cache-miss-node{animation:flash-orange 3s ease-in-out infinite 1.5s}

/* cache packet going to DB then returning */
.wire-v{position:relative;width:2px;height:70px;background:var(--border);margin:0 auto}
.wire-v .pkt{left:-6px;animation:pkt-tb 1.8s linear infinite}
.wire-v .pkt.ret{animation:pkt-bt 1.8s linear infinite;animation-delay:0.9s}

/* ── 4. MICROSERVICES ── */
.ms-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;position:relative;
}
.ms-service{
  border:1px solid var(--border);
  background:var(--bg4);padding:1rem 0.8rem;
  border-radius:3px;text-align:center;position:relative;
}
.ms-pulse{
  position:absolute;top:-4px;right:-4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--green);
  animation:pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:1}
  70%{transform:scale(2.5);opacity:0}
  100%{transform:scale(1);opacity:0}
}
.ms-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--green);animation:none;
}
.ms-connector{
  position:relative;height:3px;
  background:var(--border2);
  overflow:visible;margin:0.5rem 0;
}
.ms-connector .pkt{
  top:-5px;
  animation:pkt-lr 2.5s linear infinite;
}
.ms-connector.rev .pkt{
  animation:pkt-lr 2.5s linear infinite reverse;
}

/* ── 5. MESSAGE QUEUE ── */
.mq-container{display:flex;align-items:center;gap:1.5rem}
.mq-queue{
  flex:1;border:1px solid var(--border);
  background:var(--bg4);padding:0.8rem;
  border-radius:3px;position:relative;min-height:120px;
}
.mq-queue-title{
  font-size:0.85rem;color:var(--green);letter-spacing:0.1em;
  margin-bottom:0.6rem;text-align:center;
}
.mq-msgs{display:flex;flex-direction:column;gap:0.3rem}
.mq-msg{
  height:20px;border-radius:2px;
  display:flex;align-items:center;padding:0 0.5rem;
  font-size:0.75rem;color:rgba(0,0,0,0.8);font-weight:500;
  letter-spacing:0.05em;
}
.mq-msg:nth-child(1){background:var(--green);animation:slide-in 4s 0s linear infinite}
.mq-msg:nth-child(2){background:var(--blue);animation:slide-in 4s 0.8s linear infinite}
.mq-msg:nth-child(3){background:var(--orange);animation:slide-in 4s 1.6s linear infinite}
.mq-msg:nth-child(4){background:var(--yellow);animation:slide-in 4s 2.4s linear infinite}
@keyframes slide-in{
  0%{transform:translateX(-20px);opacity:0}
  5%{transform:translateX(0);opacity:1}
  70%{transform:translateX(0);opacity:1}
  80%{transform:translateX(30px);opacity:0}
  100%{transform:translateX(30px);opacity:0}
}
.mq-wire{
  width:50px;height:3px;
  background:linear-gradient(90deg,var(--muted2),var(--border));
  position:relative;flex-shrink:0;
}
.mq-wire .pkt{top:-5px;animation:pkt-lr 1.5s linear infinite}
.mq-wire .pkt.s2{animation-delay:0.5s}
.mq-wire .pkt.s3{animation-delay:1s}

/* ── 6. DB REPLICATION ── */
.rep-container{
  display:grid;grid-template-columns:1fr 60px 1fr 1fr;
  align-items:center;gap:0;
}
.rep-wire{position:relative;height:3px;background:var(--border2);overflow:visible}
.rep-wire .pkt{top:-5px;animation:pkt-lr 2s linear infinite}
.rep-wire .pkt.d2{animation-delay:0.7s}
.rep-wire .pkt.d3{animation-delay:1.4s}
@keyframes db-write{
  0%,90%{border-color:rgba(77,159,255,0.4)}
  92%,96%{border-color:var(--blue);box-shadow:0 0 14px rgba(77,159,255,0.5)}
  100%{border-color:rgba(77,159,255,0.4)}
}
.primary-db{animation:db-write 2s linear infinite}
@keyframes db-sync{
  0%,70%{border-color:rgba(0,255,136,0.15)}
  75%,85%{border-color:var(--green);box-shadow:0 0 10px rgba(0,255,136,0.3)}
  100%{border-color:rgba(0,255,136,0.15)}
}
.replica-db{animation:db-sync 2s linear infinite}
.replica-db.r2{animation-delay:0.7s}
.replica-db.r3{animation-delay:1.4s}

/* ── 7. CDN ── */
.cdn-map{
  position:relative;
  width:100%;height:280px;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:3px;overflow:hidden;
}
.cdn-origin{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:50%;
  border:2px solid var(--orange);
  background:rgba(255,107,53,0.1);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:5;
}
.cdn-origin span{font-size:0.75rem;color:var(--orange);text-align:center;line-height:1.3}
.cdn-edge{
  position:absolute;
  width:60px;height:60px;border-radius:50%;
  border:1px solid var(--green);
  background:rgba(0,255,136,0.08);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:0.7rem;color:var(--green);text-align:center;
  z-index:5;
}
.cdn-edge.e1{top:15%;left:10%}
.cdn-edge.e2{top:10%;left:45%}
.cdn-edge.e3{top:15%;right:8%}
.cdn-edge.e4{bottom:15%;left:12%}
.cdn-edge.e5{bottom:10%;left:48%}
.cdn-edge.e6{bottom:18%;right:10%}

.cdn-beam{
  position:absolute;z-index:2;
  background:linear-gradient(90deg,transparent,var(--green-dim),transparent);
  height:1px;transform-origin:left center;
  pointer-events:none;
}
.cdn-beam .pkt{
  top:-5px;
  animation:pkt-lr 1.8s linear infinite;
}
.cdn-beam.b1{animation-delay:0s}
.cdn-beam.b2 .pkt{animation-delay:0.3s}
.cdn-beam.b3 .pkt{animation-delay:0.6s}
.cdn-beam.b4 .pkt{animation-delay:0.9s}
.cdn-beam.b5 .pkt{animation-delay:1.2s}
.cdn-beam.b6 .pkt{animation-delay:1.5s}

/* ── 8. SHARDING ── */
.shard-diagram{display:flex;flex-direction:column;align-items:center;gap:0}
.shard-splitter{
  border:1px solid var(--orange);
  background:rgba(255,107,53,0.07);
  padding:0.6rem 2rem;font-size:0.9rem;
  color:var(--orange);border-radius:2px;
  position:relative;
}
.shard-splitter::after{
  content:'hashing fn';
  position:absolute;bottom:-1rem;right:0.5rem;
  font-size:0.7rem;color:var(--muted2);
}
.shard-branches{
  display:flex;gap:3rem;position:relative;padding:1rem 2rem;
}
.shard-branches::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;background:var(--border);
}
.shard-line{
  position:absolute;top:0;width:1px;
  background:var(--border);
}
.shard-dbs{display:flex;gap:1.5rem}
.shard-db{
  border:1px solid var(--border);background:var(--bg4);
  padding:0.8rem 0.6rem;text-align:center;
  border-radius:3px;min-width:80px;
}
.shard-db-label{font-size:1.1rem;color:var(--green);margin-bottom:0.4rem}
.shard-range{font-size:0.7rem;color:var(--muted)}
.shard-bar{height:40px;background:var(--bg);border-radius:2px;margin-top:0.4rem;overflow:hidden;position:relative}
.shard-fill{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(0,255,136,0.3),var(--green));
  border-radius:2px;
}
.sf1{height:60%;animation:shard-pulse 3s ease-in-out infinite}
.sf2{height:40%;animation:shard-pulse 3s ease-in-out infinite 0.5s}
.sf3{height:75%;animation:shard-pulse 3s ease-in-out infinite 1s}
.sf4{height:30%;animation:shard-pulse 3s ease-in-out infinite 1.5s}
@keyframes shard-pulse{
  0%,100%{opacity:0.6}50%{opacity:1}
}

/* ── 9. CAP TRIANGLE ── */
.cap-wrap{
  display:flex;justify-content:center;align-items:center;
  padding:1rem;position:relative;
}
.cap-svg{width:100%;max-width:380px;height:auto}
@keyframes zone-pulse{
  0%,100%{opacity:0.3}50%{opacity:0.7}
}

/* ── 10. CIRCUIT BREAKER ── */
.cb-states{display:flex;gap:2rem;align-items:stretch}
.cb-state{
  flex:1;border:1px solid var(--border);
  background:var(--bg4);padding:1.2rem;
  border-radius:3px;text-align:center;
  position:relative;overflow:hidden;
}
.cb-state-name{
  font-size:0.85rem;letter-spacing:0.15em;
  text-transform:uppercase;margin-bottom:0.5rem;
}
.cb-icon{font-size:1.8rem;margin-bottom:0.4rem}
.cb-state.closed-st{border-color:rgba(0,255,136,0.3)}
.cb-state.closed-st .cb-state-name{color:var(--green)}
.cb-state.open-st{border-color:rgba(255,77,109,0.3)}
.cb-state.open-st .cb-state-name{color:var(--red)}
.cb-state.half-st{border-color:rgba(255,209,102,0.3)}
.cb-state.half-st .cb-state-name{color:var(--yellow)}
.cb-flow{
  height:4px;border-radius:2px;margin-top:0.8rem;
  overflow:hidden;background:var(--bg);
}
.cb-flow-fill{height:100%}
.closed-st .cb-flow-fill{
  background:var(--green);
  animation:flow-fill 1.5s linear infinite;
}
.open-st .cb-flow-fill{
  background:var(--red);width:20%;
  animation:none;
}
.half-st .cb-flow-fill{
  background:var(--yellow);
  animation:flow-fill 3s linear infinite;
  width:40%;
}
@keyframes flow-fill{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}
.cb-desc{font-size:0.9rem;color:var(--muted);line-height:1.5;margin-top:0.5rem}

/* ── 11. HORIZONTAL SCALING ── */
.scale-container{position:relative;min-height:200px}
.scale-load{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  font-size:0.85rem;color:var(--orange);
  border:1px solid rgba(255,107,53,0.4);
  background:rgba(255,107,53,0.07);
  padding:0.5rem 1rem;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;gap:0.2rem;
}
.scale-meter{
  width:80px;height:4px;background:var(--bg);
  border-radius:2px;overflow:hidden;
}
.scale-meter-fill{
  height:100%;background:var(--orange);
  animation:scale-load-anim 6s ease-in-out infinite;
}
@keyframes scale-load-anim{
  0%,100%{width:20%}40%{width:95%}70%{width:40%}
}
.scale-servers{
  display:flex;gap:1rem;
  position:absolute;bottom:0;
  left:50%;transform:translateX(-50%);
}
.scale-srv{
  width:70px;
  border:1px solid var(--border);
  background:var(--bg4);padding:0.5rem;
  border-radius:3px;text-align:center;
  font-size:0.75rem;color:var(--muted);
  transition:all .4s;
}
.scale-srv.active-srv{
  border-color:var(--green);color:var(--green);
  box-shadow:0 0 10px rgba(0,255,136,0.2);
}
.scale-srv.spawn{
  animation:srv-spawn 6s ease-in-out infinite;
}
.scale-srv.spawn.s2{animation-delay:1s}
.scale-srv.spawn.s3{animation-delay:2s}
@keyframes srv-spawn{
  0%,35%{opacity:0.2;transform:scale(0.8)}
  45%,90%{opacity:1;transform:scale(1)}
  100%{opacity:0.2;transform:scale(0.8)}
}

/* ── ACID vs BASE ── */
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.ab-card{
  border:1px solid var(--border);background:var(--bg4);
  padding:1.5rem;border-radius:3px;
}
.ab-card.acid{border-color:rgba(77,159,255,0.3)}
.ab-card.base{border-color:rgba(0,255,136,0.3)}
.ab-title{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:1.4rem;margin-bottom:0.5rem;
}
.ab-card.acid .ab-title{color:var(--blue)}
.ab-card.base .ab-title{color:var(--green)}
.ab-letter{
  display:flex;gap:0.8rem;margin-bottom:0.8rem;
  flex-direction:column;
}
.ab-row{display:flex;align-items:baseline;gap:0.5rem}
.ab-ltr{
  font-size:0.9rem;font-weight:500;min-width:20px;
}
.ab-card.acid .ab-ltr{color:var(--blue)}
.ab-card.base .ab-ltr{color:var(--green)}
.ab-word{font-size:0.95rem;color:var(--muted)}
.ab-example{
  margin-top:1rem;padding:0.6rem;
  background:var(--bg3);border-radius:2px;
  font-size:0.85rem;color:var(--muted);line-height:1.6;
}
.ab-example strong{color:var(--cream)}

/* ── PATTERN ANIM ── */
@keyframes reveal-card{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ── FOOTER ── */
footer{
  padding:3rem 2.5rem;
  border-top:1px solid var(--border2);
  display:flex;justify-content:space-between;align-items:center;
}
.footer-brand{
  font-family:'Syne',sans-serif;font-weight:800;
  font-size:1.2rem;color:var(--green);
}
.footer-meta{font-size:0.85rem;color:var(--muted);text-align:right;line-height:1.6}

/* SCROLLBAR */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--green2);border-radius:2px}

/* RESP */
@media(max-width:800px){
  nav{padding:1rem 1.2rem}
  .nav-items{display:none}
  section{padding:3rem 1.2rem}
  .hero{padding:5rem 1.2rem 2rem}
  .two-col,.ab-grid,.cb-states{grid-template-columns:1fr}
  .three-col,.shard-dbs{grid-template-columns:1fr}
  .mq-container{flex-direction:column}
  .rep-container{grid-template-columns:1fr}
  footer{flex-direction:column;gap:1rem;text-align:center}
  .footer-meta{text-align:center}
}

/* ── NEW MODULE GRID ── */
.grid-container {
  padding: 4rem 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.topic-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.topic-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,255,136,0.1);
}
.topic-card h3 {
  font-family: 'Syne', sans-serif;
  color: var(--green);
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
}
.topic-card p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
.topic-card::after {
  content: '→';
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  color: var(--green);
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}
.topic-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--green);
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  transition: color 0.2s;
}
.back-btn:hover {
  color: var(--cream);
}
.grid-eyebrow {
  font-size: 0.65rem; color: var(--green); letter-spacing: 0.3em;
  text-transform: uppercase; margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.grid-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--green); }
.grid-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 2.2rem; margin-bottom: 3rem;
}
/* Disable custom cursor on touch devices */
@media (pointer: coarse) {
  #cur, #cur2 { display: none !important; }
  body { cursor: auto !important; }
  a, button, .node, .cb-state, .ab-card, .topic-card { cursor: pointer !important; }
}

/* --- COPY PROTECTION & RESPONSIVENESS ADDITIONS --- */
body {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important; /* iOS Safari */
}

/* Make sure text elements don't get selected */
h1, h2, h3, p, span, div, a {
  -webkit-user-select: none !important;
  user-select: none !important;
}

img, svg {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none !important;
  max-width: 100%;
}

.diag-card {
  overflow-x: auto; /* Allow diagrams to horizontally scroll on very tiny mobile screens instead of breaking layout */
  overflow-y: hidden;
  max-width: 100vw;
  /* hide scrollbar for clean look */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.diag-card::-webkit-scrollbar {
  display: none;
}

/* Extra Mobile Responsiveness */
@media (max-width: 480px) {
  .hero-h1 { font-size: 2.2rem !important; }
  .grid-cards { grid-template-columns: 1fr !important; }
  .analogy-grid { grid-template-columns: 1fr !important; }
  .two-col, .three-col, .ab-grid, .cb-states { grid-template-columns: 1fr !important; }
  .sec-title { font-size: 2.2rem !important; }
  section { padding: 3rem 1.2rem !important; }
}

/* Anti-screenshot blur container overlay */
body.blurred-for-protection {
  filter: blur(15px) grayscale(100%);
  opacity: 0.1;
  pointer-events: none;
}
/* Print media query to hide everything when attempting to print to PDF */
@media print {
  body { display: none !important; }
}