:root{--bg:#05060a;--panel:#0d1019;--panel2:#111522;--line:rgba(255,255,255,.09);--muted:#8e96ab;--text:#f5f7fb;--violet:#7c5cff;--cyan:#00d9ff;--green:#27e7a4;--yellow:#f1cf70;--red:#ff5d79}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;position:relative;background:var(--bg);color:var(--text);font:14px Inter,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>')}
.bgGlow{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:1500px;max-width:170vw;height:480px;background:radial-gradient(ellipse 50% 50% at 50% 100%,#ecb0ff 0%,#b17ef2 12%,#7c5cff 26%,#4a2f9e 42%,#1c1140 62%,transparent 82%);filter:blur(6px);opacity:.72;pointer-events:none;z-index:0}
a{color:inherit;text-decoration:none}button{font:inherit}.wrap{max-width:1180px;margin:auto;padding:0 24px}.mono{font-family:ui-monospace,monospace}.grad{background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;color:transparent}
header{position:sticky;top:0;z-index:20;background:#05060ad9;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}nav{height:70px;display:flex;align-items:center;justify-content:space-between}.logo{font-size:21px;font-weight:800}.navlinks{display:flex;gap:24px;color:#aeb4c5;font-size:13px}.navlinks a:hover{color:#fff}.btn{border:1px solid var(--line);border-radius:11px;padding:11px 17px;background:#10131d;color:#fff;cursor:pointer;font-weight:650}.primary{border:0;background:linear-gradient(120deg,var(--violet),var(--cyan));color:#06070b}
.hero{padding:85px 0 75px;position:relative;overflow:visible}.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;position:relative;z-index:1}.eyebrow{font:15px ui-monospace;font-weight:700;letter-spacing:.08em;color:#58e9ff}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:8px}h1{font-size:60px;line-height:1.02;letter-spacing:-.045em;margin:18px 0}.lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:610px}.actions{display:flex;gap:12px;margin-top:28px}.stats{display:flex;gap:34px;margin-top:38px}.stats b{font-size:21px}.stats span{display:block;color:#697187;font-size:11px;margin-top:4px}
section{padding:80px 0}.head{max-width:730px;margin-bottom:36px}.kicker{font:16px ui-monospace;font-weight:700;letter-spacing:.06em;color:#62eaff}.head h2{font-size:38px;letter-spacing:-.03em;margin:9px 0}.head p{color:var(--muted);line-height:1.65;margin:0}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}.card{grid-column:span 4;background:#0d1019cc;border:1px solid var(--line);border-radius:18px;padding:21px}.wide{grid-column:span 8}.half{grid-column:span 6}.full{grid-column:span 12}.card h3{margin:0 0 7px;font-size:16px}.muted{color:var(--muted);line-height:1.55;font-size:13px}.big{font-size:32px;font-weight:800;margin:7px 0}.pill{display:inline-block;padding:5px 8px;border-radius:999px;background:#ffffff0a;color:#cbd0dc;font-size:11px}.row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0}.line{height:7px;border-radius:8px;background:#282c38;overflow:hidden}.line i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--violet),var(--cyan))}.item{padding:13px;border:1px solid var(--line);border-radius:13px;background:#ffffff05;margin-top:9px}.alertHigh{border-color:#ff5d7938;background:#ff5d7908}.alertMed{border-color:#f1cf7038;background:#f1cf7008}.alertGood{border-color:#27e7a438;background:#27e7a408}
.timeline{border-left:1px solid #ffffff18;margin:12px 0 0 8px;padding-left:22px}.event{position:relative;margin:0 0 18px}.event:before{content:"";position:absolute;left:-28px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px #7c5cff88}.event small{color:#687188}.event p{margin:5px 0;color:#cbd0dc}
.disclaimer{padding:18px;border-radius:15px;border:1px solid #27e7a422;background:#27e7a407;color:#c9f5e8;line-height:1.6;margin-top:25px}.cta{padding:70px 0}.ctaBox{text-align:center;padding:50px 25px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(450px 170px at 50% 0%,#7c5cff2d,transparent 70%),#0d1019}.ctaBox h2{font-size:38px;margin:0 0 10px}.ctaBox p{color:var(--muted);max-width:650px;margin:0 auto 22px;line-height:1.6}
.modal{display:none;position:fixed;inset:0;z-index:50;background:#000b;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modalBox{width:min(500px,100%);background:#10131d;border:1px solid var(--line);border-radius:20px;padding:25px}.modalBox h3{font-size:23px;margin:0 0 8px}.modalBox p{color:var(--muted);line-height:1.6}.input{width:100%;padding:13px;border-radius:10px;border:1px solid var(--line);background:#080b12;color:#fff;box-sizing:border-box;margin-top:8px}.modalActions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.result{display:none;margin-top:15px;padding:15px;border-radius:13px;background:#27e7a40a;border:1px solid #27e7a433}.result.show{display:block}
.liveHero{padding:76px 0;background:linear-gradient(180deg,#080a12 0%,#05060a 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.liveGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}.liveTicker{display:flex;gap:8px;overflow:hidden;margin-bottom:18px}.tickerItem{white-space:nowrap;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#ffffff05;font-size:11px;color:#cbd0dc}.tickerItem b{color:#fff}.newsFeed{max-height:440px;overflow:auto;padding-right:3px}.newsItem{padding:16px;border:1px solid var(--line);border-radius:15px;background:#ffffff04;margin-top:10px}.newsTop{display:flex;justify-content:space-between;gap:10px;align-items:center}.newsSource{font-size:10px;color:#697187}.impact{font-size:11px;padding:5px 8px;border-radius:999px}.impact.high{background:#ff5d7914;color:#ff9aab;border:1px solid #ff5d7938}.impact.med{background:#f1cf7014;color:#f5df99;border:1px solid #f1cf7038}.impact.low{background:#27e7a414;color:#7ff0c6;border:1px solid #27e7a438}.newsItem h3{margin:8px 0 5px;font-size:15px}.newsMeta{display:flex;gap:14px;flex-wrap:wrap;color:#8e96ab;font-size:11px}.shock{background:radial-gradient(350px 180px at 50% 0%,#ff5d7918,transparent 70%),#0d1019}.shockScore{font-size:52px;font-weight:850;letter-spacing:-.05em}.scenario{padding:13px;border:1px solid var(--line);border-radius:12px;background:#ffffff04;margin-top:9px}.scenario .row{margin:0}.agentList{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.agent{padding:12px;border:1px solid var(--line);border-radius:12px;background:#ffffff04}.agent b{display:block;font-size:12px}.agent span{font-size:10px;color:#697187}.liveBtn{margin-top:14px;width:100%}.newsDisclaimer{margin-top:18px;color:#7e879b;font-size:11px;line-height:1.55}
@media(max-width:850px){.liveGrid{grid-template-columns:1fr}.agentList{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.agentList{grid-template-columns:1fr}.liveHero{padding:55px 0}}
footer{border-top:1px solid var(--line);padding:26px 0;color:#687188;font-size:11px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* --- interactive additions --- */
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* --- overview strip --- */
.overview{padding:0 0 76px}
.ovGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ovCard{display:block;padding:22px 20px;border:1px solid var(--line);border-radius:18px;background:#0d1019cc;transition:border-color .15s,transform .15s,background .15s}
.ovCard:hover{border-color:#ffffff30;background:#11151fcc;transform:translateY(-2px)}
.ovIcon{font-size:22px;display:block;margin-bottom:10px}
.ovCard h3{margin:0 0 6px;font-size:15px}
.ovCard p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
@media(max-width:850px){.ovGrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ovGrid{grid-template-columns:1fr}.overview{padding-bottom:55px}}
/* --- nav dropdowns --- */
.navlinks{position:relative}
.navDrop{position:relative}
.navDrop>.navDropBtn{display:flex;align-items:center;gap:5px;background:none;border:0;color:#aeb4c5;font-size:13px;cursor:pointer;padding:0;font-weight:400}
.navDrop>.navDropBtn:hover{color:#fff}
.navDrop>.navDropBtn:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s}
.navDrop.open>.navDropBtn:after{transform:rotate(-135deg);margin-top:3px}
.navMenu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(4px);min-width:230px;background:#0d1019f2;backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 45px -12px #000a;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:30}
.navDrop.open>.navMenu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.navMenu a{display:block;padding:9px 12px;border-radius:9px;font-size:13px;color:#cbd0dc}
.navMenu a:hover{background:#ffffff0c;color:#fff}
.navMenu .navMenuLabel{padding:8px 12px 4px;font:10px ui-monospace;letter-spacing:.1em;color:#5c6479}
.navMenu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
@media(max-width:850px){.navMenu{position:static;transform:none;opacity:1;pointer-events:auto;display:none;min-width:0;box-shadow:none;background:transparent;backdrop-filter:none;border:0;padding:2px 0 2px 10px}.navDrop.open>.navMenu{display:block}.navDrop>.navDropBtn{width:100%;justify-content:space-between;padding:6px 0}}
.chartArea{position:relative}
.tooltip{position:absolute;pointer-events:none;background:#10131dee;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:11px;color:#fff;transform:translate(-50%,-115%);white-space:nowrap;opacity:0;transition:opacity .12s;z-index:5}
.tooltip.show{opacity:1}
.tooltip b{display:block;font-size:12px;color:var(--cyan)}
.bar{cursor:pointer;transition:filter .12s}
.bar:hover,.bar.active{filter:brightness(1.35)}
.allocRow{display:flex;align-items:center;gap:16px;margin-top:14px}
.donut{flex:0 0 auto}
.donut circle{transition:stroke-width .12s,opacity .12s}
.legend{list-style:none;margin:0;padding:0;font-size:12px;flex:1}
.legend li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;cursor:pointer;border-radius:6px}
.legend li:hover,.legend li.active{background:#ffffff08}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px}
.legend .lname{display:flex;align-items:center;color:#cbd0dc}
.legend .lval{color:#8e96ab}
.filterBar{display:flex;gap:8px;margin:-8px 0 22px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#0d1019;color:#aeb4c5;border-radius:999px;padding:7px 13px;font-size:12px;cursor:pointer;font-weight:600}
.chip.active{background:#ffffff10;color:#fff;border-color:#ffffff30}
.card[hidden]{display:none}
.sliders{margin-top:14px}
.sliderRow{margin:13px 0}
.sliderRow .lbl{display:flex;justify-content:space-between;font-size:12px;color:#aeb4c5;margin-bottom:6px}
.sliderRow input[type=range]{width:100%;accent-color:var(--violet);background:transparent}
.stressTotal{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.feedBtn{margin-top:14px;width:100%}
.item.new{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.item.new{animation:none}*{scroll-behavior:auto!important}}
@media(max-width:520px){.allocRow{flex-direction:column;align-items:flex-start}}
/* --- showcase / device mockups --- */
.showcase{overflow:hidden;position:relative;background:linear-gradient(180deg,transparent 0%,var(--bg) 140px)}
.deviceGrid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;margin-top:10px}
.deviceGrid.rev{grid-template-columns:1fr 1.05fr}
.deviceGrid .copy h3{font-size:26px;margin:0 0 10px}
.deviceGrid .copy p{color:var(--muted);font-size:15px;line-height:1.65;max-width:420px}
.deviceStage{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px}
.deviceStage:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:640px;max-width:135%;height:560px;background:radial-gradient(ellipse 50% 50% at 50% 55%,#ecb0ff 0%,#b17ef2 14%,#7c5cff 30%,#4a2f9e 48%,#1c1140 66%,transparent 82%);filter:blur(18px);opacity:.6;z-index:0}
.deviceStage:after{content:"";position:absolute;bottom:20px;width:230px;height:36px;border-radius:50%;background:radial-gradient(ellipse,#000d,transparent 72%);filter:blur(3px);z-index:0}
.deviceStage>*{position:relative;z-index:1}
@keyframes floatPhone{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(.4deg)}}
@keyframes floatTablet{0%,100%{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(0)}50%{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(-9px)}}
.phoneFrame{position:relative;width:250px;height:508px;border-radius:44px;flex-shrink:0;padding:12px;
  background:linear-gradient(160deg,#454c68 0%,#1e2230 16%,#0c0e17 42%,#171a26 62%,#050609 100%);
  box-shadow:
    0 1px 0 0 #5a6180 inset,
    0 -1.5px 1px 0 #000 inset,
    -1.5px 0 1px 0 #2a2e3f inset,
    1.5px 0 1px 0 #000 inset,
    0 0 0 1px #06070b,
    0 55px 100px -25px #000e,
    0 14px 45px -10px #7c5cff33,
    0 4px 18px -6px #00d9ff22;
  animation:floatPhone 6.5s ease-in-out infinite}
.phoneFrame:before{content:"";position:absolute;left:-2px;top:64px;width:3px;height:30px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#050609,#525973);box-shadow:0 46px 0 0 #4a5170,0 84px 0 0 #4a5170}
.phoneFrame:after{content:"";position:absolute;right:-2px;top:96px;width:3px;height:50px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#525973,#050609)}
.phoneFrame .notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:98px;height:27px;background:linear-gradient(160deg,#0d0d12,#000 55%);border-radius:16px;z-index:4;box-shadow:0 0 0 1px #1c1e26,inset 0 1px 1px #2c2f3a,inset 0 -1px 2px #000}
.phoneFrame .notch:before{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a4258,#0a0b10 75%);opacity:.8}
.phoneFrame .notch:after{content:"";position:absolute;right:15px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#7fb8ff,#1b3a5c 42%,#050608 78%);box-shadow:0 0 0 1px #000,inset 0 0 2px #000}
.phoneScreen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;padding:36px 16px 16px;
  background:
    radial-gradient(120% 90% at 50% 0%,#26193f,#05060a 62%),
    radial-gradient(140% 130% at 50% 105%,transparent 55%,#000 100%);
  box-shadow:inset 0 0 0 1px #000,inset 0 0 22px 4px #00000066}
.phoneScreen:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(118deg,#ffffff2e 0%,#ffffff0c 7%,transparent 20%,transparent 76%,#ffffff06 90%,#ffffff1a 100%)}
.phoneScreen:after{content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:3px;background:#fff;opacity:.32;z-index:7}
.ring{display:block;margin:6px auto 18px}
.ringLabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.ringLabel b{font-size:24px;letter-spacing:-.02em}
.ringLabel span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.ringHolder{position:relative}
.assetList{display:flex;flex-direction:column;gap:9px}
.assetRow{display:flex;align-items:center;gap:10px;background:#ffffff08;border-radius:12px;padding:9px 10px}
.assetRow .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#0a0a0f;flex-shrink:0}
.assetRow .nm{font-size:12px;font-weight:700}
.assetRow .sm{font-size:10px;color:var(--muted)}
.assetRow .amt{margin-left:auto;text-align:right;font-size:11px}
.assetRow .amt b{display:block;font-size:12px}
.floatCard{position:absolute;right:-38px;bottom:64px;width:190px;border-radius:16px;padding:16px;background:linear-gradient(135deg,#7c5cff,#00d9ff 130%);box-shadow:0 24px 50px -12px #000c;transform:rotate(-9deg);color:#05060a}
.floatCard .fcTop{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.06em}
.floatCard .fcBig{font-size:19px;font-weight:800;margin:14px 0 2px}
.floatCard .fcSub{font-size:10px;opacity:.75}
.floatCard .fcDot{width:7px;height:7px;border-radius:50%;background:#05060a}
.tabletFrame{position:relative;width:440px;max-width:100%;aspect-ratio:4/3;border-radius:24px;padding:16px;transform-style:preserve-3d;
  background:linear-gradient(160deg,#454c68 0%,#1e2230 14%,#0c0e17 40%,#171a26 62%,#050609 100%);
    0 65px 110px -30px #000e,
    0 16px 50px -10px #00d9ff26;
  animation:floatTablet 7s ease-in-out infinite}
.tabletFrame:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#7fb8ff,#1b3a5c 42%,#050608 78%);box-shadow:0 0 0 1px #000;z-index:4}
.tabletScreen{position:relative;width:100%;height:100%;border-radius:13px;background:radial-gradient(120% 100% at 20% 0%,#1e1534,#05060a 68%),radial-gradient(140% 130% at 50% 110%,transparent 55%,#000 100%);padding:22px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #000,inset 0 0 26px 4px #00000066}
.tabletScreen:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:13px;background:linear-gradient(122deg,#ffffff26 0%,#ffffff0a 9%,transparent 24%,transparent 78%,#ffffff08 92%,#ffffff16 100%)}
.tabletTop{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);margin-bottom:18px}
.tabletTop b{color:#fff}
.tabletCard{background:#ffffff08;border:1px solid var(--line);border-radius:14px;padding:16px;max-width:280px;margin:auto 0}
.tabletCard .tRow{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.tabletCard .tRow:last-of-type{border-bottom:none}
.tabletCard input[type=range]{width:100%;accent-color:var(--cyan);margin-top:4px}
.tGhostBtn{margin-top:14px;text-align:center;font-size:12px;font-weight:700;border-radius:10px;padding:11px;background:linear-gradient(90deg,var(--violet),var(--cyan));color:#05060a}
@media(max-width:900px){.deviceGrid,.deviceGrid.rev{grid-template-columns:1fr;gap:34px}.deviceStage{min-height:auto;padding:20px 0}.floatCard{right:6px}}
@media(prefers-reduced-motion:reduce){.phoneFrame,.tabletFrame{animation:none}}
/* Follow the Whales */
#whale-follow{padding:92px 0}
#whale-follow .sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:34px}
#whale-follow h2{font-size:clamp(34px,5vw,58px);line-height:1.02;margin:10px 0 14px;letter-spacing:-.04em}
#whale-follow .muted{max-width:760px}
.greenPill{border-color:rgba(39,231,164,.25)!important;color:var(--green)!important}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.featureCard{padding:26px;min-height:310px}
.featureIcon{font-size:30px;margin-bottom:18px}
.featureCard h3{font-size:22px;margin:0 0 10px}
.featureCard p{color:var(--muted);line-height:1.65;min-height:78px}
.signalRow,.scoreLine{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:13px}
.signalRow b{font-size:11px;letter-spacing:.06em}
.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}
.timelineMini{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 16px}
.timelineMini span{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:10px;font-weight:800;letter-spacing:.05em}
.timelineMini i{color:var(--muted);font-style:normal}
.miniNote{font-size:12px;color:var(--muted)}
.scoreLine{grid-template-columns:1fr auto}
.scoreLine b{font-size:13px}
.whaleReplay{margin-top:18px;padding:32px;display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center}
.replayCopy h3{font-size:30px;margin:10px 0 12px;letter-spacing:-.025em}
.replayCopy p{color:var(--muted);line-height:1.7}
.smallTrust{font-size:11px;color:var(--muted);margin-top:12px}
.replayFlow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.flowNode{min-width:125px;text-align:center;padding:16px 12px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}
.flowNode span{display:block;font-size:22px;margin-bottom:7px}
.flowNode b{display:block;font-size:12px}
.flowNode small{display:block;color:var(--muted);font-size:10px;margin-top:5px}
.flowArrow{color:var(--muted);font-size:20px}
.disclaimerBox{margin-top:18px;padding:17px 20px;border:1px solid rgba(241,207,112,.18);background:rgba(241,207,112,.035);border-radius:14px;color:var(--muted);font-size:12px;line-height:1.6}
.disclaimerBox b{color:var(--text)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}.whaleReplay{grid-template-columns:1fr}.replayFlow{justify-content:flex-start}.flowArrow{transform:rotate(90deg)}}
@media(max-width:650px){#whale-follow .sectionHead{display:block}.featureCard{min-height:0}.whaleReplay{padding:22px}.replayCopy h3{font-size:25px}}
/* ---------- WALYSER next-gen personal intelligence ---------- */
.intelGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}
.intelCard{background:linear-gradient(145deg,#101522,#0a0d15);border:1px solid var(--line);border-radius:18px;padding:22px;position:relative;overflow:hidden}
.intelCard:after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:#7c5cff18;filter:blur(22px)}
.intelCard.span4{grid-column:span 4}.intelCard.span6{grid-column:span 6}.intelCard.span8{grid-column:span 8}.intelCard.span12{grid-column:span 12}
.intelIcon{font-size:22px;margin-bottom:12px}.intelTitle{font-size:18px;font-weight:800;margin:0 0 7px}.intelSub{color:var(--muted);line-height:1.6;font-size:13px}
.signalRow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.signalDot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}.signalDot.greenDot{background:var(--green);box-shadow:0 0 12px #27e7a477}.signalDot.yellowDot{background:var(--yellow)}.signalDot.redDot{background:var(--red)}
.signalMeta{margin-left:auto;text-align:right;font-size:11px;color:var(--muted)}.signalMeta b{display:block;color:#fff;font-size:12px}
.trustPanel{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:20px}
.trustItem{padding:14px;border:1px solid var(--line);border-radius:13px;background:#ffffff05}
.trustItem b{display:block;font-size:12px;margin-bottom:5px}.trustItem span{font-size:11px;color:var(--muted);line-height:1.45}
.watchBanner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;border:1px solid #27e7a433;border-radius:16px;background:linear-gradient(90deg,#27e7a40a,#00d9ff08);margin-bottom:18px}
.watchBadge{font-size:10px;letter-spacing:.12em;color:var(--green);font-weight:800}.watchBanner h3{margin:5px 0 3px;font-size:17px}.watchBanner p{margin:0;color:var(--muted);font-size:12px}
.dna{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px}.dnaItem{background:#ffffff06;border:1px solid var(--line);border-radius:11px;padding:11px}.dnaItem span{display:flex;justify-content:space-between;color:#aeb4c5;font-size:11px}.dnaBar{height:5px;background:#262b38;border-radius:8px;margin-top:8px;overflow:hidden}.dnaBar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));border-radius:8px}
.whatIf{display:grid;grid-template-columns:1fr 1fr;gap:14px}.scenario{border:1px solid var(--line);border-radius:13px;padding:14px;background:#ffffff05}.scenario b{font-size:12px}.scenario .big{font-size:24px}
.personalNews{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line)}.personalNews:first-child{border-top:0}.personalNews .tag{font-size:10px;padding:4px 7px;border-radius:999px;background:#ff5d7915;color:#ff8ca0}
@media(max-width:900px){.intelCard.span4,.intelCard.span6,.intelCard.span8{grid-column:span 12}.trustPanel{grid-template-columns:1fr 1fr}.deviceGrid,.deviceGrid.rev{grid-template-columns:1fr}.whatIf{grid-template-columns:1fr}}
@media(max-width:520px){.trustPanel{grid-template-columns:1fr}.watchBanner{align-items:flex-start;flex-direction:column}.dna{grid-template-columns:1fr}}
.heroCard{height:430px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#111b2b,#0a0b13);position:relative;overflow:hidden}.glow{position:absolute;width:350px;height:250px;border-radius:50%;background:#00d9ff22;filter:blur(40px);right:10px;top:0}.dash{position:absolute;inset:24px;background:#090c14cc;border:1px solid var(--line);border-radius:18px;padding:20px}.dashTop{display:flex;justify-content:space-between;color:#8e96ab;font-size:11px}.balance{font-size:29px;margin-top:18px}.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}.score{position:absolute;right:18px;top:53px;padding:10px 13px;border-radius:12px;background:#27e7a411;border:1px solid #27e7a444}.score strong{display:block;font-size:19px;color:var(--green)}.bars{display:flex;align-items:end;gap:7px;height:125px;margin-top:30px}.bar{flex:1;border-radius:5px 5px 1px 1px;background:linear-gradient(#00d9ff,#7c5cff)}.miniGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.mini{padding:12px;border:1px solid var(--line);border-radius:10px;background:#ffffff06}.mini small{color:#687188}.mini b{display:block;margin-top:5px}
@media(max-width:850px){.navlinks{position:fixed;top:70px;left:0;right:0;bottom:0;background:#05060a;backdrop-filter:blur(18px);padding:18px 24px;display:none;overflow-y:auto;flex-direction:column;gap:4px}.navlinks.open{display:flex}.hamburger{display:flex}.heroGrid{grid-template-columns:1fr}.hero{padding-top:55px}h1{font-size:45px}.card,.wide,.half{grid-column:span 12}.stats{flex-wrap:wrap}.heroCard{height:390px}}
@media(max-width:520px){.wrap{padding:0 17px}.actions{flex-direction:column}.actions .btn{text-align:center}.head h2,.ctaBox h2{font-size:30px}.heroCard{height:350px}.dash{inset:15px}}
.phoneStatus{display:flex;justify-content:space-between;font-size:11px;color:#e8eaf2;opacity:.75;margin-bottom:18px}
.trustLine{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;color:#aeb4c5;font-size:11px}.trustLine>span{padding:6px 9px;border:1px solid #27e7a426;background:#27e7a408;border-radius:999px}.personalGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:15px}.signal{padding:14px;border:1px solid var(--line);border-radius:13px;background:#ffffff04;margin-top:9px}.signal b{font-size:13px}.aiBox{background:radial-gradient(350px 180px at 0% 0%,#7c5cff20,transparent 70%),#0d1019}.aiPrompt{display:flex;gap:8px;margin-top:14px}.aiPrompt input{flex:1;margin:0}.aiAnswer{margin-top:12px;padding:14px;border-radius:13px;border:1px solid #00d9ff2d;background:#00d9ff08;line-height:1.6}.changeGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:12px}.change{padding:12px;border:1px solid var(--line);border-radius:12px;background:#ffffff04}.controlBox{padding:18px;border:1px solid #27e7a42c;background:#27e7a407;border-radius:16px}.controlList{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.controlList div{padding:10px;border-radius:10px;background:#ffffff05;color:#cbd0dc;font-size:12px}.explain{margin-top:12px;padding:12px;border-left:2px solid var(--cyan);background:#00d9ff07;color:#aeb4c5;font-size:12px;line-height:1.6}@media(max-width:850px){.personalGrid{grid-template-columns:1fr}.controlList{grid-template-columns:1fr}.changeGrid{grid-template-columns:1fr}}
/* =========================================================================
   AUFKLAPPBARER TIPP-BLOCK "Was bringt mir das?"
   Nutzt <details>/<summary> — funktioniert ohne JavaScript, ist von Haus
   aus tastaturbedienbar und für Screenreader korrekt ausgezeichnet.
   ========================================================================= */
.tipBlock{margin-top:12px;border:1px solid #00d9ff2e;border-radius:12px;
  background:linear-gradient(150deg,#00d9ff0c,#ffffff03);overflow:hidden}
.tipBlock summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
  padding:10px 13px;font-size:12px;font-weight:700;color:#8fe9ff;transition:background .15s}
.tipBlock summary::-webkit-details-marker{display:none}
.tipBlock summary:hover{background:#00d9ff0f}
.tipBlock summary .tipArrow{margin-left:auto;font-size:9px;transition:transform .2s;opacity:.8}
.tipBlock[open] summary .tipArrow{transform:rotate(180deg)}
.tipBody{padding:0 13px 12px;font-size:12.5px;line-height:1.65;color:#c3c9d6;
  animation:tipIn .2s ease}
.tipBody b{color:#f5f7fb}
.tipBody .tipDo{display:block;margin-top:9px;padding-top:9px;border-top:1px solid #ffffff12;color:#7ff0c6;font-weight:650}
.tipBody .tipReal{display:block;margin-top:8px;font-size:11.5px;color:#8e96ab;line-height:1.55}
@keyframes tipIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* =========================================================================
   KOPFZEILE AUFGERÄUMT
   Logo und erster Menüpunkt klebten exakt aneinander (beide bei 240px),
   dadurch wirkte die Leiste überfüllt. Jetzt mit klarem Abstand, etwas
   kompakter, und die mobile Klappnavigation greift früher.
   ========================================================================= */
header nav{gap:18px}
.logo{flex:0 0 auto;margin-right:6px;letter-spacing:-.02em}
.navlinks{gap:17px;flex:1 1 auto;justify-content:center;min-width:0}
.navlinks > a,.navDropBtn{white-space:nowrap;font-size:12.5px}
header .btn.primary{flex:0 0 auto}

/* Zwischen 850 und 1150 px wird es eng — dort Abstände weiter reduzieren */
@media(max-width:1150px){
  header nav{gap:12px}
  .navlinks{gap:11px}
  .navlinks > a,.navDropBtn{font-size:12px}
  .logo{font-size:19px}
  header .btn.primary{padding:9px 12px!important;font-size:12px!important}
}

/* Unterhalb 1050 px auf die Klappnavigation umschalten, statt zu quetschen.
   WICHTIG: <header> hat backdrop-filter und wird dadurch selbst zum Bezugs-
   rahmen für position:fixed. "bottom:0" bezieht sich deshalb auf die 70 px
   hohe Kopfzeile, nicht auf das Fenster — das Panel wurde nur 36 px hoch.
   Deshalb hier die Höhe explizit setzen statt bottom zu verwenden. */
@media(max-width:1180px){
  .navlinks{position:fixed;top:70px;left:0;right:0;bottom:auto;
    height:calc(100vh - 70px);max-height:calc(100vh - 70px);
    background:#05060a;padding:18px 24px;display:none;
    overflow-y:auto;flex-direction:column;gap:4px;justify-content:flex-start;
    align-items:stretch;z-index:60}
  .navlinks.open{display:flex}
  .hamburger{display:flex}
  .navlinks > a,.navDropBtn{font-size:14.5px;padding:11px 2px;width:100%}
  .navDrop{width:100%}
  .navDrop .navMenu,.navDrop.open .navMenu{position:static;background:none;border:0;box-shadow:none;
    padding:0 0 6px 14px;min-width:0;
    /* Desktop-Aufklapp-Animation zurücksetzen, sonst bleiben die Links unsichtbar */
    opacity:1;pointer-events:auto;transform:none;backdrop-filter:none;transition:none;
    left:auto;right:auto;top:auto;width:100%}
  .navDrop .navMenu{display:none}
  .navDrop.open .navMenu{display:block}
  .navDrop.open .navMenu{display:block}
  .navDrop .navMenu a{padding:9px 2px;font-size:13.5px}
}

/* =========================================================================
   SPRACHUMSCHALTER DE / EN
   ========================================================================= */
.langBtn{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;padding:7px 11px;
  border:1px solid var(--line);border-radius:9px;background:#ffffff05;cursor:pointer;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;line-height:1;
  transition:border-color .15s,background .15s}
.langBtn:hover{border-color:rgba(255,255,255,.2);background:#ffffff0c}
.langBtn span[data-lang]{color:#6f7789;transition:color .15s}
.langBtn span[data-lang].on{color:#f5f7fb}
.langBtn .langSep{color:#3a4152}
@media(max-width:1150px){.langBtn{padding:6px 9px;font-size:11px}}
@media(max-width:1050px){.langBtn{order:-1;margin-right:6px}}


/* =========================================================================
   KOPFZEILE — Überlappung behoben
   Der Menüblock brauchte 693 px, bekam aber nur 620 (die .wrap begrenzt auf
   1180 px). Zentriert quoll er dadurch auf BEIDEN Seiten über und schob sich
   über Logo und Suchfeld. Drei Maßnahmen:
   1) Die Kopfzeile darf breiter werden als der übrige Inhalt.
   2) Der Menüblock schrumpft nicht mehr unter seinen Inhalt.
   3) Das Suchfeld wird bei wenig Platz kompakt.
   ========================================================================= */
header nav.wrap{max-width:1400px}
.navlinks{flex:0 1 auto;min-width:auto;justify-content:center}
.navlinks > a,.navDropBtn{flex:0 0 auto}

@media(max-width:1400px){
  header nav{gap:14px}
  .navlinks{gap:13px}
  .navlinks > a,.navDropBtn{font-size:12px}
  /* Suchfeld auf Symbol + Kürzel reduzieren, Beschriftung entfällt */
  .cmdkTrigger .cmdkLabel{display:none}
  .cmdkTrigger{padding:8px 10px!important;gap:7px!important;white-space:nowrap}
}
@media(max-width:1240px){
  .navlinks{gap:10px}
  .navlinks > a,.navDropBtn{font-size:11.5px}
  .logo{font-size:18px}
  header .btn.primary{padding:9px 11px!important;font-size:11.5px!important}
}

/* Rechter Action-Cluster (Suche, Sprache, CTA, Hamburger) — gilt auf allen
   Breiten, damit die Abstände auch in der mobilen Kopfzeile stimmen. */
.navActions{display:flex;align-items:center;gap:12px;min-width:0}

/* =========================================================================
   MENÜLEISTE MITTIG
   Vorher wanderte der Menüblock je nach Breite von Logo und rechtem
   Button-Cluster (Suche/CTA/Hamburger) unterschiedlich weit — dadurch wirkte
   die Leiste optisch nach links verschoben. Jetzt drei feste Spalten
   (Logo | Menü | Actions) per Grid: Der Menüblock sitzt immer exakt mittig,
   Logo links, Suche/CTA/Hamburger rechts — und da alles im normalen
   Grid-Fluss bleibt (kein position:absolute), kann nichts mehr
   überlappen, auch nicht auf Seiten mit zusätzlichem Suchfeld-Button.
   Nur oberhalb der mobilen Klappnavigation (>1180px) aktiv.
   ========================================================================= */
@media(min-width:1181px){
  header nav{display:grid;grid-template-columns:1fr auto 1fr;column-gap:18px}
  header nav .logo{justify-self:start}
  header nav .navlinks{justify-self:center}
  header nav .navActions{justify-self:end}
}

/* Kopfzeile auf schmalen Geräten: Logo, Sprache, CTA und Menüknopf müssen
   zusammen in 390 px passen — vorher ragten CTA und Hamburger heraus. */
@media(max-width:560px){
  header nav.wrap{gap:8px;padding-left:14px;padding-right:14px}
  .logo{font-size:17px;margin-right:0}
  .langBtn{padding:6px 8px;font-size:10.5px;gap:3px}
  header .btn.primary{padding:8px 10px!important;font-size:11px!important}
  .cmdkTrigger{display:none}          /* Suche steckt im Klappmenü */
  .hamburger{padding:4px;margin-left:2px}
  .navActions{gap:6px}
}
@media(max-width:400px){
  header .btn.primary{padding:7px 9px!important;font-size:10.5px!important}
  .logo{font-size:16px}
}

/* ---- Ziel eines "Öffnen →"-Sprungs aus dem Werkzeug-Katalog ----
   Hebt die angesprungene Karte kurz hervor, damit sofort erkennbar ist,
   welches Werkzeug gemeint war. Klingt nach gut zwei Sekunden von selbst ab. */
.deepTarget{
  animation: deepTargetPulse 2.2s ease-out 1;
  border-radius: 14px;
}
@keyframes deepTargetPulse{
  0%   { box-shadow: 0 0 0 2px #8fe9ff, 0 0 26px 4px rgba(143,233,255,.42); }
  60%  { box-shadow: 0 0 0 2px rgba(143,233,255,.55), 0 0 22px 3px rgba(143,233,255,.22); }
  100% { box-shadow: 0 0 0 0 rgba(143,233,255,0), 0 0 0 0 rgba(143,233,255,0); }
}
@media (prefers-reduced-motion: reduce){
  .deepTarget{ animation: none; box-shadow: 0 0 0 2px #8fe9ff; }
}

/* Deep-Link-Ziele nicht unter der fixierten Kopfzeile verstecken */
[id^="feat-"], .dashView > .dgrid > .dcard[id], .dcard[id], .card[id]{
  scroll-margin-top: 96px;
}

/* FOUC-Schutz: Wallet-verbinden-Button oben rechts erst zeigen, wenn lang.js
   die Sprache gesetzt hat, damit bei EN nicht kurz Deutsch aufblitzt */
html.i18nEN [data-i18n="cta.connect"]{ visibility:hidden; }