/* Full NEXO styles. The theme switch stays fixed at bottom-right. */
:root{--accent:#650820;--accent2:#8c1235;--bg:#080a0d;--surface:#101318;--surface2:#151a22;--text:#f7f8fb;--muted:#aeb7c5;--line:rgba(142,166,201,.2);--blue:#71a8ff;--max:1240px}[data-theme=light]{--bg:#f7f6f2;--surface:#fff;--surface2:#ecebe6;--text:#111;--muted:#64635f;--line:rgba(0,0,0,.15);--blue:#315b9d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,Arial,sans-serif;overflow-x:hidden;transition:background .35s,color .35s}a{color:inherit;text-decoration:none}button{font:inherit}.brand-logo{display:flex;align-items:center;width:150px;height:48px;overflow:hidden}.logo{width:100%;height:100%;object-fit:contain}.logo-dark{display:none}.logo-white{display:block}[data-theme=light] .logo-dark{display:block}[data-theme=light] .logo-white{display:none}.nav{position:fixed;inset:0 0 auto;z-index:30;padding:20px 4vw;transition:.3s}.nav.scrolled{background:rgba(8,10,13,.9);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}[data-theme=light] .nav.scrolled{background:rgba(247,246,242,.92)}.nav-inner{max-width:var(--max);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px}.nav-links{display:flex;gap:25px;color:var(--muted);font-size:12px}.nav-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid transparent;font-size:12px;font-weight:800;cursor:pointer;transition:.25s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 25px rgba(101,8,32,.3)}[data-theme=light] .btn-primary{background:#fff;border-color:#111;color:#111;box-shadow:none}.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}[data-theme=light] .btn-primary:hover{background:#111;color:#fff}.btn-secondary{background:#fff;border-color:#fff;color:#080a0d}.btn-secondary:hover{background:transparent;color:var(--text)}.nav-partner,.nav-demo{min-height:38px;padding:0 15px}.theme-toggle{position:fixed;right:28px;bottom:25px;z-index:45;width:58px;height:58px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;box-shadow:0 10px 30px #0005;font-size:24px;display:grid;place-items:center}.theme-sun,.theme-moon{grid-area:1/1}.theme-moon{display:none}[data-theme=light] .theme-sun{display:none}[data-theme=light] .theme-moon{display:block}.menu{display:none;background:none;border:0;color:var(--text);font-size:22px}.mobile-menu{display:none;position:fixed;inset:0;z-index:25;background:var(--bg);padding:115px 8vw}.mobile-menu.open{display:flex;flex-direction:column;gap:24px}.mobile-menu a{font-weight:700}.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 4vw 10vh;overflow:hidden;background:#080a0d}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,13,.9),rgba(8,10,13,.45) 43%,rgba(8,10,13,.12) 80%),linear-gradient(0deg,rgba(8,10,13,.8),transparent 55%);z-index:1}.hero-inner{position:relative;z-index:2;width:min(var(--max),100%);margin:auto}.hero-kicker,.kicker{font:500 11px 'DM Mono',monospace;color:var(--blue);text-transform:uppercase}.hero h1{max-width:850px;margin:18px 0;font-size:clamp(52px,8.5vw,130px);line-height:.9;letter-spacing:-.075em}.hero p{color:#c4ccd7;line-height:1.65;margin-top: 40px}.hero-actions{display:flex;gap:12px;margin-top:28px}.hero-status{position:absolute;right:4vw;bottom:8vh;z-index:2;color:#fff;font:500 10px 'DM Mono',monospace;letter-spacing:.14em}.hero-status i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--accent)}.section{padding:140px 4vw}.wrap{width:min(var(--max),100%);margin:auto}.section-heading{text-align:left}.section-heading.centered{text-align:center}.section-heading p{max-width:650px}.centered p{margin-left:auto;margin-right:auto}.section h2{font-size:clamp(39px,5.1vw,76px);letter-spacing:-.07em;line-height:.97;margin:16px 0 20px}.section p{color:var(--muted);line-height:1.7}.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.workspace-preview{background:var(--surface)}.preview-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;margin-top:55px}.preview-paper{min-height:560px;padding:30px;background:#f7f7f4;color:#24282b;border-radius:25px;position:relative;box-shadow:0 25px 70px #0003}.paper-meta{display:flex;justify-content:space-between;font:9px 'DM Mono',monospace;color:#8b9298;letter-spacing:.12em}.ruled{height:405px;margin-top:18px;border:1px dashed #d2d5d8;background:repeating-linear-gradient(to bottom,#fff 0,#fff 23px,#e2e6e8 24px)}.preview-paper em{position:absolute;top:330px;left:35px;right:35px;text-align:center;color:#ccc;font:italic 12px Georgia}.paper-footer{display:flex;justify-content:space-between;margin-top:18px;font:9px 'DM Mono',monospace;color:#777}.paper-footer button{border:0;background:none;color:#315b9d;cursor:pointer}.template-list{display:flex;gap:8px;margin-top:12px}.template-list button{border:0;border-radius:8px;padding:9px;background:#e7e8e7;color:#62666a;font:10px 'DM Mono',monospace}.preview-console{min-height:560px;padding:30px;border:1px solid var(--line);border-radius:25px;background:var(--surface2)}.console-top{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);font:10px 'DM Mono',monospace;letter-spacing:.1em}.console-top i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:9px}.console-top small{color:var(--muted)}.console-body{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;margin-top:115px}.console-body label{display:block;margin-bottom:12px;color:var(--blue);font:9px 'DM Mono',monospace}.console-box{min-height:180px;border:1px solid var(--line);border-radius:15px;padding:25px;color:var(--muted);font:italic 11px 'DM Mono',monospace;line-height:1.5}.pipeline{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:25px;padding:17px;border:1px solid rgba(77,132,224,.3);border-radius:14px;background:rgba(28,55,100,.2)}.pipeline strong{font-size:12px}.pipeline small{display:block;color:var(--muted);font-size:10px;margin-top:7px}.preview-link{margin-top:20px}.dark-block{background:var(--accent)}[data-theme=light] .dark-block{background:#fff}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.info-card{min-height:190px;padding:25px;border:1px solid rgba(135,169,219,.42);background:rgba(10,13,18,.5);border-radius:18px}.dark-block .info-card{background:var(--accent)}[data-theme=light] .dark-block .info-card{background:var(--accent);color:#fff}.info-card h3{margin:0 0 11px;font-size:17px;color:var(--text)}.dark-block .info-card h3{color:#fff}.info-card p{font-size:12px;line-height:1.65;color:var(--muted)}.dark-block .info-card p{color:#eadbe0}.icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:22px;border:1px solid #76aaff88;border-radius:12px;color:#83b4ff;font-size:21px;font-weight:700}.how{background:var(--bg)}.timeline{position:relative;max-width:900px;margin:70px auto 0}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:rgba(101,8,32,.2);transform:translateX(-50%);overflow:hidden}.timeline-line i{display:block;width:100%;height:0;background:var(--accent);box-shadow:0 0 14px rgba(101,8,32,.8)}[data-theme=light] .timeline-line i{background:#111}.timeline article{position:relative;width:50%;padding:0 55px 70px}.timeline article:nth-child(even){margin-left:50%}.timeline article:nth-child(odd){text-align:right}.timeline article>span{position:absolute;right:-18px;top:0;width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--muted);border-radius:50%;background:var(--bg);color:var(--muted);font:10px 'DM Mono',monospace;z-index:2;transition:.3s}.timeline article:nth-child(even)>span{left:-18px}.timeline article.active>span{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 22px rgba(101,8,32,.65)}.timeline small{font:500 10px 'DM Mono',monospace;color:var(--blue)}.timeline h3{margin:8px 0;font-size:30px}.timeline p{font-size:14px}.ecosystem{background:var(--surface)}.ecosystem-map{height:620px;max-width:920px;margin:60px auto 0;position:relative;border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle,rgba(45,77,140,.18),transparent 48%)}.ecosystem-map:before,.ecosystem-map:after{content:'';position:absolute;inset:18%;border:1px solid rgba(113,168,255,.12);border-radius:50%}.ecosystem-map:after{inset:28%}.ecosystem-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border:2px solid var(--blue);border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--blue);font-size:35px;box-shadow:0 0 45px #478dff44}.ecosystem-core strong,.ecosystem-core small,.eco-node strong,.eco-node small{display:block}.ecosystem-core strong{font:500 11px 'DM Mono',monospace;letter-spacing:.13em}.ecosystem-core small{color:var(--muted);font-size:9px}.eco-node{position:absolute;width:145px;min-height:115px;padding:16px;text-align:center;border:1px solid var(--line);border-radius:15px;background:var(--surface);font-size:24px;color:var(--blue)}.eco-node strong{font-size:13px;color:var(--text);margin-top:8px}.eco-node small{font-size:9px;color:var(--muted);margin-top:4px}.node-1{top:30px;left:50%;transform:translateX(-50%)}.node-2{left:35px;top:31%}.node-3{right:35px;top:31%}.node-4{left:17%;bottom:35px}.node-5{right:17%;bottom:35px}.intelligence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:55px}.wide-card{grid-column:span 2;min-height:245px;padding:25px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.wide-card h3{margin:0 0 11px}.wide-card p{font-size:12px}.chat-chip,.wave{display:inline-block;margin-top:25px;padding:12px 16px;border:1px solid #477bd4;border-radius:99px;color:var(--blue);font:11px 'DM Mono',monospace}.faq{background:var(--surface)}.narrow{max-width:900px}.faq details{border-top:1px solid var(--line);padding:25px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;font-weight:600}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';float:right;color:var(--blue);font-size:22px}.faq details[open] summary:after{content:'−'}.faq details p{margin:18px 0 0;font-size:13px}.cta{padding-top:45px;padding-bottom:130px}.cta-card{padding:80px 30px;text-align:center;border:1px solid var(--line);border-radius:24px;background:var(--accent)}.cta-card h2{max-width:700px;margin:16px auto 20px}.cta-card p{margin:0 auto 28px;color:#eadbe0}.footer{padding:35px 4vw;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.footer-inner{width:min(var(--max),100%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-links{display:flex;gap:18px}.footer-logo{width:150px;height:48px}.modal{display:none;position:fixed;inset:0;z-index:80;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(620px,100%);max-height:92vh;overflow:auto;padding:38px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 100px #0008}.modal-close{position:absolute;right:17px;top:12px;border:0;background:none;color:var(--muted);font-size:29px;cursor:pointer}.modal-card h2{margin:13px 0;font-size:clamp(30px,5vw,52px);letter-spacing:-.06em;line-height:1}.partner-form,.demo-form{display:grid;gap:16px;margin-top:25px}.partner-form label,.demo-form label{display:grid;gap:7px;color:var(--muted);font-size:11px}.partner-form input,.partner-form select,.partner-form textarea,.demo-form input,.demo-form textarea{width:100%;border:1px solid var(--line);padding:13px;background:var(--bg);color:var(--text);font:inherit;font-size:13px;outline:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-status{font-size:12px;color:#dc3545;min-height:16px}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}.split,.preview-grid{grid-template-columns:1fr}.intelligence-grid{grid-template-columns:repeat(2,1fr)}.wide-card{grid-column:span 2}}
@media(max-width:760px){.nav{padding:17px 5vw}.brand-logo{width:112px;height:40px}.nav-links,.nav-partner,.nav-demo{display:none}.menu{display:block}.hero{padding:0 6vw 9vh}.hero-video{object-position:58% center}.hero-overlay{background:linear-gradient(0deg,rgba(8,10,13,.86),rgba(8,10,13,.15) 75%),linear-gradient(90deg,rgba(8,10,13,.6),transparent)}.hero h1{font-size:clamp(50px,14vw,82px)}.hero-actions{flex-wrap:wrap}.hero-status{right:6vw;bottom:4vh}.section{padding:95px 6vw}.cards-grid,.four,.mini-grid,.intelligence-grid{grid-template-columns:1fr}.wide-card{grid-column:auto}.console-body{grid-template-columns:1fr;margin-top:60px}.pipeline{align-items:flex-start;flex-direction:column}.pipeline .btn{width:100%}.timeline-line{left:16px}.timeline article,.timeline article:nth-child(even){width:100%;margin:0;padding:0 0 55px 55px;text-align:left}.timeline article>span,.timeline article:nth-child(even)>span{left:0;right:auto}.education-card{grid-template-columns:repeat(2,1fr)}.ecosystem-map{height:560px}.eco-node{width:110px;min-height:95px;padding:12px}.node-2{left:12px}.node-3{right:12px}.node-4{left:8%}.node-5{right:8%}.ecosystem-core{width:140px;height:140px}.footer-inner{align-items:flex-start;flex-direction:column}.footer-links{flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.modal-card{padding:30px 22px}.theme-toggle{right:18px;bottom:18px;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

.two{
  align-items: start !important;
  gap: 2vw;
}

.two .mini-grid{
  grid-template-columns: 1fr 1fr;
}

.info-card,
.wide-card,
.eco-node {
  background: #650820 !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
.info-card h3,
.wide-card h3,
.info-card p,
.wide-card p,
.eco-node strong,
.eco-node small {
  color: #fff !important;
}
.info-card p,
.wide-card p,
.eco-node small {
  color: rgba(255,255,255,.78) !important;
}

/* Light mode keeps the surrounding page white, while all tile cards remain maroon. */
[data-theme="light"] .hardware,
[data-theme="light"] .notebook,
[data-theme="light"] .ecosystem,
[data-theme="light"] .intelligence,
[data-theme="light"] .how,
[data-theme="light"] .faq,
[data-theme="light"] .workspace-page {
  background: #fff;
}
[data-theme="light"] .dark-block {
  background: #fff;
}

/* Notebook, hardware and ecosystem visual blocks are also NEXO burgundy. */
.hardware-visual,
.notebook-visual,
.ecosystem-map,
.preview-console,
.workspace-panel {
/*  background: #650820 !important;*/
}

/* The floating switch must stay at bottom-right and never participate in navigation layout. */
.theme-toggle {
  position: fixed !important;
  right: 28px !important;
  bottom: 25px !important;
  top: auto !important;
  left: auto !important;
  z-index: 9999 !important;
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
}

/* Icon behavior: dark page displays sun; light page displays moon. */
.theme-sun,
.theme-moon { grid-area: 1 / 1; }
.theme-sun { display: block !important; }
.theme-moon { display: none !important; }
[data-theme="light"] .theme-sun { display: none !important; }
[data-theme="light"] .theme-moon { display: block !important; }

/* Restore / guarantee timeline progress and phase activation styles. */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(101,8,32,.18);
}
.timeline-line #timelineProgress {
  display: block;
  width: 100%;
  height: 0;
  background: #650820;
  box-shadow: 0 0 16px rgba(101,8,32,.8);
  transition: height .08s linear;
}
.timeline article.active > span {
  color: #fff !important;
  background: #650820 !important;
  border-color: #650820 !important;
  box-shadow: 0 0 24px rgba(101,8,32,.65);
}

@media (max-width:760px) {
  .theme-toggle { right:18px !important; bottom:18px !important; width:52px !important; height:52px !important; }
  .timeline-line { left:16px; }
}

.workspace-live-status,
.workspace-ocr-label {
  color: #71a8ff;
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .08em;
}

.workspace-ocr-status {
  color: var(--text);
  font: italic 11px 'DM Mono', monospace;
}

.workspace-cursor {
  display: inline-block;
  margin-left: 4px;
  color: #71a8ff;
  animation: nexo-blink .85s step-end infinite;
}

@keyframes nexo-blink {
  50% { opacity: 0; }
}

/* =========================================================
   NEXO THEME / LAYOUT REFINEMENT
   ========================================================= */

/* Solid sticky header in BOTH themes */
.nav,
.nav.scrolled,
[data-theme="light"] .nav,
[data-theme="light"] .nav.scrolled {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.nav {
  padding: 14px 4vw;
}

.nav-links a {
  transition: color .2s ease, opacity .2s ease;
}

.nav-links a:hover {
  color: var(--text);
}

/* The hamburger is already present in header.php; make it a proper button. */
.menu {
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 42px;
  height: 38px;
  display: none;
  place-items: center;
  color: var(--text);
}

/* Keep the hero content clear of the fixed header. */
.hero {
  min-height: 100svh;
  padding-top: 100px;
  scroll-margin-top: 80px;
}

.hero-inner {
  padding-bottom: 2vh;
}

/* =========================================================
   SECTION RHYTHM
   ========================================================= */

/* Dark mode: alternate black/grey/maroon so sections don't merge. */
[data-theme="dark"] .workspace-preview { background: #111419; }
[data-theme="dark"] .hardware { background: #15181d; }
[data-theme="dark"] .notebook { background: #650820; }
[data-theme="dark"] .how { background: #ecebe6; color: #111; }
[data-theme="dark"] .ecosystem { background: #101318; }
[data-theme="dark"] .intelligence { background: #f1f0ec; color: #111; }
[data-theme="dark"] .faq { background: #e9e8e3; color: #111; }

/* Light mode: mostly white/grey with selected maroon sections. */
[data-theme="light"] .workspace-preview { background: #f7f6f2; }
[data-theme="light"] .hardware { background: #ecebe6; }
[data-theme="light"] .notebook { background: #650820; }
[data-theme="light"] .how { background: #f1f0ec; }
[data-theme="light"] .ecosystem { background: #fff; }
[data-theme="light"] .intelligence { background: #f1f0ec; }
[data-theme="light"] .faq { background: #fff; }

/* =========================================================
   CARDS
   DARK MODE  = white cards + maroon text
   LIGHT MODE = maroon cards + white text
   ========================================================= */

.info-card,
.wide-card,
.eco-node {
  background: #fff !important;
  border: 1px solid rgba(101,8,32,.18) !important;
  color: #650820 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.info-card h3,
.wide-card h3,
.eco-node strong {
  color: #650820 !important;
}

.info-card p,
.wide-card p,
.eco-node small {
  color: #6b4a53 !important;
}

.info-card .icon,
.wide-card .icon {
  color: #650820 !important;
  border-color: rgba(101,8,32,.35) !important;
}

[data-theme="light"] .info-card,
[data-theme="light"] .wide-card,
[data-theme="light"] .eco-node {
  background: #650820 !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(101,8,32,.16);
}

[data-theme="light"] .info-card h3,
[data-theme="light"] .wide-card h3,
[data-theme="light"] .eco-node strong {
  color: #fff !important;
}

[data-theme="light"] .info-card p,
[data-theme="light"] .wide-card p,
[data-theme="light"] .eco-node small {
  color: rgba(255,255,255,.78) !important;
}

[data-theme="light"] .info-card .icon,
[data-theme="light"] .wide-card .icon {
  color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* Feature card spacing */
.cards-grid {
  gap: 18px;
}

.cards-grid .info-card {
  min-height: 205px;
}

/* =========================================================
   PRECISION IN EVERY ATOM — 4 CARDS PER ROW
   ========================================================= */

.hardware .cards-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 30px;
}

.hardware .cards-grid.four .info-card {
  min-height: 230px;
  cursor: pointer;
}

/* =========================================================
   TACTILE CANVAS — CLEAR GAP BETWEEN EVERY CARD
   ========================================================= */

.mini-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 30px;
}

.mini-grid .info-card {
  min-height: 158px;
}

/* =========================================================
   VISUAL BLOCKS
   ========================================================= */

.hardware-visual,
.notebook-visual {
  min-height: 420px;
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
}

[data-theme="light"] .hardware-visual,
[data-theme="light"] .notebook-visual {
  background: #deddd8;
  border-color: rgba(101,8,32,.12);
}

.ecosystem-map {
  background: rgba(255,255,255,.035);
}

[data-theme="light"] .ecosystem-map {
  background: #f3f2ee;
}

/* =========================================================
   TECHNICAL FEATURES
   ========================================================= */

.dark-block {
  background: #650820 !important;
}

[data-theme="light"] .dark-block {
  background: #fff !important;
}

/* Dark: white feature cards. */
[data-theme="dark"] .dark-block .info-card {
  background: #fff !important;
  color: #650820 !important;
}

[data-theme="dark"] .dark-block .info-card h3 {
  color: #650820 !important;
}

[data-theme="dark"] .dark-block .info-card p {
  color: #6b4a53 !important;
}

[data-theme="dark"] .dark-block .info-card .icon {
  color: #650820 !important;
  border-color: rgba(101,8,32,.35) !important;
}

/* Light: maroon feature cards. */
[data-theme="light"] .dark-block .info-card {
  background: #650820 !important;
  color: #fff !important;
}

[data-theme="light"] .dark-block .info-card h3 {
  color: #fff !important;
}

[data-theme="light"] .dark-block .info-card p {
  color: rgba(255,255,255,.78) !important;
}

[data-theme="light"] .dark-block .info-card .icon {
  color: #fff !important;
  border-color: rgba(255,255,255,.4) !important;
}

/* =========================================================
   CTA
   "The future of learning starts with a notebook."
   stays WHITE in light mode too.
   ========================================================= */

.cta-card,
[data-theme="light"] .cta-card {
  background: #650820;
  color: #fff;
}

.cta-card h2,
[data-theme="light"] .cta-card h2 {
  color: #fff;
}

.cta-card p,
[data-theme="light"] .cta-card p {
  color: rgba(255,255,255,.88);
}

.cta-card .btn-primary,
[data-theme="light"] .cta-card .btn-primary {
  background: #fff;
  border-color: #fff;
  color: #650820;
  box-shadow: none;
}

.cta-card .btn-secondary {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.cta-card .btn-secondary:hover {
  background: #fff;
  color: #650820;
}

/* Maroon notebook section keeps its heading readable. */
.notebook .section-heading h2,
.notebook .section-heading p {
  color: #fff;
}

/* =========================================================
   HEADER / MOBILE MENU
   ========================================================= */

[data-theme="dark"] .nav .btn-primary {
  background: #650820;
  border-color: #650820;
}

[data-theme="light"] .nav .btn-primary {
  background: #fff;
  border-color: #111;
  color: #111;
}

.mobile-menu {
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.mobile-menu a {
  color: var(--text);
}

[data-theme="light"] .mobile-menu .btn-primary {
  background: #fff;
  border-color: #111;
  color: #111;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .hardware .cards-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nav {
    padding: 12px 5vw;
  }

  .hero {
    padding-top: 90px;
  }

  .hardware .cards-grid.four {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    gap: 16px;
  }

  .mini-grid {
    gap: 16px;
  }

  .hardware-visual,
  .notebook-visual {
    min-height: 300px;
  }

  .menu {
    display: grid;
  }
}


/* =========================================================
   SECOND-PASS VISUAL REFINEMENT
   ========================================================= */

/* Workspace / "Write on Paper. Query with AI." section:
   use a maroon section background so it reads as a distinct block. */
.workspace-preview {
  background: #650820 !important;
  color: #fff;
  padding-top: 120px;
  padding-bottom: 120px;
}

.workspace-preview .section-heading h2,
.workspace-preview .section-heading p {
  color: #fff;
}

.workspace-preview .section-heading p {
  color: rgba(255,255,255,.82);
}

/* The workspace itself stays light and readable inside the maroon section. */
.workspace-preview .preview-paper,
.workspace-preview .preview-console {
  background: #fff;
  color: #111;
}

.workspace-preview .preview-console {
  border-color: rgba(255,255,255,.5);
}

.workspace-preview .preview-console .console-top,
.workspace-preview .preview-console .console-box {
  color: #111;
}

.workspace-preview .preview-console .console-top small,
.workspace-preview .preview-console .console-box {
  color: #64635f;
}

/* =========================================================
   DARK MODE SECTION ORDER
   How NEXO works / Intelligence / FAQ should be dark.
   ========================================================= */

[data-theme="dark"] .how,
[data-theme="dark"] .intelligence,
[data-theme="dark"] .faq {
  background: #080a0d !important;
  color: #f7f8fb;
}

[data-theme="dark"] .how .section-heading h2,
[data-theme="dark"] .intelligence .section-heading h2,
[data-theme="dark"] .faq .section-heading h2 {
  color: #f7f8fb;
}

[data-theme="dark"] .how .section-heading p,
[data-theme="dark"] .intelligence .section-heading p {
  color: #aeb7c5;
}

/* Dark-mode timeline text was becoming too pale/grey on the light block. */
[data-theme="dark"] .timeline h3,
[data-theme="dark"] .timeline p,
[data-theme="dark"] .faq summary {
  color: #f7f8fb;
}

[data-theme="dark"] .timeline p,
[data-theme="dark"] .faq details p {
  color: #aeb7c5;
}

[data-theme="dark"] .faq details {
  border-color: rgba(142,166,201,.2);
}

/* Dark-mode intelligence cards remain white, with maroon text. */
[data-theme="dark"] .intelligence .info-card,
[data-theme="dark"] .intelligence .wide-card {
  background: #fff !important;
  color: #650820 !important;
  border-color: rgba(101,8,32,.18) !important;
}

[data-theme="dark"] .intelligence .info-card h3,
[data-theme="dark"] .intelligence .wide-card h3 {
  color: #650820 !important;
}

[data-theme="dark"] .intelligence .info-card p,
[data-theme="dark"] .intelligence .wide-card p {
  color: #6b4a53 !important;
}

/* =========================================================
   LIGHT MODE
   Workspace is maroon; buttons stay high-contrast and clean.
   ========================================================= */

[data-theme="light"] .workspace-preview {
  background: #650820 !important;
}

[data-theme="light"] .workspace-preview .hero-actions .btn-primary,
[data-theme="light"] .workspace-preview .hero-actions .btn-secondary {
  background: #fff;
  border-color: #fff;
  color: #111;
  box-shadow: none;
}

[data-theme="light"] .workspace-preview .hero-actions .btn-primary:hover,
[data-theme="light"] .workspace-preview .hero-actions .btn-secondary:hover {
  background: #111;
  border-color: #111;
  color: #fff;
}

/* Main hero buttons in light mode: white button + dark text,
   matching the screenshot rather than inheriting maroon. */
[data-theme="light"] .hero .btn-primary,
[data-theme="light"] .hero .btn-secondary {
  background: #fff;
  border-color: #fff;
  color: #111;
  box-shadow: none;
}

[data-theme="light"] .hero .btn-primary:hover,
[data-theme="light"] .hero .btn-secondary:hover {
  background: #650820;
  border-color: #650820;
  color: #fff;
}

/* Light-mode hero title must be visible over the video. */
[data-theme="light"] .hero h1 {
  color: #fff !important;
  text-shadow: 0 3px 20px rgba(0,0,0,.5);
}

[data-theme="light"] .hero p {
  color: rgba(255,255,255,.9);
}

[data-theme="light"] .hero-overlay {
  background:
    linear-gradient(90deg, rgba(8,10,13,.92), rgba(8,10,13,.58) 48%, rgba(8,10,13,.2) 85%),
    linear-gradient(0deg, rgba(8,10,13,.82), rgba(8,10,13,.08) 65%);
}

/* Light-mode How/FAQ remain light, with dark readable typography. */
[data-theme="light"] .how,
[data-theme="light"] .faq {
  background: #f1f0ec !important;
  color: #111;
}

[data-theme="light"] .intelligence {
  background: #fff !important;
  color: #111;
}

/* =========================================================
   HEADER BUTTON VISIBILITY
   ========================================================= */

[data-theme="dark"] .nav .btn-primary {
  background: #650820 !important;
  border-color: #650820 !important;
  color: #fff !important;
}

[data-theme="light"] .nav .btn-primary {
  background: #fff !important;
  border-color: #111 !important;
  color: #111 !important;
}

[data-theme="dark"] .nav .btn-primary:hover {
  background: #8c1235 !important;
  border-color: #8c1235 !important;
}

[data-theme="light"] .nav .btn-primary:hover {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

/* Keep sticky header solid and readable while scrolling. */
.nav,
.nav.scrolled,
[data-theme="dark"] .nav,
[data-theme="dark"] .nav.scrolled,
[data-theme="light"] .nav,
[data-theme="light"] .nav.scrolled {
  background: var(--bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   V3 FINAL UI / UX PASS
   ========================================================= */

/* Light mode: the maroon notebook section needs white heading + copy.
   The previous selector targeted .section-heading, but this section uses
   a split layout, so target its direct content explicitly. */
[data-theme="light"] .notebook h2,
[data-theme="light"] .notebook > .wrap > div:first-child > p {
  color: #fff !important;
}

[data-theme="light"] .notebook .kicker {
  color: #71a8ff !important;
}

/* Keep the notebook section's card copy white in light mode. */
[data-theme="light"] .notebook .info-card p {
  color: rgba(255,255,255,.78) !important;
}

/* =========================================================
   BUTTON HIERARCHY
   One clear maroon CTA, one white secondary button.
   ========================================================= */

/* Light mode */
[data-theme="light"] .nav-demo,
[data-theme="light"] .hero .btn-primary {
  background: #650820 !important;
  border-color: #650820 !important;
  color: #fff !important;
}

[data-theme="light"] .nav-partner,
[data-theme="light"] .hero .btn-secondary {
  background: #fff !important;
  border-color: #111 !important;
  color: #111 !important;
}

[data-theme="light"] .nav-demo:hover,
[data-theme="light"] .hero .btn-primary:hover {
  background: #8c1235 !important;
  border-color: #8c1235 !important;
  color: #fff !important;
}

[data-theme="light"] .nav-partner:hover,
[data-theme="light"] .hero .btn-secondary:hover {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

/* Dark mode: retain maroon primary and subtle white secondary. */
[data-theme="dark"] .nav-demo,
[data-theme="dark"] .hero .btn-primary {
  background: #650820 !important;
  border-color: #650820 !important;
  color: #fff !important;
}

[data-theme="dark"] .nav-partner,
[data-theme="dark"] .hero .btn-secondary {
  background: #fff !important;
  border-color: #fff !important;
  color: #111 !important;
}

/* CTA card buttons remain intentionally inverted for contrast. */
.cta-card .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #650820 !important;
}

.cta-card .btn-secondary {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* =========================================================
   FONT AWESOME ICONS
   ========================================================= */

.icon i,
.btn i,
.hero-kicker i,
.theme-toggle i,
.menu i {
  line-height: 1;
}

.icon i {
  font-size: 18px;
}

.hero-kicker i {
  margin-right: 6px;
}

/* =========================================================
   SCROLL REVEAL
   Native IntersectionObserver is used instead of relying on GSAP being
   loaded. It reveals complete sections and their inner content smoothly.
   ========================================================= */

.reveal,
.reveal-item {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.reveal.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item:nth-child(2) { transition-delay: .08s; }
.reveal-item:nth-child(3) { transition-delay: .16s; }
.reveal-item:nth-child(4) { transition-delay: .24s; }
.reveal-item:nth-child(5) { transition-delay: .32s; }
.reveal-item:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   SLOWER / MORE NOTICEABLE HOW-NEXO-WORKS TIMELINE
   ========================================================= */

.timeline-line #timelineProgress {
  transition: height .55s cubic-bezier(.22,1,.36,1);
}

.timeline article > span {
  transition:
    background .65s ease,
    border-color .65s ease,
    color .65s ease,
    box-shadow .65s ease,
    transform .65s cubic-bezier(.22,1,.36,1);
}

.timeline article.active > span {
  transform: scale(1.08);
}

.timeline article {
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   WORKSPACE CANVAS
   ========================================================= */

#writingCanvas {
  touch-action: none;
}
/* Better canvas readability in both themes. */
[data-theme="dark"] #writingCanvas {
  background: #fff;
}

[data-theme="light"] #writingCanvas {
  background: #fff;
}

/* =========================================================
   MOBILE MENU ICON
   ========================================================= */

.menu i {
  pointer-events: none;
}

@media (max-width: 760px) {
  .menu {
    display: grid !important;
  }
}

/* =========================================================
   V4 — ECOSYSTEM ICONS + DARK HIGHLIGHT
   ========================================================= */
.ecosystem-map {
  overflow: hidden;
  isolation: isolate;
}
.ecosystem-map::before,
.ecosystem-map::after { z-index: 0; }
.ecosystem-orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(113,168,255,.13);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.orbit-a { width: 78%; height: 73%; }
.orbit-b { width: 52%; height: 50%; border-color: rgba(113,168,255,.09); }
.ecosystem-core,
.eco-node { z-index: 2; }
.ecosystem-core i,
.eco-node i {
  display: block;
  line-height: 1;
}
.ecosystem-core i {
  font-size: 34px;
  margin-bottom: 8px;
}
.eco-node i {
  font-size: 22px;
  margin-bottom: 9px;
}
[data-theme="dark"] .ecosystem {
  background: #080a0d;
}
[data-theme="dark"] .ecosystem-map {
  background:
    radial-gradient(circle at 50% 50%, rgba(101,8,32,.20), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(45,77,140,.16), transparent 58%),
    #101318;
  border-color: rgba(113,168,255,.18);
  box-shadow: 0 25px 90px rgba(0,0,0,.28), inset 0 0 70px rgba(71,141,255,.035);
}
[data-theme="dark"] .eco-node {
  background: #650820 !important;
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
[data-theme="dark"] .eco-node:hover {
  transform: translateY(-5px) scale(1.035);
  border-color: rgba(113,168,255,.7) !important;
  box-shadow: 0 0 0 1px rgba(113,168,255,.12), 0 18px 45px rgba(101,8,32,.42), 0 0 35px rgba(71,141,255,.12);
}
[data-theme="dark"] .ecosystem-core {
  background: rgba(16,19,24,.96);
  box-shadow: 0 0 0 1px rgba(113,168,255,.08), 0 0 50px rgba(71,141,255,.18);
  animation: ecosystemPulse 3.2s ease-in-out infinite;
}
@keyframes ecosystemPulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(113,168,255,.08), 0 0 40px rgba(71,141,255,.12); }
  50% { box-shadow: 0 0 0 1px rgba(113,168,255,.2), 0 0 65px rgba(71,141,255,.25); }
}
[data-theme="light"] .ecosystem-map {
  background: radial-gradient(circle at 50% 50%, rgba(101,8,32,.08), transparent 48%), #fff;
}
[data-theme="light"] .ecosystem-core {
  background: #fff;
}
[data-theme="light"] .eco-node {
  background: #650820 !important;
  border-color: rgba(101,8,32,.22) !important;
}

/* V4 — workspace OCR should read the actual canvas, never a hard-coded "HI". */
.ocr-demo-text {
  color: var(--text);
  font: 600 15px 'DM Mono', monospace;
  white-space: pre-wrap;
}
.workspace-ocr-processing {
  color: var(--blue);
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .05em;
}

/* Give the live workspace a stronger dark-mode focus. */
[data-theme="dark"] .workspace-preview,
[data-theme="dark"] .workspace-page {
  background: #080a0d !important;
}
[data-theme="dark"] .preview-console,
[data-theme="dark"] .workspace-panel {
  border-color: rgba(113,168,255,.20) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
}
[data-theme="dark"] .pipeline {
  background: linear-gradient(90deg, rgba(101,8,32,.20), rgba(28,55,100,.16));
  border-color: rgba(113,168,255,.34);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .ecosystem-core { animation: none; }
}


/* V5 — ecosystem node contrast and OCR panel treatment */
[data-theme="dark"] .ecosystem .eco-node,
[data-theme="light"] .ecosystem .eco-node { color:#fff; }
[data-theme="dark"] .ecosystem .eco-node { background:var(--accent); border-color:rgba(255,255,255,.30); box-shadow:0 12px 30px rgba(0,0,0,.28); }
[data-theme="dark"] .ecosystem .eco-node i { color:#fff; text-shadow:0 0 14px rgba(113,168,255,.65); }
[data-theme="dark"] .ecosystem .eco-node strong { color:#fff; }
[data-theme="dark"] .ecosystem .eco-node small { color:rgba(255,255,255,.78); }
[data-theme="light"] .ecosystem .eco-node i { color:var(--accent); }

/* In light mode, make the OCR transcription card the burgundy focus panel. */
[data-theme="light"] .console-body > div:nth-child(2) .console-box {
  background:var(--accent);
  border-color:rgba(255,255,255,.30);
  color:#fff;
  box-shadow:0 16px 35px rgba(101,8,32,.16);
}
[data-theme="light"] .console-body > div:nth-child(2) .console-box .workspace-ocr-label,
[data-theme="light"] .console-body > div:nth-child(2) .console-box .ocr-demo-text,
[data-theme="light"] .console-body > div:nth-child(2) .console-box .workspace-ocr-status,
[data-theme="light"] .console-body > div:nth-child(2) .console-box .workspace-ocr-processing { color:#fff; }
[data-theme="light"] .console-body > div:nth-child(2) .console-box .workspace-cursor { color:#fff; }

/* OCR output should read as a real result, not as a fixed demo word. */
.ocr-demo-text { color:inherit; font-size:15px; font-style:normal; font-weight:700; letter-spacing:.02em; }
.workspace-ocr-processing { color:var(--muted); }

@media(max-width:760px){
  [data-theme="light"] .console-body > div:nth-child(2) .console-box { background:var(--accent); }
}


/* =========================================================
   V6 — FINAL ECOSYSTEM, TABLET WORKSPACE & SCROLL REVEAL
   ========================================================= */

/* Keep the ecosystem section completely independent from the generic card rules. */
.ecosystem-v6 {
  background: var(--bg) !important;
  isolation: isolate;
}
.ecosystem-v6 .section-heading h2,
.ecosystem-v6 .section-heading p,
.ecosystem-v6 .section-heading .kicker { position: relative; z-index: 3; }
.ecosystem-v6 .ecosystem-map {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #101318 !important;
  border: 1px solid rgba(113,168,255,.18) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
}
.ecosystem-v6 .ecosystem-map::before,
.ecosystem-v6 .ecosystem-map::after {
  z-index: 0 !important;
  pointer-events: none;
}
.ecosystem-v6 .ecosystem-orbit { z-index: 1; }
.ecosystem-v6 .ecosystem-core,
.ecosystem-v6 .eco-node { z-index: 4 !important; }
.ecosystem-v6 .ecosystem-core {
  background: #101318 !important;
  color: var(--blue) !important;
}
.ecosystem-v6 .ecosystem-core i { color: #71a8ff !important; }
.ecosystem-v6 .ecosystem-core strong { color: #71a8ff !important; }
.ecosystem-v6 .ecosystem-core small { color: #b9c3d2 !important; }
.ecosystem-v6 .eco-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  background: var(--accent) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.28);
}
.ecosystem-v6 .eco-node i,
.ecosystem-v6 .eco-node strong,
.ecosystem-v6 .eco-node small {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.ecosystem-v6 .eco-node i {
  font-size: 24px !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  text-shadow: 0 0 14px rgba(113,168,255,.65);
}
.ecosystem-v6 .eco-node strong {
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}
.ecosystem-v6 .eco-node small {
  font-size: 10px !important;
  margin-top: 7px !important;
  line-height: 1.3 !important;
}
.ecosystem-v6 .eco-node:hover {
  transform: translateY(-6px) scale(1.035);
  border-color: rgba(113,168,255,.72) !important;
  box-shadow: 0 0 0 1px rgba(113,168,255,.16), 0 18px 45px rgba(101,8,32,.45), 0 0 35px rgba(71,141,255,.16);
}
.ecosystem-v6 .ecosystem-core {
  box-shadow: 0 0 0 1px rgba(113,168,255,.10), 0 0 55px rgba(71,141,255,.22);
}

/* Light mode gets its own ecosystem palette — no inherited generic .icon rules. */
[data-theme="light"] .ecosystem-v6 {
  background: var(--bg) !important;
}
[data-theme="light"] .ecosystem-v6 .ecosystem-map {
  background: #fff !important;
  border-color: rgba(20,35,60,.14) !important;
  box-shadow: 0 24px 75px rgba(30,40,55,.10);
}
[data-theme="light"] .ecosystem-v6 .ecosystem-map::before,
[data-theme="light"] .ecosystem-v6 .ecosystem-map::after,
[data-theme="light"] .ecosystem-v6 .ecosystem-orbit {
  border-color: rgba(49,91,157,.13) !important;
}
[data-theme="light"] .ecosystem-v6 .eco-node {
  background: var(--accent) !important;
  border-color: rgba(101,8,32,.20) !important;
  box-shadow: 0 15px 35px rgba(101,8,32,.16);
}
[data-theme="light"] .ecosystem-v6 .eco-node i,
[data-theme="light"] .ecosystem-v6 .eco-node strong,
[data-theme="light"] .ecosystem-v6 .eco-node small {
  color: #fff !important;
  opacity: 1 !important;
}
[data-theme="light"] .ecosystem-v6 .eco-node i { text-shadow: 0 0 10px rgba(255,255,255,.30); }
[data-theme="light"] .ecosystem-v6 .ecosystem-core {
  background: #fff !important;
  color: #315b9d !important;
  border-color: #315b9d !important;
  box-shadow: 0 0 50px rgba(49,91,157,.14);
}
[data-theme="light"] .ecosystem-v6 .ecosystem-core i,
[data-theme="light"] .ecosystem-v6 .ecosystem-core strong { color: #315b9d !important; }
[data-theme="light"] .ecosystem-v6 .ecosystem-core small { color: #64635f !important; }

/* =========================================================
   V6 — VISIBLE, SEQUENTIAL SCROLL REVEAL
   ========================================================= */
.scroll-reveal {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cards-grid .scroll-reveal,
.mini-grid .scroll-reveal,
.intelligence-grid .scroll-reveal,
.timeline .scroll-reveal,
.ecosystem-map .scroll-reveal {
  transition-duration: .82s;
}
/* Stronger stagger for card groups: each card visibly follows the previous one. */
.cards-grid .scroll-reveal:nth-child(1), .mini-grid .scroll-reveal:nth-child(1), .intelligence-grid .scroll-reveal:nth-child(1) { --reveal-delay: 0ms; }
.cards-grid .scroll-reveal:nth-child(2), .mini-grid .scroll-reveal:nth-child(2), .intelligence-grid .scroll-reveal:nth-child(2) { --reveal-delay: 120ms; }
.cards-grid .scroll-reveal:nth-child(3), .mini-grid .scroll-reveal:nth-child(3), .intelligence-grid .scroll-reveal:nth-child(3) { --reveal-delay: 240ms; }
.cards-grid .scroll-reveal:nth-child(4), .mini-grid .scroll-reveal:nth-child(4), .intelligence-grid .scroll-reveal:nth-child(4) { --reveal-delay: 360ms; }
.cards-grid .scroll-reveal:nth-child(5), .mini-grid .scroll-reveal:nth-child(5), .intelligence-grid .scroll-reveal:nth-child(5) { --reveal-delay: 480ms; }
.cards-grid .scroll-reveal:nth-child(6), .mini-grid .scroll-reveal:nth-child(6), .intelligence-grid .scroll-reveal:nth-child(6) { --reveal-delay: 600ms; }
.cards-grid .scroll-reveal:nth-child(7), .mini-grid .scroll-reveal:nth-child(7), .intelligence-grid .scroll-reveal:nth-child(7) { --reveal-delay: 720ms; }
.cards-grid .scroll-reveal:nth-child(8), .mini-grid .scroll-reveal:nth-child(8), .intelligence-grid .scroll-reveal:nth-child(8) { --reveal-delay: 840ms; }
.cards-grid .scroll-reveal:nth-child(9), .mini-grid .scroll-reveal:nth-child(9), .intelligence-grid .scroll-reveal:nth-child(9) { --reveal-delay: 960ms; }

@media (max-width: 760px) {
  .ecosystem-v6 .ecosystem-map { height: 620px; }
  .ecosystem-v6 .eco-node { width: 128px; min-height: 104px; }

}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   V7 — CONNECTED ECOSYSTEM DATA FLOW
   ========================================================= */
.ecosystem-v6 .ecosystem-map { overflow:hidden; }
.ecosystem-v6 .ecosystem-connections {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  overflow:visible;
}
.ecosystem-v6 .eco-link {
  fill:none;
  stroke:rgba(101,8,33,.68);
  stroke-width:1.5;
  stroke-dasharray:7 9;
  filter:drop-shadow(0 0 4px rgba(113,168,255,.16));
  transition:stroke .4s ease, stroke-width .4s ease;
}
.ecosystem-v6 .eco-link-group { opacity:.95; }
.ecosystem-v6 .eco-particle {
  fill:#71a8ff;
  filter:drop-shadow(0 0 7px rgba(113,168,255,.95));
  opacity:0;
}
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle { opacity:1; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-link { animation:ecoLinkPulse 2.8s ease-in-out infinite; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle:nth-child(1) { animation:ecoParticlePulse 2.6s ease-in-out infinite; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle:nth-child(2) { animation:ecoParticlePulse 2.9s .35s ease-in-out infinite; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle:nth-child(3) { animation:ecoParticlePulse 2.7s .7s ease-in-out infinite; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle:nth-child(4) { animation:ecoParticlePulse 3s 1s ease-in-out infinite; }
.ecosystem-v6 .ecosystem-map.eco-flow-ready .eco-particle:nth-child(5) { animation:ecoParticlePulse 2.8s 1.35s ease-in-out infinite; }
@keyframes ecoLinkPulse { 0%,100%{opacity:.55;stroke-width:1.3} 50%{opacity:1;stroke-width:2} }
@keyframes ecoParticlePulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* =========================================================
   V7 — DO NOT LET SCROLL REVEAL OVERRIDE POSITIONING
   ========================================================= */
.ecosystem-v6 .eco-node,
.ecosystem-v6 .ecosystem-core { opacity:1 !important; }
.ecosystem-v6 .eco-node.scroll-reveal,
.ecosystem-v6 .ecosystem-core.scroll-reveal {
  opacity:1 !important;
  transform:none !important;
}
.ecosystem-v6 .node-1 { transform:translateX(-50%) !important; }
.ecosystem-v6 .node-2,
.ecosystem-v6 .node-3,
.ecosystem-v6 .node-4,
.ecosystem-v6 .node-5 { transform:none !important; }
.ecosystem-v6 .eco-node:hover { transform:translateY(-6px) scale(1.035) !important; }

@media(max-width:760px){
.ecosystem-v6 .ecosystem-map { height:560px; }
}

/* V7 — ecosystem positioning must retain the true center transform. */
.ecosystem-v6 .ecosystem-core,
.ecosystem-v6 .ecosystem-core.scroll-reveal,
.ecosystem-v6 .ecosystem-core.scroll-reveal.is-visible {
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
}
.ecosystem-v6 .eco-node,
.ecosystem-v6 .eco-node.scroll-reveal,
.ecosystem-v6 .eco-node.scroll-reveal.is-visible {
  opacity:1 !important;
}
.ecosystem-v6 .node-1,
.ecosystem-v6 .node-1.scroll-reveal,
.ecosystem-v6 .node-1.scroll-reveal.is-visible {
  transform:translateX(-50%) !important;
}
.ecosystem-v6 .eco-node:hover,
.ecosystem-v6 .node-1:hover { transform:translateY(-6px) scale(1.035) !important; }
.ecosystem-v6 .node-1:hover { transform:translateX(-50%) translateY(-6px) scale(1.035) !important; }

.ecosystem-v6 .eco-particle { display:block; }
.ecosystem-v6 .eco-particle-reverse { fill:#fff; }
.ecosystem-v6 .eco-link { stroke-dasharray:6 10; animation:ecoDashFlow 1.8s linear infinite; }
@keyframes ecoDashFlow { to { stroke-dashoffset:-32; } }

/* =========================================================
   NEXO PRODUCT VIDEOS
   ========================================================= */

.hardware-visual,
.notebook-visual {
    position: relative;
    width: 100%;
    max-width: 680px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-left: auto;
    border-radius: 18px;
}

.hardware-visual .product-video,
.notebook-visual .product-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.hardware .wrap.split {
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
    align-items: center;
    gap: clamp(32px, 5vw, 90px);
}

.hardware-visual {
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    overflow: hidden;
    border-radius: 18px;
}

.hardware-visual .product-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .hardware .wrap.split,
    .notebook .wrap.split {
        grid-template-columns: 1fr;
    }

    .hardware-visual,
    .notebook-visual {
        max-width: 100%;
        width: 100%;
    }
}

/* =========================================================
   HARDWARE FLIP — ONLY 3D FLIP
   Existing .info-card styling is preserved
   ========================================================= */

.hardware-flip-card {
  perspective: 1200px;
  padding: 0 !important;
}

.hardware-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;

  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.2, .7, .2, 1);
}

/* Both sides inherit the EXISTING card appearance */
.hardware-flip-front,
.hardware-flip-back {
  position: absolute;
  inset: 0;

  width: 100%;
  min-height: 280px;
  box-sizing: border-box;

  padding: 24px !important;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;
}


/* Front */
.hardware-flip-front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hardware-flip-front .flip-hint {
  margin-top: auto;
}


/* Back */
.hardware-flip-back {
  transform: rotateY(180deg);

  display: flex;
  flex-direction: column;
}

.hardware-flip-back p {
  color: var(--muted);
}


/* Benefits */
.hardware-flip-back ul {
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.hardware-flip-back li {
  position: relative;
  padding: 6px 0 6px 17px;
  font-size: 12px;
}

.hardware-flip-back li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Desktop */
@media (min-width: 761px) {

  .hardware-flip-card:hover .hardware-flip-inner {
    transform: rotateY(180deg);
  }

}


/* Mobile */
@media (max-width: 760px) {

  .hardware-flip-card.is-flipped .hardware-flip-inner {
    transform: rotateY(180deg);
  }

}


/* =========================================================
   FEATURE DETAILS POPUP
   Namespaced — does not modify existing card styles
   ========================================================= */

.feature-popup-card {
  cursor: pointer;
}

.feature-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.feature-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* Overlay */
.feature-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* Dialog */
.feature-popup-dialog {
  position: relative;
  z-index: 2;
  width: min(900px, 100%);
  max-height: min(800px, 90vh);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
  transform: translateY(25px) scale(.97);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1);
}

.feature-popup.is-open .feature-popup-dialog {
  transform: translateY(0) scale(1);
}


/* Content */

.feature-popup-content {
  padding: 55px;
}


/* Number */
.feature-popup-number {
  margin-bottom: 25px;
  color: var(--accent);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
}


/* Title */
.feature-popup-content h2 {
  margin: 0 0 20px;
  max-width: 750px;
  font-size: clamp(35px, 5vw, 65px);
  line-height: .95;
  letter-spacing: -.065em;
}


/* Main description */
.feature-popup-description {
  max-width: 700px;
  margin: 0 0 35px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}


/* Body */
.feature-popup-body {
  border-top: 1px solid var(--line);
  padding-top: 30px;
}

.feature-popup-body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}


/* Sub headings inside popup */
.feature-popup-body h4 {
  margin: 30px 0 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}


/* Lists */

.feature-popup-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.feature-popup-body li {
  position: relative;
  padding: 14px 16px 14px 35px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-size: 12px;
}

.feature-popup-body li::before {
  content: "→";
  position: absolute;
  left: 15px;
  color: var(--blue);
}


/* Close */
.feature-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.feature-popup-close:hover {
  background: var(--accent);
  color: #fff;
  transform: rotate(90deg);
}


/* Mobile */

@media (max-width: 760px) {

  .feature-popup {
    padding: 12px;
  }

  .feature-popup-dialog {
    max-height: 92vh;
    border-radius: 20px;
  }

  .feature-popup-content {
    padding: 45px 24px 30px;
  }

  .feature-popup-content h2 {
    font-size: 38px;
  }

  .feature-popup-description {
    font-size: 13px;
  }

  .feature-popup-body ul {
    grid-template-columns: 1fr;
  }

  .feature-popup-close {
    top: 14px;
    right: 14px;
  }

}


/* =========================================================
   NOTEBOOK — STICKY LEFT / SCROLLING RIGHT
   ========================================================= */

.notebook-sticky {
  position: relative;
}


/* Main two-column layout */

.notebook-sticky-inner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);

  gap: 80px;

  align-items: start;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.notebook-sticky-left {
  position: sticky;
  top: 120px;

  align-self: start;

  height: fit-content;

  padding-top: 30px;
}

.notebook-sticky-left h2 {
  margin: 0 0 24px;

  max-width: 520px;

  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.02;

  letter-spacing: -.055em;
}

.notebook-sticky-left p {
  max-width: 500px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.8;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.notebook-sticky-right {
  display: flex;
  flex-direction: column;

  gap: 24px;

  position: relative;
}


/* Individual cards */

.notebook-scroll-card {
  min-height: 480px;

  position: sticky;
  top: 120px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  box-sizing: border-box;

  transition:
    transform .35s ease,
    opacity .35s ease;
}

[data-theme="light"] .notebook-sticky-left p{
  color: rgba(255,255,255,.78) !important;
}

.notebook-card-list li{
  font-size: 12px;
  color: #6b4a53 !important;
}

[data-theme="light"] .notebook-card-list li{
  color: rgba(255,255,255,.78) !important;
}
/*
   Each card gets a slightly different sticky position.

   This creates the layered effect from your reference.
*/

.notebook-scroll-card:nth-child(1) {
  top: 120px;
}

.notebook-scroll-card:nth-child(2) {
  top: 145px;
}

.notebook-scroll-card:nth-child(3) {
  top: 170px;
}

.notebook-scroll-card:nth-child(4) {
  top: 195px;
}


/* Make the cards feel like a stack */

.notebook-scroll-card:nth-child(2) {
  z-index: 2;
}

.notebook-scroll-card:nth-child(3) {
  z-index: 3;
}

.notebook-scroll-card:nth-child(4) {
  z-index: 4;
}


/* Keep existing card content spacing */

.notebook-scroll-card .icon {
  margin-bottom: 28px;
}

.notebook-scroll-card h3 {
  margin-bottom: 12px;
}


/* =========================================================
   ECOSYSTEM — HIDE ON MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .ecosystem-v6 {
    display: none !important;
  }
  .timeline article:nth-child(odd) {
    text-align: left;
  }
}

/* =========================================================
   NOTEBOOK — MOBILE OVERLAPPING STICKY CARDS
   ========================================================= */

@media (max-width: 760px) {

    .notebook-sticky-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 45px !important;
        align-items: start !important;
    }

    /* Heading stays above the cards */
    .notebook-sticky-left {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        padding-top: 0 !important;
        margin: 0 !important;
    }

    .notebook-sticky-left h2 {
        font-size: 38px !important;
    }

    /* Cards remain in a vertical sticky stack */
    .notebook-sticky-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        position: relative !important;
    }

    .notebook-scroll-card {
        position: sticky !important;

        width: 100% !important;

        /* IMPORTANT:
           Don't make the cards unnecessarily tall */
        min-height: 480px !important;
        height: 480px !important;

        margin: 0 !important;

        transform: none !important;
    }

    /* Overlapping sticky positions */
    .notebook-scroll-card:nth-child(1) {
        top: 90px !important;
        z-index: 1 !important;
    }

    .notebook-scroll-card:nth-child(2) {
        top: 110px !important;
        z-index: 2 !important;
    }

    .notebook-scroll-card:nth-child(3) {
        top: 130px !important;
        z-index: 3 !important;
    }

    .notebook-scroll-card:nth-child(4) {
        top: 150px !important;
        z-index: 4 !important;
    }
}

/* =========================================================
   FOOTER SOCIAL LINKS
   ========================================================= */

.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-socials a {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--line);
  border-radius: 50%;

  color: var(--muted);
  text-decoration: none;

  font-size: 15px;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

.footer-socials a:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);

  transform: translateY(-2px);
}