/* Crystal v4 — complete two-theme treatment, preserving actual HTML components. */
.crystal-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:43px;height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.94);border-radius:100px;background:rgba(255,255,255,.66);color:#3765bd;box-shadow:0 6px 18px #80a0dd29;font:800 12px 'Manrope',system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:transform .2s,background .2s,border .2s,color .2s}
.crystal-theme-toggle:hover{transform:translateY(-2px);background:#fff}.crystal-theme-toggle:focus-visible{outline:3px solid #7e9eff;outline-offset:3px}.theme-symbol{font-size:20px;line-height:1}
.crystal-theme-toggle--floating{position:fixed;z-index:999;right:22px;bottom:22px;box-shadow:0 8px 28px #83a1df45}
.portal-section{margin-top:-28px;margin-bottom:60px}.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.portal-card{display:flex;align-items:center;gap:15px;min-width:0;border-radius:23px;border:1.5px solid #fff;padding:19px 22px;background:linear-gradient(130deg,#fafdffed,#e8f1ffde);box-shadow:0 16px 34px #849fce3b;transition:transform .25s,box-shadow .25s}
.portal-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px #849fce56}.portal-icon{display:grid;place-items:center;flex:none;width:53px;height:53px;border-radius:17px;background:linear-gradient(135deg,#3bc6ff,#816aff);color:#fff;box-shadow:0 9px 22px #8b96ed68}.portal-icon .icon{width:28px;height:28px}.portal-card>span:nth-child(2){display:grid;gap:4px;min-width:0}.portal-card strong{font-size:19px;letter-spacing:-.5px}.portal-card small{font-size:11px;line-height:1.5;color:#6679a0;font-weight:700}.portal-arrow{margin-left:auto;font-size:24px;color:#537bdd}
@media(max-width:1280px){.desktop-nav{display:none}.menu-button{display:flex}.header-cta{margin-left:auto}}
@media(max-width:840px){.portal-grid{grid-template-columns:1fr;gap:12px}.portal-section{margin-top:-20px}.portal-card{padding:15px 18px}.theme-text{display:none}.crystal-theme-toggle--header{padding:0;width:42px;min-width:42px}}
@media(max-width:620px){.header-inner{gap:7px}.header-cta{display:none}.crystal-theme-toggle--header{margin-left:auto}.portal-section{margin-top:0;margin-bottom:30px}}

html[data-theme="dark"]{color-scheme:dark;--ink:#edf5ff;--muted:#acbee6;--line:rgba(96,166,255,.50);--glass:rgba(17,31,77,.75);--shadow:0 20px 55px rgba(1,7,31,.44);background:#07122d}
html[data-theme="dark"] body{color:#edf5ff;background:#08132f}
html[data-theme="dark"] .page{background:radial-gradient(ellipse at 80% 6%,rgba(37,92,175,.23),transparent 31%),radial-gradient(ellipse at 4% 12%,rgba(56,29,124,.30),transparent 38%),linear-gradient(180deg,#07112e 0%,#09163a 42%,#0c1941 78%,#08132e 100%)}
html[data-theme="dark"] .winter-background{height:1500px;background:radial-gradient(ellipse at 88% 9%,#084e94b5,transparent 34%),radial-gradient(ellipse at 23% 0%,#2112588c,transparent 47%),linear-gradient(180deg,#07142e 0%,#10224e 39%,#0b1539 70%,#081535 100%)}
html[data-theme="dark"] .winter-background:before{top:155px;height:620px;background:radial-gradient(ellipse at 78% 20%,rgba(18,96,181,.4),transparent 42%),radial-gradient(ellipse at 8% 68%,rgba(20,37,108,.8),transparent 55%);filter:blur(28px)}
html[data-theme="dark"] .winter-background:after{top:435px;height:345px;background:linear-gradient(165deg,rgba(25,71,133,.1),rgba(58,89,169,.23) 35%,rgba(13,26,69,.15) 85%,transparent);filter:blur(18px)}
html[data-theme="dark"] .aurora-one{background:#03bfff;opacity:.32;filter:blur(80px);top:-120px;right:2%}
html[data-theme="dark"] .aurora-two{background:#7541ff;opacity:.27;top:-75px;left:27%}
html[data-theme="dark"] .snowflake{opacity:.68;text-shadow:0 0 8px #b0edff,0 0 13px #0e61ff}
html[data-theme="dark"] .header-inner{background:rgba(13,27,67,.85);border:1px solid rgba(114,151,247,.58);box-shadow:0 11px 28px #050f35cc,inset 0 1px #9bb9f84d}
html[data-theme="dark"] .brand-words{color:#edf4ff}
html[data-theme="dark"] .nav-link{color:#eaf4ff}html[data-theme="dark"] .nav-link.active,html[data-theme="dark"] .nav-link:hover{color:#fff;background:linear-gradient(130deg,#2557bc,#7344e8);box-shadow:0 0 18px #6669fb7d}
html[data-theme="dark"] .menu-button{background:#182d63;border:1px solid #4767bd;color:#d7e6ff}
html[data-theme="dark"] .mobile-nav{background:#102456f5;border:1px solid #5576cd;box-shadow:0 18px 40px #030926b3}
html[data-theme="dark"] .mobile-nav>a:not(.button){color:#e8f4ff}html[data-theme="dark"] .mobile-nav>a:hover{background:#193c86}
html[data-theme="dark"] .crystal-theme-toggle{background:rgba(16,35,82,.92);color:#e5f4ff;border-color:#6686d8;box-shadow:0 0 16px #536de66b}
html[data-theme="dark"] .crystal-theme-toggle:hover{background:#23418a}
html[data-theme="dark"] .hero{min-height:470px}
html[data-theme="dark"] .hero-art{background-image:url('/site/assets/hero-dark.webp');width:min(76vw,1030px);height:385px;top:15px;right:-74px;background-position:center top;background-size:contain;animation:hover 8s ease-in-out infinite;filter:drop-shadow(0 20px 25px #05091b48)}
html[data-theme="dark"] .hero-content{max-width:600px}html[data-theme="dark"] .hero h1{color:#f2f6ff;font-size:clamp(44px,4.8vw,72px);text-shadow:0 2px 14px #10153c55}
html[data-theme="dark"] .hero-description{color:#c2d1f4;text-shadow:0 1px 12px #070e24}
html[data-theme="dark"] .gradient-text{background:linear-gradient(90deg,#27c8ff,#5c8fff 38%,#b375ff 85%,#eb90ed);color:transparent;-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .hero-eyebrow,html[data-theme="dark"] .section-kicker{background:linear-gradient(125deg,#132c67d9,#1c225bd9);color:#dfedff;border-color:#4475c0;box-shadow:0 6px 25px #3577f044}
html[data-theme="dark"] .hero-bullets{color:#e3ecff}html[data-theme="dark"] .hero-bullets .icon{background:linear-gradient(130deg,#00ccff,#2677ff)}
html[data-theme="dark"] .button-glass{background:#152858c9;color:#edf4ff;border-color:#5478c8;box-shadow:0 6px 27px #143c8f63}
html[data-theme="dark"] .button-glass:hover{background:#203972}
html[data-theme="dark"] .feature-card{border:1.5px solid #4685e4;box-shadow:0 6px 25px #0309218c,inset 0 1px #93bafe35}
html[data-theme="dark"] .feature-card:hover{border-color:#65d6ff;box-shadow:0 10px 42px #2871e674,inset 0 1px #93bafe53}
html[data-theme="dark"] .feature-card--blue{background:linear-gradient(125deg,#102857 0%,#122756 68%,#152c70)}
html[data-theme="dark"] .feature-card--lilac{background:linear-gradient(125deg,#231945,#30216c 70%,#352380);border-color:#9163ff}
html[data-theme="dark"] .feature-card--aqua{background:linear-gradient(125deg,#102d59,#123a74 70%,#11346c)}
html[data-theme="dark"] .feature-card:before{background:radial-gradient(circle at 68% 0%,#235cb644,transparent 44%),linear-gradient(0deg,#040d2329,transparent)}
html[data-theme="dark"] .feature-card h2{color:#f9fbff}html[data-theme="dark"] .feature-card p{color:#cbdaf4}
html[data-theme="dark"] .feature-card .card-arrow{background:linear-gradient(130deg,#172d68,#3b2991);border:1px solid #598ee6;color:#eaf6ff}
html[data-theme="dark"] .feature-card:nth-child(1) .feature-mascot{object-fit:contain;width:48%;max-height:94%;bottom:0;right:0;filter:drop-shadow(0 8px 13px #0617334d)}
html[data-theme="dark"] .feature-card:nth-child(2) .feature-mascot{object-fit:contain;width:47%;max-height:94%;bottom:0;right:0;filter:drop-shadow(0 8px 13px #0617334d)}
html[data-theme="dark"] .feature-card:nth-child(3) .feature-mascot{object-fit:contain;width:49%;max-height:94%;bottom:0;right:0;filter:drop-shadow(0 8px 13px #0617334d)}
html[data-theme="dark"] .capabilities-bar{background:linear-gradient(135deg,#14285ee0,#1c2563e0);border:1px solid #5386dc;box-shadow:0 10px 27px #03091fbb,inset 0 1px #72d8ff50}
html[data-theme="dark"] .capability+.capability{border-color:#415a99}
html[data-theme="dark"] .capability-icon{background:#1a3473;box-shadow:0 4px 15px #0520578a}
html[data-theme="dark"] .capability strong{color:#edf5ff}html[data-theme="dark"] .capability small{color:#adc4ef}
html[data-theme="dark"] .section-heading h2,html[data-theme="dark"] .demo-text h2,html[data-theme="dark"] .faq-intro h2{color:#f0f5ff}
html[data-theme="dark"] .section-heading>p,html[data-theme="dark"] .demo-text>p,html[data-theme="dark"] .faq-intro>p{color:#a7badf}
html[data-theme="dark"] .stats-dashboard{background:linear-gradient(140deg,#101d48ee,#111d4deb);border-color:#548cea;box-shadow:0 20px 62px #010922ae,inset 0 1px #92bafc50}
html[data-theme="dark"] .stats-dashboard:before{background:radial-gradient(ellipse at 5% 10%,#1551b65c,transparent 35%),radial-gradient(ellipse at 94% 79%,#7432c83a,transparent 38%)}
html[data-theme="dark"] .stats-label{color:#bfd2f2}html[data-theme="dark"] .stats-refresh{background:#183472;color:#ddebff;border-color:#5e83cb;box-shadow:0 5px 14px #071b4e}
html[data-theme="dark"] .stats-refresh:hover:not(:disabled){background:#2152a6;box-shadow:0 8px 18px #1e4eb08a}
html[data-theme="dark"] .live-stat-card,html[data-theme="dark"] .live-stat-card:nth-child(3n),html[data-theme="dark"] .live-stat-card:nth-child(3n+1):not(.live-stat-card--featured){background:linear-gradient(130deg,#122a64,#192b67);border-color:#347bce;box-shadow:0 10px 32px #040b28ab,inset 0 1px #62a5fa3e}
html[data-theme="dark"] .live-stat-card:nth-child(3n){background:linear-gradient(130deg,#211e5c,#25266c);border-color:#7d63d5}
html[data-theme="dark"] .live-stat-card--featured{background:linear-gradient(120deg,#173b79,#1f285f 78%);border-color:#4c9cff}
html[data-theme="dark"] .live-stat-card:before{background:radial-gradient(circle,#2767ca55,transparent 70%)}
html[data-theme="dark"] .live-stat-card strong{color:#f5fbff}html[data-theme="dark"] .live-stat-card--featured strong{color:transparent;background:linear-gradient(100deg,#66e1ff,#8e91ff);background-clip:text;-webkit-background-clip:text}
html[data-theme="dark"] .live-stat-card small{color:#c4d9ff}html[data-theme="dark"] .live-stat-card p{color:#abc2eb}html[data-theme="dark"] .stat-overline{color:#9fbeff}
html[data-theme="dark"] .stats-footnote{color:#9db1dd}html[data-theme="dark"] .stats-footnote code{color:#b8ddff;background:#172d5b}
html[data-theme="dark"] .bento-card{background:linear-gradient(130deg,#132352,#1a285e);border-color:#496eb4;box-shadow:0 14px 38px #030a28b3,inset 0 1px #78a3fa2d}
html[data-theme="dark"] .bento-card--big{background:linear-gradient(110deg,#172f68,#182657 73%,#31286e)}
html[data-theme="dark"] .bento-card--lavender{background:linear-gradient(115deg,#281b5b,#32246b)}
html[data-theme="dark"] .bento-card--mint{background:linear-gradient(115deg,#112f62,#133770)}
html[data-theme="dark"] .bento-card--wide{background:linear-gradient(110deg,#182558,#1b285f)}
html[data-theme="dark"] .bento-card h3{color:#f4f8ff}html[data-theme="dark"] .bento-card p,html[data-theme="dark"] .bento-list li{color:#b8ccef}
html[data-theme="dark"] .mini-tag{color:#a8dfff;background:#1c417e}html[data-theme="dark"] .text-link{color:#8ed8ff}
html[data-theme="dark"] .mini-chat{background:#192d66;border-color:#4d75c9;color:#e9f3ff}html[data-theme="dark"] .mini-message{background:#263f85;color:#dfeeff}html[data-theme="dark"] .mini-chat-top{color:#bdd8ff;border-color:#3b5a9f}
html[data-theme="dark"] .bento-guard{filter:drop-shadow(0 14px 18px #020c2bd9)}
html[data-theme="dark"] .portal-card{background:linear-gradient(135deg,#17285e,#1b2258 74%,#2c1f61);border-color:#5b83d3;box-shadow:0 10px 26px #030a29af,inset 0 1px #67d6ff3e}
html[data-theme="dark"] .portal-card:hover{border-color:#39d4ff;box-shadow:0 14px 38px #376dd877}html[data-theme="dark"] .portal-card strong{color:#f8fbff}html[data-theme="dark"] .portal-card small{color:#b9c9ee}html[data-theme="dark"] .portal-arrow{color:#aecfff}
html[data-theme="dark"] .demo-window{background:#132451;border-color:#5777c6;box-shadow:0 20px 48px #020721b8}
html[data-theme="dark"] .demo-window-header{background:#152c61;color:#c4d7fc;border-bottom-color:#4164a9}
html[data-theme="dark"] .demo-window .demo-panel{color:#e9f4ff}
html[data-theme="dark"] .chat-bubble--user{background:#1a3b76;color:#deecff}html[data-theme="dark"] .chat-bubble--bot{background:#26346e;color:#e6f2ff;border-color:#506db5}
html[data-theme="dark"] .chat-bubble--bot small{color:#b9c9eb}html[data-theme="dark"] .demo-input{background:#142654;color:#95aaca}
html[data-theme="dark"] .demo-tab{color:#b7c9ec;background:#182c61;border-color:#3d5d9f}html[data-theme="dark"] .demo-tab.active{background:linear-gradient(125deg,#2562b1,#6b40ba);color:#fff;border-color:#6ca9ff}
html[data-theme="dark"] .step-card{background:linear-gradient(135deg,#14295b,#1b275e);border-color:#4d75c1;box-shadow:0 12px 30px #03102f88}
html[data-theme="dark"] .step-card h3{color:#f4f7ff}html[data-theme="dark"] .step-card p{color:#b0c1e4}
html[data-theme="dark"] .faq-items details{background:#142456;border-color:#4263a4;box-shadow:0 9px 23px #040a27}
html[data-theme="dark"] .faq-items details[open]{background:#182e68}html[data-theme="dark"] .faq-items summary{color:#e6f0ff}html[data-theme="dark"] .faq-items details p{color:#bbcbee}
html[data-theme="dark"] .final-section{background:linear-gradient(115deg,#162f65,#2c286d 60%,#183e77);border-color:#567dd1;box-shadow:0 24px 55px #04102eb0}
html[data-theme="dark"] .final-content h2{color:#eef5ff}html[data-theme="dark"] .final-content h2 span{color:#c5a2ff}html[data-theme="dark"] .final-content p{color:#bccdec}
html[data-theme="dark"] .footer-main,html[data-theme="dark"] .footer-bottom{border-color:#2a457f}html[data-theme="dark"] .footer-about p,html[data-theme="dark"] .footer-column a,html[data-theme="dark"] .footer-bottom{color:#9fb1d8}html[data-theme="dark"] .footer-column h3{color:#e9f4ff}
html[data-theme="dark"] .scroll-cue{color:#a6b6de}
@media(max-width:760px){html[data-theme="dark"] .hero{min-height:750px}html[data-theme="dark"] .hero-scenery{height:385px}html[data-theme="dark"] .hero-art{width:750px;height:370px;top:0;right:50%;background-size:contain;background-position:center top;transform:translateX(50%);animation:none}html[data-theme="dark"] .hero-content{max-width:100%}html[data-theme="dark"] .hero h1{font-size:clamp(35px,8.4vw,55px)}html[data-theme="dark"] .feature-card:nth-child(n) .feature-mascot{width:42%}html[data-theme="dark"] .feature-card{min-height:211px}}
@media(max-width:480px){html[data-theme="dark"] .hero{min-height:682px}html[data-theme="dark"] .hero-scenery{height:310px}html[data-theme="dark"] .hero-art{width:620px;height:305px;top:8px}html[data-theme="dark"] .feature-card:nth-child(n) .feature-mascot{width:47%}}
@media(prefers-reduced-motion:reduce){.portal-card,.crystal-theme-toggle{transition:none}html[data-theme="dark"] .hero-art{animation:none}}
/* Compact feature reasons and real links, matching the approved mockup. */
.quick-reasons{margin-top:30px;margin-bottom:22px}.quick-reasons h2{text-align:center;font-size:clamp(22px,2.5vw,32px);font-weight:800;letter-spacing:-1px;margin:0 0 23px}
.quick-reasons-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.quick-reason{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid #fff;border-radius:20px;background:#ffffffb8;box-shadow:0 12px 24px #88a1cf2d;transition:transform .2s,border .2s}
.quick-reason:hover{transform:translateY(-4px);border-color:#84afff}.quick-reason>span{font-size:27px;filter:drop-shadow(0 3px 5px #7b8aca62);flex:none}
.quick-reason div{display:grid;gap:4px}.quick-reason strong{font-size:13px;line-height:1.3}.quick-reason small{font-size:10px;color:#6679a0;font-weight:650;line-height:1.3}
.portal-section{margin-top:6px;margin-bottom:26px}
html[data-theme="dark"] .quick-reasons h2{color:#e9f5ff;text-shadow:0 0 16px #6690fb4f}
html[data-theme="dark"] .quick-reason{border-color:#5479c5;background:linear-gradient(125deg,#172753,#202d68);box-shadow:0 9px 26px #040a27}
html[data-theme="dark"] .quick-reason:hover{border-color:#83d7ff;box-shadow:0 12px 35px #1852b559}
html[data-theme="dark"] .quick-reason strong{color:#eff8ff}html[data-theme="dark"] .quick-reason small{color:#a7bde6}
/* Dark: summary KPI dashboard condenses to the horizontal screenshot bar, still uses actual database values. */
@media(min-width:1160px){html[data-theme="dark"] .live-stats-section{padding:25px 0 16px}html[data-theme="dark"] .live-stats-section .section-heading{display:none}html[data-theme="dark"] .stats-dashboard{border-radius:28px;padding:13px 14px 9px}html[data-theme="dark"] .stats-toolbar{padding:2px 8px 10px}html[data-theme="dark"] .live-stats-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}html[data-theme="dark"] .live-stat-card,html[data-theme="dark"] .live-stat-card--featured{grid-column:span 1;min-height:110px;padding:12px;border-radius:16px}html[data-theme="dark"] .live-stat-icon{width:28px;height:28px;border-radius:10px;margin-bottom:8px}html[data-theme="dark"] .live-stat-icon .icon{width:17px;height:17px}html[data-theme="dark"] .live-stat-card strong,html[data-theme="dark"] .live-stat-card--featured strong{font-size:clamp(17px,1.7vw,26px);max-width:100%;letter-spacing:-.9px;margin-bottom:3px}html[data-theme="dark"] .live-stat-card small{font-size:10px;line-height:1.35}html[data-theme="dark"] .live-stat-card .stat-overline,html[data-theme="dark"] .live-stat-card p,html[data-theme="dark"] .live-stat-card .stats-mascot{display:none}html[data-theme="dark"] .stats-footnote{font-size:9px;margin:8px 5px 0}html[data-theme="dark"] .quick-reasons{margin-top:8px}}
@media(max-width:1100px){.quick-reasons-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){.quick-reasons-grid{grid-template-columns:1fr 1fr;gap:9px}.quick-reason{padding:11px;border-radius:15px;gap:7px}.quick-reason>span{font-size:20px}.quick-reason strong{font-size:11px}.quick-reason small{font-size:9px}.quick-reasons h2{font-size:20px}}
/* Desktop dark composition is intentionally close to the approved 1672×941 concept image. */
@media(min-width:1160px){
  html[data-theme="dark"] .hero{min-height:326px;padding-top:7px;padding-bottom:10px}
  html[data-theme="dark"] .hero h1{font-size:clamp(49px,4.45vw,64px);margin:13px 0 8px}
  html[data-theme="dark"] .hero-description{font-size:14px;line-height:1.45;max-width:510px}
  html[data-theme="dark"] .hero-actions{margin-top:15px;gap:12px}
  html[data-theme="dark"] .hero-actions .button{min-height:46px;padding:10px 21px;font-size:13px}
  html[data-theme="dark"] .hero-bullets{margin-top:15px;gap:16px;font-size:10px}
  html[data-theme="dark"] .hero-art{height:348px;top:-8px;right:-38px;width:min(75vw,1020px)}
  html[data-theme="dark"] .features{margin-top:0}
  html[data-theme="dark"] .feature-card{min-height:175px;border-radius:22px}
  html[data-theme="dark"] .feature-copy{padding:15px 20px 14px}
  html[data-theme="dark"] .feature-card h2{font-size:18px;margin-top:6px}
  html[data-theme="dark"] .feature-card p{font-size:11.5px;line-height:1.55}
  html[data-theme="dark"] .feature-card .feature-icon{width:32px;height:32px;border-radius:11px}
  html[data-theme="dark"] .feature-card .feature-icon .icon{width:19px;height:19px}
  html[data-theme="dark"] .capabilities-bar{display:none}
}