/**
 * AG-Kit AgentVisualizer - 3D Hero Stage, Monumental Headlines & Squad Roster
 * Handles spatial lighting, background canvas, 3D typography, cutouts, flanking wings & avatars.
 */
/* Layer 0: Ambient Glow & Depth Mesh */
.hero-bg-canvas{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.hero-glow-core{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:780px;height:520px;
  background:radial-gradient(ellipse at center,rgba(200,255,46,.08) 0%,rgba(142,197,255,.05) 45%,transparent 72%);
  filter:blur(50px);opacity:.9;will-change:transform;transition:background .6s ease}
.hero-glow-mesh{position:absolute;inset:0;
  background-image:radial-gradient(ellipse 600px 350px at 50% 30%,rgba(200,255,46,.045),transparent 70%),
                   radial-gradient(ellipse 500px 300px at 80% 65%,rgba(142,197,255,.03),transparent 65%);
  background-repeat:no-repeat;background-size:cover}
.hero-fade-bottom{position:absolute;bottom:0;left:0;right:0;height:260px;z-index:25;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(7,8,10,.25) 35%,rgba(7,8,10,.75) 75%,rgba(7,8,10,.95) 100%)}
.hero-divider{position:relative;width:100%;height:1px;
  background:radial-gradient(ellipse 70% 1px at 50% 0%, rgba(200,255,46,.45) 0%, rgba(142,197,255,.2) 40%, rgba(255,255,255,.06) 65%, transparent 85%);
  z-index:20;pointer-events:none;margin-top:-1px}
.hero-divider::after{content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:min(720px,85vw);height:36px;
  background:radial-gradient(ellipse at center, rgba(200,255,46,.1) 0%, rgba(142,197,255,.04) 45%, transparent 72%);pointer-events:none}
.milk{position:absolute;z-index:28;pointer-events:none}
.milk.top{top:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  -webkit-mask-image:linear-gradient(to bottom,black 60%,transparent 100%);mask-image:linear-gradient(to bottom,black 60%,transparent 100%)}

/* Layer 1: Monumentale Headline (Text hinter Charakter) */
.hero-layer-bg-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;will-change:transform;max-width:100vw;overflow:hidden}
.monumental-wrap{text-align:center;width:100%;max-width:100vw;padding:0 24px;user-select:none;margin-top:-14vh;display:flex;flex-direction:column;align-items:center;overflow:hidden;box-sizing:border-box;
  transition:opacity .32s ease,transform .36s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.monumental-wrap.switching{opacity:.18;transform:scale(.98) translateY(-4px)}

.monumental-line-sub{font-family:Archivo,sans-serif;font-size:clamp(18px,3.5vw,46px);font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(200,255,46,.5);text-shadow:0 0 35px rgba(200,255,46,.35);margin-bottom:6px;display:block;transition:opacity .3s ease}
.monumental-line-main{font-family:Archivo,sans-serif;font-size:clamp(62px,13.6vw,185px);font-weight:900;letter-spacing:-.04em;text-transform:uppercase;line-height:.82;margin:0;display:block;
  background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.94) 28%,rgba(142,197,255,.42) 70%,rgba(200,255,46,.25) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.28);
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.92));
  text-shadow:0 0 50px rgba(142,197,255,.14);
  transition:opacity .3s ease,transform .3s ease}

/* Layer 2: Freigestellter Charakter mit Dual-Buffer Crossfade (Zero-Abhacken, seidenweiches Gleiten) */
.hero-layer-character{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:64px;z-index:20;pointer-events:none;overflow:hidden}
.char-cutout-box{position:relative;height:calc(100svh - 64px);max-height:860px;width:100%;max-width:960px;display:flex;align-items:flex-start;justify-content:center;will-change:transform;z-index:22;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,0.3) 88%, transparent 97%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 68%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,0.3) 88%, transparent 97%);}
.hero-cutout-img{position:absolute;top:0;left:50%;transform:translateX(-50%) translate3d(0,0,0) scale(1);height:100%;width:auto;max-width:96vw;object-fit:contain;object-position:center top;display:block;
  pointer-events:none;will-change:transform,opacity;
  transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.hero-cutout-img.active{opacity:1;transform:translateX(-50%) translate3d(0,0,0) scale(1);z-index:2}
.hero-cutout-img.inactive{opacity:0;transform:translateX(-50%) translate3d(0,18px,0) scale(.97);z-index:1}
.hero-cutout-img.outgoing{opacity:0;transform:translateX(-50%) translate3d(0,-10px,0) scale(1.02);z-index:1}
/* 3D Carousel Directional Slide Transitions */
.hero-cutout-img.slide-prep-next{opacity:0;transform:translateX(calc(-50% + 75px)) scale(.94);z-index:2}
.hero-cutout-img.slide-prep-prev{opacity:0;transform:translateX(calc(-50% - 75px)) scale(.94);z-index:2}
.hero-cutout-img.slide-out-next{opacity:0;transform:translateX(calc(-50% - 75px)) scale(.94);z-index:1}
.hero-cutout-img.slide-out-prev{opacity:0;transform:translateX(calc(-50% + 75px)) scale(.94);z-index:1}

/* 3D Flanking Squad Roster (Cinematic Arc & Perspective) */
.hero-flank-wing{
  position:absolute;top:0;height:100%;width:auto;max-width:540px;
  z-index:18;pointer-events:auto;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  transition:transform .4s cubic-bezier(.16,1,.3,1), filter .35s ease, opacity .35s ease;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none;
}
.hero-flank-wing.flank-left{
  left:-70px;
  transform:scale(0.78);
  transform-origin:left top;
}
.hero-flank-wing.flank-right{
  right:-70px;left:auto;
  transform:scale(0.78);
  transform-origin:right top;
}
.flank-inner{
  position:relative;height:100%;display:flex;flex-direction:column;align-items:center;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;outline:none;
}
.flank-cutout-img{
  height:calc(100svh - 64px);max-height:820px;width:auto;object-fit:contain;object-position:center top;
  display:block;pointer-events:none;
  transition:filter .35s ease, transform .4s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  filter:brightness(0.62) contrast(1.04);opacity:0.75;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.2) 86%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0.2) 86%, transparent 96%);
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;
}
@media (hover: hover) and (pointer: fine) {
  .hero-flank-wing:hover .flank-cutout-img{
    opacity:1.0;
    filter:brightness(1.08) contrast(1.04);
  }
  .hero-flank-wing.flank-left:hover{
    transform:scale(0.82) translateX(24px) translateY(-4px);
  }
  .hero-flank-wing.flank-right:hover{
    transform:scale(0.82) translateX(-24px) translateY(-4px);
  }
  @media (min-width:1321px){
    .hero-flank-wing.flank-left:hover{transform:scale(0.82) translateX(24px) translateY(8px)}
    .hero-flank-wing.flank-right:hover{transform:scale(0.82) translateX(-24px) translateY(26px)}
  }
}
@media (min-width:1321px){
  /* The right source cutout has a higher internal head baseline than the left. */
  .hero-flank-wing.flank-left{transform:scale(0.78) translateY(12px)}
  .hero-flank-wing.flank-right{transform:scale(0.78) translateY(30px)}
}
.flank-badge{
  position:absolute;top:22%;left:50%;transform:translateX(-50%) translateY(10px);
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  background:rgba(12,14,18,.9);border:1px solid rgba(200,255,46,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.75), 0 0 16px rgba(200,255,46,.25);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;font-size:11.5px;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .28s cubic-bezier(.16,1,.3,1);
  z-index:22;display:none !important;
}
.flank-badge-dot{
  width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);
}
@media (hover: hover) and (pointer: fine) {
  .hero-flank-wing:hover .flank-badge{
    opacity:1;transform:translateX(-50%) translateY(0);
  }
}
.flank-stage-type{display:none}
@media (min-width:681px) and (max-width:1320px){
  .hero-flank-wing{display:none !important}
}

/* Layer 3: Foreground UI & Interaktion */
.hero-layer-ui{position:relative;z-index:30;width:100%;max-width:min(1760px,calc(100vw - 48px));margin:0 auto;padding:0 40px;
  display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:0;padding-bottom:clamp(96px,12.5vh,124px);pointer-events:none}
.hero-ui-inner{pointer-events:none;width:100%}
.hero-ui-grid{position:relative;display:grid;grid-template-columns:minmax(320px,420px) minmax(320px,420px);justify-content:space-between;gap:32px;align-items:flex-end}
.hero-ui-left{pointer-events:auto;max-width:420px;will-change:transform,opacity;transition:opacity .3s ease,transform .36s cubic-bezier(.16,1,.3,1)}
.hero-ui-left.switching,.hero-ui-right.switching{opacity:.22;transform:translateY(6px)}
.hero-badge-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(12,14,17,.75);border:1px solid rgba(200,255,46,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:11.5px;margin-bottom:10px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pulseDot 2s infinite ease-in-out}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
.badge-sep{color:rgba(255,255,255,.25)}
.hero-eyebrow-callout{font-family:Archivo,sans-serif;font-size:clamp(26px,3.4vw,42px);font-weight:800;letter-spacing:-1px;
  text-transform:uppercase;line-height:1.06;margin-bottom:8px;text-shadow:0 2px 20px rgba(0,0,0,.85)}
.hero-name-highlight{color:var(--lime);font-weight:900;transition:color .35s ease}
.hero-subtext{font-size:15px;line-height:1.58;color:#e2e8f0;max-width:38ch;margin-bottom:14px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.hero-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.hero-btn-primary{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);box-shadow:0 8px 32px rgba(200,255,46,.28);font-weight:800;padding:12px 22px;font-size:13.5px}
.hero-btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 20px;color:#fff;font-size:13.5px}
.hero-micro-metrics{display:flex;flex-wrap:wrap;gap:6px}
.metric-pill{font-size:11.5px;padding:5px 12px;border-radius:999px;background:rgba(12,14,17,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--mut)}
.metric-pill b{color:#fff;margin-right:3px}

.hero-ui-right{position:absolute;right:-1px;bottom:0;width:min(360px,100%);pointer-events:auto;will-change:transform,opacity;transition:opacity .3s ease,transform .36s cubic-bezier(.16,1,.3,1)}
.hero-symmetric-copy{width:100%;text-align:right}
.hero-symmetric-copy .hero-subtext{max-width:calc(100% - 24px);margin-left:24px}
.hero-symmetric-copy .hero-action-row,.hero-symmetric-copy .hero-micro-metrics{justify-content:flex-end}
.hero-quick-card{max-width:360px;width:100%;padding:18px 20px;border-radius:16px;background:rgba(12,14,17,.75);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 18px 45px rgba(0,0,0,.55);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.hero-quick-card:hover{transform:translateY(-3px);border-color:rgba(200,255,46,.45)}
.qcard-header{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;margin-bottom:8px}
.qcard-tag{padding:3px 8px;border-radius:999px;background:rgba(200,255,46,.14);border:1px solid rgba(200,255,46,.4);color:var(--lime);font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:700}
.qcard-body{font-size:14px;line-height:1.56;color:#e2e8f0;margin-bottom:10px}
.qcard-foot{font-size:10px;color:var(--acc);letter-spacing:1px;font-weight:700;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}

/* Querformat-Sperre (nur Handy): Overlay statt zerquetschter Bühne.
   Greift nur bei grobem Zeiger + flacher Höhe — Desktop/Tablet unberührt. */
.rotate-hint{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .rotate-hint{
    display:flex;align-items:center;justify-content:center;
    position:fixed;inset:0;z-index:200;
    background:rgba(7,8,10,.96);
    padding:24px;
  }
  .rotate-card{
    display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    max-width:340px;padding:28px 24px;border-radius:18px;
    background:rgba(12,14,18,.9);border:1px solid rgba(200,255,46,.35);
  }
  .rotate-icon{color:var(--lime);display:flex}
  .rotate-card strong{font-family:Archivo,sans-serif;font-size:17px;color:#fff}
  .rotate-card span{font-size:13px;color:var(--mut);line-height:1.5}
}

/* Astra Mobile HUD System (Standard: Desktop Hidden) */
.astra-mobile-hud{display:none}

/* sections */
section.block{max-width:var(--max);margin:0 auto;padding:56px 28px}
.kicker{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:2.4px;color:var(--lime);font-weight:700}
.kicker::before{content:"● ";font-size:9px;vertical-align:2px}
h2{font-family:Archivo,sans-serif;font-size:clamp(28px,3.4vw,44px);letter-spacing:-1.5px;line-height:1.02;margin-top:10px}
.lead{color:var(--mut);margin-top:10px;max-width:70ch;line-height:1.7;font-size:15px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.card:hover{transform:var(--lift);border-color:rgba(200,255,46,.55);background:linear-gradient(180deg,#141a06,#12151a 70%);box-shadow:0 12px 40px rgba(200,255,46,.16)}
.card h3{font-size:16px;margin:10px 0 6px}
.card p{font-size:13.5px;line-height:1.65;color:var(--mut)}
.icon{font-size:22px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.stat{background:linear-gradient(180deg,#141922,#0c0e11);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center}
.mobile-swipe-guide{display:none !important}

@media (max-width:680px){
  /* Hinweis: Topnav-Layout lebt zentral in css/base.css (Regel 13). */
  .milk.top{height:60px;opacity:.6}

  /* Astra Mobile HUD Pill (Spatial Anchor) */
  .astra-mobile-hud{
    position:absolute;top:calc(54px + env(safe-area-inset-top, 0px));bottom:auto;left:10px;right:10px;z-index:35;
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    pointer-events:auto;user-select:none;
  }
  .astra-hud-pill{
    flex:1;min-width:0;
    display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
    background:rgba(12,14,18,.86);border:1px solid rgba(200,255,46,.45);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 4px 18px rgba(0,0,0,.65);font-size:11px;font-weight:700;color:#fff;
    overflow:hidden;
  }
  .astra-hud-id{color:var(--lime);font-size:9.5px;font-weight:800;flex-shrink:0}
  .astra-hud-name{color:#fff;font-weight:900;letter-spacing:-.2px;flex-shrink:0}
  .astra-hud-role{color:var(--mut);font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:115px}
  @media (max-width:375px){
    .astra-hud-role{max-width:85px}
  }
  .astra-swipe-indicator{
    display:inline-flex;align-items:center;gap:2px;padding:3px 6px;border-radius:999px;
    background:rgba(12,14,18,.86);border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-shrink:0;
  }
  .astra-swipe-btn{
    background:transparent;border:none;color:var(--lime);font-size:16px;font-weight:900;
    cursor:pointer;padding:2px 6px;line-height:1;border-radius:4px;display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .astra-swipe-btn::after{content:"";position:absolute;inset:-10px} /* 44px-Hit-Area */
  .astra-swipe-btn:active{background:rgba(200,255,46,.25)}
  .astra-swipe-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
  .astra-swipe-counter{color:var(--lime);font-size:10px;font-weight:700;letter-spacing:.5px;padding:0 2px}

/* Kleinstbreiten (320px, Fold schmal): Rolle weicht, Grid bricht nie um */
@media (max-width:360px){
  .astra-hud-role{display:none}
  .hero-ui-grid{grid-template-columns:1fr}
}

  /* 3D Stage & Character Framing — Schrift DAHINTER & HÖHER platziert */
  .hero{--mobile-control-lane:calc(190px + env(safe-area-inset-bottom, 0px));--mobile-headline-lane:clamp(60px,19vw,82px);--mobile-headline-gap:8px;padding-top:0;height:100svh;min-height:100svh;max-height:100svh;width:100%;max-width:100vw;overflow:hidden;touch-action:pan-y pinch-zoom}
  .hero-layer-bg-text{top:auto;bottom:calc(var(--mobile-control-lane) + 14px);height:var(--mobile-headline-lane);align-items:flex-end;justify-content:center;padding:0;opacity:.75;filter:none;z-index:10;pointer-events:none;max-width:100vw;overflow:hidden}
  .monumental-wrap{margin:0 !important;transform:none;padding:0 8px;text-align:center;max-width:100vw;width:100%;height:100%;justify-content:flex-end;overflow:hidden;box-sizing:border-box;animation:mobileHeadlineFloat 8s ease-in-out infinite}
  @keyframes mobileHeadlineFloat{0%,100%{transform:translateY(.5px)}50%{transform:translateY(-.5px)}}
  .monumental-line-sub{font-size:clamp(10px,3vw,13px);letter-spacing:.22em;margin-bottom:4px;color:rgba(200,255,46,.85);text-shadow:0 0 25px rgba(200,255,46,.45);white-space:nowrap}
  .monumental-line-main{font-size:clamp(46px,13vw,70px);white-space:nowrap;line-height:.84;letter-spacing:-.02em;-webkit-text-stroke:1.2px rgba(255,255,255,.45);filter:drop-shadow(0 12px 30px rgba(0,0,0,.95));max-width:100%}
  .monumental-line-main.len-mid{font-size:clamp(40px,10.5vw,60px);letter-spacing:-.02em}
  .monumental-line-main.len-long{font-size:clamp(32px,9vw,52px);letter-spacing:-.02em}
  .monumental-line-main.len-huge{font-size:clamp(25px,7vw,41px);letter-spacing:-.02em}
  .monumental-line-main.agent-designer{font-size:clamp(34px,9.5vw,52px)}
  .hero-layer-character{top:calc(40px + env(safe-area-inset-top, 0px));bottom:calc(var(--mobile-control-lane) + var(--mobile-headline-lane) + var(--mobile-headline-gap) - 16px);height:auto;align-items:center;justify-content:center;padding:0;touch-action:pan-y pinch-zoom;z-index:20;transform:translateY(60px);overflow:visible}
  .char-cutout-box{height:100%;max-height:none;width:100%;display:flex;align-items:center;justify-content:center;
    overflow:visible !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;}
  .hero-cutout-img{left:calc(50% + 12px);height:100%;max-height:100%;width:auto;max-width:98vw;object-fit:contain;object-position:center center;scale:var(--agent-scale,1.08);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.25) 84%, transparent 95%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.8) 72%, rgba(0,0,0,0.25) 84%, transparent 95%);}
  .hero-cutout-img.active{transform:translateX(-50%) translate3d(var(--agent-optical-x,0px),0,0)}
  .hero-layer-ui{display:none !important} /* Spatial Fokus: keine Kantenkollision im mobilen Hero */
  .scrollhint{display:none !important}

  /* Mobile 3D Carousel Flanks (Peeking previous and next characters) */
  .hero-flank-wing{
    display:flex !important;
    position:absolute;
    top:72px;
    bottom:132px;
    height:auto;
    width:38vw;
    max-width:160px;
    z-index:18;
    pointer-events:auto;
    cursor:pointer;
    touch-action:pan-y;
    align-items:center;
    justify-content:center;
    user-select:none;
    transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .32s ease;
  }
  .hero-flank-wing.flank-left{
    left:-28px;
    right:auto;
     transform:scale(1.16) translate3d(-6px, 0, 0);
    transform-origin:left center;
  }
  .hero-flank-wing.flank-right{
    right:-28px;
    left:auto;
     transform:scale(1.16) translate3d(6px, 0, 0);
    transform-origin:right center;
  }
  .hero-flank-wing.flank-left:active{
    opacity:.95;
    transform:scale(1.20) translate3d(-4px, 0, 0);
  }
  .hero-flank-wing.flank-right:active{
    opacity:.95;
    transform:scale(1.20) translate3d(4px, 0, 0);
  }
  .hero-flank-wing .flank-inner{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .hero-flank-wing .flank-cutout-img{
    height:100%;
    width:auto;
    max-width:100%;
    object-fit:contain;
    object-position:center center;
    opacity:.42;
    filter:brightness(0.58) contrast(1.08) grayscale(0.15);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.7) 74%, transparent 92%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.7) 74%, transparent 92%);
    transition:opacity .32s ease, filter .32s ease, transform .35s ease;
  }
  .hero-flank-wing:hover .flank-cutout-img,
  .hero-flank-wing:active .flank-cutout-img{
    opacity:.9;
    filter:brightness(0.9) contrast(1.05) !important;
  }
  .hero-flank-wing .flank-badge{display:none !important}
  .flank-stage-type{display:block;position:absolute;top:69%;left:50%;transform:translateX(-50%);width:220px;text-align:center;opacity:.58;pointer-events:none;text-shadow:0 4px 16px rgba(0,0,0,.9)}
  .flank-stage-sub{display:block;color:rgba(200,255,46,.82);font-family:"JetBrains Mono",monospace;font-size:7px;font-weight:800;letter-spacing:.18em;line-height:1.1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 12px rgba(200,255,46,.28)}
  .flank-stage-main{display:block;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(225,235,242,.78) 42%,rgba(142,197,255,.48) 72%,rgba(200,255,46,.34) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:Archivo,sans-serif;font-size:20px;font-weight:900;letter-spacing:-.04em;line-height:.9;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* Mobile Swipe Guidance Pill (Gestischer Wisch-Indikator) */
  .mobile-swipe-guide{
    display:flex !important;
    justify-content:center;
    align-items:center;
    position:absolute;
     bottom:calc(156px + env(safe-area-inset-bottom, 10px));
    left:0;
    right:0;
    z-index:36;
    pointer-events:auto;
    user-select:none;
  }
  .msg-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:3.5px 11px;
    border-radius:999px;
    background:rgba(12,16,22,.88);
    border:1px solid rgba(200,255,46,.4);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 4px 18px rgba(0,0,0,.7), 0 0 16px rgba(200,255,46,.15);
    animation:msgGlow 3.4s ease-in-out infinite alternate;
  }
  @keyframes msgGlow{
    0%{box-shadow:0 4px 16px rgba(0,0,0,.65), 0 0 10px rgba(200,255,46,.12);border-color:rgba(200,255,46,.32)}
    100%{box-shadow:0 6px 24px rgba(0,0,0,.8), 0 0 20px rgba(200,255,46,.32);border-color:rgba(200,255,46,.65)}
  }
  .msg-arrow{
    background:transparent;border:none;color:var(--lime);font-size:16px;font-weight:900;
    cursor:pointer;padding:0 3px;line-height:1;display:flex;align-items:center;justify-content:center;
    transition:transform .15s ease;
    position:relative;
  }
  .msg-arrow::after{content:"";position:absolute;inset:-12px} /* 44px-Hit-Area */
  .msg-arrow:active{transform:scale(1.25)}
  .msg-content{
    display:flex;align-items:center;gap:5px;cursor:pointer;
  }
  .msg-label{
    font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:800;color:#f8fafc;
    letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;
  }
  .msg-arrow-anim{
    color:var(--lime);font-size:11px;font-weight:900;
  }
  .msg-left{animation:swipeBounceL 1.6s ease-in-out infinite}
  .msg-right{animation:swipeBounceR 1.6s ease-in-out infinite}
  @keyframes swipeBounceL{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-3px)}
  }
  @keyframes swipeBounceR{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(3px)}
  }

  /* Mobile Mitarbeiter-Avatare (Kompakte horizontale Scroll-Leiste) */
  .adots{
    display:flex !important;
    position:absolute;
    bottom:calc(92px + env(safe-area-inset-bottom, 10px));
    left:50%;transform:translateX(-50%);
    z-index:35;
    padding:3px 7px;gap:6px;
    border-radius:999px;
    background:rgba(10,13,18,.88);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 24px rgba(0,0,0,.75);
    max-width:calc(100vw - 24px);
    overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .adots::-webkit-scrollbar{display:none}
  .adot{
    width:32px;height:32px;flex-shrink:0;border-radius:50%;overflow:hidden;padding:0;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.2);background:#12151a;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    scroll-snap-align:center;
  }
  .adot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
  .adot.active{
    border-color:var(--lime);
    box-shadow:0 0 0 2px rgba(200,255,46,.45), 0 0 14px rgba(200,255,46,.45);
    transform:scale(1.12);
  }
}
@media (min-width:681px) and (max-height:800px){
  .hero{padding-top:36px}
  .monumental-wrap{margin-top:-11vh}
  .monumental-line-sub{font-size:clamp(14px,2.4vw,26px);margin-bottom:2px}
  .monumental-line-main{font-size:clamp(46px,11vw,125px)}
  .hero-layer-ui{padding-bottom:86px}
  .hero-eyebrow-callout{font-size:24px;margin-bottom:6px}
  .hero-subtext{font-size:13.5px;line-height:1.45;margin-bottom:10px}
  .hero-action-row{margin-bottom:10px}
  .hero-quick-card{padding:14px 16px}
  .hero-command-dock{bottom:54px}
  .adots{bottom:10px}
  .adot{width:30px;height:30px}
}
@media (min-width:681px) and (max-height:650px){
  .hero{padding-top:28px}
  .hero-layer-ui{padding-bottom:76px}
  .monumental-wrap{margin-top:-9vh}
  .monumental-line-sub{font-size:clamp(12px,2vw,20px);margin-bottom:1px}
  .monumental-line-main{font-size:clamp(40px,10vw,110px)}
  .hero-badge-pill{padding:4px 10px;font-size:10.5px;margin-bottom:6px}
  .hero-eyebrow-callout{font-size:20px;margin-bottom:4px}
  .hero-subtext{font-size:12.5px;margin-bottom:8px}
  .hero-action-row{margin-bottom:8px}
  .hero-action-row .btn{padding:8px 14px;font-size:12px}
  .hero-quick-card{display:none}
  .hero-command-dock{bottom:48px}
  .adots{bottom:8px}
  .adot{width:28px;height:28px}
}

/* ==========================================================================
   IN-PLACE DOSSIER HUD MODE (Taktische Entfaltung auf der Startseiten-Bühne)
/* Desktop default: mobile Apple dossier bar is strictly hidden */
.mobile-apple-dossier-bar {
  display: none !important;
}

.hero-dossier-overlay {
  position: absolute;
  top: 56px;
  bottom: 74px;
  left: 0;
  right: 0;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
  padding: 6px 28px 10px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.dossier-overlay-grid {
  width: 100%;
  max-width: 1720px;
  height: 100%;
  max-height: calc(100svh - 146px);
  display: grid;
  grid-template-columns: minmax(380px, 440px) minmax(240px, 1fr) minmax(380px, 450px);
  gap: 20px;
  align-items: stretch;
  position: relative;
  pointer-events: none;
}

/* Sidebars inside Overlay: Initial folded state */
.hero-dossier-overlay .col-left {
  opacity: 0;
  transform: translateX(-70px) scale(0.95);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 22px 28px 22px;
}
.hero-dossier-overlay .col-right {
  opacity: 0;
  transform: translateX(70px) scale(0.95);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 16px 22px 28px 22px;
}

.hero-dossier-overlay .col-center-hud {
  pointer-events: none;
  position: relative;
  height: 100%;
  width: 100%;
}

.hero-dossier-overlay .center-switcher {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Flanking navigation arrows left & right of character */
.hero-dossier-overlay #prevAgentBtn,
.hero-dossier-overlay #nextAgentBtn {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(14, 18, 24, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 35;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-dossier-overlay #prevAgentBtn {
  left: 8px;
}

.hero-dossier-overlay #nextAgentBtn {
  right: 8px;
}

.hero-dossier-overlay #prevAgentBtn:hover,
.hero-dossier-overlay #nextAgentBtn:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: #070809;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 0 20px rgba(200, 255, 46, 0.65);
}

.hero-dossier-overlay #prevAgentBtn:active,
.hero-dossier-overlay #nextAgentBtn:active {
  transform: translateY(-50%) scale(0.95);
}

/* Compact pill centered neatly over head */
.hero-dossier-overlay .active-profile-pill {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, rgba(14, 18, 24, 0.94) 0%, rgba(8, 11, 16, 0.98) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200, 255, 46, 0.32);
  padding: 3px 12px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(200, 255, 46, 0.12);
  z-index: 35;
}

/* ==========================================================================
   ACTIVE DOSSIER HUD MODE (body.mode-dossier)
   Smooth In-Place Hover Transition (Zero Page Reload, Zero Cutout Shrink)
   ========================================================================== */
.hero-ui-left,
.hero-ui-right {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.mode-dossier .hero-ui-left {
  opacity: 0 !important;
  transform: translateX(-50px) scale(0.96) !important;
  pointer-events: none !important;
}
body.mode-dossier .hero-ui-right {
  opacity: 0 !important;
  transform: translateX(50px) scale(0.96) !important;
  pointer-events: none !important;
}
body.mode-dossier .hero-command-dock {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  pointer-events: auto !important;
  z-index: 55;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(200, 255, 46, 0.12));
}

/* ==========================================================================
   AGENTEN-DOSSIER: CHAT PROMPT CHIPS FOLDING (User-Direktive)
   Standardmäßig eingeklappt für ein aufgeräumtes, ruhiges Layout.
   Ploppt smooth direkt über der Chatbar auf bei Klick / Fokus / Antwort.
   ========================================================================== */
body.mode-dossier .hcd-chips-row,
body.agents-dossier-body .hcd-chips-row {
  opacity: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transform: translateY(12px) scale(0.96) !important;
  transform-origin: bottom center !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.28s ease,
              padding 0.28s ease !important;
  will-change: opacity, transform, max-height;
}

body.mode-dossier .hero-command-dock:focus-within .hcd-chips-row,
body.mode-dossier .hero-command-dock.dock-active .hcd-chips-row,
body.agents-dossier-body .hero-command-dock:focus-within .hcd-chips-row,
body.agents-dossier-body .hero-command-dock.dock-active .hcd-chips-row {
  opacity: 1 !important;
  max-height: 48px !important;
  margin-bottom: 6px !important;
  padding: 2px 4px !important;
  pointer-events: auto !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  transform: translateY(0) scale(1) !important;
}

body.mode-dossier .hero-flank-wing {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.68) translateY(24px) !important;
}
body.mode-dossier .mobile-swipe-guide {
  opacity: 0 !important;
  pointer-events: none !important;
}
body.mode-dossier .adots {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Open Dossier Overlay */
body.mode-dossier .hero-dossier-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}
body.mode-dossier .hero-dossier-overlay .col-left {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
body.mode-dossier .hero-dossier-overlay .col-right {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
body.mode-dossier .hero-dossier-overlay .center-switcher {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Sizing adjustments for screens under 1366px */
@media (max-width: 1366px) and (min-width: 1150px) {
  .dossier-overlay-grid {
    grid-template-columns: minmax(330px, 370px) minmax(200px, 1fr) minmax(330px, 380px);
    gap: 16px;
  }
}
@media (max-width: 1149px) and (min-width: 1024px) {
  .dossier-overlay-grid {
    grid-template-columns: minmax(300px, 330px) minmax(160px, 1fr) minmax(300px, 340px);
    gap: 12px;
  }
}
@media (min-width: 1600px) {
  .dossier-overlay-grid {
    grid-template-columns: minmax(390px, 440px) minmax(260px, 1fr) minmax(390px, 450px);
    gap: 28px;
  }
}
/* Mobile Apple Sheet Header: Hidden by default on Desktop */
.mobile-apple-sheet-header {
  display: none !important;
}

.sheet-switch-btn,
.btn-sheet-back,
.btn-sheet-export {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  outline: none;
}

@media (max-width: 1023px) {
  /* In Dossier mode on mobile: hide background guides but KEEP floating Command Dock & Agent Avatars */
  body.mode-dossier .mobile-swipe-guide,
  body.mode-dossier .astra-mobile-hud,
  body.mode-dossier .hero-flank-wing {
    display: none !important;
  }

  /* Mobile Agentenprofile-Leiste unten (100% identisch mit Startseite) */
  body.mode-dossier .adots {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 14px !important;
    gap: 8px !important;
    z-index: 75 !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    scroll-behavior: smooth !important;
  }

  body.mode-dossier .adot {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  @media (max-width: 390px) {
    body.mode-dossier .adots {
      bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.mode-dossier .adot {
      width: 30px !important;
      height: 30px !important;
    }
  }

  @media (max-width: 360px) {
    body.mode-dossier .adots {
      bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.mode-dossier .adot {
      width: 28px !important;
      height: 28px !important;
    }
  }

  /* FLOATING CHAT COMMAND DOCK (100% identisch mit Startseite) */
  body.mode-dossier .hero-command-dock {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: auto !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    z-index: 70 !important;
    gap: 6px !important;
    margin: 0 !important;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 12px rgba(200, 255, 46, 0.12)) !important;
  }

  @media (max-width: 390px) {
    body.mode-dossier .hero-command-dock {
      bottom: calc(54px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px)) !important;
    }
  }

  @media (max-width: 360px) {
    body.mode-dossier .hero-command-dock {
      bottom: calc(48px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px)) !important;
    }
  }

  body.mode-dossier .hcd-chat-bar {
    background: rgba(10, 14, 20, 0.96) !important;
    border: 1px solid rgba(200, 255, 46, 0.55) !important;
    box-shadow: 
      0 16px 36px -4px rgba(0, 0, 0, 0.85),
      0 4px 14px rgba(0, 0, 0, 0.6),
      0 0 24px rgba(200, 255, 46, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  }

  body.mode-dossier .cmd-chip {
    background: rgba(12, 16, 22, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .hero-command-dock .hcd-response-card {
    z-index: 80 !important;
    background: rgba(10, 14, 20, 0.96) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85) !important;
    pointer-events: auto !important;
    border-radius: 18px 18px 14px 14px;
  }

  /* INTEGRATED DOSSIER OVERLAY (Vollständig identische Startseiten-Atmosphäre) */
  .hero-dossier-overlay {
    position: fixed;
    inset: 0;
    top: 56px;
    height: calc(100vh - 56px);
    height: calc(100svh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    padding: 8px 12px calc(148px + env(safe-area-inset-bottom, 24px)) 12px;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Topnav bleibt auf allen Seiten & Modi 100% transparent (User-Direktive) */
  body.mode-dossier .topnav {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  .mobile-apple-sheet-header {
    display: none !important;
  }

  /* ALL-IN-ONE UNIFIED VERTICAL FLOW GRID */
  .dossier-overlay-grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    gap: 14px !important;
    pointer-events: auto !important;
    width: 100% !important;
    padding-top: 6px !important;
  }

  .hero-dossier-overlay .col-center-hud {
    display: none !important;
  }

  .hero-dossier-overlay .col-left,
  .hero-dossier-overlay .col-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .hero-dossier-overlay .identity-card,
  .hero-dossier-overlay .traits-card,
  .hero-dossier-overlay .skills-card,
  .hero-dossier-overlay .workflows-card {
    display: block !important;
    pointer-events: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(14, 18, 22, 0.72) 35%,
      rgba(8, 11, 14, 0.82) 100%
    ) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.04) !important;
  }

  /* 390px iPhone Optimizations for Cards & Chips */
  .hero-dossier-overlay .skill-chips-wrap {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 4px 0 !important;
    margin-top: 0 !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  .hero-dossier-overlay .skill-pill {
    min-height: 48px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    pointer-events: auto !important;
  }
  .hero-dossier-overlay .btn-add-skill {
    min-height: 44px !important;
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
    width: 100% !important;
    pointer-events: auto !important;
  }
  .hero-dossier-overlay .workflows-card {
    min-height: 290px !important;
    padding-bottom: 18px !important;
  }
  .hero-dossier-overlay .workflows-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
    pointer-events: auto !important;
  }
  .hero-dossier-overlay .wf-item {
    min-height: 54px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    pointer-events: auto !important;
  }
}