/* ============================================
   CYBER AWARENESS — PREMIUM LIGHT THEME
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#f5f6fa;
  --bg2:#ffffff;
  --card:#ffffff;
  --card-h:#f8f9fc;
  --text:#0a0f1e;
  --gray:#556177;
  --muted:#8e9bb4;
  --accent:#6c5ce7;
  --accent2:#a855f7;
  --pink:#ec4899;
  --red:#ef4444;
  --green:#10b981;
  --orange:#f59e0b;
  --grad:linear-gradient(135deg,#6c5ce7 0%,#a855f7 40%,#ec4899 100%);
  --grad-subtle:linear-gradient(135deg,rgba(108,92,231,.08),rgba(168,85,247,.06),rgba(236,72,153,.04));
  --border:rgba(0,0,0,.05);
  --border-h:rgba(108,92,231,.15);
  --shadow:0 4px 24px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-lg:0 24px 64px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.04);
  --shadow-glow:0 0 80px rgba(108,92,231,.08);
  --r:18px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-heading:'Space Grotesk','Inter',system-ui,sans-serif;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
}

html{
  font-size:16px;
  scroll-behavior:auto;
  scrollbar-gutter:stable;
}
@supports not (scrollbar-gutter: stable){
  html{overflow-y:scroll}
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}

/* ---- GRAIN TEXTURE OVERLAY ---- */
.grain-overlay{
  position:fixed;inset:0;z-index:9998;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---- DOT GRID BACKGROUND ---- */
.dot-grid{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  opacity:.3;
  background-image:radial-gradient(circle,rgba(108,92,231,.18) 1px,transparent 1px);
  background-size:32px 32px;
}

/* ---- GRADIENT TEXT ---- */
.gradient-text{
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* ---- TAG ---- */
.tag{
  display:inline-block;
  font-size:.65rem;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;
  font-family:var(--font-heading);
  color:var(--accent);
  border:1.5px solid rgba(108,92,231,.25);
  background:rgba(108,92,231,.04);
  border-radius:50px;padding:7px 20px;
  backdrop-filter:blur(8px);
  transition:border-color .3s,background .3s;
}
.tag:hover{
  border-color:rgba(108,92,231,.4);
  background:rgba(108,92,231,.08);
}

/* ---- CUSTOM CURSOR ---- */
.cursor{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  pointer-events:none;z-index:10000;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-spring),height .3s var(--ease-spring),background .25s;
  box-shadow:0 0 12px rgba(108,92,231,.4);
}
.cursor.hover{width:44px;height:44px;background:rgba(108,92,231,.12);box-shadow:0 0 24px rgba(108,92,231,.3)}
.cursor-ring{
  position:fixed;width:40px;height:40px;border-radius:50%;
  border:1.5px solid rgba(108,92,231,.15);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease-out-expo),height .4s var(--ease-out-expo),border-color .35s;
}
.cursor-ring.hover{width:64px;height:64px;border-color:rgba(108,92,231,.4)}
.cursor-glow{
  position:fixed;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,92,231,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  filter:blur(1px);
}

/* ---- LOADER ---- */
.loader{
  position:fixed;inset:0;z-index:10001;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:24px;
  transition:opacity 1s ease;
}
.loader.done{pointer-events:none;opacity:0}
.loader-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:1}
.loader-bar{width:220px;height:3px;background:rgba(0,0,0,.05);border-radius:3px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.03)}
.loader-fill{width:0%;height:100%;background:var(--grad);border-radius:3px;transition:width .1s;box-shadow:0 0 12px rgba(108,92,231,.3)}
.loader-text{font-size:.68rem;font-weight:600;letter-spacing:5px;color:var(--muted);font-variant-numeric:tabular-nums;font-family:var(--font-heading)}

/* ---- NAVIGATION — macOS DOCK ---- */
.nav{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  z-index:1000;
  display:flex;align-items:center;gap:0;
  opacity:0;
  pointer-events:none;
}
.nav.visible{
  opacity:1;transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.nav-logo{
  position:fixed;top:28px;left:40px;
  font-size:1.1rem;font-weight:800;letter-spacing:3px;color:var(--text);
  font-family:var(--font-heading);
  opacity:0;transform:translateY(-10px);
  transition:opacity .6s,transform .6s;z-index:1001;
}
.nav-logo.visible{opacity:1;transform:translateY(0)}
.nav-logo span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* Dock bar */
.nav-dock{
  display:flex;align-items:flex-end;gap:4px;
  padding:10px 16px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(28px) saturate(2);
  -webkit-backdrop-filter:blur(28px) saturate(2);
  border:1px solid rgba(255,255,255,.5);
  border-radius:24px;
  box-shadow:
    0 12px 40px rgba(15,23,41,.1),
    0 4px 12px rgba(0,0,0,.04),
    0 0 0 1px rgba(0,0,0,.02) inset,
    0 0 80px rgba(108,92,231,.04);
  position:relative;
  transition:box-shadow .4s,background .4s;
}
.nav-dock:hover{
  background:rgba(255,255,255,.75);
  box-shadow:
    0 16px 48px rgba(15,23,41,.12),
    0 6px 16px rgba(0,0,0,.05),
    0 0 0 1px rgba(0,0,0,.02) inset,
    0 0 100px rgba(108,92,231,.06);
}
/* Single dock item */
.dock-item{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(108,92,231,.07),rgba(168,85,247,.05));
  color:var(--accent);
  position:relative;
  transition:background .25s,box-shadow .25s;
  transform-origin:50% 100%;
  will-change:transform;
}
.dock-item svg{
  width:22px;height:22px;
  transition:stroke .25s,transform .25s;
  pointer-events:none;
}
.dock-item:hover{
  background:linear-gradient(145deg,rgba(108,92,231,.14),rgba(168,85,247,.1));
  box-shadow:0 4px 16px rgba(108,92,231,.12);
}
.dock-item:hover svg{stroke:var(--text);transform:scale(1.05)}
/* Tooltip label */
.dock-item::before{
  content:attr(data-label);
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(4px);
  padding:6px 14px;
  background:rgba(10,15,30,.88);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:1.2px;font-family:var(--font-heading);
  white-space:nowrap;border-radius:9px;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease-spring);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.dock-item:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
/* Active indicator dot */
.dock-item::after{
  content:'';
  position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px rgba(108,92,231,.4);
  opacity:0;transition:opacity .3s;
}
.dock-item.active::after{opacity:1}

/* ---- FLOATING SHAPES ---- */
.floating-shapes{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.shape{position:absolute;border-radius:50%;filter:blur(100px);opacity:.12;will-change:transform}
.shape-1{width:500px;height:500px;background:#6c5ce7;top:-120px;right:-120px}
.shape-2{width:400px;height:400px;background:#ec4899;bottom:10%;left:-100px}
.shape-3{width:300px;height:300px;background:#4facfe;top:40%;right:20%}
.shape-4{width:350px;height:350px;background:#a855f7;bottom:-60px;right:30%}
.shape-5{width:250px;height:250px;background:#43e97b;top:20%;left:20%}

/* ---- SCENES (common) ---- */
.scene{position:relative;z-index:1;min-height:100vh}

/* ---- MORPH TRANSITIONS ---- */
.morph-transition{
  position:relative;
  z-index:2;
  width:100%;
  height:clamp(120px, 18vw, 220px);
  margin:-1px 0;
  pointer-events:none;
  overflow:hidden;
}
.morph-svg{
  display:block;
  width:100%;
  height:100%;
}
.morph-path{
  opacity:.55;
  mix-blend-mode:multiply;
}
.morph-path[data-index="0"]{opacity:.5}
.morph-path[data-index="1"]{opacity:.45}
.morph-path[data-index="2"]{opacity:.4}
.scene-content{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:40px;text-align:center;
}
.sticky-wrap{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ═══ SCENE 1: HERO ═══ */
.scene-hero{min-height:200vh;position:relative}
.scene-hero .tag{opacity:0}
.hero-particles{
  position:fixed;top:0;left:0;width:100%;height:100vh;
  pointer-events:none;z-index:0;
}
.hero-content{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 40px clamp(120px,16vh,170px);
  z-index:1;
}
.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(3.5rem,11vw,10rem);font-weight:700;
  line-height:.9;letter-spacing:-4px;
  margin:28px 0 32px;
}
.hero-title .word{display:inline-block;opacity:0}
.hero-sub{
  font-size:clamp(.9rem,1.4vw,1.1rem);
  color:var(--gray);max-width:520px;line-height:1.85;
  opacity:0;
  font-weight:400;
}
.hero-badges{
  display:flex;gap:14px;margin-top:40px;
  opacity:0;
}
.badge{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:10px 22px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:50px;
  font-size:.76rem;font-weight:500;color:var(--gray);
  box-shadow:0 4px 20px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.02);
  transition:transform .3s var(--ease-spring),box-shadow .3s,background .3s;
}
.badge:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.06),0 2px 6px rgba(108,92,231,.08);
  background:rgba(255,255,255,.85);
}
.badge svg{display:none}
.scroll-cue{
  position:absolute;left:50%;bottom:95px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;
  transform:translateX(-50%);
}
.scroll-cue-label{
  font-size:.85rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;
  font-family:var(--font-heading);
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.scroll-cue-chevrons{
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.scroll-cue-chevrons svg{
  width:18px;height:18px;
  color:var(--accent);
  animation:scrollChevron 2s ease-in-out infinite;
  opacity:0.3;
}
.scroll-cue-chevrons svg:nth-child(1){animation-delay:0s}
.scroll-cue-chevrons svg:nth-child(n+2){display:none}
@keyframes scrollChevron{
  0%,100%{transform:translateY(0);opacity:0.15}
  50%{transform:translateY(6px);opacity:1}
}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.6)}}

/* ═══ SCENE 2: BIG TEXT ═══ */
.scene-why{height:400vh}
/* Track is wider than the viewport; centering it in .sticky-wrap clipped the left words (WARUM, CYBER). */
.scene-why .sticky-wrap{align-items:flex-start}
.big-text-track{
  display:flex;gap:clamp(30px,5vw,80px);
  white-space:nowrap;padding:0 10vw;
  align-items:center;
}
.big-word{
  font-family:var(--font-heading);
  font-size:clamp(4rem,12vw,12rem);font-weight:700;letter-spacing:-5px;
  color:rgba(15,23,41,.04);
  transition:color .5s var(--ease-out-expo),text-shadow .5s,transform .5s var(--ease-out-expo);
  flex-shrink:0;
}
.big-word.active{
  color:var(--text);
  text-shadow:0 0 100px rgba(108,92,231,.1);
  transform:scale(1.02);
}
.big-word.accent{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ═══ SCENE 3: STATS ═══ */
.scene-stats{height:350vh}
.scene-stats .sticky-wrap{
  perspective:1400px;
  perspective-origin:50% 50%;
}
.stats-head{text-align:center;margin-bottom:52px}
.stats-head h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.5px;margin-top:16px}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:28px;max-width:820px;padding:0 40px;
  transform-style:preserve-3d;
}
.stat-card{
  background:linear-gradient(155deg,rgba(255,255,255,.85) 0%,rgba(246,247,252,.8) 40%,rgba(240,242,250,.75) 70%,rgba(235,238,247,.7) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:calc(var(--r) + 4px);
  padding:40px 36px;text-align:left;
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  box-shadow:
    0 2px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.02) inset,
    0 12px 28px -6px rgba(15,23,41,.08),
    0 32px 64px -12px rgba(108,92,231,.08);
  opacity:0;transform:translateY(60px) rotateX(-15deg) scale(.85);
  transition:box-shadow .5s var(--ease-out-expo),border-color .4s,transform .5s var(--ease-out-expo);
}
.stat-card:hover{
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.03) inset,
    0 24px 48px -8px rgba(15,23,41,.12),
    0 48px 96px -16px rgba(108,92,231,.16),
    0 0 0 1px rgba(108,92,231,.1);
  border-color:rgba(108,92,231,.25);
}
/* Shine overlay — follows mouse */
.stat-card .stat-shine{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.4) 0%,rgba(255,255,255,.1) 30%,transparent 70%);
  transition:opacity .35s ease;
}
.stat-card:hover .stat-shine{opacity:1}
/* Accent glow overlay */
.stat-card .stat-glow{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(108,92,231,.1) 0%,transparent 60%);
  transition:opacity .4s ease;
}
.stat-card:hover .stat-glow{opacity:1}
.stat-card::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.12) 35%,rgba(108,92,231,.03) 100%);
  pointer-events:none;z-index:0;
}
/* Floating decorative orb per card */
.stat-card .stat-orb{
  position:absolute;width:160px;height:160px;
  border-radius:50%;filter:blur(60px);opacity:0;
  pointer-events:none;z-index:0;
  transition:opacity .8s ease;
}
.stat-card:nth-child(1) .stat-orb{background:rgba(108,92,231,.2);top:-40px;right:-40px}
.stat-card:nth-child(2) .stat-orb{background:rgba(236,72,153,.18);top:-40px;left:-40px}
.stat-card:nth-child(3) .stat-orb{background:rgba(79,172,254,.18);bottom:-40px;right:-40px}
.stat-card:nth-child(4) .stat-orb{background:rgba(168,85,247,.18);bottom:-40px;left:-40px}
.stat-card.in-view .stat-orb{opacity:1}
.stat-number{
  font-family:var(--font-heading);
  font-size:clamp(3rem,5.5vw,4.5rem);font-weight:700;
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;position:relative;z-index:1;
}
.stat-unit{font-family:var(--font-heading);font-size:.95rem;font-weight:600;color:var(--accent);margin-top:6px;position:relative;z-index:1;letter-spacing:1px}
.stat-label{font-size:.82rem;color:var(--gray);margin-top:12px;line-height:1.7;position:relative;z-index:1}

/* ═══ SCENE 4: THREATS (aepocha-style) ═══ */
.scene-threats{min-height:100vh}
.threats-pin{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 0 48px;
  perspective:1400px;
  perspective-origin:50% 45%;
}
.threats-head{
  padding:0 max(32px, calc((100vw - 1100px)/2 + 32px));
  margin-bottom:28px;
  flex-shrink:0;
}
.threats-head h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.5px;margin-top:16px}
.threats-track{
  display:flex;gap:28px;
  width:max-content;
  padding:8px max(32px, calc((100vw - 1100px)/2 + 32px)) 20px;
  padding-right:max(48px,12vw);
  will-change:transform;
  transform-style:preserve-3d;
}
.t-card{
  flex:0 0 500px;
  --t-depth:rgba(15,23,41,.1);
  background:linear-gradient(155deg,rgba(255,255,255,.85) 0%,rgba(244,245,251,.8) 40%,rgba(238,240,249,.75) 70%,rgba(232,235,244,.7) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:calc(var(--r) + 6px);
  padding:44px 36px 40px;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:18px;
  transform-style:preserve-3d;
  box-shadow:
    0 2px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(0,0,0,.03) inset,
    0 12px 24px -6px var(--t-depth),
    0 32px 64px -12px rgba(108,92,231,.1),
    0 56px 90px -24px rgba(15,23,41,.08);
  transition:box-shadow .5s var(--ease-out-expo),border-color .4s,transform .5s var(--ease-out-expo);
}
.t-card .t-shine{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(255,255,255,.35) 0%,rgba(255,255,255,.1) 30%,transparent 70%);
  transition:opacity .35s ease;
}
.t-card:hover .t-shine{opacity:1}
.t-card .t-glare{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(300px circle at var(--mouse-x,50%) var(--mouse-y,50%),
    rgba(108,92,231,.12) 0%,transparent 60%);
  transition:opacity .4s ease;
}
.t-card:hover .t-glare{opacity:1}
.t-card::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.15) 35%,rgba(108,92,231,.04) 100%);
  pointer-events:none;z-index:0;
}
.t-card::after{
  content:'';
  position:absolute;left:12px;right:12px;bottom:0;height:40%;
  background:linear-gradient(to top,rgba(108,92,231,.06),transparent);
  border-radius:0 0 calc(var(--r) + 2px) calc(var(--r) + 2px);
  pointer-events:none;z-index:0;opacity:.85;
}
.t-card:hover{
  box-shadow:
    0 2px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(0,0,0,.05) inset,
    0 20px 40px -8px rgba(15,23,41,.16),
    0 40px 80px -16px rgba(108,92,231,.22),
    0 70px 110px -28px rgba(15,23,41,.16),
    0 0 0 1px rgba(108,92,231,.08);
  border-color:rgba(108,92,231,.25);
}
.t-card .t-icon,
.t-card h3,
.t-card p,
.t-card .t-gradient{position:relative;z-index:1}
.t-num{
  font-size:5.5rem;font-weight:900;
  position:absolute;top:-14px;right:16px;
  line-height:1;
  pointer-events:none;z-index:5;
  background:linear-gradient(135deg,rgba(108,92,231,.12),rgba(168,85,247,.14),rgba(236,72,153,.1));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:opacity .35s ease;
}
.t-card:hover .t-num{
  background:linear-gradient(135deg,rgba(108,92,231,.22),rgba(168,85,247,.25),rgba(236,72,153,.2));
  -webkit-background-clip:text;
  background-clip:text;
}
.t-icon{
  color:var(--accent);margin-bottom:6px;
  filter:drop-shadow(0 2px 6px rgba(108,92,231,.25));
  transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s;
}
.t-card:hover .t-icon{
  transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 4px 10px rgba(108,92,231,.35));
}
.t-card h3{font-family:var(--font-heading);font-size:1.35rem;font-weight:700;letter-spacing:-.3px}
.t-card p{font-size:.88rem;color:var(--gray);line-height:1.75}
.t-gradient{
  height:6px;border-radius:4px;margin-top:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .35s ease,box-shadow .35s;
}
.t-card:hover .t-gradient{
  transform:scaleX(1.02);
  box-shadow:0 3px 12px rgba(0,0,0,.18);
}

/* ═══ SCENE 4.5: SCAMMER POV ═══ */
.scene-scammer{height:600vh;position:relative;z-index:2}
.scammer-mobile-story{display:none}
.scammer-frame{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  z-index:500;
  border-radius:0;
  overflow:hidden;
  transform-origin:top center;
  pointer-events:auto;
  opacity:0;
}
.scammer-frame.is-pip{
  box-shadow:
    0 12px 48px rgba(15,23,41,.14),
    0 4px 16px rgba(108,92,231,.08),
    0 0 0 1px rgba(0,0,0,.05);
  cursor:pointer;
}
.scammer-desktop{
  width:100%;height:100%;
  background:linear-gradient(165deg,#f8f9fd 0%,#f0f1fa 35%,#ecedf8 70%,#f4f5fb 100%);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  font-family:var(--font);
}
/* Ambient particles */
.scammer-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.scammer-particles span{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:rgba(108,92,231,.18);
  animation:scamFloat 12s linear infinite;
}
.scammer-particles span:nth-child(1){left:10%;top:20%;animation-delay:0s;animation-duration:10s}
.scammer-particles span:nth-child(2){left:25%;top:60%;animation-delay:-2s;animation-duration:14s;background:rgba(168,85,247,.15)}
.scammer-particles span:nth-child(3){left:45%;top:30%;animation-delay:-4s;animation-duration:11s}
.scammer-particles span:nth-child(4){left:65%;top:70%;animation-delay:-1s;animation-duration:13s;background:rgba(108,92,231,.12)}
.scammer-particles span:nth-child(5){left:80%;top:15%;animation-delay:-3s;animation-duration:9s;background:rgba(168,85,247,.12)}
.scammer-particles span:nth-child(6){left:15%;top:80%;animation-delay:-5s;animation-duration:15s}
.scammer-particles span:nth-child(7){left:55%;top:50%;animation-delay:-7s;animation-duration:12s;background:rgba(236,72,153,.1)}
.scammer-particles span:nth-child(8){left:90%;top:40%;animation-delay:-2.5s;animation-duration:10s}
.scammer-particles span:nth-child(9){left:35%;top:90%;animation-delay:-6s;animation-duration:16s;background:rgba(108,92,231,.1)}
.scammer-particles span:nth-child(10){left:70%;top:5%;animation-delay:-8s;animation-duration:11s}
@keyframes scamFloat{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-100vh) translateX(30px);opacity:0}
}
/* Top bar */
.scammer-topbar{
  display:flex;align-items:center;gap:18px;
  padding:18px 32px;
  background:rgba(108,92,231,.03);
  border-bottom:1px solid rgba(0,0,0,.05);
  z-index:1;flex-shrink:0;
}
.scammer-dots{display:flex;gap:8px}
.scammer-dots span{width:13px;height:13px;border-radius:50%;background:rgba(0,0,0,.06)}
.scammer-dots span:nth-child(1){background:#ff5f57}
.scammer-dots span:nth-child(2){background:#ffbd2e}
.scammer-dots span:nth-child(3){background:#28ca41}
.scammer-tab{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;font-weight:500;letter-spacing:.5px;
  color:var(--gray);
}
.scammer-tab svg{color:var(--accent)}
.scammer-status{
  margin-left:auto;
  display:flex;align-items:center;gap:8px;
  font-size:.65rem;font-weight:700;letter-spacing:2px;
  color:var(--pink);text-transform:uppercase;
}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--pink)}
.status-dot.live{animation:statusPulse 1.5s ease-in-out infinite}
@keyframes statusPulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(236,72,153,.4)}
  50%{opacity:.7;box-shadow:0 0 0 8px rgba(236,72,153,0)}
}
/* Compose area */
.scammer-compose{
  flex:1;display:flex;flex-direction:column;
  padding:clamp(28px,5vh,56px) clamp(32px,8vw,120px) clamp(80px,12vh,140px);
  z-index:1;
  max-width:900px;
  margin:0 auto;width:100%;
  justify-content:center;
}
.compose-field{
  display:flex;align-items:center;gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.compose-label{
  font-size:.76rem;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  min-width:85px;flex-shrink:0;
}
.compose-value{
  font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--text);
  font-weight:400;line-height:1.6;
  white-space:pre-wrap;
}
.compose-cursor{
  display:inline-block;
  color:var(--accent);
  font-weight:300;
  font-size:1.1em;
  animation:cursorBlink 1s steps(1) infinite;
  opacity:0;
  margin-left:1px;
}
.compose-cursor.active{opacity:1}
@keyframes cursorBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
.compose-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),rgba(108,92,231,.06),transparent);
  margin:12px 0 28px;
}
.compose-body{
  flex:1;padding:0;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.compose-body .compose-value{
  font-size:clamp(.88rem,1.4vw,1.05rem);
  color:var(--gray);
  line-height:1.9;
}
.compose-actions{
  display:flex;align-items:center;gap:20px;
  margin-top:auto;padding-top:32px;
}
.compose-send{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 36px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;border:none;border-radius:14px;
  font-size:.84rem;font-weight:600;font-family:var(--font-heading);
  cursor:none;
  opacity:.2;transition:opacity .5s,transform .4s var(--ease-spring),box-shadow .4s;
}
.compose-send.ready{
  opacity:1;
  box-shadow:0 6px 28px rgba(108,92,231,.35);
}
.compose-send.ready:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 44px rgba(108,92,231,.45);
}
.compose-send.sent{
  background:linear-gradient(135deg,var(--pink),var(--red));
  box-shadow:0 6px 28px rgba(236,72,153,.35);
}
.compose-hint{
  font-size:.72rem;color:var(--muted);
  letter-spacing:.5px;
  opacity:0;transition:opacity .5s;
}
.compose-hint.visible{opacity:1;color:var(--red)}
/* PiP label */
.pip-label{
  position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:7px;
  font-size:.68rem;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0;transition:opacity .4s;
  pointer-events:none;
}
.pip-label.visible{opacity:1}
.pip-dot{width:7px;height:7px;border-radius:50%;background:var(--pink);animation:statusPulse 1.5s ease-in-out infinite}

/* ═══ SCENE 5: PHISHING ═══ */
.scene-phishing{height:500vh}
.phishing-head{text-align:center;margin-bottom:44px}
.phishing-head h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.5px;margin-top:16px}
.phishing-sub{
  font-size:clamp(.82rem,1.2vw,.95rem);
  color:var(--gray);max-width:440px;margin:14px auto 0;line-height:1.7;
  opacity:0;
}
.phishing-demo{perspective:1200px;position:relative}
.phish-mobile-panel{display:none}
/* Decorative glow behind email */
.email-glow{
  position:absolute;
  width:360px;height:360px;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(108,92,231,.10) 0%,rgba(236,72,153,.06) 50%,transparent 70%);
  filter:blur(50px);
  pointer-events:none;z-index:0;
  animation:phishGlow 6s ease-in-out infinite alternate;
}
@keyframes phishGlow{
  0%{opacity:.6;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
}
.email-mockup{
  width:min(90vw,540px);
  background:linear-gradient(165deg,rgba(255,255,255,.9) 0%,rgba(250,251,255,.85) 40%,rgba(246,247,252,.8) 100%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:calc(var(--r) + 4px);
  overflow:visible;position:relative;z-index:1;
  border:1px solid rgba(255,255,255,.5);
  transform:rotateX(5deg) rotateY(-3deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 -1px 0 rgba(0,0,0,.02) inset,
    0 16px 32px -6px rgba(15,23,41,.08),
    0 36px 72px -12px rgba(108,92,231,.06);
  transition:box-shadow .5s var(--ease-out-expo),border-color .4s;
}
/* Shine overlay for email card */
.email-shine{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:5;opacity:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 35%,transparent 70%);
  transition:opacity .35s ease;
}
.email-mockup:hover .email-shine{opacity:1}
.email-bar{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.015) 0%,rgba(0,0,0,.03) 100%);
  border-bottom:1px solid var(--border);
}
.email-bar-dots{display:flex;gap:7px}
.dot{width:11px;height:11px;border-radius:50%;transition:transform .2s}
.dot.red{background:#ff5f57}.dot.yellow{background:#ffbd2e}.dot.green{background:#28ca41}
.email-from{font-size:.76rem;color:var(--gray);font-weight:500;letter-spacing:.2px}
.email-body{padding:32px 30px 28px}
.email-subject{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;margin-bottom:18px;color:var(--text);letter-spacing:-.2px}
.email-greeting{color:var(--gray);font-size:.88rem}
.email-body p{font-size:.88rem;color:var(--gray);line-height:1.75;margin-bottom:12px}
.email-body strong{color:var(--red);font-weight:600}
.email-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;margin:18px 0 14px;
  background:linear-gradient(135deg,var(--red),#dc2626);
  color:#fff;
  border-radius:12px;font-weight:600;font-size:.85rem;font-family:var(--font-heading);
  box-shadow:0 6px 20px rgba(239,68,68,.2),0 2px 4px rgba(239,68,68,.1);
  transition:transform .3s var(--ease-spring),box-shadow .3s;
}
.email-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 28px rgba(239,68,68,.25),0 3px 8px rgba(239,68,68,.15);
}
.email-btn svg{transition:transform .2s}
.email-btn:hover svg{transform:translateX(2px)}
.email-small{font-size:.76rem;color:var(--muted);line-height:1.6}

/* Red flag annotations */
.red-flag{position:absolute;opacity:0;display:flex;align-items:center;gap:0}
.rf-line{
  width:48px;height:2px;position:relative;
  background:linear-gradient(90deg,var(--red),rgba(239,68,68,.3));
}
.rf-line-dot{
  position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
  animation:rfPulse 2s ease-in-out infinite;
}
@keyframes rfPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.15)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,.08)}
}
.rf-tag{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(239,68,68,.18);
  border-radius:10px;padding:9px 16px;
  font-size:.73rem;font-weight:600;color:var(--red);
  white-space:nowrap;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 4px 16px rgba(239,68,68,.08),0 1px 3px rgba(0,0,0,.04);
  transition:transform .25s,box-shadow .25s,background .25s;
}
.rf-tag:hover{
  transform:translateX(3px);
  box-shadow:0 6px 20px rgba(239,68,68,.12),0 2px 5px rgba(0,0,0,.06);
  background:rgba(255,255,255,1);
}
.rf-tag svg{flex-shrink:0;opacity:.8}
.rf-1{top:14px;right:-220px}
.rf-2{top:38%;right:-250px}
.rf-3{bottom:28%;right:-230px}
.rf-4{bottom:10%;right:-250px}

/* ═══ SCENE 6: PASSWORDS ═══ */
.scene-passwords{height:400vh}
.pw-container{max-width:600px;padding:0 40px;width:100%;text-align:center}
.pw-title{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;margin:16px 0 52px;letter-spacing:-.5px}
.pw-levels{display:flex;flex-direction:column;gap:28px;text-align:left}
.pw-level{opacity:0;transform:translateX(-40px)}
.pw-info{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.pw-example{font-family:'SF Mono','Cascadia Code','Courier New',monospace;font-size:.88rem;font-weight:600;color:var(--text)}
.pw-time{font-size:.78rem;color:var(--gray)}
.pw-bar-bg{width:100%;height:7px;background:rgba(0,0,0,.04);border-radius:7px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.03)}
.pw-bar{width:0%;height:100%;background:var(--c);border-radius:7px;transition:width 1.4s var(--ease-out-expo);box-shadow:0 0 12px color-mix(in srgb, var(--c) 30%, transparent)}
.pw-bar.fill{width:var(--w)}
.pw-tip{
  margin-top:52px;
  display:flex;align-items:flex-start;gap:14px;
  background:rgba(108,92,231,.03);
  backdrop-filter:blur(12px);
  border:1px solid rgba(108,92,231,.1);
  border-radius:14px;padding:20px 24px;
  font-size:.82rem;color:var(--accent);line-height:1.7;
  text-align:left;opacity:0;
  transition:border-color .3s,box-shadow .3s;
}
.pw-tip:hover{
  border-color:rgba(108,92,231,.2);
  box-shadow:0 8px 24px rgba(108,92,231,.06);
}
.pw-tip svg{flex-shrink:0;margin-top:2px}

/* ═══ SCENE 7: S-T-O-P ═══ */
.scene-stop{height:400vh}
.stop-container{text-align:center;padding:0 40px;max-width:900px}
.stop-sign{margin-bottom:24px;opacity:0}
.stop-heading{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;margin-bottom:64px;letter-spacing:-.5px}
.stop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stop-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r);
  padding:40px 22px;text-align:center;
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(60px);
  transition:box-shadow .4s var(--ease-out-expo),border-color .3s,transform .4s var(--ease-out-expo);
}
.stop-card:hover{
  box-shadow:var(--shadow-lg),0 0 60px rgba(108,92,231,.06);
  border-color:rgba(108,92,231,.2);
  transform:translateY(-4px);
}
.stop-icon{color:var(--accent);margin-bottom:16px}
.stop-letter{
  font-family:var(--font-heading);
  font-size:3.2rem;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
  line-height:1;margin-bottom:12px;
}
.stop-word{font-family:var(--font-heading);font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:8px}
.stop-desc{font-size:.76rem;color:var(--gray);line-height:1.6}

/* ═══ SCENE 8: MORPH / CURVEMODE DEMO ═══ */
.scene-morph-demo{height:400vh}
.morph-demo-head{text-align:center;padding:0 24px;margin-bottom:40px}
.morph-demo-head h2{font-family:var(--font-heading);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:700;margin:12px 0 16px;letter-spacing:-.5px}
.morph-demo-sub{font-size:.88rem;color:var(--gray);max-width:520px;margin:0 auto;line-height:1.6}
.morph-demo-sub code{
  font-family:'SF Mono',Menlo,monospace;font-size:.78rem;
  background:rgba(108,92,231,.08);color:var(--accent);
  padding:2px 7px;border-radius:5px;
}
.morph-demo-stage{
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.morph-demo-canvas{
  width:min(420px,80vw);aspect-ratio:1;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
  position:relative;
  transition:border-color .4s,box-shadow .4s var(--ease-out-expo);
}
.morph-demo-canvas:hover{border-color:rgba(108,92,231,.15);box-shadow:var(--shadow-lg),0 0 80px rgba(108,92,231,.05)}
.morph-demo-canvas svg{width:100%;height:100%;display:block}

/* ═══ SCENE: PHISHING METHODEN — CARD STACK (Akten) ═══ */
.scene-methoden{
  position:relative;
  padding-bottom:92px;
  overflow:clip;
  isolation:isolate;
}
.scene-methoden::after{
  display:none;
}
.methoden-header{
  text-align:center;
  padding:86px 32px 42px;
  position:relative;
  z-index:2;
}
.methoden-header h2{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin-top:12px}
.methoden-sub{font-size:clamp(.82rem,1.2vw,1rem);color:var(--gray);max-width:560px;margin:12px auto 0;line-height:1.7}

.card-stack{
  position:relative;
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:0 28px 56px;
  perspective:1400px;
  z-index:2;
}

.stack-card{
  position:relative;
  top:auto;
  width:100%;
  margin-bottom:32px;
  transform-origin:center top;
  will-change:transform,filter,opacity;
  padding-top:34px;/* space for folder tab */
}
.stack-card:nth-child(1),
.stack-card:nth-child(2),
.stack-card:nth-child(3),
.stack-card:nth-child(4){--card-lean:0deg;--card-shift:0px}
.stack-card:last-child{
  margin-bottom:0;
}
/* ── Folder tab that sticks out ── */
.folder-tab{
  position:absolute;top:0;left:22px;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 22px 10px;
  font-size:.68rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-family:var(--font-heading);
  color:#fff;
  background:linear-gradient(135deg,var(--folder-color),var(--folder-color2));
  border-radius:8px 8px 0 0;
  z-index:3;
  overflow:hidden;
  box-shadow:0 -2px 18px color-mix(in srgb, var(--folder-color) 22%, transparent);
}
.folder-tab::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-130%);
  opacity:.9;
  pointer-events:none;
  animation:methodTabIdle 5.6s var(--ease-out-expo) infinite;
}
.stack-card.is-active .folder-tab::after,
.stack-card:hover .folder-tab::after{
  animation:methodTabFlash 1.45s var(--ease-out-expo);
}
.stack-card:nth-child(2) .folder-tab::after{animation-delay:.8s}
.stack-card:nth-child(3) .folder-tab::after{animation-delay:1.6s}
.stack-card:nth-child(4) .folder-tab::after{animation-delay:2.4s}
.folder-tab span{
  font-weight:900;font-size:.8rem;opacity:.7;
}
/* ── Folder body ── */
.stack-card-inner{
  background:
    linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035)),
    radial-gradient(circle at 16% 18%,color-mix(in srgb, var(--folder-color) 18%, transparent),transparent 34%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.5);
  border-top:2.5px solid color-mix(in srgb, var(--folder-color) 78%, #fff);
  border-left:1px solid color-mix(in srgb, var(--folder-color) 45%, rgba(255,255,255,.2));
  border-radius:0 8px 8px 8px;
  padding:46px 46px 40px;
  position:relative;
  overflow:hidden;
  min-height:280px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,.48fr);
  align-items:center;
  column-gap:34px;
  box-shadow:0 8px 40px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
  transition:box-shadow .4s var(--ease-out-expo), transform .35s var(--ease-out-expo), border-color .3s;
  transform:none;
}
.stack-card:hover .stack-card-inner{
  transform:translateY(-6px);
  box-shadow:0 18px 56px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.08), 0 0 70px color-mix(in srgb, var(--folder-color) 16%, transparent);
  border-color:color-mix(in srgb, var(--folder-color) 46%, rgba(255,255,255,.18));
}
.stack-card.is-active .stack-card-inner{
  border-color:color-mix(in srgb, var(--folder-color) 52%, rgba(255,255,255,.16));
  box-shadow:
    0 22px 64px rgba(0,0,0,.24),
    0 0 0 1px color-mix(in srgb, var(--folder-color) 20%, transparent),
    0 0 80px color-mix(in srgb, var(--folder-color) 18%, transparent);
}
/* scanning accent line */
.stack-card-inner::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 0%,transparent 38%,color-mix(in srgb, var(--folder-color) 28%, transparent) 48%,rgba(255,255,255,.16) 50%,transparent 62%,transparent 100%);
  transform:translateX(-120%);
  opacity:.65;
  pointer-events:none;
  z-index:1;
  animation:methodScanIdle 6.8s var(--ease-out-expo) infinite;
}
.stack-card.is-active .stack-card-inner::before,
.stack-card:hover .stack-card-inner::before{animation:methodScan 1.35s var(--ease-out-expo)}
@keyframes methodScan{to{transform:translateX(120%)}}
@keyframes methodTabFlash{to{transform:translateX(130%)}}
@keyframes methodScanIdle{
  0%,58%,100%{transform:translateX(-120%);opacity:0}
  68%{opacity:.58}
  84%{transform:translateX(120%);opacity:0}
}
@keyframes methodTabIdle{
  0%,62%,100%{transform:translateX(-130%);opacity:0}
  72%{opacity:.7}
  88%{transform:translateX(130%);opacity:0}
}
.stack-card:nth-child(2) .stack-card-inner::before{animation-delay:.9s}
.stack-card:nth-child(3) .stack-card-inner::before{animation-delay:1.8s}
.stack-card:nth-child(4) .stack-card-inner::before{animation-delay:2.7s}
.stack-card-inner > :not(.stack-card-num){position:relative;z-index:2}
.stack-card-inner .stack-card-icon,
.stack-card-inner h3,
.stack-card-inner p,
.stack-card-inner .stack-card-badge{
  grid-column:1;
}
.stack-card-inner::after{
  z-index:0;
}
.stack-card-inner .stack-card-badge{justify-self:start}
.stack-card-inner::selection{background:var(--folder-color);color:#fff}
.stack-card-inner:has(.stack-card-badge)::marker{color:var(--folder-color)}
.stack-card-inner .stack-card-num::after{
  content:'';
}
.stack-card-inner .stack-card-icon::after{
  content:'';
  position:absolute;
  left:calc(100% + 34px);
  top:50%;
  width:170px;
  height:170px;
  transform:translateY(-50%);
  border:1px solid color-mix(in srgb, var(--folder-color) 34%, rgba(255,255,255,.14));
  border-radius:50%;
  background:
    radial-gradient(circle,color-mix(in srgb, var(--folder-color) 16%, transparent) 0 2px,transparent 3px),
    conic-gradient(from 90deg,color-mix(in srgb, var(--folder-color) 42%, transparent),transparent 24%,rgba(255,255,255,.08) 38%,transparent 58%,color-mix(in srgb, var(--folder-color2) 36%, transparent));
  background-size:18px 18px,100% 100%;
  opacity:.78;
  filter:drop-shadow(0 0 28px color-mix(in srgb, var(--folder-color) 22%, transparent));
  animation:methodRadar 8s linear infinite;
  transform-origin:50% 50%;
}
.stack-card-inner .stack-card-icon::before{
  content:'';
  position:absolute;
  left:calc(100% + 84px);
  top:50%;
  width:70px;
  height:70px;
  transform:translateY(-50%);
  border-radius:14px;
  background:
    linear-gradient(90deg,color-mix(in srgb, var(--folder-color) 50%, transparent) 2px,transparent 2px) 0 0/16px 16px,
    linear-gradient(color-mix(in srgb, var(--folder-color) 50%, transparent) 2px,transparent 2px) 0 0/16px 16px;
  opacity:.7;
  z-index:1;
  animation:methodGridPulse 2.8s ease-in-out infinite;
}
/* Subtle paper texture lines */
.stack-card-inner::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 34px,
    rgba(0,0,0,.015) 34px,
    rgba(0,0,0,.015) 35px
  );
  pointer-events:none;
  border-radius:0 8px 8px 8px;
}
.stack-card-num{
  position:absolute;top:18px;right:28px;
  font-size:4.6rem;font-weight:900;
  color:rgba(0,0,0,.04);
  line-height:1;letter-spacing:-2px;
  user-select:none;
  transition:opacity .35s ease,transform .35s var(--ease-out-expo);
}
.stack-card.is-active .stack-card-num{
  opacity:.42;
  transform:translateY(-2px) scale(1.04);
}
.stack-card-icon{
  color:color-mix(in srgb, var(--folder-color) 60%, #73f5c8);
  margin-bottom:18px;
  display:inline-block;
  opacity:.85;
  filter:drop-shadow(0 0 16px color-mix(in srgb, var(--folder-color) 26%, transparent));
  transition:transform .35s var(--ease-out-expo),filter .35s ease;
}
.stack-card.is-active .stack-card-icon{
  transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 0 24px color-mix(in srgb, var(--folder-color) 42%, transparent));
}
.stack-card h3{
  font-family:var(--font-heading);
  font-size:1.35rem;font-weight:700;
  margin-bottom:10px;letter-spacing:-.3px;
  color:var(--text);
}
.stack-card p{
  font-size:.88rem;color:var(--gray);
  line-height:1.75;max-width:480px;
}
.stack-card-badge{
  display:inline-block;margin-top:20px;
  font-size:.65rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  font-family:var(--font-heading);
  color:var(--accent);
  background:color-mix(in srgb, var(--folder-color) 9%, transparent);
  border:1.5px solid color-mix(in srgb, var(--folder-color) 28%, rgba(255,255,255,.16));border-radius:4px;
  padding:6px 18px;
  transition:background .3s,border-color .3s;
}
.stack-card:hover .stack-card-badge{
  background:color-mix(in srgb, var(--folder-color) 16%, transparent);
  border-color:color-mix(in srgb, var(--folder-color) 46%, rgba(255,255,255,.2));
}
.stack-card.is-active .stack-card-badge{
  background:color-mix(in srgb, var(--folder-color) 18%, transparent);
  border-color:color-mix(in srgb, var(--folder-color) 50%, rgba(255,255,255,.2));
}
@keyframes methodRadar{
  from{rotate:0deg;filter:drop-shadow(0 0 20px color-mix(in srgb, var(--folder-color) 14%, transparent))}
  to{rotate:360deg;filter:drop-shadow(0 0 34px color-mix(in srgb, var(--folder-color) 28%, transparent))}
}
@keyframes methodGridPulse{
  0%,100%{opacity:.42;scale:.94}
  50%{opacity:.9;scale:1.04}
}
@media(prefers-reduced-motion:reduce){
  .folder-tab::after,
  .stack-card-inner::before,
  .stack-card-inner .stack-card-icon::before,
  .stack-card-inner .stack-card-icon::after{
    animation:none!important;
  }
}

/* Scrubbed Bento Gallery — Methoden */
.scene-methoden{
  height:520vh;
  min-height:0;
  padding-bottom:0;
  overflow:visible;
}
.methoden-sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px,1.6vh,16px);
  padding:clamp(58px,7vh,72px) clamp(18px,4vw,56px) calc(124px + env(safe-area-inset-bottom,0px));
  overflow:hidden;
}
.methoden-sticky .methoden-header{
  flex:0 0 auto;
  width:min(1040px,100%);
  margin:0 auto;
  padding:0;
  text-align:left;
}
.methoden-sticky .methoden-header h2{
  font-size:clamp(1.5rem,3.1vw,3.15rem);
  line-height:1;
}
.methoden-sticky .methoden-sub{
  margin-left:0;
  max-width:620px;
  font-size:clamp(.76rem,1vw,.9rem);
  line-height:1.45;
}
.methoden-sticky .card-stack{
  width:min(960px,100%);
  max-width:none;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(176px,1fr));
  gap:10px;
  height:clamp(370px,46vh,430px);
  perspective:1400px;
  transform-style:preserve-3d;
}
/* Swipe-Deck-Layout (JS hängt .is-deck an, sobald initMethoden läuft).
   Alle Karten liegen dabei zentriert übereinander und werden per Scroll
   einzeln nach links weggeworfen — wie ein digitales Karten-Deck. */
.methoden-sticky .card-stack.is-deck{
  display:block;
  position:relative;
  width:min(440px,86%);
  height:clamp(380px,52vh,470px);
}
.methoden-sticky .card-stack.is-deck .stack-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  grid-area:auto;
}
.methoden-sticky .stack-card{
  position:relative;
  margin:0;
  padding:0;
  min-width:0;
  min-height:0;
  transform-origin:center 60%;
  will-change:transform,opacity,filter;
  /* Blur/desaturation is driven by --method-mute (0 = focused, 1 = fully muted).
     Doing this in CSS keeps the filter string off the JS hot path and lets the
     browser optimise the per-frame paint instead of re-parsing it each tick. */
  filter:
    blur(calc(var(--method-mute,0) * 2.5px))
    saturate(calc(1 - var(--method-mute,0) * 0.25))
    brightness(calc(1 - var(--method-mute,0) * 0.32));
}
.methoden-sticky .card-stack:not(.is-deck) .stack-card:nth-child(1){grid-area:1/1/2/2}
.methoden-sticky .card-stack:not(.is-deck) .stack-card:nth-child(2){grid-area:2/1/3/2}
.methoden-sticky .card-stack:not(.is-deck) .stack-card:nth-child(3){grid-area:1/2/2/3}
.methoden-sticky .card-stack:not(.is-deck) .stack-card:nth-child(4){grid-area:2/2/3/3}
.methoden-sticky .folder-tab{
  top:12px;
  left:12px;
  border-radius:6px;
  z-index:5;
  color:#050505;
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--folder-color) 42%,#fff))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  padding:7px 18px 8px;
  font-size:.6rem;
}
.methoden-sticky .stack-card-inner{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:0;
  padding:clamp(14px,1.8vw,20px);
  padding-top:48px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at var(--bento-x,50%) var(--bento-y,45%),color-mix(in srgb,var(--folder-color) 22%,transparent),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:0 18px 46px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.methoden-sticky .stack-card.is-focus .stack-card-inner{
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-inline:clamp(14px,1.8vw,20px);
  padding-top:48px;
  padding-bottom:clamp(14px,1.8vw,20px);
  background:
    radial-gradient(circle at var(--bento-x,50%) var(--bento-y,45%),color-mix(in srgb,var(--folder-color) 32%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(20,20,20,.94),rgba(12,12,12,.9));
}
.methoden-sticky .stack-card.is-focus .stack-card-inner{
  border-color:color-mix(in srgb,var(--folder-color) 58%,rgba(255,255,255,.2));
  box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 54px color-mix(in srgb,var(--folder-color) 14%,transparent),0 1px 0 rgba(255,255,255,.1) inset;
}
.methoden-sticky .stack-card-inner::before{
  animation:none;
  opacity:calc(.15 + var(--method-detail,0) * .55);
  transform:translateX(calc(-120% + var(--method-focus,0) * 240%));
}
.methoden-sticky .stack-card-inner::after{
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/34px 34px;
  opacity:.45;
}
.methoden-sticky .stack-card-num{
  top:14px;
  right:16px;
  font-size:clamp(2rem,3.8vw,3.5rem);
  color:rgba(255,255,255,.035);
  opacity:.7;
}
.methoden-sticky .stack-card-icon{
  margin:0 0 8px;
  color:color-mix(in srgb,var(--folder-color) 62%,#fff);
  transform:translateY(calc(var(--method-focus,0) * -2px)) scale(calc(1 + var(--method-focus,0) * .08));
  transform-origin:center center;
  transition:none;
}
.methoden-sticky .stack-card-icon svg{
  width:clamp(24px,2.3vw,30px);
  height:clamp(24px,2.3vw,30px);
  stroke-width:1.55;
}
.methoden-sticky .stack-card-icon::before,
.methoden-sticky .stack-card-icon::after{
  display:none;
}
.methoden-sticky .stack-card h3{
  width:min(380px,100%);
  max-width:none;
  margin:0;
  font-size:clamp(.9rem,1.2vw,1.1rem);
  line-height:1.14;
  transform:none;
}
.methoden-sticky .stack-card p{
  width:min(390px,100%);
  max-width:none;
  margin-top:6px;
  font-size:clamp(.68rem,.78vw,.76rem);
  line-height:1.42;
  color:rgba(255,255,255,.76);
  opacity:calc(.82 + var(--method-detail,0) * .18);
  transform:none;
  display:block;
  flex:0 0 auto;
  max-height:calc(1.42em * 2);
  overflow:hidden;
}
.methoden-sticky .stack-card-badge{
  flex:0 0 auto;
  margin-top:8px;
  font-size:.54rem;
  padding:4px 12px;
  opacity:calc(.64 + var(--method-detail,0) * .36);
  transform:none;
}
.methoden-sticky .stack-card.is-focus .stack-card-badge{
  align-self:center;
}
.methoden-sticky .stack-card:not(.is-focus) p,
.methoden-sticky .stack-card:not(.is-focus) .stack-card-badge{
  opacity:.64;
  transform:none;
}
.methoden-sticky .stack-card.is-focus{
  z-index:20;
}
.methoden-sticky .stack-card.is-muted{
  pointer-events:none;
}
.methoden-sticky .stack-card.is-muted .stack-card-inner{
  border-color:rgba(255,255,255,.08);
}
.methoden-sticky .method-progress{
  position:absolute;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:min(360px,54vw);
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
  z-index:30;
}
.methoden-sticky .method-progress::before{
  content:'';
  position:absolute;
  inset:0;
  width:var(--method-progress,0%);
  background:linear-gradient(90deg,#fff,#73f5c8,#ff6b4a);
  border-radius:inherit;
}

@media(max-width:768px){
  .scene-methoden{height:auto;min-height:100vh;padding-bottom:80px}
  .methoden-sticky{position:relative;height:auto;overflow:visible;padding:84px 18px 110px}
  .methoden-sticky .card-stack{display:flex;flex-direction:column;height:auto;gap:18px;width:100%}
  .methoden-sticky .card-stack.is-deck{display:flex;position:static;width:100%;height:auto}
  .methoden-sticky .card-stack.is-deck .stack-card{position:relative;inset:auto;width:100%;height:auto}
  .methoden-sticky .stack-card{transform:none!important;opacity:1!important;filter:none!important}
  .methoden-sticky .stack-card-inner{min-height:260px}
  .methoden-sticky .stack-card p,
  .methoden-sticky .stack-card-badge{opacity:1;transform:none}
  .methoden-sticky .method-progress{display:none}
}

/* ═══ SCENE: MFA (Bento → Detail → Bento) ═══ */
.scene-mfa{position:relative}
.mfa-sticky{
  height:100vh;
  width:100%;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mfa-header{
  grid-area:2/2/4/3;
  text-align:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(8px,1.4vh,14px) 18px clamp(12px,2vh,24px);
  pointer-events:none;
}
.mfa-header .tag{
  font-size:.58rem;
  letter-spacing:4px;
  padding:8px 24px;
  margin-bottom:clamp(12px,2vh,18px);
}
.mfa-header h2{
  font-family:var(--font-heading);
  font-size:clamp(2.25rem,4.7vw,3.7rem);
  font-weight:700;
  margin-top:0;
  line-height:.98;
  max-width:420px;
}
.mfa-sub{display:none}

/* Bento grid — collage layout */
.mfa-stage{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  grid-template-rows:minmax(220px,1.05fr) .86fr 1.28fr;
  gap:8px;
  width:82%;max-width:960px;height:min(72vh,560px);
  position:relative;
  will-change:transform,opacity;
  perspective:1400px;
  transform-style:preserve-3d;
}
.mfa-card{
  overflow:hidden;min-width:0;min-height:0;border-radius:calc(var(--r) + 6px);
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform,width,height,top,left,border-radius;
}
.mfa-card[data-index="0"]{grid-area:1/1/4/2}
.mfa-card[data-index="1"]{grid-area:1/2/2/4;min-height:220px}
.mfa-card[data-index="2"]{grid-area:2/3/3/4}
.mfa-card[data-index="3"]{
  grid-area:3/3/4/4;
  width:100%;
  height:100%;
  justify-self:stretch;
  align-self:stretch;
}
.mfa-card-inner{
  height:100%;
  background:linear-gradient(155deg,rgba(255,255,255,.85) 0%,rgba(246,247,252,.8) 40%,rgba(240,242,250,.75) 70%,rgba(235,238,247,.7) 100%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:calc(var(--r) + 6px);
  padding:clamp(14px,2vh,22px) clamp(12px,1.5vw,18px);
  display:flex;flex-direction:column;gap:6px;
  justify-content:center;align-items:center;text-align:center;
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 -1px 0 rgba(0,0,0,.02) inset,
    0 12px 28px -6px rgba(15,23,41,.08),
    0 32px 64px -12px rgba(108,92,231,.08);
  transition:
    background .55s var(--ease-out-expo),
    border-color .55s var(--ease-out-expo),
    box-shadow .55s var(--ease-out-expo),
    backdrop-filter .55s var(--ease-out-expo),
    -webkit-backdrop-filter .55s var(--ease-out-expo);
}
.mfa-card-icon{color:var(--accent);filter:drop-shadow(0 2px 6px rgba(108,92,231,.25))}
.mfa-card-icon svg{width:28px;height:28px}
/* Authenticator big card */
.mfa-card[data-index="0"] .mfa-card-inner{
  gap:0;position:relative;overflow:hidden;
  transform:translateZ(0);
}
.mfa-card[data-index="0"] .auth-logo-wrap{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  filter:none;z-index:3;pointer-events:none;
}
.mfa-card[data-index="0"] .auth-logo-wrap .auth-logo{
  display:block;width:120px;height:120px;will-change:transform;
}

/* ── Auth App Mockup (hidden by default) ── */
.auth-app-mockup{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;
  padding:20px 24px;gap:12px;
  background:rgba(255,255,255,.98);
  opacity:0;z-index:2;pointer-events:none;
  will-change:opacity,transform;
}

/* iPhone hardware elements — invisible in bento, visible when expanded */
.mfa-card[data-index="0"]:not(.is-expanded) .iphone-btn,
.mfa-card[data-index="0"]:not(.is-expanded) .iphone-island,
.mfa-card[data-index="0"]:not(.is-expanded) .iphone-statusbar{
  display:none;
}
/* In bento, screen/content wrappers are transparent — content flows like before */
.mfa-card[data-index="0"]:not(.is-expanded) .iphone-screen,
.mfa-card[data-index="0"]:not(.is-expanded) .iphone-content{
  display:contents;
}

/* ── iPhone look (only when card is expanded centred) ── */
/* Expanded layout starts first; the old glass chrome is cleared later via .is-phone-ready */
.mfa-card[data-index="0"].is-expanded .mfa-card-inner{
  padding:0 !important;
}
.mfa-card[data-index="0"].is-phone-ready .mfa-card-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  border-radius:0 !important;
}
/* Keep the Authenticator mark visible after it morphs into the phone header */
.mfa-card[data-index="0"].is-expanded .auth-logo-wrap{
  opacity:1 !important;
  visibility:visible;
  z-index:12;
}
.mfa-card[data-index="0"].is-expanded .auth-logo{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
/* Allow side hardware buttons to poke beyond the card bounds */
.mfa-card[data-index="0"].is-expanded{
  overflow:visible !important;
  border-radius:0 !important;
}
.mfa-card[data-index="0"].is-expanded::before,
.mfa-card[data-index="0"].is-expanded::after{
  content:'';
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  z-index:-1;
}
.mfa-card[data-index="0"].is-expanded::before{
  display:none;
}
.mfa-card[data-index="0"].is-expanded::after{
  left:50%;bottom:-2%;
  width:72%;height:9%;
  background:rgba(0,0,0,.58);
  filter:blur(18px);
  opacity:.62;
  transform:translateX(-50%);
}
.mfa-card[data-index="0"].is-expanded .auth-app-mockup{
  /* The mockup itself becomes the phone body (bezel) */
  padding:0;
  background:
    linear-gradient(122deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 14%,transparent 24%),
    linear-gradient(160deg,#33343c 0%,#121219 36%,#07070a 72%,#000 100%);
  border-radius:clamp(46px,4.1vw,64px);
  box-shadow:
    0 44px 110px -24px rgba(0,0,0,.76),
    /* bezel highlight */
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 1px 0 rgba(255,255,255,.34) inset,
    0 -1px 0 rgba(0,0,0,.8) inset;
  overflow:hidden;
  background-clip:padding-box;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:box-shadow .55s var(--ease-out-expo),background .55s var(--ease-out-expo);
}
.mfa-card[data-index="0"].is-expanded .auth-app-mockup::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:20;
  background:
    linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 18%,transparent 34%,transparent 70%,rgba(255,255,255,.08) 100%);
  mix-blend-mode:screen;
  opacity:.62;
}
/* Screen inside the bezel */
.mfa-card[data-index="0"].is-expanded .iphone-screen{
  position:absolute;
  inset:clamp(9px,.82vw,13px);
  border-radius:clamp(37px,3.35vw,54px);
  background:
    radial-gradient(circle at 18% 24%,rgba(108,92,231,.16),transparent 34%),
    linear-gradient(180deg,#171720 0%,#09090d 100%);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 20px 55px rgba(0,0,0,.28) inset;
}
.mfa-card[data-index="0"].is-expanded .iphone-screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 22%,transparent 74%,rgba(255,255,255,.035));
  mix-blend-mode:screen;
}
.mfa-card[data-index="0"].is-expanded .iphone-screen::after{
  content:'';
  position:absolute;
  left:-45%;top:0;
  width:32%;height:100%;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-16deg) translateX(-120%);
  animation:authScreenSweep 5.6s var(--ease-out-expo) infinite;
  opacity:.72;
}
@keyframes authScreenSweep{
  0%,48%,100%{transform:skewX(-16deg) translateX(-120%);opacity:0}
  60%{opacity:.66}
  82%{transform:skewX(-16deg) translateX(520%);opacity:0}
}
/* Dynamic Island */
.mfa-card[data-index="0"].is-expanded .iphone-island{
  display:block;
  position:absolute;
  top:clamp(10px,1vw,14px);left:50%;transform:translateX(-50%);
  width:clamp(92px,9vw,118px);height:clamp(26px,2.6vw,34px);
  background:#000;
  border-radius:999px;
  z-index:10;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 2px 6px rgba(0,0,0,.6);
}
.iphone-island-dot{
  position:absolute;top:50%;right:14%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#3a3a40 0%,#0a0a0c 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
/* iOS status bar */
.mfa-card[data-index="0"].is-expanded .iphone-statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,1.4vw,20px) clamp(22px,2vw,28px) 0;
  height:clamp(44px,4.2vw,56px);
  color:#fff;
  font-family:'Inter','SF Pro Display',system-ui,sans-serif;
  font-weight:600;
  font-size:clamp(.78rem,.95vw,.95rem);
  letter-spacing:-.2px;
  flex-shrink:0;
}
.ip-time{padding-left:6px}
.ip-status-icons{display:inline-flex;align-items:center;gap:6px;padding-right:6px}
.ip-battery{
  position:relative;display:inline-block;
  width:22px;height:11px;border:1px solid rgba(255,255,255,.55);
  border-radius:3px;padding:1px;
}
.ip-battery::after{
  content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:2px;height:5px;background:rgba(255,255,255,.55);border-radius:0 1px 1px 0;
}
.ip-battery-fill{
  display:block;width:80%;height:100%;background:#fff;border-radius:1px;
}

/* Side hardware buttons */
.mfa-card[data-index="0"].is-expanded .iphone-btn{
  display:block;position:absolute;background:linear-gradient(90deg,#0a0a0c,#2a2a30 50%,#0a0a0c);
  border-radius:2px;z-index:1;
}
.mfa-card[data-index="0"].is-expanded .iphone-btn-mute{
  left:0;top:14%;width:2px;height:28px;
}
.mfa-card[data-index="0"].is-expanded .iphone-btn-vol-up{
  left:0;top:23%;width:2px;height:48px;
}
.mfa-card[data-index="0"].is-expanded .iphone-btn-vol-dn{
  left:0;top:33%;width:2px;height:48px;
}
.mfa-card[data-index="0"].is-expanded .iphone-btn-power{
  right:0;top:22%;width:2px;height:68px;
}

/* App content area below status bar */
.mfa-card[data-index="0"].is-expanded .iphone-content{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
  padding:clamp(16px,1.55vw,22px) clamp(18px,1.75vw,24px) clamp(24px,2.6vh,32px);
  gap:clamp(9px,.88vw,13px);
  justify-content:flex-start;
  color:#fff;
  position:relative;z-index:1;
}
.mfa-card[data-index="0"].is-expanded .auth-app-header{
  min-height:42px;
  padding:0 clamp(44px,4.1vw,50px) clamp(10px,.9vw,14px) 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(5px,.65vw,7px);
}
.mfa-card[data-index="0"].is-expanded .auth-app-header .mfa-badge{
  display:none;
}
.mfa-card[data-index="0"].is-expanded .auth-app-title{
  min-width:0;
  font-size:clamp(1rem,1.08vw,1.12rem);color:#fff;
  line-height:1;
  font-weight:800;
  letter-spacing:-.25px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mfa-card[data-index="0"].is-expanded .mfa-badge{
  flex:0 0 auto;
  font-size:.42rem;padding:3px 5px;border-radius:5px;
  letter-spacing:.9px;
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);
}
.mfa-card[data-index="0"].is-expanded .auth-account{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 26%,rgba(115,245,200,.08),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,0) 36%),
    linear-gradient(135deg,rgba(34,34,43,.86),rgba(16,16,22,.78));
  border:1px solid rgba(255,255,255,.10);
  padding:clamp(8px,.75vw,10px) clamp(9px,.8vw,12px);
  gap:clamp(8px,.72vw,10px);
  border-radius:12px;
  flex:0 0 clamp(58px,10vh,72px);
  min-height:58px;
  box-shadow:0 12px 26px rgba(0,0,0,.20),0 1px 0 rgba(255,255,255,.065) inset;
  transform-origin:50% 50%;
}
.mfa-card[data-index="0"].is-expanded .auth-account::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
}
.mfa-card[data-index="0"].is-expanded .auth-account::after{
  content:'';
  position:absolute;
  left:-30%;top:0;
  width:28%;height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:skewX(-20deg) translateX(-130%);
  opacity:0;
}
.mfa-card[data-index="0"].is-expanded .auth-account:nth-of-type(2)::after{animation:authRowFlash 4.8s 1.0s var(--ease-out-expo) infinite}
.mfa-card[data-index="0"].is-expanded .auth-account:nth-of-type(3)::after{animation:authRowFlash 4.8s 1.25s var(--ease-out-expo) infinite}
.mfa-card[data-index="0"].is-expanded .auth-account:nth-of-type(4)::after{animation:authRowFlash 4.8s 1.5s var(--ease-out-expo) infinite}
@keyframes authRowFlash{
  0%,62%,100%{transform:skewX(-20deg) translateX(-130%);opacity:0}
  72%{opacity:.65}
  90%{transform:skewX(-20deg) translateX(560%);opacity:0}
}
.mfa-card[data-index="0"].is-expanded .auth-account-info{flex:1 1 auto;min-width:0}
.mfa-card[data-index="0"].is-expanded .auth-account-icon{
  width:clamp(26px,2vw,30px);height:clamp(26px,2vw,30px);
  border-radius:8px;flex-shrink:0;overflow:hidden;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 16px rgba(0,0,0,.16);
}
.mfa-card[data-index="0"].is-expanded .auth-account-icon img{
  width:100%;height:100%;display:block;object-fit:cover;
}
.mfa-card[data-index="0"].is-expanded .auth-account-icon--microsoft{
  display:flex;align-items:center;justify-content:center;
  background:#fff;
}
.mfa-card[data-index="0"].is-expanded .ms-logo{display:block;width:18px;height:18px}
.mfa-card[data-index="0"].is-expanded .auth-account-name{
  font-size:clamp(.62rem,.7vw,.76rem);color:#fff;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mfa-card[data-index="0"].is-expanded .auth-account-email{
  font-size:clamp(.48rem,.54vw,.6rem);color:rgba(255,255,255,.48);
}
.mfa-card[data-index="0"].is-expanded .auth-account-code{gap:5px;flex-shrink:0}
.mfa-card[data-index="0"].is-expanded .auth-code-num{
  font-size:clamp(.8rem,.95vw,1rem);letter-spacing:.2px;
  color:#5eead4;font-weight:800;text-shadow:0 0 14px rgba(94,234,212,.22);
  font-variant-numeric:tabular-nums;
}
.mfa-card[data-index="0"].is-expanded .auth-timer-ring{width:20px;height:20px;filter:drop-shadow(0 0 8px rgba(94,234,212,.20))}
.mfa-card[data-index="0"].is-expanded .auth-timer-circle{
  animation:authTimerTick 30s linear infinite;
  transform-origin:50% 50%;
}
@keyframes authTimerTick{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:88}
}
.mfa-card[data-index="0"].is-expanded .auth-timer-sec{font-size:.44rem;color:rgba(255,255,255,.65)}
.mfa-card[data-index="0"].is-expanded .auth-bottom-row{
  display:none;
}
.mfa-card[data-index="0"].is-expanded .auth-pill{
  font-size:.46rem;padding:4px 6px;border-radius:999px;
  background:rgba(16,185,129,.16);border-color:rgba(52,211,153,.32);color:#6ee7b7;
  white-space:nowrap;
}
.mfa-card[data-index="0"].is-expanded .auth-pill svg{width:8px;height:8px}

.auth-app-header{
  display:flex;align-items:center;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
.auth-app-title{
  font-size:.85rem;font-weight:700;color:var(--text);letter-spacing:-.2px;
}
/* Account rows */
.auth-account{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(108,92,231,.03),rgba(168,85,247,.03));
  border:1px solid rgba(108,92,231,.06);
  transition:background .2s;
}
.auth-account-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;flex-shrink:0;
}
.auth-account-info{
  display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;
}
.auth-account-name{font-size:.75rem;font-weight:700;color:var(--text)}
.auth-account-email{font-size:.55rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-account-code{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.auth-code-num{
  font-family:'Inter',monospace;font-size:clamp(.9rem,1.4vw,1.15rem);
  font-weight:800;letter-spacing:2px;color:var(--accent);
}
.auth-timer-ring{
  position:relative;width:28px;height:28px;flex-shrink:0;
}
.auth-timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.auth-timer-sec{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.5rem;font-weight:700;color:var(--gray);
}
/* Bottom pills */
.auth-bottom-row{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px;
  border-top:1px solid var(--border);
}
.auth-pill{
  display:flex;align-items:center;gap:4px;
  font-size:.58rem;font-weight:600;
  padding:4px 10px;border-radius:8px;
}
.auth-pill.green{
  color:var(--green);
  background:rgba(16,185,129,.06);
  border:1px solid rgba(16,185,129,.15);
}

/* Authenticator logo (detail panel) */
.auth-logo-wrap{filter:none}
.mfa-detail .auth-logo-wrap .auth-logo{width:56px;height:56px}
.auth-detail-logo-wrap{background:linear-gradient(135deg,rgba(251,188,4,.08),rgba(66,133,244,.08)) !important}
.auth-detail-logo{will-change:transform}
.mfa-card h3{font-family:var(--font-heading);font-size:.82rem;font-weight:700;letter-spacing:-.3px}
.mfa-card p{font-size:.58rem;color:var(--gray);line-height:1.6}
.mfa-card[data-index="3"] .mfa-card-inner{
  padding:clamp(18px,2.8vh,30px);
  justify-content:center;
}
.sms-card-logo{
  width:min(96px,46%);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.sms-card-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.mfa-badge{
  display:inline-block;margin-top:auto;
  font-family:var(--font-heading);
  font-size:.42rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 8px;border-radius:50px;width:fit-content;
}
.mfa-badge.empfohlen{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.3)}
.mfa-badge.vorsicht{background:rgba(245,158,11,.1);color:var(--orange);border:1px solid rgba(245,158,11,.3)}

/* Overlay that dims grid */
.mfa-overlay{
  position:absolute;inset:0;z-index:10;
  background:var(--bg);
  opacity:0;pointer-events:none;
  will-change:opacity;
}

/* Fullscreen detail panels */
.mfa-details{
  position:absolute;inset:0;z-index:15;
  pointer-events:none;
}
.mfa-detail{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 16px calc(104px + 16px); /* top/side breathing room + dock clearance */
  opacity:0;will-change:opacity,transform;
  overflow-y:auto;
}
.mfa-detail-card{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.5);
  padding:clamp(36px,5vh,52px) clamp(32px,4vw,44px);
  max-width:480px;width:88%;
  text-align:center;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.03),
    0 48px 96px -20px rgba(15,23,41,.12),
    0 16px 32px -4px rgba(108,92,231,.06),
    0 0 100px rgba(108,92,231,.04);
}
.mfa-detail-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;
}
.mfa-detail-top .mfa-badge{font-size:.5rem;padding:4px 12px}
.mfa-detail-num{
  font-size:.7rem;font-weight:800;letter-spacing:4px;
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.mfa-detail-icon{
  width:84px;height:84px;
  margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(108,92,231,.1),rgba(168,85,247,.06));
}
.mfa-detail-icon svg{width:42px;height:42px;color:var(--accent)}
.mfa-detail-icon.warn{
  background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(239,68,68,.06));
}
.mfa-detail-icon.warn svg{color:var(--orange)}
.mfa-detail[data-detail="2"] .mfa-detail-icon{
  background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(56,249,215,.06));
}
.mfa-detail[data-detail="2"] .mfa-detail-icon svg{color:var(--green)}
.mfa-detail-card h3{
  font-family:var(--font-heading);
  font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;
  letter-spacing:-.5px;margin-bottom:12px;
}
.mfa-detail-desc{
  font-size:clamp(.82rem,1.1vw,.94rem);color:var(--gray);
  line-height:1.8;max-width:380px;margin:0 auto 24px;
}
.mfa-detail-features{
  display:inline-flex;flex-direction:column;gap:11px;
  text-align:left;
}
.mfa-detail-feat{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:600;
}
.mfa-detail-feat svg{flex-shrink:0;width:16px;height:16px}
.mfa-detail-feat.positive svg{color:var(--green)}
.mfa-detail-feat.negative svg{color:var(--orange)}

/* SMS-Code Detail: iPhone message-to-app flow */
.mfa-detail[data-detail="3"]{
  align-items:center;
  justify-content:center;
  padding:0 16px;
}
.mfa-detail-card--sms{
  width:min(90vw,940px);
  max-width:940px;
  padding:12px clamp(16px,2vw,24px) 14px;
  text-align:left;
  overflow:hidden;
}
.mfa-detail-card--sms .mfa-detail-top{margin-bottom:clamp(10px,1.5vw,18px)}
.sms-demo{
  display:grid;
  grid-template-columns:minmax(220px,260px) minmax(260px,1fr);
  gap:clamp(24px,3.6vw,46px);
  align-items:center;
}
.sms-iphone{
  width:min(224px,100%);
  aspect-ratio:9/19.4;
  justify-self:center;
  position:relative;
  border-radius:48px;
  padding:10px;
  background:
    linear-gradient(130deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 18%,transparent 30%),
    linear-gradient(155deg,#4b4f5d 0%,#171922 26%,#07080c 64%,#000 100%);
  box-shadow:
    0 44px 90px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 2px 0 rgba(255,255,255,.32) inset;
  transform:perspective(900px) rotateY(-7deg) rotateX(2deg);
  transform-origin:50% 60%;
}
.sms-phone-btn{position:absolute;width:3px;border-radius:3px;background:linear-gradient(90deg,#090a0d,#3b3d45,#090a0d)}
.sms-phone-btn--mute{left:-2px;top:15%;height:28px}
.sms-phone-btn--vol-up{left:-2px;top:24%;height:48px}
.sms-phone-btn--vol-dn{left:-2px;top:34%;height:48px}
.sms-phone-btn--power{right:-2px;top:25%;height:72px}
.sms-screen{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  contain:paint;
  isolation:isolate;
  clip-path:inset(0 round 39px);
  border-radius:39px;
  background:#f8f8fa;
  color:#0b0d12;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 38px rgba(0,0,0,.28) inset;
  font-family:-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif;
}
.sms-statusbar{
  position:absolute;top:0;left:0;right:0;height:38px;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:7px 14px 0;
  font-size:.62rem;font-weight:800;color:#111318;
}
.sms-island{
  width:70px;height:21px;border-radius:999px;background:#050506;
  display:flex;align-items:center;justify-content:flex-end;padding-right:11px;
  box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.06) inset;
}
.sms-island span{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#263044,#050506 70%)}
.sms-status-icons{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#111318}
.sms-battery{width:22px;height:11px;border:1.5px solid currentColor;border-radius:3px;padding:1px;position:relative}
.sms-battery::after{content:'';position:absolute;right:-4px;top:3px;width:2px;height:5px;background:currentColor;border-radius:0 1px 1px 0}
.sms-battery span{display:block;width:78%;height:100%;background:currentColor;border-radius:1px}
.sms-app{
  position:absolute;inset:0;
  padding-top:38px;
  will-change:transform,opacity,filter;
}
.sms-app--messages{background:#f7f7f8;z-index:5}
.sms-app-top{
  height:58px;
  display:grid;grid-template-columns:38px 1fr 38px;align-items:center;
  padding:0 14px;border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(248,248,249,.88);backdrop-filter:blur(20px);
}
.sms-back{font-size:2rem;line-height:1;color:#007aff;font-weight:300}
.sms-contact{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.68rem;color:#101014}
.sms-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0ea5e9,#73f5c8);color:#fff;font-weight:900}
.sms-video-icon{justify-self:end;width:22px;height:15px;border:2px solid #007aff;border-radius:4px;position:relative}
.sms-video-icon::after{content:'';position:absolute;right:-8px;top:2px;border-left:7px solid #007aff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.sms-thread{padding:14px 14px 0;display:flex;flex-direction:column;gap:8px}
.sms-date{text-align:center;font-size:.62rem;color:#777;line-height:1.25;margin-bottom:4px}
.sms-bubble{max-width:82%;padding:9px 11px;border-radius:16px;font-size:.78rem;line-height:1.28;background:#e5e5ea;color:#111;align-self:flex-start;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.sms-bubble--code{font-family:ui-monospace,'SF Mono',Consolas,monospace;font-size:1.2rem;font-weight:900;letter-spacing:.12em;background:#dfe7ff;color:#0b3fb4}
.sms-bubble--hint{font-size:.68rem;color:#3a3a3d;background:#ececef}
.sms-compose{position:absolute;left:12px;right:12px;bottom:24px;height:36px;display:flex;align-items:center;gap:8px}
.sms-compose span{width:28px;height:28px;border-radius:50%;background:#8e8e93}
.sms-compose p{flex:1;border:1px solid #d1d1d6;border-radius:18px;padding:7px 12px;color:#a0a0a5;font-size:.78rem;background:#fff}
.sms-app--security{
  z-index:8;
  background:linear-gradient(180deg,#fbfcff 0%,#edf4ff 100%);
  padding:70px 18px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.sms-security-head{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;color:#2563eb;margin-bottom:22px}
.sms-security-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.24)}
.sms-app--security h3{font-size:1.3rem!important;color:#111827!important;margin:0 0 6px!important;letter-spacing:-.04em}
.sms-app--security p{font-size:.76rem;color:#64748b;line-height:1.45;margin:0 0 18px;max-width:220px}
.sms-code-entry{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:100%;margin-bottom:18px}
.sms-code-entry span{height:42px;border-radius:11px;background:#fff;border:1.5px solid rgba(37,99,235,.22);display:grid;place-items:center;font-family:ui-monospace,'SF Mono',Consolas,monospace;font-weight:900;color:#111827;box-shadow:0 7px 18px rgba(37,99,235,.07)}
.sms-code-entry span.is-filled{border-color:rgba(16,185,129,.45);background:#f0fdf4;color:#047857}
.sms-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:auto}
.sms-keypad button{height:38px;border:0;border-radius:13px;background:rgba(255,255,255,.9);color:#111827;font-size:1rem;font-weight:700;box-shadow:0 5px 14px rgba(15,23,42,.08);font-family:inherit}
.sms-keypad button.is-active{background:#2563eb;color:#fff;transform:scale(.94);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.sms-confirm{width:100%;height:40px;border:0;border-radius:13px;background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;font-weight:900;margin-top:10px;box-shadow:0 14px 28px rgba(37,99,235,.22);font-family:var(--font-heading)}
.sms-success{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(248,255,252,.96);color:#059669;font-family:var(--font-heading);font-size:1.15rem;opacity:0;z-index:15}
.sms-app-switcher{
  position:absolute;inset:38px 7px 18px;z-index:20;
  background:rgba(12,14,18,.78);
  backdrop-filter:blur(18px) saturate(125%);
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:30px 8px 34px;
  opacity:0;pointer-events:none;
  overflow:hidden;
  contain:paint;
  border-radius:26px;
}
.sms-switch-card{
  flex:0 0 calc((100% - 8px) / 2);
  max-width:calc((100% - 8px) / 2);
  height:76%;
  border-radius:14px;
  background:#fff;
  box-shadow:0 12px 22px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.28) inset;
  position:relative;overflow:hidden;transform-origin:50% 74%;
}
.sms-switch-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 13%,#0ea5e9 0 14px,transparent 15px),
    linear-gradient(#d1d5db 0 0) 50% 28%/58% 20px no-repeat,
    linear-gradient(#e5e7eb 0 0) 18% 42%/58% 18px no-repeat,
    linear-gradient(#dfe7ff 0 0) 18% 54%/68% 22px no-repeat,
    linear-gradient(#ececef 0 0) 18% 68%/62% 18px no-repeat,
    linear-gradient(180deg,#f7f7f8 0%,#eceef2 100%);
}
.sms-switch-card--security::before{
  background:
    radial-gradient(circle at 22% 14%,#2563eb 0 12px,transparent 13px),
    linear-gradient(#1f2937 0 0) 50% 27%/60% 16px no-repeat,
    linear-gradient(#cbd5e1 0 0) 50% 37%/76% 8px no-repeat,
    linear-gradient(90deg,#dcfce7 0 15%,#fff 15% 30%,#fff 34% 49%,#fff 53% 68%,#fff 72% 87%,#fff 91%) 50% 52%/78% 24px no-repeat,
    linear-gradient(90deg,#fff 0 30%,transparent 30% 35%,#fff 35% 65%,transparent 65% 70%,#fff 70%) 50% 76%/78% 26px no-repeat,
    linear-gradient(180deg,#f8fbff 0%,#dbeafe 100%);
}
.sms-switch-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 36%,rgba(0,0,0,.05));
  pointer-events:none;
}
.sms-switch-card span{
  position:absolute;left:8px;right:8px;bottom:10px;z-index:2;
  text-align:center;font-size:.58rem;font-weight:850;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.64);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sms-home-indicator{position:absolute;left:50%;bottom:8px;width:105px;height:4px;border-radius:999px;background:#111;transform:translateX(-50%);z-index:35;opacity:.85}
.sms-copy h3{font-size:clamp(2rem,3.6vw,3.25rem)!important;line-height:.95;margin-bottom:14px;color:#fff}
.sms-copy .mfa-detail-desc{margin:0 0 18px;max-width:430px;color:rgba(255,255,255,.72);line-height:1.65}
.sms-features{display:flex;align-items:flex-start}

@media(min-width:769px) and (max-height:720px){
  .mfa-detail[data-detail="3"]{padding:0 16px}
  .mfa-detail-card--sms{transform:none}
  .mfa-detail-card--sms .mfa-detail-top{margin-bottom:8px}
  .sms-iphone{width:min(216px,100%)}
  .sms-copy h3{font-size:clamp(2rem,3.35vw,3rem)!important}
  .sms-copy .mfa-detail-desc{line-height:1.55;margin-bottom:14px}
  .mfa-detail-card--sms .mfa-detail-features{gap:8px}
}

@media(max-width:768px){
  .mfa-detail-card--sms{width:94vw;padding:16px;max-height:calc(100vh - 120px);overflow-y:auto}
  .sms-demo{grid-template-columns:1fr;gap:20px;text-align:center}
  .sms-copy{order:-1}
  .sms-copy .mfa-detail-desc{margin-inline:auto}
  .sms-features{align-items:center;text-align:left}
  .sms-iphone{width:min(250px,78vw);transform:none}
}

/* ═══ HARDWARE TOKEN — Premium Showcase ═══ */
.mfa-card[data-index="1"] .mfa-card-inner{
  gap:0;position:relative;overflow:hidden;
  padding:clamp(20px,3vw,32px);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 48% 38%,rgba(255,255,255,.98),rgba(239,244,249,.72) 52%,rgba(218,227,238,.6) 100%);
}
.mfa-card[data-index="1"] .hw-icon-wrap{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  position:relative;
}
.mfa-card[data-index="1"] .hw-key-pivot{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  perspective:1400px;
  perspective-origin:50% 48%;
}
.mfa-card[data-index="1"] .hw-key-3d{
  position:relative;
  width:min(520px,100%);
  aspect-ratio:500/220;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  animation:hwKeyFloat 8s ease-in-out infinite;
  transition:transform .5s cubic-bezier(0.34,1.56,0.64,1);
}
.hw-token-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  z-index:4;
  pointer-events:none;
  transform:translateZ(24px);
}
.hw-token-photo--bento{
  inset:-4% 0;
  width:100%;
  height:108%;
  filter:
    drop-shadow(0 24px 34px rgba(0,0,0,.28))
    drop-shadow(0 0 42px rgba(32,45,96,.18));
}
.mfa-card[data-index="1"] .hw-token-3d-canvas{
  position:absolute;
  inset:-12% -8%;
  width:116%;
  height:124%;
  display:block;
  opacity:0;
  transition:opacity .45s ease;
  filter:drop-shadow(0 22px 28px rgba(31,41,55,.24));
}
.mfa-card[data-index="1"] .hw-key-3d.is-3d-ready .hw-token-3d-canvas{opacity:0}
.mfa-card[data-index="1"] .hw-key-3d.is-3d-ready .hw-icon{opacity:0}
.mfa-card[data-index="1"] .hw-key-3d:has(.hw-token-photo) .hw-icon{opacity:0}
.mfa-card[data-index="1"]:hover .hw-key-3d{
  animation-play-state:paused;
  transform:rotateX(-10deg) rotateY(15deg) rotateZ(-3deg) translateY(-12px) scale(1.08);
}
.mfa-card[data-index="1"] .hw-icon{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:520/220;
  filter:
    drop-shadow(0 18px 42px rgba(15,23,42,.32)) 
    drop-shadow(0 6px 16px rgba(15,23,42,.18))
    drop-shadow(0 0 80px rgba(99,102,241,.08));
  transition:filter .5s ease,opacity .35s ease;
}
.mfa-card[data-index="1"]:hover .hw-icon{
  filter:
    drop-shadow(0 28px 64px rgba(15,23,42,.4)) 
    drop-shadow(0 10px 24px rgba(15,23,42,.25))
    drop-shadow(0 0 120px rgba(99,102,241,.15));
}

@keyframes hwKeyFloat{
  0%,100%{transform:rotateX(-4deg) rotateY(6deg) translateY(0) scale(1)}
  20%{transform:rotateX(2deg) rotateY(-4deg) translateY(-8px) scale(1.03)}
  40%{transform:rotateX(-3deg) rotateY(5deg) translateY(0) scale(1)}
  60%{transform:rotateX(4deg) rotateY(-3deg) translateY(-6px) scale(1.02)}
  80%{transform:rotateX(-2deg) rotateY(4deg) translateY(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .mfa-card[data-index="1"] .hw-key-3d{
    will-change:auto;
    animation:none;
  }
  .mfa-card[data-index="1"]:hover .hw-key-3d{
    transform:none;
  }
}

/* Hardware-Detail: Premium Layout mit besseren Animationen */
.mfa-detail-card--hw{
  max-width:min(96vw,1040px)!important;
  width:94%!important;
  max-height:calc(100vh - 18px);
  overflow:hidden;
  position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.98) 0%,rgba(248,250,252,.96) 45%,rgba(243,246,250,.94) 100%);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9) inset,
    0 50px 100px -28px rgba(15,23,41,.12),
    0 20px 40px rgba(99,102,241,.08),
    0 0 140px rgba(108,92,231,.08);
  text-align:left;
  animation:cardFadeIn .8s cubic-bezier(0.34,1.56,0.64,1);
  padding:clamp(12px,1.6vh,18px) clamp(18px,2.4vw,28px);
}

@keyframes cardFadeIn{
  from{
    opacity:0;
    transform:translateY(40px) scale(.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.mfa-detail-card--hw .mfa-detail-top{
  margin-bottom:clamp(6px,.8vh,10px);
}

.mfa-detail-card--hw .mfa-badge.empfohlen{
  background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(20,184,166,.14));
  color:#0f766e;
  border:1px solid rgba(20,184,166,.35);
  font-weight:800;
  letter-spacing:.08em;
  box-shadow:0 2px 8px rgba(20,184,166,.15);
}

/* Decorative background orbs mit Animation */
.hw-card-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
  animation:orbFloat 8s ease-in-out infinite;
}

@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-10px,10px) scale(1.1)}
}

.hw-card-orb--1{
  width:340px;
  height:340px;
  background:radial-gradient(circle,rgba(99,102,241,.15),rgba(139,92,246,.08));
  top:-100px;
  right:-80px;
  animation-delay:0s;
}

.hw-card-orb--2{
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(56,189,248,.12),rgba(59,130,246,.06));
  bottom:-70px;
  left:-50px;
  animation-delay:-4s;
}
/* 3-column grid — YubiKey | arrow | floating app UI */
.hw-scroll-visual{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto minmax(260px,.9fr);
  gap:clamp(18px,3vw,40px);
  align-items:center;
  margin:2px 0 clamp(8px,1.1vh,12px);
  position:relative;
  z-index:1;
  padding:clamp(10px,1.4vw,16px) clamp(18px,2.3vw,28px);
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(248,250,252,.3));
  border-radius:24px;
  border:1px solid rgba(255,255,255,.6);
  backdrop-filter:blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.8) inset,
    0 12px 32px rgba(99,102,241,.06);
  overflow:visible;
}

@media(max-width:768px){
  .hw-scroll-visual{
    grid-template-columns:1fr;
    min-height:auto;
    gap:32px;
    padding:24px 16px;
  }
  .hw-connection{
    display:none;
  }
}
/* --- Premium YubiKey 3D Viewport --- */
.hw-3d-viewport{
  perspective:1100px;
  perspective-origin:50% 48%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:4px;
}

.hw-3d-inner{
  transform-style:preserve-3d;
  position:relative;
  will-change:transform;
  animation:keyDetailFloat 6s ease-in-out infinite;
}

@keyframes keyDetailFloat{
  0%,100%{transform:rotateX(-5deg) rotateY(8deg) translateY(0)}
  50%{transform:rotateX(5deg) rotateY(-8deg) translateY(-10px)}
}

.hw-3d-key-wrap{
  position:relative;
  display:block;
  width:min(460px,100%);
  aspect-ratio:500/220;
}
.hw-token-photo--detail{
  inset:-9% -6%;
  width:112%;
  height:118%;
  filter:
    drop-shadow(0 34px 54px rgba(0,0,0,.38))
    drop-shadow(0 0 70px rgba(20,31,75,.24));
}
.hw-token-3d-canvas{
  position:absolute;
  inset:-20% -12%;
  width:124%;
  height:140%;
  display:block;
  opacity:0;
  transition:opacity .45s ease;
  filter:drop-shadow(0 30px 48px rgba(0,0,0,.36));
}
.hw-3d-key-wrap.is-3d-ready .hw-token-3d-canvas{opacity:0}
.hw-3d-key-wrap.is-3d-ready .hw-detail-key-svg{opacity:0}
.hw-3d-key-wrap:has(.hw-token-photo) .hw-detail-key-svg{opacity:0}

.hw-3d-key-wrap .hw-detail-key-svg{
  display:block;
  width:100%;
  height:auto;
  opacity:1;
  filter:
    drop-shadow(0 28px 56px rgba(8,12,24,.45))
    drop-shadow(0 12px 24px rgba(8,12,24,.25))
    drop-shadow(0 0 80px rgba(99,102,241,.12));
  transition:filter .5s ease,opacity .35s ease;
}

.hw-3d-key-wrap:hover .hw-detail-key-svg{
  filter:
    drop-shadow(0 36px 72px rgba(8,12,24,.5))
    drop-shadow(0 16px 32px rgba(8,12,24,.3))
    drop-shadow(0 0 120px rgba(99,102,241,.2));
}

.hw-key-lcd{
  pointer-events:none;
}
/* --- Connection Visual — Premium --- */
.hw-connection{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 16px;
  opacity:0;
}

.hw-connection-line{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  height:50px;
}

.hw-connection-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);
  opacity:.4;
  animation:hwDotPulse 2s ease-in-out infinite;
  box-shadow:0 0 12px rgba(99,102,241,.5);
}

.hw-connection-dot--1{animation-delay:0s}
.hw-connection-dot--2{animation-delay:.25s;opacity:.6}
.hw-connection-dot--3{animation-delay:.5s;opacity:.8}

@keyframes hwDotPulse{
  0%,100%{
    opacity:.2;
    transform:scale(.7) translateY(0);
  }
  50%{
    opacity:1;
    transform:scale(1.3) translateY(-2px);
  }
}

.hw-connection-arrow{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);
  color:#fff;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3) inset,
    0 8px 24px rgba(99,102,241,.4),
    0 0 32px rgba(139,92,246,.3);
  animation:hwArrowFloat 2.5s ease-in-out infinite;
  position:relative;
}

.hw-connection-arrow::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(99,102,241,.3),rgba(139,92,246,.3));
  filter:blur(12px);
  opacity:.6;
  animation:hwArrowGlow 2.5s ease-in-out infinite;
}

@keyframes hwArrowFloat{
  0%,100%{transform:translateX(0) scale(1)}
  50%{transform:translateX(6px) scale(1.1)}
}

@keyframes hwArrowGlow{
  0%,100%{opacity:.4}
  50%{opacity:.8}
}
/* --- Realistic iPhone 15 Pro Mockup --- */
.hw-phone-preview{
  opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transform:translateY(24px);
  perspective:1400px;
}

.hw-phone-frame{
  width:min(280px,100%);
  aspect-ratio:9/18;
  border-radius:52px;
  /* iPhone 15 Pro titanium — slightly blue-tinted dark body */
  background:
    linear-gradient(160deg,
      #5a6070 0%,
      #3a3e4a 6%,
      #26293200 12%,
      #1c1f27 20%,
      #16181f 38%,
      #12141a 50%,
      #16181f 62%,
      #1c1f27 76%,
      #2e3240 88%,
      #444a5a 94%,
      #5a6070 100%);
  box-shadow:
    /* outer frame highlight */
    0 0 0 1.5px rgba(255,255,255,.11),
    /* inner edge shadow */
    inset 0 0 0 1.5px rgba(255,255,255,.06),
    inset 0 2px 8px rgba(255,255,255,.07),
    inset 0 -3px 8px rgba(0,0,0,.6),
    /* deep layered drop shadow — floaty feel */
    0 50px 100px rgba(0,0,0,.6),
    0 28px 56px rgba(0,0,0,.45),
    0 10px 20px rgba(0,0,0,.3),
    /* blue ambient glow */
    0 0 160px rgba(80,100,180,.14);
  position:relative;
  padding:10px;
  box-sizing:border-box;
  display:flex;flex-direction:column;
  overflow:visible;
  isolation:isolate;
  /* subtle 3-D tilt */
  transform:perspective(900px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s var(--ease-out-expo);
}
.hw-phone-preview:hover .hw-phone-frame{
  transform:perspective(900px) rotateY(0deg) rotateX(0deg);
}

/* Side buttons - left (volume up, volume down, action) */
.hw-phone-frame::before{
  content:'';
  position:absolute;
  left:-2.5px;
  top:18%;
  width:3px;
  height:8%;
  background:linear-gradient(90deg,#1a1c22,#3a3d44 50%,#1a1c22);
  border-radius:2px 0 0 2px;
  box-shadow:
    0 14% 0 -.5px #2a2c33,
    0 30% 0 -.5px #2a2c33;
}

/* Side button - right (power) */
.hw-phone-frame::after{
  content:'';
  position:absolute;
  right:-2.5px;
  top:24%;
  width:3px;
  height:14%;
  background:linear-gradient(270deg,#1a1c22,#3a3d44 50%,#1a1c22);
  border-radius:0 2px 2px 0;
}

/* Dynamic Island — static pill, no animations */
.hw-dynamic-island{
  position:relative;
  width:82px;
  height:26px;
  background:#000;
  border-radius:20px;
  z-index:10;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.07),
    0 1px 4px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 8px;
  gap:6px;
}
/* Camera lens — static, right side of island */
.hw-island-camera{
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1a2030 0%,#060810 60%,#000 100%);
  box-shadow:
    inset 0 0 0 1px rgba(80,100,180,.3),
    0 0 4px rgba(99,102,241,.15);
  flex-shrink:0;
  position:relative;
  z-index:2;
}
/* Camera specular dot */
.hw-island-camera::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:2.5px;height:2.5px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}

/* Camera lens dot inside Dynamic Island — replaced by .hw-island-camera */

.hw-island-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  gap:3px;
  position:relative;
  z-index:1;
  opacity:0;
  transition:opacity .3s;
}
.hw-dynamic-island.active .hw-island-inner{
  opacity:1;
}

/* .hw-island-icon-left removed — Dynamic Island now only shows waveform when active */

.hw-island-waveform{
  display:flex;
  align-items:center;
  gap:2.5px;
  height:100%;
}

.hw-island-waveform span{
  width:2.5px;
  background:linear-gradient(180deg,#8b5cf6,#6366f1);
  border-radius:2px;
  animation:waveform 1.2s ease-in-out infinite;
}

.hw-island-waveform span:nth-child(1){height:7px;animation-delay:0s}
.hw-island-waveform span:nth-child(2){height:12px;animation-delay:.1s}
.hw-island-waveform span:nth-child(3){height:16px;animation-delay:.2s}
.hw-island-waveform span:nth-child(4){height:10px;animation-delay:.15s}
.hw-island-waveform span:nth-child(5){height:8px;animation-delay:.05s}

@keyframes waveform{
  0%,100%{transform:scaleY(.6);opacity:.5}
  50%{transform:scaleY(1.2);opacity:1}
}

.hw-phone-screen{
  flex:1;
  border-radius:42px;
  background:linear-gradient(170deg,#ffffff 0%,#f5f7fa 25%,#edf0f5 60%,#e8ecf2 100%);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    inset 0 0 0 .5px rgba(0,0,0,.04),
    inset 0 0 60px rgba(99,102,241,.04);
}
/* Glass screen reflection */
.hw-phone-screen::after{
  content:'';
  position:absolute;inset:0;z-index:50;
  border-radius:inherit;
  background:linear-gradient(130deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.06) 30%,
    transparent 55%);
  pointer-events:none;
}

/* ============================================
   WHAT WHEN WHY INSPIRED ART DIRECTION
   ============================================ */
:root{
  --bg:#050505;
  --bg2:#0c0c0c;
  --card:#101010;
  --card-h:#171717;
  --text:#f7f7f2;
  --gray:#c7c7bd;
  --muted:#83837a;
  --accent:#f7f7f2;
  --accent2:#73f5c8;
  --pink:#ff6b4a;
  --red:#ff4d3d;
  --green:#73f5c8;
  --orange:#ffd166;
  --grad:linear-gradient(135deg,#ffffff 0%,#73f5c8 46%,#ff6b4a 100%);
  --grad-subtle:linear-gradient(135deg,rgba(255,255,255,.08),rgba(115,245,200,.05),rgba(255,107,74,.05));
  --border:rgba(255,255,255,.12);
  --border-h:rgba(255,255,255,.28);
  --shadow:0 18px 42px rgba(0,0,0,.34),0 1px 0 rgba(255,255,255,.06) inset;
  --shadow-lg:0 36px 90px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.08) inset;
  --shadow-glow:0 0 90px rgba(115,245,200,.08);
  --r:8px;
}

html{background:#050505}
body{
  background:#050505;
  color:var(--text);
}

.grain-overlay{opacity:.18;mix-blend-mode:screen}
.dot-grid,.floating-shapes{display:none}
.cursor{background:#fff;box-shadow:0 0 18px rgba(255,255,255,.4)}
.cursor-ring{border-color:rgba(255,255,255,.3)}
.cursor-glow{background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 68%)}

.loader{background:#050505;color:#fff}
.loader-bar{background:rgba(255,255,255,.12)}
.loader-fill{background:#fff;box-shadow:0 0 26px rgba(255,255,255,.5)}

.global-island,
.nav-dock{
  background:rgba(0,0,0,.86);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset;
}
.nav-dock:hover{background:rgba(0,0,0,.92)}
.nav-logo{
  color:#fff;
  font-size:clamp(1.15rem,2vw,1.8rem);
  letter-spacing:6px;
  text-shadow:0 12px 32px rgba(0,0,0,.45);
}
.nav-logo span{-webkit-text-fill-color:#fff;background:none;color:#fff}
.dock-item{
  background:rgba(255,255,255,.05);
  color:#fff;
  border-radius:8px;
}
.dock-item:hover{background:#fff;color:#050505;box-shadow:0 8px 24px rgba(255,255,255,.18)}
.dock-item:hover svg{stroke:#050505}
.dock-item::after{background:#73f5c8;box-shadow:0 0 12px rgba(115,245,200,.75)}

.tag{
  color:#050505;
  border-color:#fff;
  background:linear-gradient(90deg,#fff,#73f5c8,#fff);
  background-size:200% 100%;
  border-radius:3px;
  letter-spacing:4px;
  padding:8px 18px;
  box-shadow:none;
}
.tag:hover{background:#fff;border-color:#fff}

.gradient-text{
  background:linear-gradient(135deg,#fff 0%,#fff 30%,#73f5c8 62%,#ff6b4a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Hero: black sculptural opener like the reference page */
.scene-hero{
  min-height:210vh;
  background:#050505;
  overflow:hidden;
  isolation:isolate;
}
.scene-hero::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;height:30vh;
  background:linear-gradient(to bottom,transparent,#050505 74%);
  z-index:2;
  pointer-events:none;
}
.hero-particles{opacity:.28;mix-blend-mode:screen;filter:grayscale(1) contrast(1.5)}
.hero-sculpture{
  position:fixed;
  inset:-12vh -8vw auto -8vw;
  height:118vh;
  z-index:0;
  pointer-events:none;
  transform:skewX(-7deg);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
}
.sculpture-ribbon{
  position:absolute;
  top:-6vh;
  width:clamp(92px,12vw,178px);
  height:122vh;
  border-radius:999px;
  background:
    linear-gradient(100deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 13%,rgba(0,0,0,.82) 34%,rgba(22,22,20,.96) 58%,rgba(255,255,255,.13) 72%,rgba(0,0,0,.96) 100%);
  box-shadow:
    inset 18px 0 36px rgba(255,255,255,.08),
    inset -24px 0 44px rgba(0,0,0,.9),
    0 30px 80px rgba(0,0,0,.68);
  opacity:.9;
  animation:ribbonBreath 8s ease-in-out infinite;
}
.ribbon-a{left:0;transform:rotate(-13deg);animation-delay:-1s}
.ribbon-b{left:14%;transform:rotate(9deg);animation-delay:-3s}
.ribbon-c{left:29%;transform:rotate(-11deg);animation-delay:-5s}
.ribbon-d{left:45%;transform:rotate(10deg);animation-delay:-2s}
.ribbon-e{left:61%;transform:rotate(-7deg);animation-delay:-4s}
.ribbon-f{left:77%;transform:rotate(8deg);animation-delay:-6s}
.ribbon-g{left:91%;transform:rotate(-6deg);animation-delay:-7s}
@keyframes ribbonBreath{
  0%,100%{filter:brightness(.75);translate:0 0}
  50%{filter:brightness(1.08);translate:0 -18px}
}
.hero-marquee{
  position:absolute;
  z-index:3;
  left:0;right:0;
  display:flex;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  color:rgba(255,255,255,.42);
  font-family:var(--font-heading);
  font-size:clamp(.7rem,1vw,.9rem);
  font-weight:800;
  letter-spacing:4px;
  text-transform:uppercase;
  pointer-events:none;
}
.hero-marquee-top{top:calc(100vh - 72px)}
.hero-marquee-track{
  display:flex;
  width:max-content;
  min-width:max-content;
  transform:translateX(25%);
  animation:marqueeSlide 22s linear infinite;
  will-change:transform;
}
.hero-marquee span{min-width:max-content;padding-right:36px}
@keyframes marqueeSlide{
  from{transform:translateX(25%)}
  to{transform:translateX(-25%)}
}
.hero-content{z-index:4;color:#fff;text-shadow:0 12px 42px rgba(0,0,0,.7)}
.hero-title{
  font-size:clamp(4rem,12.5vw,11rem);
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  margin:30px 0 28px;
  overflow:visible;
}
.hero-title .word{overflow:visible}
.hero-title .word:first-child{font-weight:600}
.hero-sub{
  color:rgba(255,255,255,.82);
  font-size:clamp(1.15rem,2vw,1.55rem);
  max-width:720px;
  line-height:1.45;
  font-family:var(--font-heading);
}
.hero-badges{margin-top:42px}
.badge{
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  border-radius:4px;
  box-shadow:none;
  backdrop-filter:blur(18px);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-family:var(--font-heading);
}
.badge:hover{background:#fff;color:#050505;box-shadow:0 18px 42px rgba(0,0,0,.32)}
.badge svg{display:none}
.scroll-cue{
  bottom:95px;
  color:#fff;
  gap:0;
  min-width:0;
}
.scroll-cue-label{
  display:none;
}
.scroll-cue-chevrons svg{
  width:clamp(16px,1.4vw,18px);
  height:clamp(16px,1.4vw,18px);
  color:#fff;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.8));
}
.hero-bottom-line{
  position:absolute;
  z-index:5;
  left:32px;
  bottom:28px;
  color:rgba(255,255,255,.58);
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:3px;
}

/* Editorial sections */
.scene:not(.scene-hero){background:#050505;color:var(--text)}
.scene-why,.scene-stats,.scene-threats,.scene-methoden,.scene-phishing,.scene-passwords,.scene-mfa,.scene-stop,.scene-erstehilfe,.scene-morph-demo,.scene-final{position:relative}
.scene-why::before,
.scene-stats::before,
.scene-threats::before,
.scene-methoden::before,
.scene-phishing::before,
.scene-passwords::before,
.scene-stop::before,
.scene-erstehilfe::before,
.scene-final::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 22%,transparent 78%,rgba(255,255,255,.035));
}
.morph-transition{height:clamp(80px,10vw,150px);background:#050505}
.morph-path{mix-blend-mode:screen;opacity:.28!important}

.big-word{
  color:rgba(255,255,255,.08);
  letter-spacing:0;
  font-size:clamp(4.5rem,13vw,13rem);
}
.big-word.active{color:#fff;text-shadow:0 0 80px rgba(255,255,255,.18)}

.stats-head h2,.threats-head h2,.methoden-header h2,.phishing-head h2,.pw-title,.stop-heading,.eh-container h2,.morph-demo-head h2,.final-title{
  color:#fff;
  letter-spacing:0;
}
.stats-head h2,.threats-head h2,.phishing-head h2,.pw-title,.stop-heading{font-size:clamp(2.5rem,6vw,5.6rem);line-height:.95}
.methoden-header h2,.eh-container h2{font-size:clamp(2.6rem,7vw,6rem);line-height:.95}
.stats-head,.threats-head,.phishing-head,.methoden-header{text-align:left}
.stats-head{width:min(960px,92vw);margin-inline:auto}
.phishing-head{text-align:center}

.stat-card,.t-card,.stack-card-inner,.mfa-card-inner,.mfa-detail-card,.stop-card,.eh-check,.morph-demo-canvas,.email-mockup,.pw-tip{
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  color:#fff;
  box-shadow:var(--shadow);
}
.stat-card:hover,.t-card:hover,.stack-card:hover .stack-card-inner,.stop-card:hover,.eh-check:hover,.morph-demo-canvas:hover{
  border-color:rgba(255,255,255,.34);
  box-shadow:var(--shadow-lg);
}
.stat-card::before,.t-card::before{background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 48%)}
.stat-card::after,.t-card::after,.stat-orb,.email-glow,.hw-card-orb{display:none!important}
.stat-number,.stop-letter,.mfa-counter-current,.mfa-detail-num{
  background:linear-gradient(135deg,#fff,#73f5c8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-unit,.t-icon,.stop-icon,.eh-check-icon{color:#73f5c8}
.stack-card-icon{color:color-mix(in srgb, var(--folder-color) 60%, #73f5c8)}
.stat-label,.t-card p,.stack-card p,.methoden-sub,.phishing-sub,.pw-time,.pw-tip,.eh-sub,.eh-action,.final-sub,.morph-demo-sub,.mfa-sub,.mfa-detail-desc{color:rgba(255,255,255,.72)}
.stack-card-num,.t-num{color:rgba(255,255,255,.08);-webkit-text-fill-color:initial;background:none}
.folder-tab{
  border-radius:5px 5px 0 0;
  background:linear-gradient(135deg,var(--folder-color),var(--folder-color2))!important;
  color:#050505;
  box-shadow:0 -2px 18px color-mix(in srgb, var(--folder-color) 22%, transparent);
}
.stack-card-inner{
  border-top:2px solid color-mix(in srgb, var(--folder-color) 78%, #fff);
  border-radius:0 8px 8px 8px;
}
.stack-card-badge,.mfa-badge.empfohlen,.mfa-badge.vorsicht{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.22);
  border-radius:4px;
}
.email-bar{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.12)}
.email-body p,.email-greeting,.email-from,.email-small{color:rgba(255,255,255,.72)}
.email-subject,.pw-example,.stop-word,.eh-label,.mfa-card h3,.mfa-detail-card h3,.hw-bottom-text h3{color:#fff}
.rf-tag{background:#fff;color:#050505;border-color:#fff;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.rf-line{background:linear-gradient(90deg,#fff,rgba(255,255,255,.2))}
.rf-line-dot{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}

.scammer-desktop{background:#080808;color:#fff}
.scammer-topbar{background:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.12)}
.compose-field{border-bottom-color:rgba(255,255,255,.1)}
.compose-value{color:#fff}.compose-body .compose-value,.compose-label,.scammer-tab{color:rgba(255,255,255,.68)}
.compose-send{background:#fff;color:#050505;border-radius:4px;box-shadow:none}
.compose-send.sent{background:#ff6b4a;color:#050505}

.mfa-overlay{background:#050505}
.auth-app-mockup,.auth-account,.hw-scroll-visual,.mfa-detail-card--hw,.hw-feat-pill{background:#111;color:#fff;border-color:rgba(255,255,255,.12)}
.auth-app-title,.auth-account-name,.hw-feat-pill{color:#fff}
.auth-account-email{color:rgba(255,255,255,.55)}
.mfa-card[data-index="1"] .hw-icon{filter:grayscale(1) contrast(1.1) drop-shadow(0 24px 42px rgba(0,0,0,.7))}

.btn-glow{
  border-color:#fff;
  color:#fff;
  border-radius:4px;
  background:rgba(255,255,255,.03);
}
.btn-glow:hover{background:linear-gradient(135deg,rgba(115,245,200,.22),rgba(108,92,231,.28));color:#fff;box-shadow:0 22px 50px rgba(115,245,200,.14)}
.btn-glow::before{display:none}
.credit{color:rgba(255,255,255,.48)}

@media(max-width:768px){
  .hero-sculpture{inset:-10vh -32vw auto -32vw;transform:skewX(-5deg) scale(.9)}
  .sculpture-ribbon{width:clamp(74px,21vw,110px)}
  .hero-title{font-size:clamp(4rem,17vw,7rem);line-height:.95}
  .hero-sub{font-size:1.05rem;max-width:88vw}
  .hero-bottom-line{left:18px;bottom:88px;font-size:.58rem;max-width:70vw;line-height:1.6}
  .hero-marquee-top{top:calc(100vh - 132px)}
  .stats-head,.threats-head,.methoden-header{text-align:left;padding-left:20px;padding-right:20px}
  .stats-head h2,.threats-head h2,.phishing-head h2,.pw-title,.stop-heading{font-size:clamp(2.2rem,12vw,4rem)}
  .mfa-detail-card{border-radius:8px}
}

/* Status Bar — 3-column grid so island sits exactly between time and icons */
.hw-phone-statusbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:10px 18px 6px;
  font-family:var(--font-heading);
  position:relative;
  z-index:5;
  height:44px;
  box-sizing:border-box;
}

.hw-statusbar-time{
  font-size:.58rem;
  font-weight:800;
  color:#1a1d29;
  letter-spacing:.01em;
  line-height:1;
}

.hw-phone-statusbar-icons{
  display:flex;
  align-items:center;
  gap:4px;
  color:#1a1d29;
  line-height:1;
  justify-content:flex-end;
}

.hw-status-icon{
  opacity:.85;
}

/* App Container - kompakter */
.hw-phone-app{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:12px;
  position:relative;
}

.hw-app-container{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(20px) saturate(180%);
  border-radius:24px;
  padding:16px 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9) inset,
    0 20px 40px rgba(99,102,241,.08),
    0 8px 16px rgba(0,0,0,.04);
  border:1px solid rgba(255,255,255,.5);
}

.hw-phone-app-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(99,102,241,.12);
}

.hw-app-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:9px;
  color:#fff;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
}

.hw-app-icon svg{
  width:16px;
  height:16px;
}

.hw-app-title{
  font-size:.62rem;
  font-weight:800;
  color:#1a1d29;
  font-family:var(--font-heading);
  letter-spacing:.02em;
}

.hw-app-title-section{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.hw-app-heading{
  font-size:.76rem;
  font-weight:900;
  color:#1a1d29;
  font-family:var(--font-heading);
  letter-spacing:-.02em;
}

.hw-phone-app-msg{
  font-size:.54rem;
  color:#64748b;
  line-height:1.4;
  font-weight:500;
}

/* Premium Input mit Glow - kompakt */
.hw-phone-input-wrapper{
  position:relative;
  width:100%;
}

.hw-input-glow{
  position:absolute;
  inset:-6px;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.15));
  border-radius:18px;
  filter:blur(14px);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}

.hw-phone-input-wrapper:hover .hw-input-glow{
  opacity:1;
}

.hw-phone-input{
  width:100%;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border:2px solid rgba(99,102,241,.25);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9) inset,
    0 8px 24px rgba(99,102,241,.12),
    0 2px 8px rgba(0,0,0,.04);
  transition:all .4s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
  min-height:52px;
}

.hw-phone-input::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.05));
  opacity:0;
  transition:opacity .3s;
}

.hw-phone-input:hover{
  border-color:rgba(99,102,241,.45);
  transform:scale(1.02);
}

.hw-phone-input:hover::before{
  opacity:1;
}

.hw-phone-code{
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.32em;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:0;
  position:relative;
}

.hw-phone-input-cursor{
  width:2.5px;
  height:18px;
  background:linear-gradient(180deg,#6366f1,#8b5cf6);
  border-radius:2px;
  animation:cursorBlink 1s steps(1) infinite;
  box-shadow:0 0 8px rgba(99,102,241,.5);
}

/* Info Card - kompakt */
.hw-info-card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:rgba(251,191,36,.08);
  backdrop-filter:blur(10px);
  border-radius:10px;
  border:1px solid rgba(251,191,36,.2);
  font-size:.52rem;
  font-weight:700;
  color:#d97706;
  box-shadow:0 2px 8px rgba(251,191,36,.1);
}

.hw-info-card svg{
  flex-shrink:0;
  color:#f59e0b;
  width:14px;
  height:14px;
}

/* Premium Submit Button - kompakt */
.hw-phone-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px;
  background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#a855f7 100%);
  border-radius:12px;
  font-size:.62rem;
  font-weight:800;
  color:#fff;
  font-family:var(--font-heading);
  letter-spacing:.5px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2) inset,
    0 8px 24px rgba(99,102,241,.35),
    0 4px 12px rgba(139,92,246,.3);
  opacity:.5;
  transition:all .4s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;
  overflow:hidden;
}

.hw-phone-submit::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  transition:left .6s;
}

.hw-phone-submit:hover::before{
  left:100%;
}

.hw-phone-submit svg{
  opacity:.95;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.5));
  width:14px;
  height:14px;
}

/* iOS Keyboard — cleaner, more compact */
.hw-phone-keyboard{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(210,213,219,.98);
  backdrop-filter:blur(40px) saturate(180%);
  border-radius:0;
  padding:6px 4px 4px;
  box-shadow:0 -1px 0 rgba(0,0,0,.12);
  transform:translateY(100%);
  opacity:0;
  transition:all .35s cubic-bezier(0.34,1.56,0.64,1);
  z-index:20;
}

.hw-phone-keyboard.active{
  transform:translateY(0);
  opacity:1;
}

.hw-keyboard-rows{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.hw-keyboard-row{
  display:flex;
  justify-content:center;
  gap:4px;
}

.hw-key{
  min-width:20px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:5px;
  font-size:.62rem;
  font-weight:500;
  color:#1a1d29;
  box-shadow:
    0 1px 0 rgba(0,0,0,.25);
  cursor:pointer;
  transition:all .1s;
  user-select:none;
  font-family:var(--font-heading);
  flex:1;
  max-width:26px;
  letter-spacing:0;
}

.hw-key:active{
  transform:scale(.95);
  background:rgba(255,255,255,.7);
}

.hw-key.active-key{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  box-shadow:
    0 2px 8px rgba(99,102,241,.4),
    0 0 0 1px rgba(255,255,255,.2) inset;
}

.hw-key.wide{
  flex:1.5;
  max-width:42px;
}

.hw-key.space{
  flex:3;
  max-width:none;
}

.hw-keyboard-spacer{
  flex:.5;
}

.hw-phone-home-indicator{
  width:35%;
  height:5px;
  margin:6px auto 10px;
  background:rgba(0,0,0,.3);
  border-radius:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.25);
  flex-shrink:0;
}

/* Premium Responsive Design */
@media(max-width:768px){
  .hw-phone-frame{
    width:min(240px,90%);
  }
  
  .hw-dynamic-island{
    width:105px;
    height:26px;
  }
  
  .hw-phone-app-msg{
    font-size:.52rem;
  }
  
  .hw-phone-code{
    font-size:.95rem;
  }
  
  .hw-app-container{
    padding:14px 12px;
    gap:12px;
  }
  
  .hw-key{
    min-width:22px;
    height:36px;
    font-size:.68rem;
  }
}

@media(min-width:769px){
  .hw-phone-frame{
    width:min(280px,100%);
  }
}

@media(prefers-reduced-motion:reduce){
  .hw-dynamic-island,
  .hw-island-icon-left,
  .hw-island-waveform span,
  .hw-3d-inner,
  .hw-connection-dot,
  .hw-connection-arrow{
    animation:none !important;
  }
}

/* Smooth Scroll Reveal Animations */
.hw-phone-preview.active{
  opacity:1;
  transform:translateY(0);
  transition:all 1s cubic-bezier(0.34,1.56,0.64,1);
}

.hw-connection.active{
  opacity:1;
  transition:opacity .8s ease .4s;
}

.hw-phone-code.active{
  opacity:1;
  animation:codeReveal .8s cubic-bezier(0.34,1.56,0.64,1) .6s forwards;
}

@keyframes codeReveal{
  from{
    opacity:0;
    transform:translateY(10px);
    filter:blur(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

.hw-phone-submit.active{
  opacity:1;
  animation:submitReveal .6s cubic-bezier(0.34,1.56,0.64,1) 1s forwards;
}

@keyframes submitReveal{
  from{
    opacity:.5;
    transform:scale(.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}
/* ============================================
   iPhone Mockup V2 — Hardware-Token Detail
   ============================================ */
.hw-phone-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  perspective:1400px;
}
.hw-phone-v2{
  position:relative;
  width:min(215px, 100%);
  aspect-ratio: 9 / 17.1;
  border-radius:40px;
  background:
    linear-gradient(145deg,#9aa1ad 0%,#545b68 7%,#2d3440 18%,#151922 47%,#222936 72%,#525b69 91%,#a8afbb 100%);
  padding:6px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 34px 70px -22px rgba(2,6,23,.68),
    0 18px 36px -12px rgba(15,23,42,.48),
    0 0 90px rgba(99,102,241,.12),
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 3px 7px rgba(255,255,255,.14),
    inset 0 -4px 9px rgba(0,0,0,.45);
  transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transform-style:preserve-3d;
}
/* Titanium frame highlight */
.hw-phone-v2::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.18) 18%,
      transparent 32%,
      transparent 65%,
      rgba(255,255,255,.08) 80%,
      transparent 100%);
  pointer-events:none;
  mix-blend-mode:overlay;
}
/* Side buttons */
.hw-phone-v2-btn{
  position:absolute;
  background:linear-gradient(180deg, #3a475f, #1a2238);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.3),
    -1px 0 2px rgba(0,0,0,.25);
}
.hw-phone-v2-btn--silent{
  left:-1.5px;
  top:74px;
  width:3px;
  height:22px;
  border-radius:2px 0 0 2px;
}
.hw-phone-v2-btn--vol-up{
  left:-2px;
  top:108px;
  width:3px;
  height:34px;
  border-radius:2px 0 0 2px;
}
.hw-phone-v2-btn--vol-dn{
  left:-2px;
  top:152px;
  width:3px;
  height:34px;
  border-radius:2px 0 0 2px;
}
.hw-phone-v2-btn--power{
  right:-2px;
  top:122px;
  width:3px;
  height:50px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg, #3a475f, #1a2238);
}

/* Screen */
.hw-phone-v2-screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:30px;
  background:linear-gradient(160deg,#fbfbfd 0%,#ffffff 44%,#eef1f6 100%);
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.10),
    inset 0 0 24px rgba(99,102,241,.04);
  display:flex;
  flex-direction:column;
}
.hw-phone-v2-screen::after{
  content:'';
  position:absolute;
  inset:0 0 135px;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(128deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 30%,transparent 58%);
}

/* Status bar — time and icons split around the floating Dynamic Island */
.hw-phone-v2-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 18px 3px;
  height:32px;
  flex-shrink:0;
  position:relative;
  z-index:3;
}
.hw-phone-v2-time{
  font-family:var(--font-heading), 'SF Pro Display', system-ui;
  font-size:.72rem;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-.02em;
  line-height:1;
}
.hw-phone-v2-icons{
  display:flex;
  align-items:center;
  gap:4px;
  color:#0f172a;
}
.hw-phone-v2-battery{
  position:relative;
  width:18px;
  height:9px;
  border:1px solid rgba(15,23,42,.45);
  border-radius:2.5px;
  padding:1px;
}
.hw-phone-v2-battery::after{
  content:'';
  position:absolute;
  right:-2.5px;
  top:50%;
  transform:translateY(-50%);
  width:1.5px;
  height:4px;
  background:rgba(15,23,42,.45);
  border-radius:0 1px 1px 0;
}
.hw-phone-v2-battery-fill{
  display:block;
  width:80%;
  height:100%;
  background:#0f172a;
  border-radius:1.5px;
}

/* Dynamic Island — floating black pill, properly centered at top */
.hw-phone-v2-island{
  position:absolute;
  top:6px;
  left:45%;
  transform:translateX(-50%);
  width:72px;
  height:21px;
  background:#000;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:0 7px;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.03),
    0 1px 3px rgba(0,0,0,.4),
    0 0 0 1px #000;
  overflow:hidden;
  transition: width .45s cubic-bezier(.5,1.5,.5,1), height .35s cubic-bezier(.5,1.5,.5,1);
  will-change: width, height;
  z-index:4;
}
.hw-phone-v2-island-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 5px rgba(34,197,94,.8);
  flex-shrink:0;
  opacity:0;
  transition:opacity .25s ease;
}
.hw-phone-v2-island-label{
  font-family:var(--font-heading), system-ui;
  font-size:.44rem;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(2px);
  transition: opacity .25s ease .05s, transform .25s ease .05s;
  max-width:0;
  overflow:hidden;
}
/* Expanded states */
.hw-phone-v2-island[data-island-state="typing"],
.hw-phone-v2-island[data-island-state="success"]{
  width:78px;
  height:23px;
}
.hw-phone-v2-island[data-island-state="success"]{
  width:50px;
}
.hw-phone-v2-island[data-island-state="typing"] .hw-phone-v2-island-dot,
.hw-phone-v2-island[data-island-state="success"] .hw-phone-v2-island-dot{
  opacity:1;
}
.hw-phone-v2-island[data-island-state="typing"] .hw-phone-v2-island-label,
.hw-phone-v2-island[data-island-state="success"] .hw-phone-v2-island-label{
  opacity:1;
  transform:translateY(0);
  max-width:46px;
}
.hw-phone-v2-island[data-island-state="success"] .hw-phone-v2-island-label{
  display:none;
}
.hw-phone-v2-island[data-island-state="typing"] .hw-phone-v2-island-dot{
  background:#fbbf24;
  box-shadow:0 0 4px rgba(251,191,36,.7);
  animation:hwIslandPulse 1s ease-in-out infinite;
}
@keyframes hwIslandPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%   { opacity:.4; transform:scale(.85); }
}

/* App content */
.hw-phone-v2-app{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:7px 10px 142px;
  min-height:0;
  position:relative;
  z-index:1;
}
.hw-phone-v2-app-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:6px 9px;
  background:linear-gradient(135deg, rgba(108,92,231,.08), rgba(139,92,246,.04));
  border:1px solid rgba(108,92,231,.12);
  border-radius:12px;
}
.hw-phone-v2-app-icon{
  width:24px;
  height:24px;
  border-radius:8px;
  background:linear-gradient(135deg, #6366f1, #8b5cf6);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:
    0 4px 12px rgba(99,102,241,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.hw-phone-v2-app-title{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.hw-phone-v2-app-name{
  font-family:var(--font-heading);
  font-size:.7rem;
  font-weight:700;
  color:#0f172a;
  line-height:1;
}
.hw-phone-v2-app-sub{
  font-size:.55rem;
  color:var(--muted);
  font-weight:500;
  line-height:1;
}
.hw-phone-v2-app-label{
  font-size:.55rem;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-family:var(--font-heading);
  margin:2px 0 -3px;
  padding-left:2px;
}
.hw-phone-v2-app-code{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:7px 8px;
  min-height:31px;
  background:
    linear-gradient(135deg, rgba(248,250,252,.95), rgba(241,245,249,.9));
  border:1.5px solid rgba(108,92,231,.25);
  border-radius:12px;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.8),
    0 0 0 4px rgba(108,92,231,.05),
    0 2px 8px rgba(108,92,231,.08);
}
.hw-phone-v2-app-code .hw-phone-code{
  font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:5px;
  color:var(--accent);
  line-height:1;
  text-shadow:0 1px 2px rgba(108,92,231,.15);
  min-height:1em;
}
.hw-phone-v2-app-code .hw-phone-input-cursor{
  display:inline-block;
  width:2px;
  height:1.05rem;
  background:var(--accent);
  border-radius:1px;
  animation: hwCursorBlink 1s steps(2) infinite;
  margin-left:1px;
}
@keyframes hwCursorBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}
.hw-phone-v2-app-timer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:.58rem;
  font-weight:500;
  color:var(--muted);
  font-family:var(--font-heading);
}
.hw-phone-v2-app-timer strong{
  color:var(--orange);
  font-weight:700;
}
.hw-phone-v2-app-timer svg{
  color:var(--orange);
  flex-shrink:0;
}
.hw-phone-v2-app-btn{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  background:linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color:#fff;
  border:none;
  border-radius:11px;
  font-family:var(--font-heading);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:
    0 6px 16px rgba(99,102,241,.35),
    inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .15s ease, box-shadow .15s ease;
}
.hw-phone-v2-app-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 22px rgba(99,102,241,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.hw-phone-v2-app-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:.5rem;
  font-weight:500;
  color:var(--muted);
  font-family:var(--font-heading);
  padding-top:2px;
}
.hw-phone-v2-dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 2px rgba(16,185,129,.18);
  animation:hwPhoneV2Pulse 2s ease-in-out infinite;
}
@keyframes hwPhoneV2Pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 2px rgba(16,185,129,.18); }
  50%   { opacity:.7; box-shadow:0 0 0 4px rgba(16,185,129,.08); }
}

/* Home indicator */
.hw-phone-v2-home{
  position:absolute;
  bottom:5px;
  left:50%;
  transform:translateX(-50%);
  width:35%;
  height:3px;
  background:rgba(15,23,42,.35);
  border-radius:3px;
  z-index:5;
}

/* ============================================
   iOS Numeric Keyboard — authentic look
   ============================================ */
.hw-phone-keyboard{
  position:absolute;
  left:0; right:0; bottom:0;
  background:linear-gradient(180deg,rgba(210,214,221,.98),rgba(174,180,190,.98));
  padding:4px 5px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:8;
  border-radius:0 0 34px 34px;
  box-shadow:0 -1px 0 rgba(255,255,255,.45),0 -10px 22px rgba(15,23,42,.10);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
}
.hw-phone-keyboard-row{
  display:grid;
  grid-template-columns:repeat(10, minmax(0, 1fr));
  gap:2px;
  padding:0;
}
.hw-phone-keyboard-row:nth-child(3){
  grid-template-columns:1.18fr repeat(5, 1fr) 1.38fr;
  padding:0 2px;
}
.hw-phone-keyboard-row--bottom{
  display:flex;
  grid-template-columns:none;
  gap:2px;
  padding-top:1px;
}
.hw-phone-keyboard-row--bottom .hw-key{flex:0 0 auto}
.hw-phone-keyboard-row--bottom .hw-key--utility{width:29px}
.hw-phone-keyboard-row--bottom .hw-key--icon{width:22px}
.hw-phone-keyboard-row--bottom .hw-key--space{flex:1 1 auto}
.hw-phone-keyboard-row--bottom .hw-key--return{width:37px}
.hw-key{
  appearance:none;
  border:none;
  background:linear-gradient(180deg,#fff 0%,#f8f9fb 100%);
  color:#111827;
  font-family:'SF Pro Display', -apple-system, system-ui;
  font-size:.86rem;
  font-weight:500;
  border-radius:6px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition:background .1s ease, transform .08s ease, box-shadow .1s ease;
  min-height:23px;
  letter-spacing:0;
  font-variant-numeric: tabular-nums;
  user-select:none;
  max-width:none;
  flex:none;
}
.hw-phone-keyboard-row:first-child .hw-key{font-size:.82rem;font-weight:500}
.hw-phone-keyboard-row:nth-child(2) .hw-key{font-size:.76rem}
.hw-phone-keyboard-row:nth-child(3) .hw-key{font-size:.8rem}
.hw-key--mode,
.hw-key--utility,
.hw-key--icon,
.hw-key--return{
  background:linear-gradient(180deg,#c8cdd5 0%,#b8bec8 100%);
  color:#111827;
  font-size:.54rem;
  font-weight:600;
}
.hw-key--space{
  font-size:.52rem;
  font-weight:500;
  justify-content:center;
  text-align:center;
  min-width:0;
  padding:0 8px;
  white-space:nowrap;
}
.hw-key--icon svg{width:13px;height:13px}
.hw-key--del{
  background:linear-gradient(180deg,#c8cdd5 0%,#b8bec8 100%);
  color:#0f172a;
}
.hw-key.active-key,
.hw-key:active{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  transform:translateY(1px) scale(.94);
  box-shadow:
    0 0 0 2px rgba(99,102,241,.22),
    0 5px 12px rgba(99,102,241,.36),
    inset 0 1px 0 rgba(255,255,255,.2);
}

/* Responsive — keep phone visible & nicely sized */
@media (max-width:900px){
  .hw-phone-v2{
    width:min(260px, 100%);
    border-radius:46px;
  }
  .hw-phone-v2-screen{ border-radius:36px; }
}
@media (max-width:640px){
  .hw-phone-v2{
    transform:none;
  }
}


/* --- Bottom section: Text left, Features right --- */
.hw-bottom-section{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:clamp(10px,1.8vw,20px);
  align-items:start;
  margin-top:4px;
  position:relative;z-index:1;
}
@media(max-width:720px){
  .hw-bottom-section{grid-template-columns:1fr}
}
.hw-bottom-text{text-align:left}
.hw-bottom-text h3{
  font-family:var(--font-heading);
  font-size:clamp(.95rem,1.8vw,1.25rem);font-weight:700;
  letter-spacing:-.5px;margin-bottom:8px;
}
.hw-bottom-text .mfa-detail-desc{
  margin:0;max-width:none;text-align:left;font-size:.66rem;line-height:1.55;
}
/* Feature pills */
.hw-bottom-features{
  display:flex;flex-direction:column;gap:4px;
}
.mfa-detail-card--hw .hw-feat-pill{
  background:linear-gradient(135deg,rgba(14,18,28,.86),rgba(25,31,44,.78));
  border:1px solid rgba(115,245,200,.22);
  box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}
.hw-feat-pill{
  display:flex;align-items:center;gap:9px;
  padding:6px 10px;
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(12px);
  border:1px solid rgba(115,245,200,.18);
  border-radius:10px;
  font-size:.61rem;font-weight:700;color:#f8fafc;
  line-height:1.1;
  font-family:var(--font-heading);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:transform .3s var(--ease-spring),box-shadow .3s,border-color .3s;
}
.hw-feat-pill:hover{
  transform:translateX(4px);
  box-shadow:0 10px 26px rgba(0,0,0,.24),0 0 20px rgba(115,245,200,.08);
  border-color:rgba(115,245,200,.34);
}
.hw-feat-icon{
  width:21px;height:21px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:linear-gradient(135deg,rgba(115,245,200,.18),rgba(20,184,166,.10));
  color:#73f5c8;
}
.hw-feat-icon svg{
  display:block;
  width:13px;
  height:13px;
  margin:0;
  stroke-width:2.2;
}
.hw-feat-pill span{
  display:block;
  min-width:0;
  transform:translateY(.5px);
}
/* Counter */
.mfa-counter{
  position:absolute;bottom:max(28px,4vh);left:0;right:0;text-align:center;
  font-size:.75rem;font-weight:600;letter-spacing:3px;
  color:var(--muted);z-index:20;opacity:0;
}
.mfa-counter-current{
  font-size:1rem;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}

/* ═══ LEGACY TIMELINE STYLES ═══ */
.scene-erstehilfe{height:300vh;position:relative}
.eh-container{max-width:800px;margin:0 auto;padding:0 32px}
.eh-container h2{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin-top:12px;text-align:center}
.eh-sub{font-size:clamp(.82rem,1.2vw,1rem);color:var(--gray);max-width:500px;margin:12px auto 0;line-height:1.7;text-align:center}
.eh-timeline{margin-top:48px;position:relative;padding-left:40px}
.eh-line{
  position:absolute;left:14px;top:0;bottom:0;width:2px;
  background:linear-gradient(to bottom,var(--accent),var(--pink));
  border-radius:2px;
  transform-origin:top;transform:scaleY(0);
  transition:transform 1.2s ease;
}
.eh-timeline.in-view .eh-line{transform:scaleY(1)}
.eh-step{
  position:relative;padding:0 0 40px;
  opacity:0;transform:translateX(-20px);
  transition:opacity .6s ease,transform .6s ease;
}
.eh-step.visible{opacity:1;transform:translateX(0)}
.eh-dot{
  position:absolute;left:-33px;top:4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent);
  transition:background .3s,border-color .3s;
}
.eh-step.visible .eh-dot{background:var(--accent)}
.eh-content{padding-left:8px}
.eh-label{
  font-family:var(--font-heading);
  font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:6px;
}
.eh-action{font-size:.82rem;color:var(--gray);line-height:1.7}
.eh-check{
  display:flex;align-items:center;gap:14px;
  margin-top:44px;padding:22px 26px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r);
  font-size:.82rem;color:var(--gray);line-height:1.7;
  box-shadow:var(--shadow);
  transition:border-color .3s,box-shadow .3s;
}
.eh-check:hover{
  border-color:rgba(108,92,231,.15);
  box-shadow:var(--shadow-lg);
}
.eh-check-icon{flex-shrink:0;color:var(--accent)}
.eh-check code{
  background:rgba(108,92,231,.08);color:var(--accent);
  padding:2px 8px;border-radius:6px;font-size:.78rem;
}

/* ═══ SCENE 9: FINAL ═══ */
.scene-final{min-height:100vh;display:flex;align-items:center;justify-content:center}
.scene-final .scene-content{gap:28px}
.final-title{
  font-family:var(--font-heading);
  font-size:clamp(2.8rem,9vw,8rem);font-weight:700;
  line-height:.9;letter-spacing:-3px;
}
.final-title .word{display:inline-block;opacity:0}
.final-sub{
  font-size:clamp(.88rem,1.3vw,1.05rem);
  color:var(--gray);max-width:480px;line-height:1.8;
  opacity:0;
}
.final-cta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  width:100%;
}
.final-cta .btn-glow{
  margin-left:0!important;
}
.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:176px;min-height:58px;padding:0 44px;margin-top:20px;
  background:transparent;border:1.5px solid rgba(108,92,231,.3);
  border-radius:60px;color:var(--accent);
  font-family:var(--font-heading);
  font-weight:600;font-size:.85rem;letter-spacing:1.5px;
  position:relative;overflow:hidden;
  transition:color .4s,border-color .4s,box-shadow .4s,transform .4s var(--ease-spring);
  opacity:0;
}
.btn-glow:hover{
  color:#fff;border-color:transparent;
  box-shadow:0 12px 40px rgba(108,92,231,.3),0 0 80px rgba(108,92,231,.1);
  transform:translateY(-3px);
}
.btn-glow::before{
  content:'';position:absolute;inset:-2px;
  background:var(--grad);border-radius:60px;
  opacity:0;z-index:-1;transition:opacity .4s;
}
.btn-glow:hover::before{opacity:1}
.credit{font-family:var(--font-heading);font-size:.68rem;color:var(--muted);letter-spacing:3px;margin-top:48px;opacity:0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  body{cursor:auto}
  .cursor,.cursor-ring{display:none}
  /* Dock responsive */
  .nav{bottom:14px}
  .nav-logo{top:14px;left:20px;font-size:.95rem}
  .nav-dock{padding:8px 10px;gap:2px;border-radius:18px}
  .dock-item{width:40px;height:40px;border-radius:12px}
  .dock-item svg{width:18px;height:18px}
  .dock-item::before{display:none}
  .hero-content{padding:80px 20px 142px}
  .hero-title{letter-spacing:-1px}
  .hero-badges{flex-wrap:wrap;justify-content:center;gap:10px}
  .badge{padding:8px 14px;font-size:.72rem}
  .stats-grid{grid-template-columns:1fr;gap:16px;padding:0 20px}
  .stat-card{padding:28px}
  .stat-card .stat-orb{display:none}
  .threats-track{flex-direction:column;width:100%;padding:0 20px;transform:none !important}
  .t-card{flex:0 0 auto;width:100%}
  .stop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stop-card{padding:24px 16px}
  .stop-letter{font-size:2.2rem}
  .email-mockup{width:90vw}
  .email-glow{width:200px;height:200px}
  .rf-1,.rf-2,.rf-3,.rf-4{right:auto;left:50%;transform:translateX(-50%)}
  .rf-line{display:none}
  .rf-1{top:auto;bottom:-50px}
  .rf-2{top:auto;bottom:-100px}
  .rf-3{top:auto;bottom:-150px}
  .rf-4{top:auto;bottom:-200px}
  .pw-container{padding:0 20px}
  .stop-container{padding:0 20px}
  .morph-demo-canvas{width:min(320px,85vw)}
  .morph-demo-head{padding:0 16px}
  .big-word{font-size:clamp(3rem,10vw,6rem);letter-spacing:-2px}
  /* Scammer responsive */
  .scammer-compose{padding:20px 24px}
  .compose-label{min-width:55px;font-size:.65rem;letter-spacing:1px}
  .compose-value{font-size:.82rem}
  .compose-body .compose-value{font-size:.78rem}
  .scammer-tab{display:none}
  .scammer-topbar{padding:12px 16px;gap:12px}
  .compose-field{padding:12px 0;gap:10px}
  .compose-divider{margin:8px 0 16px}
  .compose-send{padding:10px 20px;font-size:.75rem}
  .pip-label{font-size:.55rem;bottom:-26px}
  .scene-methoden::after{display:none}
  .card-stack{padding:0 16px 32px;max-width:520px}
  .stack-card{position:relative;top:auto!important;margin-bottom:28px;padding-top:30px;transform:none!important}
  .stack-card:nth-child(1),
  .stack-card:nth-child(2),
  .stack-card:nth-child(3),
  .stack-card:nth-child(4){top:auto;--card-shift:0;--card-lean:0deg}
  .stack-card-inner{grid-template-columns:1fr;min-height:0;padding:32px 24px 28px;transform:none!important}
  .stack-card-inner .stack-card-icon::before,
  .stack-card-inner .stack-card-icon::after{display:none}
  .stack-card-num{font-size:2.5rem;top:14px;right:18px}
  .folder-tab{left:16px;padding:6px 14px 7px;font-size:.65rem}
  .mfa-card-inner{padding:16px 12px}
  .mfa-card h3{font-size:.7rem}
  .mfa-card p{font-size:.5rem}
  .mfa-card-icon svg{width:22px;height:22px}
  .eh-container{padding:0 20px}
  .eh-timeline{padding-left:32px}
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL DYNAMIC ISLAND — reagiert auf Sektionen / Events
   ═══════════════════════════════════════════════════════════ */
.global-island{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%) translateY(-120%);
  --island-accent:#0a84ff;
  --island-glow:rgba(10,132,255,.42);
  --island-progress:0%;
  background:
    radial-gradient(circle at 50% -45%,rgba(255,255,255,.2),transparent 38%),
    linear-gradient(180deg,#101012 0%,#030304 56%,#000 100%);
  color:#fff;
  border-radius:999px;
  z-index:9999;
  display:flex;
  align-items:center;
  height:37px;
  width:126px;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -8px 18px rgba(255,255,255,.035),
    inset 0 0 0 .5px rgba(255,255,255,.1),
    0 20px 52px rgba(0,0,0,.5),
    0 8px 18px rgba(0,0,0,.36),
    0 0 0 1px rgba(0,0,0,.72);
  transition:
    width .68s cubic-bezier(.2,1.28,.36,1),
    height .62s cubic-bezier(.2,1.18,.36,1),
    border-radius .62s cubic-bezier(.2,1,.36,1),
    transform .72s cubic-bezier(.2,1.18,.36,1),
    left .58s cubic-bezier(.2,1.18,.36,1),
    top .58s cubic-bezier(.2,1.18,.36,1),
    opacity .34s ease,
    box-shadow .45s ease,
    background .45s ease;
  opacity:0;
  pointer-events:none;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  cursor:pointer;
  will-change:width,height,transform,border-radius;
  contain:layout paint;
}

.global-island.visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}

/* Email-Composer im Vollbild / Transition zur Pip:
   globale Island KOMPLETT verstecken (keine Bubble, keine Pille). */
body.email-composer-active .global-island{
  opacity:0 !important;
  transform:translateX(-50%) translateY(-140%) !important;
  pointer-events:none !important;
}

/* Wenn die Email-PiP sich in eine Dynamic Island verwandelt,
   verbindet sich die globale Island als kleine Begleit-Bubble
   rechts neben der Email-Island (iOS-Combined-Layout). */
body.email-island-active .global-island{
  /* aus der zentrierten Pille wird ein kleiner Kreis rechts daneben */
  left:calc(50% + (var(--email-pip-w, 560px) / 2) + 10px) !important;
  top:var(--email-pip-top, 14px) !important;
  transform:translateX(0) translateY(0) !important;
  width:var(--email-pip-h, 52px) !important;
  height:var(--email-pip-h, 52px) !important;
  border-radius:50% !important;
  padding:0 !important;
  overflow:hidden;
}
body.email-island-active .global-island .gi-text{
  display:none !important;
}
body.email-island-active .global-island .gi-content{
  width:100%;
  height:100%;
  justify-content:center;
  padding:0;
  gap:0;
}
body.email-island-active .global-island .gi-icon{
  margin:0 !important;
}
body.email-island-active .global-island .gi-meta{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
body.email-island-active .global-island .gi-progress-text{
  display:none !important;
}
body.email-island-active .global-island::after{
  /* Kamera-Dot ausblenden – passt nicht zum runden Bubble */
  opacity:0 !important;
}
@media (max-width:640px){
  body.email-island-active .global-island{
    width:calc(var(--email-pip-h, 44px) - 4px) !important;
    height:calc(var(--email-pip-h, 44px) - 4px) !important;
    left:calc(50% + (var(--email-pip-w, 300px) / 2) + 6px) !important;
  }
}

.global-island[data-tone="intro"]{--island-accent:#0a84ff;--island-glow:rgba(10,132,255,.42)}
.global-island[data-tone="why"]{--island-accent:#64d2ff;--island-glow:rgba(100,210,255,.34)}
.global-island[data-tone="stats"]{--island-accent:#30d158;--island-glow:rgba(48,209,88,.34)}
.global-island[data-tone="threats"]{--island-accent:#ff9f0a;--island-glow:rgba(255,159,10,.38)}
.global-island[data-tone="methoden"]{--island-accent:#bf5af2;--island-glow:rgba(191,90,242,.34)}
.global-island[data-tone="scammer"]{--island-accent:#ff453a;--island-glow:rgba(255,69,58,.4)}
.global-island[data-tone="phishing"]{--island-accent:#ff375f;--island-glow:rgba(255,55,95,.38)}
.global-island[data-tone="passwords"]{--island-accent:#ffd60a;--island-glow:rgba(255,214,10,.32)}
.global-island[data-tone="mfa"]{--island-accent:#30d158;--island-glow:rgba(48,209,88,.38)}
.global-island[data-tone="protection"]{--island-accent:#0a84ff;--island-glow:rgba(10,132,255,.36)}
.global-island[data-tone="erstehilfe"]{--island-accent:#ff9f0a;--island-glow:rgba(255,159,10,.36)}
.global-island[data-tone="technik"]{--island-accent:#5e5ce6;--island-glow:rgba(94,92,230,.38)}
.global-island[data-tone="final"]{--island-accent:#30d158;--island-glow:rgba(48,209,88,.38)}

/* Idle / kompakter Pill-Zustand */
.global-island[data-state="idle"]{
  width:126px;
  height:37px;
  border-radius:999px;
}

/* Erweiterter Zustand mit Inhalt */
.global-island[data-state="expanded"]{
  width:min(374px,calc(100vw - 28px));
  height:61px;
  border-radius:31px;
}

/* Großer Zustand mit Progress + Aktion */
.global-island[data-state="active"]{
  width:min(430px,calc(100vw - 28px));
  height:70px;
  border-radius:35px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 22px rgba(255,255,255,.04),
    inset 0 0 0 .5px rgba(255,255,255,.1),
    0 24px 64px rgba(0,0,0,.54),
    0 10px 22px rgba(0,0,0,.38),
    0 0 42px var(--island-glow);
}

.global-island::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.13) 44%,transparent 64%),
    radial-gradient(circle at 20% 16%,var(--island-glow),transparent 48%);
  opacity:0;
  transform:translateX(-34%);
  transition:opacity .42s ease, transform .9s cubic-bezier(.2,1,.36,1);
  pointer-events:none;
  z-index:-1;
}

.global-island::after{
  content:'';
  position:absolute;
  right:13px;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 35% 35%,#263247 0 16%,#07111f 42%,#010206 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 1px 1px 2px rgba(120,160,255,.22),
    0 0 5px rgba(0,0,0,.7);
  opacity:.86;
  transition:opacity .24s ease, transform .42s cubic-bezier(.2,1,.36,1);
  pointer-events:none;
}

.global-island[data-state="active"]::before,
.global-island[data-state="expanded"]::before{
  opacity:1;
}

.global-island[data-state="expanded"]::after,
.global-island[data-state="active"]::after{
  opacity:.18;
  transform:translateY(-50%) scale(.7);
}

.global-island[data-state="expanded"]::before,
.global-island[data-state="active"]::before{
  transform:translateX(0);
}

.gi-content{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 18px;
  position:relative;
  z-index:1;
}

.gi-content::after{
  content:'';
  position:absolute;
  left:16px;
  right:16px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(90deg,var(--island-accent),rgba(255,255,255,.8)) 0 0 / var(--island-progress) 100% no-repeat,
    rgba(255,255,255,.09);
  opacity:0;
  transform:scaleX(.92);
  transform-origin:left center;
  transition:opacity .24s ease,transform .38s cubic-bezier(.2,1,.36,1),background-size .45s cubic-bezier(.2,1,.36,1);
}

.global-island[data-state="active"] .gi-content::after{
  opacity:1;
  transform:scaleX(1);
}

.global-island[data-state="idle"] .gi-content{
  padding:0 14px;
}

.gi-icon{
  width:24px;
  height:24px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.68),transparent 18%),
    linear-gradient(145deg,var(--island-accent),color-mix(in srgb,var(--island-accent) 72%,#000));
  border-radius:50%;
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 2px rgba(0,0,0,.24),
    0 0 18px var(--island-glow);
  transition:width .52s cubic-bezier(.2,1.18,.36,1),height .52s cubic-bezier(.2,1.18,.36,1),background .28s ease,box-shadow .28s ease,transform .4s cubic-bezier(.2,1.18,.36,1);
}

.global-island[data-state="active"] .gi-icon{
  width:35px;height:35px;
  animation:islandIconPulse 1.8s ease-in-out infinite;
}

.gi-icon svg{
  width:14px;height:14px;
  transition:all .3s;
}

.global-island[data-state="active"] .gi-icon svg{
  width:18px;height:18px;
}

.gi-text{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:hidden;
  opacity:0;
  transform:translateX(-8px) scale(.98);
  transition:opacity .24s ease .12s, transform .38s cubic-bezier(.2,1,.36,1) .08s;
  min-width:0;
}

.global-island[data-state="expanded"] .gi-text,
.global-island[data-state="active"] .gi-text{
  opacity:1;
  transform:translateX(0);
}

.gi-title{
  font-size:.76rem;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  letter-spacing:0;
  line-height:1.16;
}

.gi-subtitle{
  font-size:.61rem;
  font-weight:500;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:0;
  line-height:1.15;
}

.gi-meta{
  flex-shrink:0;
  display:flex;
  align-items:center;
  opacity:0;
  transform:scale(.9);
  transition:opacity .24s ease .16s, transform .38s cubic-bezier(.2,1,.36,1) .12s;
}

.global-island[data-state="active"] .gi-meta{
  opacity:1;
  transform:scale(1);
}

.gi-progress-ring{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  filter:drop-shadow(0 0 10px var(--island-glow));
}

.gi-progress-ring svg{
  width:28px;
  height:28px;
}

.gi-progress-text{
  position:absolute;
  font-size:.48rem;
  font-weight:760;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
}

#giProgressCircle{
  transition:stroke-dashoffset .5s cubic-bezier(.2,1,.36,1);
  stroke:var(--island-accent);
}

@keyframes islandIconPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 2px rgba(0,0,0,.24),0 0 16px var(--island-glow)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.2),0 0 28px var(--island-glow)}
}

.global-island.is-changing .gi-icon{
  transform:scale(.82);
}

.global-island.is-changing .gi-text{
  opacity:0;
  transform:translateX(-4px) scale(.98);
  transition-delay:0s;
}

@media(max-width:600px){
  .global-island{top:max(8px, env(safe-area-inset-top))}
  .global-island[data-state="idle"]{width:112px;height:34px}
  .global-island[data-state="expanded"]{width:calc(100vw - 28px);height:58px}
  .global-island[data-state="active"]{width:calc(100vw - 28px);height:66px}
  .global-island::after{right:11px;width:8px;height:8px}
  .gi-title{font-size:.7rem}
  .gi-subtitle{font-size:.57rem}
  .gi-content{gap:9px;padding:0 15px}
  .gi-content::after{left:14px;right:14px;bottom:6px}
  .gi-progress-ring,.gi-progress-ring svg{width:26px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .global-island{transition:opacity .3s ease}
  .global-island[data-state="active"] .gi-icon{animation:none}
  .global-island.is-changing .gi-icon,
  .global-island.is-changing .gi-text{transform:none}
}

/* ============================================
   VISUAL POLISH OVERRIDES
   ============================================ */
:root{
  --bg:#070908;
  --bg2:#0b1110;
  --card:#101614;
  --text:#f6f7ee;
  --gray:#d4d7cb;
  --muted:#949b8f;
  --accent:#83f7cd;
  --accent2:#7dc8ff;
  --pink:#ff8268;
  --grad:linear-gradient(135deg,#f8fff7 0%,#83f7cd 48%,#7dc8ff 100%);
  --shadow:0 22px 58px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.07) inset;
  --shadow-lg:0 34px 92px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.1) inset;
}

html,
body,
.scene:not(.scene-hero),
.morph-transition{
  background:#070908;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 18%,rgba(131,247,205,.12),transparent 24%),
    radial-gradient(circle at 82% 12%,rgba(125,200,255,.1),transparent 24%),
    linear-gradient(180deg,#0b0d0c 0%,#070908 45%,#050605 100%);
}

.grain-overlay{opacity:.12}

.nav-logo{
  top:24px;
  left:32px;
  font-size:clamp(1.15rem,1.6vw,1.55rem);
  letter-spacing:7px;
}

.global-island[data-state="active"]{
  width:min(390px,calc(100vw - 28px));
  height:62px;
}

.global-island[data-state="expanded"]{
  width:min(350px,calc(100vw - 28px));
  height:56px;
}

.gi-title{font-size:.72rem}
.gi-subtitle{font-size:.58rem}
.gi-progress-ring,.gi-progress-ring svg{width:25px;height:25px}

.nav-dock{
  padding:9px 14px;
  border-radius:18px;
  background:rgba(7,9,8,.78);
  border-color:rgba(255,255,255,.16);
}

.dock-item{
  width:42px;
  height:42px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
}

.dock-item svg{width:20px;height:20px}

.scene-stats{
  min-height:320vh;
  background:
    radial-gradient(circle at 50% 28%,rgba(131,247,205,.08),transparent 24%),
    linear-gradient(180deg,#080a09 0%,#07100d 44%,#070908 100%);
}

.scene-stats .sticky-wrap{
  justify-content:center;
  padding:74px 24px 102px;
}

.stats-head{
  width:min(1060px,92vw);
  margin:28px auto 28px;
  text-align:left;
}

.stats-head .tag{
  box-shadow:0 12px 32px rgba(131,247,205,.08);
}

.stats-head h2{
  max-width:760px;
  font-size:clamp(2.4rem,5.2vw,4.8rem);
  line-height:1;
}

.stats-grid{
  width:min(1060px,92vw);
  max-width:none;
  gap:18px;
  padding:0;
}

.stat-card{
  min-height:158px;
  padding:28px 34px 24px;
  border-radius:10px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.045)),
    radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(131,247,205,.1),transparent 46%);
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 18px 48px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.08) inset;
  transform:none;
}

.stat-card:hover{
  border-color:rgba(131,247,205,.48);
  box-shadow:
    0 28px 76px rgba(0,0,0,.48),
    0 0 0 1px rgba(131,247,205,.12),
    0 1px 0 rgba(255,255,255,.12) inset;
}

.stat-card::before{
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 44%,rgba(131,247,205,.06));
}

.stat-number{
  font-size:clamp(3.2rem,4.8vw,5rem);
  letter-spacing:0;
  text-shadow:0 0 34px rgba(131,247,205,.12);
}

.stat-unit{
  color:#83f7cd;
  font-size:.92rem;
  letter-spacing:.7px;
  margin-top:8px;
}

.stat-label{
  max-width:310px;
  color:rgba(246,247,238,.76);
  font-size:.84rem;
  line-height:1.5;
}

.nav{bottom:8px}

@media(max-height:720px) and (min-width:769px){
  .nav-dock{padding:6px 11px}
  .dock-item{width:38px;height:38px}
  .dock-item svg{width:18px;height:18px}
  .stats-head{margin-top:32px;margin-bottom:22px}
  .stats-head h2{font-size:clamp(2.3rem,4.8vw,4.2rem)}
  .stat-card{min-height:145px;padding:24px 30px 22px}
  .stat-number{font-size:clamp(3rem,4.4vw,4.5rem)}
}

.threats-head h2,
.methoden-header h2,
.phishing-head h2,
.pw-title,
.stop-heading{
  line-height:1.02;
}

/* STOP section refinement */
.scene-stop{
  isolation:isolate;
}
.scene-stop::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 34%,rgba(115,245,200,.12),transparent 24%),
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,255,255,.055) 50%,transparent calc(50% + 1px));
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 78%,transparent 100%);
}
.scene-stop .sticky-wrap{
  z-index:1;
  padding:clamp(80px,10vh,118px) 24px 104px;
}
.stop-container{
  width:min(980px,100%);
  max-width:none;
  padding:0;
}
.stop-sign{
  margin-bottom:18px;
  filter:drop-shadow(0 18px 42px rgba(236,72,153,.18));
}
.scene-stop .stop-sign{
  display:none;
}
.stop-sign svg{
  width:clamp(74px,7vw,96px);
  height:auto;
}
.stop-heading{
  margin-bottom:14px;
  text-wrap:balance;
}
.stop-sub{
  max-width:560px;
  margin:0 auto clamp(34px,5vh,54px);
  color:rgba(255,255,255,.68);
  font-size:clamp(.9rem,1.2vw,1.04rem);
  line-height:1.6;
}
.stop-grid{
  position:relative;
  gap:16px;
}
.stop-grid::before{
  content:'';
  position:absolute;
  left:7%;
  right:7%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(115,245,200,.36),rgba(255,107,74,.28),transparent);
  transform:translateY(-50%);
  pointer-events:none;
}
.stop-card{
  --stop-accent:#73f5c8;
  min-height:218px;
  padding:28px 22px 26px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-color:rgba(255,255,255,.13);
  background:
    linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.035)),
    radial-gradient(circle at 50% -18%,color-mix(in srgb,var(--stop-accent) 22%,transparent),transparent 54%);
}
.stop-card[data-letter="T"]{--stop-accent:#64d2ff}
.stop-card[data-letter="O"]{--stop-accent:#ffd166}
.stop-card[data-letter="P"]{--stop-accent:#ff6b4a}
.stop-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border-top:2px solid color-mix(in srgb,var(--stop-accent) 72%,#fff);
  pointer-events:none;
}
.stop-card::after{
  content:attr(data-letter);
  position:absolute;
  right:-10px;
  bottom:-30px;
  font-family:var(--font-heading);
  font-size:8.6rem;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.035);
  pointer-events:none;
}
.stop-step{
  position:absolute;
  top:14px;
  left:14px;
  color:color-mix(in srgb,var(--stop-accent) 74%,#fff);
  font-family:var(--font-heading);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:1.8px;
}
.stop-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  color:var(--stop-accent);
  border:1px solid color-mix(in srgb,var(--stop-accent) 54%,transparent);
  border-radius:50%;
  background:color-mix(in srgb,var(--stop-accent) 9%,transparent);
}
.stop-icon svg{
  width:22px;
  height:22px;
}
.stop-letter{
  margin-bottom:8px;
  background:linear-gradient(135deg,#fff 0%,var(--stop-accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stop-word{
  font-size:.92rem;
}
.stop-desc{
  max-width:150px;
  color:rgba(255,255,255,.66);
}
.stop-card.is-active,
.stop-card:hover{
  border-color:color-mix(in srgb,var(--stop-accent) 46%,#fff);
  box-shadow:0 30px 80px rgba(0,0,0,.52),0 0 42px color-mix(in srgb,var(--stop-accent) 13%,transparent),0 1px 0 rgba(255,255,255,.08) inset;
}
.stop-card.is-active{
  transform:translateY(-6px) scale(1.015);
}
.stop-lateral{
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(320px,1.22fr);
  align-items:center;
  gap:clamp(70px,10vw,150px);
  width:min(1060px,100%);
  margin:0 auto;
  text-align:left;
}
.stop-indicator{
  position:relative;
  padding-left:22px;
}
.stop-indicator::before{
  content:'';
  position:absolute;
  left:0;
  top:42px;
  bottom:92px;
  width:2px;
  border-radius:99px;
  background:linear-gradient(to bottom,#73f5c8,rgba(115,245,200,.2));
}
.stop-kicker{
  color:#73f5c8;
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:18px;
}
.stop-heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin:0 0 22px;
  font-size:clamp(3.2rem,8vw,7.8rem)!important;
  line-height:.84!important;
  letter-spacing:0;
}
.stop-heading-line{
  display:block;
  color:rgba(255,255,255,.88);
  transition:color .35s var(--ease-out-expo),text-shadow .35s var(--ease-out-expo),transform .35s var(--ease-out-expo);
}
.stop-heading-line.is-active{
  color:#73f5c8;
  text-shadow:0 0 34px rgba(115,245,200,.28);
  transform:translateX(10px);
}
.stop-sub{
  margin:0;
  max-width:300px;
  color:rgba(255,255,255,.7);
}
.stop-card-stage{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:clamp(500px,70vh,640px);
  perspective:1200px;
}
.stop-card-frame{
  position:relative;
  width:clamp(300px,28vw,360px);
  height:clamp(500px,68vh,590px);
}
.stop-card-frame .stop-card{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:38px 34px 42px;
  justify-content:flex-end;
  align-items:flex-start;
  text-align:left;
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
}
.stop-card-frame .stop-card::after{
  right:-18px;
  bottom:-46px;
  font-size:15rem;
  color:rgba(255,255,255,.045);
}
.stop-card-frame .stop-step{
  top:22px;
  left:22px;
}
.stop-card-frame .stop-icon{
  position:absolute;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  width:64px;
  height:64px;
}
.stop-card-frame .stop-icon svg{
  width:28px;
  height:28px;
}
.stop-card-frame .stop-letter{
  font-size:clamp(5.4rem,9vw,7.8rem);
  margin-bottom:18px;
}
.stop-card-frame .stop-word{
  font-size:1.25rem;
  margin-bottom:12px;
}
.stop-card-frame .stop-desc{
  max-width:260px;
  font-size:.95rem;
  line-height:1.7;
}
.stop-card-frame .stop-card:not(.is-active){
  pointer-events:none;
}

@media(max-width:768px){
  .nav-logo{top:14px;left:18px;font-size:.9rem;letter-spacing:4px}
  .nav{bottom:12px;width:calc(100vw - 18px);justify-content:center}
  .nav-dock{max-width:100%;overflow-x:auto;scrollbar-width:none;padding:8px 9px}
  .nav-dock::-webkit-scrollbar{display:none}
  .dock-item{width:38px;height:38px;flex:0 0 38px}
  .scene-stats .sticky-wrap{padding:84px 18px 112px}
  .stats-head{width:100%;margin-bottom:24px}
  .stats-grid{width:100%;gap:14px}
  .stat-card{min-height:150px;padding:24px 22px}
  .stat-number{font-size:clamp(3rem,16vw,4.4rem)}
  .stat-label{font-size:.82rem}
  .global-island[data-state="active"],
  .global-island[data-state="expanded"]{width:calc(100vw - 32px)}
  .scene-stop .sticky-wrap{padding:82px 18px 110px;justify-content:flex-start}
  .stop-lateral{grid-template-columns:1fr;gap:28px;text-align:left;width:100%}
  .stop-indicator{padding-left:18px}
  .stop-indicator::before{top:34px;bottom:22px}
  .stop-kicker{font-size:.62rem;margin-bottom:12px}
  .stop-heading{font-size:clamp(3.2rem,18vw,5.2rem)!important;flex-direction:row;gap:12px;margin-bottom:12px}
  .stop-heading-line.is-active{transform:translateY(-4px)}
  .stop-sub{max-width:310px;font-size:.86rem}
  .stop-card-stage{min-height:450px}
  .stop-card-frame{width:min(100%,300px);height:430px}
  .stop-card-frame .stop-card{padding:28px 24px 28px}
  .stop-card-frame .stop-card::after{font-size:10rem;right:-12px;bottom:-32px}
  .stop-card-frame .stop-icon{width:52px;height:52px;top:48px}
  .stop-card-frame .stop-letter{font-size:5rem}
  .stop-card-frame .stop-word{font-size:1.05rem}
  .stop-card-frame .stop-desc{font-size:.82rem;max-width:220px}
}

/* ═══════════════════════════════════════════════════════════
   PHONE FRAME REALISTIC EXTRAS — Speaker, inner bezel
   ═══════════════════════════════════════════════════════════ */
.hw-phone-screen::before{
  /* inner bezel highlight */
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 0 2px rgba(0,0,0,.4);
  pointer-events:none;
  z-index:6;
}

.hw-phone-screen::after{
  /* subtle screen reflection sweep */
  content:'';
  position:absolute;
  top:0;left:-30%;
  width:60%;
  height:100%;
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.05) 40%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.05) 60%,
    transparent 100%);
  transform:skewX(-20deg);
  pointer-events:none;
  z-index:7;
  opacity:.6;
}

/* Dynamic Island state expansion — disabled, island is now static */
.hw-dynamic-island[data-island-state="typing"],
.hw-dynamic-island[data-island-state="success"]{
  background:#0a0a0a;
}

.hw-dynamic-island[data-island-state="success"]::before{
  background:radial-gradient(circle at 35% 35%,#063b2a 0%,#022016 45%,#000 100%);
}

.hw-island-status{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.5rem;
  font-weight:700;
  color:#fff;
  font-family:var(--font-heading);
  white-space:nowrap;
  opacity:0;
  transition:opacity .3s ease .15s;
  z-index:4;
  letter-spacing:.02em;
}

/* island-status, waveform hidden — island is static */
.hw-island-status,
.hw-island-waveform,
.hw-island-inner{ display:none!important; }

.hw-island-status-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px #22c55e;
  animation:islandDotPulse 1.2s ease-in-out infinite;
}

@keyframes islandDotPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

/* Speaker Grille hint (small line under dynamic island for realism, optional) */
.hw-phone-frame .hw-speaker-line{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:42px;
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.04);
  z-index:9;
  opacity:0; /* hidden by default; island is the visual focus */
}

/* Phone inside the card visual — removed (now hw-app-float) */
.hw-scroll-visual .hw-phone-frame{
  display:none;
}

/* Update responsive for new aspect ratio */
@media(max-width:768px){
  .hw-phone-frame{
    width:min(250px,90%) !important;
    border-radius:44px;
  }
  .hw-phone-screen{border-radius:34px}
}

/* ============================================
   BIOMETRIE — Face-ID inspired explainer
   ============================================ */
.mfa-card[data-index="2"] .mfa-card-inner{
  position:relative;
  overflow:hidden;
  gap:8px;
  padding:clamp(18px,2.3vh,26px) clamp(16px,1.8vw,22px);
  justify-content:center;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.13),transparent 32%),
    radial-gradient(circle at 50% 48%,rgba(115,245,200,.08),transparent 45%),
    linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 58%,rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 22px 58px rgba(0,0,0,.34),
    0 0 42px rgba(255,255,255,.035) inset;
}
.mfa-card[data-index="2"] .mfa-card-inner::before{
  content:'';
  position:absolute;
  inset:-42%;
  background:conic-gradient(from 120deg,transparent 0 34%,rgba(255,255,255,.13) 43%,transparent 54% 100%);
  animation:bioMiniSweep 9s linear infinite;
  opacity:.34;
}
.mfa-card[data-index="2"] .mfa-card-inner::after{
  display:none;
}
.mfa-card[data-index="2"] h3,
.mfa-card[data-index="2"] p,
.mfa-card[data-index="2"] .mfa-badge{
  display:none;
}
.mfa-card[data-index="2"] h3{
  margin-top:2px;
  font-size:clamp(.95rem,1.18vw,1.12rem);
  color:#fff;
  letter-spacing:0;
}
.mfa-card[data-index="2"] p{
  max-width:230px;
  font-size:clamp(.64rem,.82vw,.74rem);
  line-height:1.55;
  color:rgba(255,255,255,.66);
}
.mfa-card[data-index="2"] .mfa-badge.empfohlen{
  margin-top:8px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.16);
  border-radius:4px;
}
.bio-card-orbit{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  margin:0;
  pointer-events:none;
}
.bio-card-orbit::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:min(142px,60%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),rgba(115,245,200,.06) 38%,transparent 68%);
  filter:blur(10px);
}
.bio-card-orbit::after{
  content:'';
  position:absolute;
  left:26%;right:26%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  box-shadow:0 0 18px rgba(255,255,255,.18);
  animation:bioMiniScan 2.6s ease-in-out infinite;
}
.bio-card-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  display:block;
  color:rgba(255,255,255,.88);
  background:none;
  border:0;
  box-shadow:none;
}
.bio-card-face img{
  position:absolute;
  left:50%;top:50%;
  width:min(112px,48%);
  height:auto;
  transform:translate(-50%,-50%);
  object-fit:contain;
  display:block;
  filter:invert(1) brightness(1.18) drop-shadow(0 0 28px rgba(255,255,255,.20));
  opacity:.42;
}
.bio-card-ring{
  position:absolute;
  left:50%;top:50%;
  width:min(150px,62%);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  animation:bioRingPulse 3.4s ease-in-out infinite;
}
.bio-card-ring--2{width:min(178px,72%);animation-delay:.7s;opacity:.34;border-color:rgba(255,255,255,.10)}
.bio-card-dot{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  box-shadow:0 0 12px rgba(255,255,255,.42);
}
.bio-card-dot--1{top:20%;right:22%;animation:bioDotOrbit 4.8s linear infinite}
.bio-card-dot--2{top:66%;left:26%;animation:bioDotOrbit 4.8s linear infinite reverse}
@keyframes bioMiniSweep{to{transform:rotate(360deg)}}
@keyframes bioMiniScan{
  0%,100%{transform:translateY(-30px);opacity:.06}
  48%,52%{opacity:.72}
  50%{transform:translateY(30px)}
}
@keyframes bioRingPulse{
  0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.14}
  50%{transform:translate(-50%,-50%) scale(1.04);opacity:.45}
}
@keyframes bioDotOrbit{
  0%,100%{transform:translate(0,0) scale(.72)}
  50%{transform:translate(-7px,7px) scale(1.08)}
}

.mfa-detail-card--bio{
  width:min(1180px,94vw)!important;
  max-width:1180px!important;
  max-height:calc(100vh - 80px);
  overflow:visible;
  padding:0 clamp(16px,2vw,26px)!important;
  text-align:left;
  color:#f7f7f2;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.mfa-detail[data-detail="2"]{
  align-items:flex-start;
  padding-top:clamp(82px,11vh,118px);
}
.mfa-detail-card--bio h3{
  color:#fff!important;
  font-size:clamp(1.55rem,3vw,2.8rem);
  margin:2px 0 6px;
}
.mfa-detail-card--bio .mfa-detail-desc,
.mfa-detail-card--bio .mfa-detail-feat,
.mfa-detail-card--bio span{
  color:rgba(255,255,255,.72);
}
.mfa-detail-card--bio .mfa-detail-top{
  justify-content:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.mfa-detail-card--bio .mfa-detail-num{
  background:none;
  -webkit-text-fill-color:initial;
  color:rgba(255,255,255,.46);
}
.mfa-detail-card--bio .mfa-badge.empfohlen{
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.16);
}
.bio-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:3;
}
.bio-detail-head .mfa-detail-desc{
  max-width:560px;
  margin:0;
  line-height:1.5;
}
.bio-status-pill{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  font-size:.76rem;
  font-weight:800;
  font-family:var(--font-heading);
}
.bio-status-pill span:last-child{color:#fff}
.bio-status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d9e0e8;
  box-shadow:0 0 0 5px rgba(255,255,255,.08),0 0 14px rgba(255,255,255,.4);
  animation:bioStatusPulse 1.3s ease-in-out infinite;
}
@keyframes bioStatusPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.72);opacity:.55}
}
.bio-explainer{
  position:relative;
  min-height:clamp(300px,44vh,430px);
  margin-top:clamp(22px,3.2vh,34px);
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 78%,rgba(255,255,255,.07),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025) 54%,rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 42px rgba(0,0,0,.28) inset,0 1px 0 rgba(255,255,255,.05) inset;
}
.bio-label{
  position:absolute;
  z-index:8;
  max-width:280px;
  padding:0;
  text-shadow:0 12px 28px rgba(0,0,0,.65);
}
.bio-label strong{
  display:block;
  color:#fff;
  font-size:clamp(.82rem,1.05vw,1rem);
  font-weight:900;
  margin-bottom:4px;
}
.bio-label span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:clamp(.72rem,.95vw,.9rem);
  line-height:1.35;
  font-weight:600;
}
.bio-label--camera{left:8%;top:10%}
.bio-label--flood{left:30%;top:39%;max-width:240px}
.bio-label--projector{right:8%;top:9%;max-width:286px}
.bio-phone-top{
  position:absolute;
  left:50%;
  bottom:-16%;
  width:min(1160px,122%);
  aspect-ratio:1600/849;
  height:auto;
  transform:translateX(-50%);
  background:transparent;
  filter:drop-shadow(0 -14px 36px rgba(15,23,42,.18));
}
.bio-phone-model{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  z-index:1;
  pointer-events:none;
}
.bio-phone-glass{
  display:none;
}
.bio-phone-screen{
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:28%;
  border-radius:42% 42% 0 0 / 78% 78% 0 0;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  z-index:2;
}
.bio-phone-screen::after{
  display:none;
}
.bio-notch-module{
  position:absolute;
  left:50%;
  top:72%;
  transform:translateX(-50%);
  width:min(430px,42%);
  height:clamp(58px,5.8vw,78px);
  border-radius:0 0 42px 42px;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px,1.8vw,24px);
  z-index:5;
  pointer-events:none;
}
.bio-sensor{
  display:none;
  position:relative;
  border-radius:50%;
  background:rgba(115,245,200,.28);
  box-shadow:0 0 0 1px rgba(115,245,200,.55),0 0 18px rgba(115,245,200,.52);
  mix-blend-mode:screen;
}
.bio-sensor--camera,
.bio-sensor--projector{
  width:clamp(14px,1.55vw,20px);
  height:clamp(14px,1.55vw,20px);
  background:radial-gradient(circle,#73f5c8 0%,rgba(115,245,200,.2) 68%,transparent 70%);
}
.bio-sensor--flood{
  width:clamp(14px,1.5vw,19px);
  height:clamp(14px,1.5vw,19px);
  border-radius:5px;
  background:rgba(115,245,200,.28);
}
.bio-sensor--dot{
  width:clamp(8px,.95vw,12px);
  height:clamp(8px,.95vw,12px);
  opacity:.55;
}
.bio-connector{
  display:none;
}
.bio-connector::before{
  content:'';
  position:absolute;
  top:-4px;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.48);
  box-shadow:0 0 10px rgba(255,255,255,.18);
}
.bio-connector--camera{left:31.2%;top:25%;height:43%;transform:rotate(0deg)}
.bio-connector--flood{left:39.7%;top:45%;height:25%}
.bio-connector--projector{right:21.7%;top:24%;height:46%}
.bio-ir-beam{
  display:none;
}
.bio-ir-beam--left{transform:translateX(-76%) rotate(-14deg)}
.bio-ir-beam--right{transform:translateX(-24%) rotate(14deg)}
.bio-face-scan{
  display:none;
}
.bio-face-outline{
  position:absolute;
  inset:18px 32px 24px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:46% 46% 40% 40%;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.25));
}
.bio-eye{
  position:absolute;
  top:42%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
}
.bio-eye--left{left:30%}
.bio-eye--right{right:30%}
.bio-mouth{
  position:absolute;
  left:50%;
  bottom:22%;
  width:26px;
  height:10px;
  border-bottom:2px solid rgba(255,255,255,.88);
  border-radius:0 0 22px 22px;
  transform:translateX(-50%);
}
.bio-scan-line{
  position:absolute;
  left:16%;
  right:16%;
  top:22%;
  height:2px;
  background:linear-gradient(90deg,transparent,#73f5c8,transparent);
  box-shadow:0 0 18px rgba(115,245,200,.95);
  animation:bioScanLine 2.2s ease-in-out infinite;
}
.bio-depth-points{
  position:absolute;
  inset:0;
}
.bio-depth-points span{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#73f5c8;
  box-shadow:0 0 10px rgba(115,245,200,.95);
  opacity:.85;
  animation:bioPointPulse 1.9s ease-in-out infinite;
}
.bio-depth-points span:nth-child(1){left:48%;top:15%;animation-delay:0s}
.bio-depth-points span:nth-child(2){left:34%;top:25%;animation-delay:.1s}
.bio-depth-points span:nth-child(3){left:62%;top:25%;animation-delay:.2s}
.bio-depth-points span:nth-child(4){left:29%;top:38%;animation-delay:.3s}
.bio-depth-points span:nth-child(5){left:50%;top:36%;animation-delay:.4s}
.bio-depth-points span:nth-child(6){left:69%;top:39%;animation-delay:.5s}
.bio-depth-points span:nth-child(7){left:26%;top:52%;animation-delay:.6s}
.bio-depth-points span:nth-child(8){left:42%;top:52%;animation-delay:.7s}
.bio-depth-points span:nth-child(9){left:58%;top:52%;animation-delay:.8s}
.bio-depth-points span:nth-child(10){left:74%;top:52%;animation-delay:.9s}
.bio-depth-points span:nth-child(11){left:32%;top:66%;animation-delay:1s}
.bio-depth-points span:nth-child(12){left:50%;top:68%;animation-delay:1.1s}
.bio-depth-points span:nth-child(13){left:68%;top:66%;animation-delay:1.2s}
.bio-depth-points span:nth-child(14){left:40%;top:78%;animation-delay:1.3s}
.bio-depth-points span:nth-child(15){left:58%;top:78%;animation-delay:1.4s}
.bio-depth-points span:nth-child(16){left:18%;top:44%;animation-delay:1.5s}
.bio-depth-points span:nth-child(17){left:82%;top:44%;animation-delay:1.6s}
.bio-depth-points span:nth-child(18){left:50%;top:88%;animation-delay:1.7s}
@keyframes bioScanLine{
  0%,100%{transform:translateY(0);opacity:.2}
  50%{transform:translateY(94px);opacity:1}
}
@keyframes bioPointPulse{
  0%,100%{transform:scale(.65);opacity:.28}
  50%{transform:scale(1.35);opacity:1}
}
.bio-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:12px;
}
.bio-secure-chip{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:270px;
  padding:10px 13px;
  border-radius:14px;
  background:rgba(0,0,0,.72);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 34px rgba(0,0,0,.34);
}
.bio-secure-chip strong,
.bio-secure-chip span{display:block;color:#fff}
.bio-secure-chip strong{font-size:.86rem;font-weight:900;margin-bottom:2px}
.bio-secure-chip span{font-size:.62rem;color:rgba(255,255,255,.65)}
.bio-chip-core{
  width:34px;
  height:34px;
  border-radius:10px;
  background:
    linear-gradient(90deg,transparent 44%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.22) 55%,transparent 56%),
    linear-gradient(0deg,transparent 44%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.22) 55%,transparent 56%),
    linear-gradient(135deg,#2a2d31,#070707);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 24px rgba(255,255,255,.08) inset,0 0 22px rgba(0,0,0,.28);
}
.bio-detail-features{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.bio-detail-features .mfa-detail-feat{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  font-size:.7rem;
}
.bio-detail-features .mfa-detail-feat span{color:rgba(255,255,255,.72)}
.bio-detail-features .mfa-detail-feat svg{
  color:rgba(255,255,255,.65)!important;
}

@media(max-width:768px){
  .mfa-detail-card--bio{
    max-height:none;
    overflow:visible;
    padding:20px 16px!important;
  }
  .bio-detail-head,
  .bio-bottom-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .bio-status-pill{align-self:flex-start}
  .bio-explainer{
    min-height:640px;
    border-radius:18px;
  }
  .bio-label{left:18px!important;right:18px!important;max-width:none}
  .bio-label--camera{top:26px}
  .bio-label--projector{top:148px}
  .bio-label--flood{top:286px}
  .bio-phone-top{
    width:178%;
    height:34%;
    bottom:-8%;
  }
  .bio-notch-module{width:54%;top:18%;gap:12px}
  .bio-connector{display:none}
  .bio-ir-beam{top:34%;height:28%}
  .bio-secure-chip{min-width:0;width:100%}
  .bio-detail-features{justify-content:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .bio-card-ring,
  .bio-card-dot,
  .bio-scan-line,
  .bio-depth-points span,
  .bio-status-dot,
  .mfa-card[data-index="2"] .mfa-card-inner::before{
    animation:none!important;
  }
}

/* ═══ SCENE 8: GSAP-STYLE SCROLL WAYPOINTS ═══ */
.scene-waypoints{
  height:500vh;
  background:#070b0b!important;
  overflow:hidden;
}
.scene-waypoints::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(115,245,200,.08),transparent 36%);
  background-size:87px 87px,87px 87px,12px 12px,12px 12px,100% 100%;
  opacity:.82;
}
.scene-waypoints::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0%,rgba(7,11,11,.22) 58%,rgba(7,11,11,.76) 100%);
}
.waypoint-stage{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.waypoint-hint{
  position:absolute;
  top:8vh;
  left:50%;
  z-index:6;
  transform:translateX(-50%);
  color:rgba(255,255,255,.72);
  font-size:clamp(.86rem,1.25vw,1.08rem);
  font-weight:700;
  letter-spacing:0;
  text-shadow:0 8px 26px rgba(0,0,0,.55);
}
.waypoint-point{
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:3;
  width:clamp(92px,10vw,122px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px dashed rgba(255,255,255,.46);
  border-radius:8px;
  background:rgba(255,255,255,.012);
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;
  transition:border-color .28s,background .28s,box-shadow .28s,opacity .28s;
}
.waypoint-point::before{
  content:'';
  position:absolute;
  inset:50% auto auto 50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%) scale(.72);
  opacity:.72;
  box-shadow:0 0 18px rgba(255,255,255,.46);
  transition:background .28s,box-shadow .28s,transform .28s;
}
.waypoint-point.is-active{
  border-color:rgba(115,245,200,.95);
  background:rgba(115,245,200,.035);
  box-shadow:0 0 34px rgba(115,245,200,.14),0 0 0 1px rgba(115,245,200,.18) inset;
}
.waypoint-point.is-active::before{
  background:#73f5c8;
  transform:translate(-50%,-50%) scale(1);
  box-shadow:0 0 0 9px rgba(115,245,200,.1),0 0 26px rgba(115,245,200,.75);
}
.waypoint-index{
  position:absolute;
  left:10px;
  top:8px;
  color:rgba(255,255,255,.42);
  font-family:var(--font-heading);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:1.5px;
}
.waypoint-point.is-active .waypoint-index{color:#73f5c8}
.waypoint-text{
  position:absolute;
  left:calc(100% + 20px);
  top:50%;
  z-index:7;
  width:min(340px,32vw);
  transform:translateY(-50%);
  color:#fff;
  text-align:left;
  text-shadow:0 12px 32px rgba(0,0,0,.72);
  opacity:.46;
  transition:opacity .28s,transform .28s,filter .28s;
  pointer-events:none;
}
.waypoint-text--left{
  left:auto;
  right:calc(100% + 20px);
  text-align:right;
}
.waypoint-text strong{
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(.9rem,1.18vw,1.12rem);
  font-weight:900;
  line-height:1.15;
  margin-bottom:7px;
  letter-spacing:0;
}
.waypoint-text span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:clamp(.74rem,.95vw,.88rem);
  font-weight:650;
  line-height:1.45;
}
.waypoint-point.is-active .waypoint-text{
  opacity:1;
  transform:translateY(-50%) translateX(4px);
  filter:blur(0);
}
.waypoint-point.is-active .waypoint-text--left{
  transform:translateY(-50%) translateX(-4px);
}
.waypoint-orb{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:clamp(70px,8vw,92px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.48));
}
.waypoint-orb::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:conic-gradient(from 210deg,#32d8ff,#73f5c8 27%,#b06bff 54%,#ff84e8 77%,#32d8ff);
  animation:waypointSpin 4.8s linear infinite;
}
.waypoint-orb::after{
  content:'';
  position:absolute;
  inset:23%;
  border-radius:50%;
  background:#070b0b;
  box-shadow:inset 0 0 16px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.08);
}
.waypoint-orb span{
  position:absolute;
  inset:-18%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(115,245,200,.2),transparent 62%);
  filter:blur(10px);
}
@keyframes waypointSpin{to{transform:rotate(1turn)}}
@media(max-width:768px){
  .waypoint-hint{top:7vh}
  .waypoint-point{width:78px;border-radius:7px}
  .waypoint-point--1{--x:24%!important;--y:68%!important}
  .waypoint-point--2{--x:70%!important;--y:30%!important}
  .waypoint-point--3{--x:76%!important;--y:74%!important}
  .waypoint-point--4{--x:34%!important;--y:24%!important}
  .waypoint-text,
  .waypoint-text--left{
    left:50%;
    right:auto;
    top:calc(100% + 12px);
    width:min(280px,78vw);
    transform:translateX(-50%);
    text-align:center;
  }
  .waypoint-point.is-active .waypoint-text,
  .waypoint-point.is-active .waypoint-text--left{
    transform:translateX(-50%) translateY(4px);
  }
}

@media(prefers-reduced-motion:reduce){
  .waypoint-orb::before{animation:none!important}
  .waypoint-point,.waypoint-point::before,.waypoint-text{transition:none!important}
}

/* Mobile static reading mode: replaces the desktop pinned scrollytelling with a clean page flow. */
@media(max-width:768px){
  html,body{overflow-x:hidden;scroll-behavior:smooth}
  body{cursor:auto}
  .cursor,.cursor-ring,.cursor-glow,.floating-shapes{display:none!important}
  .scene-mfa,
  .nav-dock .dock-item[href="#mfa"]{display:none!important}
  .grain-overlay{opacity:.16}
  .dot-grid{opacity:.16;background-size:24px 24px}

  .scene{min-height:auto}
  .scene-hero{min-height:100svh}
  .scene-hero .tag,
  .hero-title .word,
  .hero-sub,
  .hero-badges,
  .scroll-cue{opacity:1!important;filter:none!important}
  .hero-content{position:relative;height:auto;min-height:100svh;padding:92px 18px 136px}
  .hero-title{font-size:clamp(3.4rem,17vw,5.8rem);letter-spacing:0;margin:22px 0 24px}
  .hero-badges{gap:8px;margin-top:30px}
  .badge{border-radius:999px;max-width:100%}
  .scroll-cue{bottom:74px;width:max-content}
  .scroll-cue-label{font-size:.68rem;letter-spacing:2px}
  .hero-bottom-line{bottom:84px;left:18px;right:18px;max-width:none}
  .hero-particles{display:none}
  .hero-marquee{display:none}

  .morph-transition{display:none}
  .sticky-wrap{position:relative!important;top:auto!important;height:auto!important;min-height:0!important;overflow:visible!important;padding:76px 18px calc(132px + env(safe-area-inset-bottom,0px));justify-content:flex-start}
  .stat-card,
  .t-card,
  .stack-card,
  .smscam-card,
  .phish-mobile-alert,
  .phish-sender-card,
  .phish-check,
  .phish-action-strip,
  .pw-level,
  .waypoint-point{
    opacity:0!important;
    transform:translateY(22px) scale(.985)!important;
    filter:blur(8px)!important;
    transition:
      opacity .58s var(--ease-out-expo) var(--mobile-delay,0ms),
      transform .58s var(--ease-out-expo) var(--mobile-delay,0ms),
      filter .58s var(--ease-out-expo) var(--mobile-delay,0ms)!important;
  }
  .mobile-in-view{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  .scene-why,
  .scene-stats,
  .scene-threats,
  .scene-scammer,
  .scene-phishing,
  .scene-passwords,
  .scene-mfa,
  .scene-stop,
  .scene-erstehilfe,
  .scene-waypoints,
  .scene-morph-demo{height:auto!important;min-height:0!important;overflow:visible!important}

  .scene-why .sticky-wrap{align-items:flex-start;padding:64px 18px}
  .big-text-track{display:flex;flex-direction:column;gap:8px;width:100%;padding:0!important;white-space:normal;transform:none!important}
  .big-word{font-size:clamp(2.7rem,15vw,4.6rem);letter-spacing:0;line-height:.92;color:rgba(255,255,255,.86)}
  .big-word.active,.big-word.accent{transform:none;text-shadow:none}

  .scene-stats .sticky-wrap{padding:72px 18px calc(144px + env(safe-area-inset-bottom,0px))}
  .stats-head,.threats-head,.methoden-header,.phishing-head{text-align:left;padding-left:0;padding-right:0;width:100%}
  .stats-head{margin-bottom:24px}
  .stats-head h2,.threats-head h2,.methoden-header h2,.phishing-head h2,.pw-title,.stop-heading,.eh-container h2{font-size:clamp(2rem,12vw,3.5rem);letter-spacing:0;line-height:1}
  .stats-grid{grid-template-columns:1fr;width:100%;padding:0;gap:12px;transform:none!important}
  .stat-card{opacity:1!important;transform:none!important;filter:none!important;min-height:auto;padding:22px 22px 20px;border-radius:8px}
  .stat-number{font-size:clamp(2.9rem,15vw,4rem);line-height:.95}
  .stat-unit{margin-top:8px}
  .stat-label{margin-top:10px;font-size:.8rem;line-height:1.55}

  .threats-pin{min-height:0;padding:76px 18px 92px;display:block}
  .threats-head{margin-bottom:22px}
  .threats-track{display:flex;flex-direction:column;width:100%;gap:14px;padding:0;transform:none!important}
  .t-card{width:100%;flex:0 0 auto;padding:26px 22px;border-radius:8px;clip-path:none!important;opacity:1!important;transform:none!important}
  .t-num{font-size:3.8rem;top:-8px;right:12px}

  .scene-methoden{padding-bottom:0!important}
  .methoden-sticky{position:relative;height:auto;overflow:visible;padding:76px 18px 92px}
  .methoden-sticky .methoden-header{text-align:left;padding:0;width:100%}
  .methoden-sticky .methoden-sub{max-width:none;margin-left:0;font-size:.9rem;line-height:1.65}
  .methoden-sticky .card-stack,
  .methoden-sticky .card-stack.is-deck{display:flex;flex-direction:column;gap:18px;width:100%;height:auto;padding:0;margin-top:28px}
  .methoden-sticky .card-stack.is-deck .stack-card,
  .methoden-sticky .stack-card{position:relative;inset:auto;width:100%;height:auto;opacity:1!important;transform:none!important;filter:none!important;padding:0;margin:0}
  .methoden-sticky .stack-card-inner{min-height:auto;padding:58px 22px 26px;text-align:left;align-items:flex-start;border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.035))}
  .methoden-sticky .stack-card h3,.methoden-sticky .stack-card p{width:100%;max-width:none;text-align:left}
  .methoden-sticky .stack-card p{max-height:none;overflow:visible;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.76)}
  .methoden-sticky .stack-card-badge{opacity:1;align-self:flex-start}
  .methoden-sticky .method-progress{display:none}

  .scene-scammer{padding:76px 18px calc(136px + env(safe-area-inset-bottom,0px));background:#070b0b!important}
  .scammer-frame{display:none!important}
  .scammer-mobile-story{display:block;color:#fff}
  .smscam-head{margin-bottom:24px}
  .smscam-head h2{font-family:var(--font-heading);font-size:clamp(2rem,12vw,3.45rem);line-height:1;letter-spacing:0;margin-top:14px}
  .smscam-head p{margin-top:12px;color:rgba(255,255,255,.72);font-size:.9rem;line-height:1.65}
  .smscam-board{display:grid;grid-template-columns:1fr;gap:12px;position:relative}
  .smscam-card{
    position:relative;
    min-height:154px;
    padding:22px 20px 20px 76px;
    border-radius:8px;
    overflow:hidden;
    background:
      radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--step-color) 18%,transparent),transparent 34%),
      linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
    border:1px solid color-mix(in srgb,var(--step-color) 30%,rgba(255,255,255,.14));
    box-shadow:0 16px 42px rgba(0,0,0,.26),0 1px 0 rgba(255,255,255,.08) inset;
  }
  .smscam-card::before{
    content:'';
    position:absolute;
    left:38px;
    top:62px;
    bottom:-16px;
    width:1px;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--step-color) 56%,transparent),transparent);
  }
  .smscam-card:last-child::before{display:none}
  .smscam-num{
    position:absolute;
    top:18px;
    right:18px;
    font-family:var(--font-heading);
    font-weight:900;
    font-size:2.3rem;
    line-height:1;
    color:rgba(255,255,255,.06);
  }
  .smscam-icon{
    position:absolute;
    left:20px;
    top:22px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--step-color);
    background:color-mix(in srgb,var(--step-color) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--step-color) 44%,transparent);
  }
  .smscam-icon svg{width:19px;height:19px}
  .smscam-card h3{font-family:var(--font-heading);font-size:1.08rem;line-height:1.15;margin:0 0 8px;color:#fff;letter-spacing:0}
  .smscam-card p{font-size:.82rem;line-height:1.58;color:rgba(255,255,255,.72);margin:0}
  .smscam-result{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:4px 10px;
    align-items:center;
    margin-top:16px;
    padding:16px 18px;
    border-radius:8px;
    background:rgba(115,245,200,.075);
    border:1px solid rgba(115,245,200,.22);
    color:rgba(255,255,255,.78);
    font-size:.82rem;
    line-height:1.5;
  }
  .smscam-result strong{color:#73f5c8;font-family:var(--font-heading);letter-spacing:0}
  .smscam-result span:last-child{grid-column:2;color:rgba(255,255,255,.7)}
  .smscam-pulse{width:10px;height:10px;border-radius:50%;background:#73f5c8;box-shadow:0 0 0 6px rgba(115,245,200,.12),0 0 20px rgba(115,245,200,.42)}
  .smscam-card.mobile-in-view .smscam-icon,
  .phish-check.mobile-in-view .phish-check-icon,
  .phish-mobile-alert.mobile-in-view .phish-alert-icon{
    animation:mobileIconPop .72s var(--ease-spring) both;
  }
  .smscam-result.mobile-in-view .smscam-pulse,
  .phish-action-strip.mobile-in-view::before{
    animation:mobilePulse 1.8s ease-in-out infinite;
  }
  .scammer-desktop{min-height:auto;height:auto}
  .scammer-compose{padding:22px 18px 24px;gap:0;justify-content:flex-start}
  .compose-field{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:start;padding:12px 0;gap:10px}
  .compose-label{min-width:0;font-size:.62rem;letter-spacing:1px}
  .compose-value{font-size:.78rem;line-height:1.55;word-break:break-word}
  .compose-body{min-height:170px}
  .compose-body .compose-value{font-size:.78rem;line-height:1.65}
  .compose-actions{flex-direction:column;align-items:stretch;gap:12px;padding-top:20px}
  .compose-send{justify-content:center;cursor:pointer;width:100%;opacity:1}
  .compose-hint{opacity:1;text-align:center;color:var(--red)}
  .compose-cursor,.pip-label{display:none}

  .scene-phishing .sticky-wrap{padding:76px 18px calc(142px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .phishing-head{margin-bottom:24px}
  .phishing-sub{opacity:1!important;transform:none!important;filter:none!important;margin-left:0;margin-right:0;max-width:none}
  .phishing-demo{display:none}
  .phish-mobile-panel{display:block;color:#fff}
  .phish-mobile-alert{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:8px;
    background:
      radial-gradient(circle at 18% 20%,rgba(255,107,74,.24),transparent 40%),
      linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border:1px solid rgba(255,107,74,.28);
    box-shadow:0 18px 48px rgba(0,0,0,.26);
  }
  .phish-alert-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    color:#ff6b4a;
    background:rgba(255,107,74,.13);
    border:1px solid rgba(255,107,74,.34);
  }
  .phish-alert-icon svg{width:23px;height:23px}
  .phish-mobile-alert span{display:block;font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#ff9f8d;font-family:var(--font-heading)}
  .phish-mobile-alert strong{display:block;margin-top:4px;font-family:var(--font-heading);font-size:1rem;line-height:1.2;color:#fff}
  .phish-sender-card{
    margin-top:14px;
    padding:18px;
    border-radius:8px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.12);
  }
  .phish-sender-label{display:block;color:#73f5c8;font-family:var(--font-heading);font-size:.62rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
  .phish-sender-card strong{display:block;font-size:1rem;color:#fff;overflow-wrap:anywhere}
  .phish-sender-card p{margin-top:8px;color:rgba(255,255,255,.7);font-size:.82rem;line-height:1.55}
  .phish-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .phish-check{
    position:relative;
    min-height:164px;
    padding:16px 14px 15px;
    border-radius:8px;
    background:
      radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--check-color) 18%,transparent),transparent 44%),
      linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
    border:1px solid color-mix(in srgb,var(--check-color) 28%,rgba(255,255,255,.12));
    overflow:hidden;
  }
  .phish-check-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--check-color);
    background:color-mix(in srgb,var(--check-color) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--check-color) 40%,transparent);
    margin-bottom:18px;
  }
  .phish-check-icon svg{width:18px;height:18px}
  .phish-check h3{font-family:var(--font-heading);font-size:.98rem;line-height:1.1;color:#fff;margin:0 0 8px;letter-spacing:0}
  .phish-check p{margin:0;color:rgba(255,255,255,.68);font-size:.76rem;line-height:1.45}
  .phish-action-strip{
    margin-top:14px;
    padding:16px 18px;
    border-radius:8px;
    background:rgba(115,245,200,.08);
    border:1px solid rgba(115,245,200,.22);
    position:relative;
    overflow:hidden;
  }
  .phish-action-strip::before{
    content:'';
    position:absolute;
    top:14px;
    right:14px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:#73f5c8;
    box-shadow:0 0 0 6px rgba(115,245,200,.12),0 0 20px rgba(115,245,200,.42);
  }
  .phish-action-strip strong{display:block;color:#73f5c8;font-family:var(--font-heading);font-size:.86rem;margin-bottom:4px}
  .phish-action-strip span{display:block;color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.5}
  .email-glow{display:none}
  .email-mockup{width:100%;transform:none!important;border-radius:8px;overflow:visible;opacity:1!important;filter:none!important}
  .email-body{padding:24px 20px 22px}
  .email-from{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .email-btn{width:100%;justify-content:center;text-align:center}
  .red-flag{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;opacity:1!important;margin-top:10px;width:100%;display:flex}
  .rf-line{display:none}
  .rf-tag{width:100%;justify-content:flex-start;white-space:normal;border-radius:8px;background:rgba(255,255,255,.96)}

  .scene-passwords .sticky-wrap{padding:76px 18px 92px;align-items:stretch}
  .pw-container{padding:0;max-width:none;text-align:left}
  .pw-title{margin:14px 0 30px}
  .pw-levels{gap:20px}
  .pw-level,.pw-tip{opacity:1!important;transform:none!important;filter:none!important}
  .pw-info{gap:14px;align-items:flex-start}
  .pw-example{font-size:.78rem;line-height:1.35;overflow-wrap:anywhere}
  .pw-time{text-align:right;white-space:nowrap;font-size:.72rem}
  .pw-bar{width:var(--w)}
  .pw-tip{margin-top:34px;border-radius:8px;padding:18px 16px}

  .scene-mfa{padding:76px 18px 92px;background:#070b0b!important}
  .mfa-sticky{position:relative;height:auto;display:block;overflow:visible}
  .mfa-stage{display:block;width:100%;height:auto;max-width:none;transform:none!important;perspective:none}
  .mfa-header{display:block;text-align:left;padding:0 0 24px;pointer-events:auto}
  .mfa-header h2{font-size:clamp(2rem,12vw,3.5rem);max-width:none;line-height:1;margin-top:12px}
  .mfa-sub{display:block;margin-top:12px;color:rgba(255,255,255,.72);line-height:1.65}
  .mfa-card{display:none}
  .mfa-card[data-index="0"]{display:block;height:auto;overflow:visible;margin:26px 0 20px;border-radius:8px}
  .mfa-card[data-index="0"] .mfa-card-inner{min-height:420px;background:transparent;border:0;box-shadow:none;padding:0}
  .mfa-card[data-index="0"] .auth-logo-wrap{display:none}
  .mfa-card[data-index="0"] .auth-app-mockup{position:relative;opacity:1!important;transform:none!important;filter:none!important;height:420px;display:flex;border-radius:34px;padding:0;background:linear-gradient(160deg,#33343c 0%,#121219 36%,#07070a 72%,#000 100%)}
  .mfa-card[data-index="0"] .iphone-screen{position:absolute;inset:10px;border-radius:28px;display:flex;flex-direction:column;background:linear-gradient(180deg,#171720 0%,#09090d 100%);overflow:hidden}
  .mfa-card[data-index="0"] .iphone-island,.mfa-card[data-index="0"] .iphone-statusbar{display:block}
  .mfa-card[data-index="0"] .iphone-content{display:flex;flex-direction:column;padding:56px 16px 18px;gap:10px;color:#fff}
  .mfa-card[data-index="0"] .auth-app-title,.mfa-card[data-index="0"] .auth-account-name{color:#fff}
  .mfa-card[data-index="0"] .auth-bottom-row{display:flex}
  .mfa-overlay{display:none}
  .mfa-details{position:relative;inset:auto;display:flex;flex-direction:column;gap:18px;pointer-events:auto}
  .mfa-detail{position:relative;inset:auto;display:block;opacity:1!important;transform:none!important;padding:0;overflow:visible}
  .mfa-detail-card{width:100%;max-width:none;border-radius:8px;padding:24px 20px!important;box-shadow:0 18px 54px rgba(0,0,0,.32)}
  .mfa-detail-card--sms,.mfa-detail-card--hw,.mfa-detail-card--bio{max-height:none;overflow:visible}
  .sms-demo{display:block}
  .sms-iphone{width:min(220px,100%);margin:18px auto;transform:none}
  .hw-scroll-visual{display:block!important}
  .hw-3d-viewport,.hw-phone-wrap{width:100%;margin:16px auto}
  .hw-connection{display:none!important}
  .mfa-counter{display:none}

  .scene-stop .sticky-wrap{padding:76px 18px calc(140px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .stop-container{padding:0;max-width:none;text-align:left}
  .stop-lateral{display:block;width:100%;text-align:left;position:relative}
  .stop-indicator{
    padding:18px;
    margin-bottom:18px;
    border-radius:8px;
    background:
      radial-gradient(circle at 12% 20%,rgba(115,245,200,.18),transparent 42%),
      linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035));
    border:1px solid rgba(115,245,200,.22);
    box-shadow:0 18px 48px rgba(0,0,0,.26);
  }
  .stop-indicator::before{display:none}
  .stop-kicker{font-size:.62rem;letter-spacing:2px;margin-bottom:12px}
  .stop-heading{flex-direction:row!important;gap:6px!important;font-size:clamp(3.2rem,20vw,5.4rem)!important;margin-bottom:12px;line-height:.82!important}
  .stop-heading-line{transform:none!important;color:#73f5c8;text-shadow:0 0 28px rgba(115,245,200,.22)}
  .stop-sub{max-width:none;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.72)}
  .stop-card-stage{min-height:0;display:block;perspective:none}
  .stop-card-frame{display:grid;grid-template-columns:1fr;gap:12px;width:100%;height:auto;position:relative}
  .stop-card-frame::before{
    content:'';
    position:absolute;
    left:27px;
    top:28px;
    bottom:28px;
    width:2px;
    border-radius:99px;
    background:linear-gradient(to bottom,#73f5c8,#64d2ff,#ffd166,#ff6b4a);
    opacity:.65;
  }
  .stop-card-frame .stop-card{
    --stop-accent:#73f5c8;
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:0;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    align-items:center;
    gap:14px;
    padding:18px 16px;
    text-align:left;
    pointer-events:auto!important;
    border-radius:8px;
    background:
      radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--stop-accent) 18%,transparent),transparent 40%),
      linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
    border:1px solid color-mix(in srgb,var(--stop-accent) 30%,rgba(255,255,255,.12));
    box-shadow:0 12px 34px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.07) inset;
  }
  .stop-card-frame .stop-card[data-letter="T"]{--stop-accent:#64d2ff}
  .stop-card-frame .stop-card[data-letter="O"]{--stop-accent:#ffd166}
  .stop-card-frame .stop-card[data-letter="P"]{--stop-accent:#ff6b4a}
  .stop-card-frame .stop-card::before{border-top:0}
  .stop-card-frame .stop-card::after{display:none}
  .stop-card-frame .stop-step{
    top:10px;
    left:auto;
    right:14px;
    font-size:.58rem;
    color:color-mix(in srgb,var(--stop-accent) 72%,#fff);
  }
  .stop-card-frame .stop-icon{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:38px;
    height:38px;
    grid-row:1 / span 3;
    margin:0;
    z-index:2;
    background:#070b0b;
    box-shadow:0 0 0 6px rgba(7,11,11,.85),0 0 24px color-mix(in srgb,var(--stop-accent) 24%,transparent);
  }
  .stop-card-frame .stop-icon svg{width:19px;height:19px}
  .stop-card-frame .stop-letter{display:none}
  .stop-card-frame .stop-word{grid-column:2;font-size:1.02rem;margin:0 0 4px;color:#fff}
  .stop-card-frame .stop-desc{grid-column:2;max-width:none;font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.7)}

  .scene-waypoints{padding:76px 18px 92px;background:#070b0b!important}
  .scene-waypoints .sticky-wrap{padding:0!important}
  .waypoint-stage{width:100%;height:auto;display:flex;flex-direction:column;gap:14px;overflow:visible;color:#fff}
  .waypoint-hint{position:relative;top:auto;left:auto;transform:none;margin-bottom:10px;text-align:left}
  .waypoint-point{position:relative;left:auto!important;top:auto!important;transform:none!important;width:100%;aspect-ratio:auto;min-height:128px;padding:18px;border-radius:8px;background:rgba(255,255,255,.035)}
  .waypoint-point::before{left:22px;top:22px;transform:none}
  .waypoint-index{left:42px;top:15px}
  .waypoint-text,.waypoint-text--left{position:relative;left:auto;right:auto;top:auto;width:100%;padding:34px 0 0;text-align:left;transform:none!important;opacity:1;filter:none;text-shadow:none}
  .waypoint-orb{display:none}

  .scene-final{min-height:auto;padding:86px 18px 130px}
  .scene-final .scene-content{min-height:0;padding:0;text-align:left;align-items:flex-start}
  .final-title,
  .final-title .word,
  .final-sub,
  .final-cta,
  .final-cta .btn-glow,
  .credit{opacity:1!important;transform:none!important;filter:none!important}
  .final-title{font-size:clamp(2.8rem,14vw,5rem);letter-spacing:0;line-height:.95}
  .final-cta{flex-direction:column;width:100%;align-items:stretch}
  .final-cta .btn-glow{width:100%;justify-content:center}

  body.mobile-static .stat-card,
  body.mobile-static .t-card,
  body.mobile-static .stack-card,
  body.mobile-static .smscam-card,
  body.mobile-static .phish-mobile-alert,
  body.mobile-static .phish-sender-card,
  body.mobile-static .phish-check,
  body.mobile-static .phish-action-strip,
  body.mobile-static .pw-level,
  body.mobile-static .waypoint-point{
    opacity:0!important;
    transform:translateY(22px) scale(.985)!important;
    filter:blur(8px)!important;
  }
  body.mobile-static .mobile-in-view{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

@keyframes mobileIconPop{
  0%{transform:scale(.72);opacity:.45}
  64%{transform:scale(1.12);opacity:1}
  100%{transform:scale(1);opacity:1}
}

@keyframes mobilePulse{
  0%,100%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.35);opacity:1}
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .stat-card,
  .t-card,
  .stack-card,
  .smscam-card,
  .phish-mobile-alert,
  .phish-sender-card,
  .phish-check,
  .phish-action-strip,
  .pw-level,
  .stop-card-frame .stop-card,
  .waypoint-point{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }
  .smscam-card .smscam-icon,
  .phish-check .phish-check-icon,
  .phish-alert-icon,
  .smscam-pulse,
  .phish-action-strip::before{animation:none!important}
}