/* ============================================================
   DANIEL SINGH , Portfolio-Website v4.1
   One-Pager, natives Web, responsive.
   Papier + Ink + Electric Blue, Space Grotesk + Poppins, Korn.
   ============================================================ */

@font-face{ font-family:'Space Grotesk'; font-weight:300 900; font-display:swap;
  src:url('assets/fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-weight:500; font-display:swap;
  src:url('assets/fonts/poppins-500-latin.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-weight:600; font-display:swap;
  src:url('assets/fonts/poppins-600-latin.woff2') format('woff2'); }

:root{
  --bg:#F7F4EE; --bg2:#F1EDE4; --panel:#FFFFFF; --card:#FBF9F4;
  --ink:#16140F; --muted:#6B655A; --dim:#A59D8D;
  --acc:#2447F0; --acc-soft:#1D39C4; --ok:#0E9F6E;
  --line:rgba(22,20,15,.13); --line2:rgba(22,20,15,.06);
  --disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
  --pad:clamp(20px,5vw,96px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* Filmkorn */
body::after{ content:''; position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.3; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.16' fill='%23000'/%3E%3C/svg%3E"); }

/* ---------- Progress + Nav ---------- */
.prog{ position:fixed; left:0; top:0; height:3px; width:0; background:var(--acc); z-index:100; box-shadow:0 0 10px rgba(36,71,240,.5); }
.nav{ position:fixed; left:0; right:0; top:0; z-index:90; display:flex; align-items:center; gap:26px;
  padding:13px var(--pad); transition:background .25s, border-color .25s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(247,244,238,.88); backdrop-filter:blur(12px); border-color:var(--line); }
.nav .ds{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.nav .ds .m{ width:32px; height:32px; border-radius:9px; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:14px; }
.nav .links{ display:flex; gap:4px; margin-left:auto; }
.nav .links a{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none;
  padding:7px 12px; border-radius:8px; transition:color .15s, background .15s; }
.nav .links a:hover{ color:var(--ink); background:rgba(22,20,15,.05); }
.nav .links a.on{ color:var(--acc); background:rgba(36,71,240,.08); }
.nav .cta{ margin-left:10px; display:inline-flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:700; font-size:14px; color:#fff; background:var(--acc); text-decoration:none;
  padding:10px 18px; border-radius:10px; box-shadow:0 8px 22px rgba(36,71,240,.25); }
@media (max-width:960px){ .nav .links{ display:none; } .nav .cta{ margin-left:auto; } }

/* ---------- Basis ---------- */
.wrap{ max-width:1480px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.sec{ padding:clamp(76px,11vh,150px) 0; position:relative; }
.sec.alt{ background:var(--bg2); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.sechead{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,4vw,54px); }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:clamp(11px,1.2vw,13.5px); font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--dim); }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 5px rgba(36,71,240,.13); animation:blink 1.5s steps(1) infinite; flex:none; }
.eyebrow .act{ color:var(--acc); font-weight:600; }
@keyframes blink{ 50%{ opacity:.25; } }
.title{ font-family:var(--disp); font-weight:700; letter-spacing:-.03em; line-height:1.02; color:var(--ink);
  font-size:clamp(33px,4.6vw,58px); margin-top:15px; }
.title .acc{ color:var(--acc); }
.lead{ color:var(--muted); font-weight:500; line-height:1.55; font-size:clamp(15.5px,1.55vw,20px); margin-top:15px; max-width:58ch; }
.lead b{ color:var(--ink); font-weight:600; }
.mega{ font-family:var(--disp); font-weight:700; letter-spacing:-.045em; line-height:.9; color:var(--ink); }
.mega .acc{ color:var(--acc); }
.mega .ghost{ color:transparent; -webkit-text-stroke:2.5px rgba(22,20,15,.38); }
.tagmo{ font-family:var(--mono); font-size:clamp(10.5px,1.05vw,12.5px); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 14px; background:rgba(255,255,255,.6); white-space:nowrap; }
.tagmo.hot{ color:var(--acc); border-color:rgba(36,71,240,.4); background:rgba(36,71,240,.07); }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 40px rgba(90,74,45,.08); }

/* Reveal (nur mit JS aktiv) */
.js .rv{ opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(.2,.9,.3,1), transform .65s cubic-bezier(.2,.9,.3,1); }
.js .rv.in{ opacity:1; transform:none; }
.js .rv.d2{ transition-delay:.1s; } .js .rv.d3{ transition-delay:.2s; } .js .rv.d4{ transition-delay:.3s; }

/* ---------- Hero ---------- */
.hero{ min-height:100svh; display:flex; align-items:center; position:relative; padding:120px 0 70px; overflow:hidden; }
.hero .grid2{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,4vw,72px); align-items:center; width:100%; }
.hero .hello{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:clamp(11px,1.2vw,14px); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.hero .hello .ok{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px rgba(14,159,110,.15); }
.hero h1{ font-size:clamp(56px,8.6vw,140px); line-height:.95; margin-top:18px; letter-spacing:-.04em; }
.hero h1 .acc{ color:var(--acc); }
.hero .sub{ margin-top:16px; font-family:var(--mono); font-size:clamp(12px,1.5vw,18px); letter-spacing:.34em; text-transform:uppercase; color:var(--ink); font-weight:500; }
.hero .claim{ margin-top:18px; font-size:clamp(16px,1.7vw,21px); max-width:52ch; }
.hero .ctas{ margin-top:clamp(24px,3vw,36px); display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; border-radius:12px; padding:15px 24px;
  font-family:var(--disp); font-weight:700; font-size:clamp(14px,1.5vw,17px); letter-spacing:-.01em; transition:transform .12s, box-shadow .2s; }
.btn:hover{ transform:translateY(-2px); }
.btn.pri{ background:var(--acc); color:#fff; box-shadow:0 14px 34px rgba(36,71,240,.3); }
.btn.sec{ border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.6); }
.btn .ar{ font-family:var(--body); }
.hero .avail{ margin-top:clamp(22px,3vw,34px); display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:clamp(10.5px,1.1vw,12.5px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* Portrait im Kreis + Chips */
.hero .pfwrap{ position:relative; display:flex; justify-content:center; }
.hero .ring{ position:relative; width:min(100%,540px); aspect-ratio:1; border-radius:50%; }
.hero .ring::before{ content:''; position:absolute; inset:-16px; border-radius:50%; border:1.5px dashed rgba(36,71,240,.4); }
.hero .ring::after{ content:''; position:absolute; right:6%; top:4%; width:13px; height:13px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 7px rgba(36,71,240,.15); }
.hero .ring img{ width:100%; height:100%; object-fit:cover; object-position:center 12%; border-radius:50%;
  filter:grayscale(1) contrast(1.05); border:1px solid var(--line); box-shadow:0 40px 90px rgba(90,74,45,.22); background:#fff; }
.hero .chips{ position:absolute; right:max(calc(var(--pad) * -0.4), -46px); top:10%; display:flex; flex-direction:column; gap:12px; }
.hchip{ background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:13px; padding:11px 15px; box-shadow:0 12px 30px rgba(90,74,45,.12); backdrop-filter:blur(6px); }
.hchip .l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.hchip .v{ font-family:var(--disp); font-weight:700; font-size:14.5px; margin-top:3px; }
.hero .side{ position:absolute; left:calc(var(--pad) * .28); top:50%; transform:translate(-50%,-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.4em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.hero .cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); }
.hero .cue .ar{ width:20px; height:20px; border-right:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:rotate(45deg); animation:cue 1.6s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ transform:rotate(45deg) translate(0,0); opacity:1; } 50%{ transform:rotate(45deg) translate(7px,7px); opacity:.35; } }
@media (max-width:1240px){ .hero .chips{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; margin-top:18px; } .hero .pfwrap{ flex-direction:column; align-items:center; } }
@media (max-width:900px){
  .hero{ padding:104px 0 60px; }
  .hero .grid2{ grid-template-columns:1fr; }
  .hero .ring{ width:min(78vw,380px); }
  .hero .side, .hero .cue{ display:none; }
}

/* Marquee-Band */
.band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(36,71,240,.05); overflow:hidden; padding:19px 0; }
.band .track{ display:inline-flex; align-items:baseline; white-space:nowrap; width:max-content; animation:mq 28s linear infinite; }
.band .it{ display:inline-flex; align-items:baseline; gap:24px; padding:0 15px;
  font-family:var(--disp); font-weight:700; font-size:clamp(16px,2vw,26px); color:var(--ink); }
.band .it .mo{ font-family:var(--mono); font-weight:500; font-size:clamp(10px,1.15vw,14px); letter-spacing:.16em; color:var(--acc-soft); text-transform:uppercase; }
.band .it .sep{ color:var(--acc); font-size:clamp(12px,1.5vw,18px); }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Bilanz ---------- */
.board{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,26px); }
.bcell{ padding:clamp(22px,2.8vw,40px); position:relative; }
.bcell .top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.brch{ font-family:var(--mono); font-size:clamp(10px,1.05vw,12.5px); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); border:1px solid rgba(36,71,240,.45); border-radius:999px; padding:6px 13px; background:rgba(36,71,240,.07); }
.bcell .no{ font-family:var(--mono); font-size:clamp(9.5px,1vw,12px); letter-spacing:.16em; color:var(--dim); text-transform:uppercase; }
.bcell .v{ margin-top:clamp(16px,2.2vw,30px); font-size:clamp(48px,6vw,104px); white-space:nowrap; }
.bcell .v .u{ font-size:.52em; }
.bcell .k{ margin-top:clamp(11px,1.5vw,18px); font-family:var(--disp); font-weight:700; font-size:clamp(15.5px,1.7vw,23px); letter-spacing:-.01em; }
.bcell .s{ margin-top:7px; font-family:var(--mono); font-size:clamp(10px,1.15vw,13.5px); letter-spacing:.04em; color:var(--muted); }
@media (max-width:900px){ .board{ grid-template-columns:1fr; } }

/* ---------- Timeline ---------- */
.tl{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.6vw,22px); padding-top:34px; }
.tl::before{ content:''; position:absolute; left:1.5%; right:1.5%; top:8px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(36,71,240,.38) 7%, rgba(36,71,240,.38) 93%, transparent); }
.tl .node{ position:absolute; top:2px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:3px solid var(--acc); z-index:2; }
.tl .st{ overflow:hidden; display:flex; flex-direction:column; }
.tl .im{ position:relative; height:clamp(92px,8.6vw,134px); background:#EFECE4; overflow:hidden; flex:none; }
.tl .im img{ width:100%; height:100%; object-fit:cover; }
.tl .im.logo{ display:flex; align-items:center; justify-content:center; background:#F3F0E9; }
.tl .im.logo img{ width:56%; height:auto; object-fit:contain; }
.tl .yr{ position:absolute; top:10px; right:10px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.05em; color:#fff; background:var(--acc); padding:4px 9px; border-radius:6px; }
.tl .bd{ padding:15px 16px 17px; }
.tl .co{ font-family:var(--disp); font-weight:700; font-size:clamp(15.5px,1.45vw,19px); letter-spacing:-.01em; }
.tl .role{ font-family:var(--mono); font-size:clamp(9.5px,1vw,11.5px); color:var(--acc-soft); margin-top:5px; letter-spacing:.06em; text-transform:uppercase; }
.tl .d{ font-size:clamp(11.5px,1.1vw,13px); color:var(--muted); margin-top:8px; line-height:1.45; }
.tl .d b{ color:var(--ink); font-weight:600; }
.tl .dest{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 14px;
  border:1.5px dashed rgba(36,71,240,.5); border-radius:18px; background:rgba(36,71,240,.045); }
.tl .dest .orb{ width:clamp(58px,5.4vw,84px); height:clamp(58px,5.4vw,84px); border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(36,71,240,.26), rgba(36,71,240,.04) 70%); border:2px solid rgba(36,71,240,.7);
  box-shadow:0 0 40px rgba(36,71,240,.28); font-size:clamp(26px,2.8vw,38px); }
.tl .dest .lb{ font-family:var(--disp); font-weight:700; font-size:clamp(13.5px,1.35vw,18px); margin-top:12px; line-height:1.15; }
.tl .dest .sub{ font-family:var(--mono); font-size:10px; color:var(--acc-soft); letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
@media (max-width:1000px){
  .tl{ grid-template-columns:1fr 1fr; padding-top:0; }
  .tl::before, .tl .node{ display:none; }
  .tl .dest{ grid-column:1 / -1; }
}
@media (max-width:560px){ .tl{ grid-template-columns:1fr; } }

/* ---------- Bentley ---------- */
.bentley{ position:relative; overflow:hidden; }
.bentley .bg{ position:absolute; inset:0; }
.bentley .bg img{ width:100%; height:100%; object-fit:cover; object-position:center 34%; transform:scaleX(-1);
  filter:grayscale(.35) contrast(1.06) brightness(1.02); }
.bentley .bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(247,244,238,.97) 0%, rgba(247,244,238,.86) 34%, rgba(247,244,238,.3) 66%, rgba(247,244,238,.55) 100%),
             linear-gradient(0deg, rgba(247,244,238,.94) 0%, rgba(247,244,238,0) 40%);
}
.bentley .inner{ position:relative; z-index:2; padding:clamp(84px,12vh,160px) 0; }
.bentley .one{ margin-top:clamp(18px,2.6vw,40px); display:flex; align-items:baseline; gap:clamp(12px,2vw,26px); flex-wrap:wrap; }
.bentley .one .n{ font-size:clamp(88px,13vw,230px); }
.bentley .one .w{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.3vw,52px); letter-spacing:-.02em; }
.bentley .aws{ margin-top:clamp(26px,3.6vw,50px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); }
.aw{ display:flex; align-items:center; gap:clamp(14px,1.8vw,24px); padding:clamp(16px,2.1vw,26px);
  background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:18px; backdrop-filter:blur(8px); }
.aw .rank{ font-family:var(--disp); font-weight:700; font-size:clamp(32px,4vw,58px); letter-spacing:-.03em; color:var(--acc); flex:none; }
.aw .tx{ flex:1; min-width:0; }
.aw .tx .t{ display:block; font-family:var(--disp); font-weight:700; font-size:clamp(16px,1.85vw,27px); letter-spacing:-.015em; }
.aw .tx .s{ display:block; font-family:var(--mono); font-size:clamp(10px,1.15vw,13.5px); color:var(--acc-soft); letter-spacing:.08em; margin-top:7px; text-transform:uppercase; }
.aw .thumb{ flex:none; width:clamp(74px,8.4vw,140px); height:clamp(74px,8.4vw,140px); border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 12px 30px rgba(90,74,45,.18); }
.aw .thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.bentley .cap{ position:relative; z-index:2; margin-top:15px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(22,20,15,.6); text-align:right; }
@media (max-width:900px){ .bentley .aws{ grid-template-columns:1fr; } }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(26px,4vw,72px); align-items:center; }
.split .img{ position:relative; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(90,74,45,.2); min-height:340px; align-self:stretch; }
.split .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.split .img .cap{ position:absolute; left:0; right:0; bottom:0; padding:13px 17px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#EFECE4;
  background:linear-gradient(0deg, rgba(10,10,12,.72), transparent); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split .img{ min-height:62vw; } }

.statgrid{ margin-top:clamp(18px,2.4vw,28px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.3vw,15px); }
.stat{ padding:clamp(12px,1.5vw,18px); }
.stat .v{ font-family:var(--disp); font-weight:700; font-size:clamp(19px,2.4vw,30px); letter-spacing:-.025em; color:var(--acc); white-space:nowrap; }
.stat .k{ font-size:clamp(10.5px,1.1vw,12px); color:var(--muted); margin-top:5px; line-height:1.3; }
@media (max-width:900px){ .statgrid{ grid-template-columns:1fr 1fr; } }

.lesson{ margin-top:clamp(16px,2.4vw,26px); border-left:3px solid var(--acc); background:rgba(255,255,255,.9); border-radius:0 16px 16px 0; padding:17px 21px; }
.lesson .lt{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc-soft); margin-bottom:8px; }
.lesson .lx{ font-size:clamp(13.5px,1.45vw,16.5px); line-height:1.5; color:var(--muted); }
.lesson .lx b{ color:var(--ink); font-weight:600; }

/* ---------- Iron Brothers ---------- */
.ibmeta{ font-family:var(--mono); font-size:clamp(10px,1.15vw,12.5px); color:var(--dim); letter-spacing:.08em; line-height:2; text-transform:uppercase; text-align:right; }
.ibmeta b{ color:var(--muted); font-weight:500; }
@media (max-width:900px){ .ibmeta{ text-align:left; } }
.ibstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
.ibs{ padding:clamp(4px,.8vw,8px) 0; }
.ibs + .ibs{ border-left:1px solid var(--line); padding-left:clamp(16px,2.4vw,40px); }
.ibs .v{ font-size:clamp(42px,5.8vw,94px); white-space:nowrap; }
.ibs .k{ margin-top:9px; font-family:var(--mono); font-size:clamp(10px,1.15vw,13.5px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ibs .from{ font-family:var(--mono); font-size:clamp(9.5px,1.1vw,13px); color:var(--dim); margin-top:5px; letter-spacing:.04em; }
@media (max-width:900px){
  .ibstats{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .ibs + .ibs{ border-left:0; padding-left:0; }
}
.crs{ margin-top:clamp(26px,3.6vw,48px); display:flex; gap:clamp(14px,2vw,24px); align-items:stretch; }
.cr{ position:relative; flex:none; width:clamp(170px,16vw,250px); aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:0 22px 50px rgba(90,74,45,.18); }
.cr img{ width:100%; height:100%; object-fit:cover; }
.cr .sp{ position:absolute; left:10px; bottom:10px; font-family:var(--mono); font-size:11.5px; font-weight:600; color:#fff; background:var(--acc); padding:5px 10px; border-radius:8px; }
.crside{ flex:1; min-width:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px; padding-bottom:4px; }
.crside .lb{ font-family:var(--mono); font-size:clamp(10px,1.15vw,12.5px); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:14px; }
.crside .lb .ln{ flex:1; height:1px; background:var(--line); }
.crside .pair{ display:flex; gap:clamp(20px,2.8vw,38px); flex-wrap:wrap; }
.st2{ font-family:var(--disp); font-weight:700; font-size:clamp(24px,2.8vw,38px); letter-spacing:-.02em; white-space:nowrap; }
.st2 .acc{ color:var(--acc); }
.st2 .mo{ display:block; font-family:var(--mono); font-weight:500; font-size:clamp(9.5px,1.05vw,12px); letter-spacing:.1em; color:var(--muted); margin-top:7px; text-transform:uppercase; white-space:normal; max-width:300px; }
.crside .row{ display:flex; gap:9px; flex-wrap:wrap; }
@media (max-width:960px){
  .crs{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
  .cr{ scroll-snap-align:start; }
  .crside{ min-width:86vw; }
}

/* ---------- Bento ---------- */
.bento{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(16px,2vw,26px); align-items:stretch; }
.bigcell{ padding:clamp(24px,3.2vw,40px); display:flex; flex-direction:column; }
.bigcell .kicker{ font-family:var(--mono); font-size:clamp(10px,1.1vw,12px); letter-spacing:.2em; text-transform:uppercase; color:var(--acc-soft); }
.bigcell .vv{ margin-top:14px; font-size:clamp(70px,9vw,150px); white-space:nowrap; }
.bigcell .vv .u{ font-size:.42em; }
.bigcell h3{ font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.3vw,31px); letter-spacing:-.02em; margin-top:15px; }
.bigcell .desc{ font-size:clamp(13.5px,1.5vw,17px); line-height:1.5; color:var(--muted); margin-top:12px; }
.bigcell .desc b{ color:var(--ink); font-weight:600; }
.bigcell .tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; padding-top:22px; }
.col{ display:flex; flex-direction:column; gap:clamp(16px,2vw,26px); }
.col .smcell{ flex:1; }
.smcell{ padding:clamp(18px,2.3vw,27px); display:flex; align-items:center; gap:clamp(16px,2.1vw,25px); }
.smcell .key{ flex:none; width:clamp(104px,12vw,170px); font-family:var(--disp); font-weight:700; font-size:clamp(23px,2.8vw,36px); letter-spacing:-.025em; color:var(--acc); line-height:1.02; }
.smcell .key .mo{ display:block; font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.14em; color:var(--dim); margin-top:7px; text-transform:uppercase; }
.smcell h4{ font-family:var(--disp); font-weight:700; font-size:clamp(16.5px,1.85vw,22px); letter-spacing:-.012em; }
.smcell p{ font-size:clamp(12px,1.35vw,14.5px); line-height:1.5; color:var(--muted); margin-top:7px; }
.smcell p b{ color:var(--ink); font-weight:600; }
.smcell.colm{ align-items:flex-start; flex-direction:column; gap:0; }
@media (max-width:960px){ .bento{ grid-template-columns:1fr; } }

.foot3{ margin-top:auto; display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); padding-top:clamp(18px,2.2vw,26px); border-top:1px solid var(--line); flex-wrap:wrap; }
.foot3 .fs .v{ display:block; font-family:var(--disp); font-weight:700; font-size:clamp(24px,2.6vw,38px); letter-spacing:-.03em; color:var(--acc); line-height:1; white-space:nowrap; }
.foot3 .fs .k{ display:block; font-family:var(--mono); font-size:clamp(9.5px,1.05vw,11.5px); letter-spacing:.1em; color:var(--muted); margin-top:8px; text-transform:uppercase; }
.foot3 .fdiv{ width:1px; align-self:stretch; background:var(--line); }
@media (max-width:640px){ .foot3 .fdiv{ display:none; } }

.ico{ width:44px; height:44px; border-radius:12px; background:rgba(36,71,240,.12); border:1px solid rgba(36,71,240,.36); display:flex; align-items:center; justify-content:center; flex:none; }
.ico svg{ width:23px; height:23px; stroke:var(--acc); fill:none; stroke-width:1.9; }
.hd{ display:flex; align-items:center; gap:14px; }
.hd .kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc-soft); }
.hd h3, .hd h4{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; }
.hd h3{ font-size:clamp(20px,2.4vw,31px); }
.smtags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.smtags .tagmo{ font-size:clamp(9.5px,1vw,11.5px); padding:6px 11px; }

/* ---------- Stats-Band (Ink) ---------- */
.stripe{ background:var(--ink); color:#F4EFE6; padding:clamp(40px,6vh,64px) 0; }
.stripe .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,36px); }
.stripe .cellst .v{ font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.8vw,54px); letter-spacing:-.03em; color:#fff; white-space:nowrap; }
.stripe .cellst .v .acc{ color:#7A90FF; }
.stripe .cellst .k{ margin-top:8px; font-family:var(--mono); font-size:clamp(9.5px,1.05vw,12px); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,230,.55); }
.stripe .cellst + .cellst{ border-left:1px solid rgba(244,239,230,.14); padding-left:clamp(18px,2.6vw,36px); }
@media (max-width:900px){
  .stripe .row{ grid-template-columns:1fr 1fr; row-gap:26px; }
  .stripe .cellst + .cellst{ border-left:0; padding-left:0; }
}

/* ---------- Close ---------- */
.close-sec .big{ font-size:clamp(42px,6.8vw,110px); margin-top:18px; }
.close-sec .big .l2{ display:block; }
.proof{ margin-top:clamp(18px,2.6vw,30px); display:flex; gap:10px; flex-wrap:wrap; }
.contact{ margin-top:clamp(22px,3vw,38px); display:flex; gap:15px; flex-wrap:wrap; }
.availbadge{ position:absolute; right:18px; bottom:18px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:13px; padding:12px 16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; backdrop-filter:blur(6px); }
.availbadge .ok{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(14,159,110,.18); }

/* ---------- Footer (dunkel) ---------- */
footer{ background:var(--ink); color:rgba(244,239,230,.7); padding:clamp(44px,7vh,72px) 0 30px; }
footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,64px); }
footer .brand .ds{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#F4EFE6; }
footer .brand .ds .m{ width:32px; height:32px; border-radius:9px; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:14px; }
footer .brand p{ margin-top:14px; font-size:13.5px; line-height:1.6; color:rgba(244,239,230,.55); max-width:36ch; }
footer h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,239,230,.45); margin-bottom:14px; }
footer .ln{ display:flex; flex-direction:column; gap:9px; }
footer .ln a{ font-size:13.5px; color:rgba(244,239,230,.75); text-decoration:none; }
footer .ln a:hover{ color:#7A90FF; }
footer .base{ margin-top:clamp(28px,4vw,44px); padding-top:18px; border-top:1px solid rgba(244,239,230,.12);
  display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,230,.4); }
footer .base .spacer{ flex:1; }
@media (max-width:820px){ footer .cols{ grid-template-columns:1fr; } }