/* v4 styles: matrix top band, marquee, flip hint, iframe modal, guards */
:root{--bg:#070708; --fg:#e6e6e6; --muted:#a2abad; --neon:#00ff99; --neon-dim:#00cc7a; --card:#0f1114; --border:#23262a; --panel:#0f1215}
*{box-sizing:border-box}
body{margin:0; font-family:'Roboto Mono', monospace; background:var(--bg); color:var(--fg)}
a{color:var(--neon)}

.nav{position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0)); z-index:1000}
.nav .brand{font-weight:700; letter-spacing:.08em}
.nav nav a{margin-left:16px; color:var(--fg); text-decoration:none; opacity:.95}
.nav nav a:hover{color:var(--neon)}

.hero{position:relative; min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:48px 20px; overflow:hidden}
.matrix-wrap{position:absolute; top:0; left:0; right:0; height:38%; overflow:hidden; pointer-events:none}
#matrix-hero{position:absolute; inset:0; opacity:.42}
.hero-inner{position:relative; z-index:2; max-width:1040px}
.hero-inner h1{font-size:clamp(30px,6.4vw,64px); margin:0 0 12px; text-shadow:0 0 20px rgba(0,255,153,.16)}
.hero-inner p{color:var(--muted); margin:0 0 18px}
.btn{display:inline-block; padding:10px 16px; background:var(--neon); color:#062; font-weight:700; border-radius:6px; text-decoration:none}
.btn.small{padding:8px 12px; font-size:.9em}

.marquee{overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.04); background:rgba(255,255,255,.02)}
.marquee .track{display:flex; gap:40px; align-items:center; animation:scrollx 22s linear infinite; padding:10px 0}
.marquee img{height:28px; opacity:.9}
@keyframes scrollx{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.section{padding:72px 20px; max-width:1200px; margin:0 auto}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.04)}
h2{text-align:center; letter-spacing:.08em; margin:0 0 24px}

.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; transition:transform .18s ease, border-color .18s ease; position:relative}
.card:hover{transform:translateY(-6px); border-color:var(--neon)}
.card .icon{width:44px; height:44px; opacity:.9; margin-bottom:10px}
.card ul{margin:8px 0 0 18px; color:var(--muted)}
.card p, .card li{word-wrap:break-word; overflow-wrap:anywhere}
.card.flip::after{content:'Learn more ↺'; position:absolute; right:10px; bottom:10px; font-size:.8em; color:#7fdcb6; opacity:.7}

.columns{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.team .photo.big{width:100%; height:220px; background:linear-gradient(180deg,#0d0f12,#14171a); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:12px}
.team .photo.big img{width:60%; opacity:.8}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.badge{display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:6px; background:#0b0d0f; color:var(--fg); text-decoration:none}
.badge:hover{border-color:var(--neon)}

.cert-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cert ul{margin:8px 0 0 18px; color:var(--muted)}
.small{opacity:.75}

.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:2000; visibility:hidden; opacity:0; transition:.2s}
.modal[aria-hidden="false"]{visibility:visible; opacity:1}
.modal-inner{position:relative; background:var(--panel); border:1px solid rgba(0,255,153,.08); border-radius:12px; width:clamp(320px,68vw,980px); max-height:88vh; overflow:auto; padding:24px}
.modal-close{position:absolute; right:16px; top:12px; font-size:28px; background:transparent; border:0; color:var(--muted)}
.modal-body iframe{width:100%; height:75vh; border:0; background:#0b0d0f; border-radius:8px}

.simulator{margin-top:22px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); padding:14px; border-radius:10px}
#sim-chart{width:100%; height:auto; background:#0b0d0f; border:1px solid var(--border); border-radius:8px}
.legend{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap}
.legend .dot{width:12px; height:12px; border-radius:50%; display:inline-block}

.glitch{position:relative; display:inline-block; color:#fff; font-weight:700; letter-spacing:.12em; text-shadow:0 0 8px rgba(0,255,153,.35)}
.glitch::before,.glitch::after{content:attr(data-text); position:absolute; left:0; top:0; width:100%; height:100%;}
.glitch::before{left:2px; text-shadow:-2px 0 #f0f; opacity:.5}
.glitch::after{left:-2px; text-shadow:2px 0 #0ff; opacity:.5}
.glitch:hover{animation:jitter .18s infinite}
@keyframes jitter{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}

@media(max-width:640px){ .team .photo.big{height:180px} }


/* Bootstrap helpers overrides */
.btn-success{background:var(--neon); border-color:var(--neon); color:#071}
.btn-success:hover{background:var(--neon-dim); border-color:var(--neon-dim); color:#061}

/* Matrix: ensure canvas covers band and scales with DPR */
.matrix-wrap{position:absolute; top:0; left:0; right:0; height:40%; overflow:hidden; pointer-events:none}

/* Bigger infinite marquee */
.marquee{overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03)}
.marquee .track{display:flex; gap:64px; align-items:center; animation:scrollx 30s linear infinite; padding:16px 0; will-change:transform}
.marquee img{height:38px; opacity:.95; transition:transform .15s ease}
.marquee a:hover img{transform:scale(1.06)}
@keyframes scrollx{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Team images responsive */
.team .photo.big img{width:100%; height:100%; object-fit:cover; opacity:.95; border-radius:6px}


/* === Dark theme reinforcement after Bootstrap === */
html, body{background:var(--bg); color:var(--fg)}
.nav{background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0))}
.card{background:var(--card); color:var(--fg)}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.btn-outline-light{--bs-btn-color:#e6e6e6; --bs-btn-border-color:#e6e6e6; --bs-btn-hover-bg:#e6e6e6; --bs-btn-hover-color:#0b0d0f}


/* Matrix: full hero coverage */
.matrix-wrap.full{height:100%}

/* Marquee bigger and triple loop */
.marquee .track.triple{animation:scrollx 45s linear infinite; gap:80px; padding:18px 0}
.marquee img{height:52px}

/* Modal bio layout with big photo */
.modal-body .bio{display:grid; grid-template-columns: 220px 1fr; gap:16px; align-items:start}
.modal-body .bio img{width:220px; height:220px; object-fit:cover; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media(max-width:700px){
  .modal-body .bio{grid-template-columns:1fr}
  .modal-body .bio img{width:100%; height:auto}
}


/* Static narrative timeline */
.narrative .muted{opacity:.8}
.timeline{display:grid; gap:16px; margin-top:10px}
.timeline .year{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px}
.timeline .year h5{margin:.2em 0 .4em; color:var(--neon)}
.timeline .year p{margin:.2em 0; color:var(--fg)}
.timeline .delta{margin-top:8px; padding:8px; border-radius:8px; background:rgba(0,255,153,.06); border:1px dashed rgba(0,255,153,.35)}
.timeline .delta span{color:var(--neon)}


/* Compact narrative layout */
.narrative{margin-top:40px}
.narrative .muted{font-size:.9em}
.timeline{gap:10px; margin-top:6px}
.timeline .year{padding:10px 12px; font-size:.95em}
.timeline .year h5{font-size:1.05em; margin:.1em 0 .3em}
.timeline .year p{margin:.15em 0}
.timeline .delta{margin-top:6px; padding:6px; font-size:.9em}
.tab-content{margin-top:10px}


/* Prevent header overlap on anchor jumps */
section{scroll-margin-top:90px}
#play{padding-top:12px}

/* Journey accordion styling to match dark theme */
.journey h4{margin-bottom:10px}
.accordion-item{background:var(--card); border:1px solid var(--border)}
.accordion-button{background:#0b0d0f; color:var(--fg)}
.accordion-button:not(.collapsed){color:#062; background:rgba(0,255,153,.12); box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 .1rem rgba(0,255,153,.35)}
.accordion-body{background:var(--card); color:var(--fg)}


/* Timeline tweaks */
.timeline .year{margin-bottom:8px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 12px}
.timeline .year h5{color:var(--neon); font-size:1em; margin:.2em 0}
.timeline .year p{margin:.15em 0; font-size:.9em}


/* Fix cropped images: ensure contain scaling */
.card img.icon{object-fit:contain}
.card.person img{object-fit:contain; width:100%; height:auto; border-radius:10px}
.modal-body .bio img{object-fit:contain; max-width:100%; height:auto}
.marquee img{object-fit:contain}


/* --- v16: Fix team photo cropping --- */
.team .photo.big{height:auto !important; min-height:unset !important}
.team .photo.big img{display:block; width:100% !important; height:auto !important; object-fit:contain !important; border-radius:10px}


/* v22: header logo only, larger */
.nav .brand{display:flex; align-items:center}
.nav .brand .logo{height:90px; width:auto; display:block}
@media(min-width:900px){
  .nav .brand .logo{height:120px}
}

/* v22: customer & benefits grid */
.grid.two{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:900px){ .grid.two{grid-template-columns:1fr 1fr} }
.benefit-cards .card p{opacity:.95}


/* v23: compact nav bar + hover states */
.nav{background:rgba(7,8,9,.95); padding:4px 20px; backdrop-filter: blur(4px); border-bottom:1px solid rgba(0,255,153,.12)}
.nav .brand .logo{height:45px; width:auto; display:block}
@media(min-width:900px){ .nav .brand .logo{height:60px} }
.nav ul{display:flex; gap:20px; align-items:center}
.nav ul li a{padding:6px 12px; border-radius:8px; transition:background .25s ease,color .25s ease, box-shadow .25s ease}
.nav ul li a:hover{background:rgba(0,255,170,.12); color:#00ffaa; box-shadow:0 0 0 1px rgba(0,255,153,.2), 0 4px 18px rgba(0,255,153,.12)}
/* Avoid anchor overlap with tighter nav */
section{scroll-margin-top:72px}


/* v24: Playground cards -> sticky Explain button at bottom */
#play .grid.play .card{display:flex; flex-direction:column}
#play .grid.play .card p{flex:0 0 auto}
#play .grid.play .card .play-btn{margin-top:auto; width:100%}