:root{
    --bg:#F7F9FC; --glass:rgba(255,255,255,0.72); --line:rgba(16,23,42,0.10); --line-hi:rgba(6,148,168,0.4);
    --text:#12151C; --muted:#5C6472; --cyan:#0891B2; --cyan-bright:#17E3FF; --violet:#7C5CFF; --amber:#B96A00; --red:#D93A4A;
    --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
    --surface-rgb:16,23,42; --nav-glass:rgba(255,255,255,0.68);
  }

  /* ===== DARK THEME — ported from wp-content/themes/flyronix-child/assets/flyronix-design.css ===== */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#10131C; --glass:rgba(255,255,255,0.065); --line:rgba(255,255,255,0.13); --line-hi:rgba(23,227,255,0.4);
      --text:#F2F5FA; --muted:#A6AEC0; --cyan:#17E3FF; --violet:#8C74FF; --amber:#FFB020; --red:#FF5C6C;
      --surface-rgb:255,255,255; --nav-glass:rgba(10,12,18,0.65);
    }
    :root:not([data-theme="light"]) .aurora .blob{mix-blend-mode:screen;opacity:0.3;}
    :root:not([data-theme="light"]) .brand-mark{opacity:0.035;}
  }
  [data-theme="dark"]{
    --bg:#10131C; --glass:rgba(255,255,255,0.065); --line:rgba(255,255,255,0.13); --line-hi:rgba(23,227,255,0.4);
    --text:#F2F5FA; --muted:#A6AEC0; --cyan:#17E3FF; --violet:#8C74FF; --amber:#FFB020; --red:#FF5C6C;
    --surface-rgb:255,255,255; --nav-glass:rgba(10,12,18,0.65);
  }
  [data-theme="dark"] .aurora .blob{mix-blend-mode:screen;opacity:0.3;}
  [data-theme="dark"] .brand-mark{opacity:0.035;}
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg);color:var(--text);font-family:var(--font-body);overflow-x:hidden;position:relative;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--cyan);color:#000;}

  /* ===== Brand-mark watermark motion =====
     Was a continuous 360deg clockwise spin (read as an odd "spinning logo," not
     background texture). Replaced with a slow ambient drift: an irregular, asymmetric
     keyframe path (uneven % stops, sub-2deg rotation, small scale breathing) so it never
     completes a recognizable loop shape the eye can lock onto — it reads as atmosphere,
     not a mechanism. Opacity is left untouched by the animation (still only the theme-driven
     0.05 / 0.035 values below) so light/dark contrast tuning stays intact. */
  .brand-mark{position:fixed;top:50%;left:50%;width:920px;max-width:140vw;transform:translate(-50%,-50%);opacity:0.05;z-index:0;pointer-events:none;animation:brandDrift 130s ease-in-out infinite;will-change:transform;}
  /* NOTE: no `display:block` here on purpose — that used to override the theme-toggle
     rules below (`.theme-logo-light`/`.theme-logo-dark`) via plain CSS specificity
     (`.brand-mark img` = class+type beats a lone class), which meant BOTH logo variants
     rendered stacked inside this container in every theme, roughly doubling its layout
     height and throwing the `top:50%;left:50%;transform:translate(-50%,-50%)` centering
     off by ~460px — up in light theme, down in dark. Only noticeable in light because of
     its higher 0.05 opacity + the upward shift landing right under the header; dark's
     fainter 0.035 opacity + downward shift went unnoticed. Leaving display unset here lets
     the already-correct `.theme-logo-light{display:block}` / `.theme-logo-dark{display:none}`
     (and their theme-flipped counterparts) fully own visibility again, so exactly one image
     ever renders and the centering math is correct in both themes. */
  .brand-mark img{width:100%;}
  @keyframes brandDrift{
    0%{transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg);}
    20%{transform:translate(-50%,-50%) translate(2.4%,-3.1%) scale(1.035) rotate(1deg);}
    38%{transform:translate(-50%,-50%) translate(-1.8%,1.6%) scale(0.975) rotate(-0.7deg);}
    55%{transform:translate(-50%,-50%) translate(1.6%,2.6%) scale(1.02) rotate(0.5deg);}
    74%{transform:translate(-50%,-50%) translate(-2.6%,-1.3%) scale(0.99) rotate(-1deg);}
    90%{transform:translate(-50%,-50%) translate(0.9%,1%) scale(1.01) rotate(0.4deg);}
    100%{transform:translate(-50%,-50%) translate(0,0) scale(1) rotate(0deg);}
  }

  /* ===== Theme-aware logo swap (dark mark for light bg, white mark for dark bg) ===== */
  .theme-logo-dark{display:none;}
  .theme-logo-light{display:block;}
  header .logo .theme-logo-light,header .logo .theme-logo-dark{height:34px;width:auto;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .theme-logo-dark{display:block;}
    :root:not([data-theme="light"]) .theme-logo-light{display:none;}
  }
  [data-theme="dark"] .theme-logo-dark{display:block;}
  [data-theme="dark"] .theme-logo-light{display:none;}

  .aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
  .aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.16;mix-blend-mode:multiply;}
  .aurora .b1{width:520px;height:520px;background:var(--cyan-bright);top:-160px;left:-120px;animation:float1 22s ease-in-out infinite;}
  .aurora .b2{width:460px;height:460px;background:var(--violet);top:20%;right:-140px;animation:float2 26s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,80px);}}
  @keyframes float2{0%,100%{transform:translate(0,0);}50%{transform:translate(-70px,60px);}}
  .noise{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  section, header, footer{position:relative;z-index:2;}

  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:10px;}
  .eyebrow::before{content:'';width:22px;height:1px;background:var(--cyan);}
  .glass{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 1px 2px rgba(16,23,42,0.03),0 14px 34px -12px rgba(16,23,42,0.12);}


  .btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;background:var(--cyan-bright);color:#04141A;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;}
  .btn::before,.btn::after{content:'';position:absolute;width:9px;height:9px;border:2px solid var(--cyan-bright);opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
  .btn::before{top:-5px;left:-5px;border-right:none;border-bottom:none;transform:translate(3px,3px);}
  .btn::after{bottom:-5px;right:-5px;border-left:none;border-top:none;transform:translate(-3px,-3px);}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(23,227,255,0.5);}
  .btn:hover::before,.btn:hover::after{opacity:0.9;transform:translate(0,0);}
  .btn.outline{background:transparent;border-color:var(--line);color:var(--text);}
  .btn.outline:hover{border-color:var(--line-hi);background:rgba(var(--surface-rgb),0.035);}

  /* ===== THEME TOGGLE ===== */
  .theme-toggle{width:38px;height:38px;flex-shrink:0;margin-left:14px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s,background .25s;}
  .theme-toggle:hover{border-color:var(--line-hi);color:var(--cyan);background:rgba(23,227,255,0.06);}
  .theme-toggle svg{display:block;}
  .theme-toggle .icon-sun{display:none;}
  .theme-toggle .icon-moon{display:block;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
    :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
  }
  [data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  [data-theme="dark"] .theme-toggle .icon-moon{display:none;}

  /* .eyebrow-hud .reticle is reused by the CTA section further down the page. */
  .eyebrow-hud .reticle{color:var(--cyan-bright);opacity:0.9;flex-shrink:0;}

  /* ===== SECTIONS BELOW ===== */
  section{padding:120px 6%;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px;flex-wrap:wrap;}
  h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,50px);letter-spacing:-0.01em;margin-top:14px;max-width:640px;}
  .section-note{max-width:320px;color:var(--muted);font-size:14px;line-height:1.7;}

  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
  .about-text h2{margin-bottom:22px;}
  .about-text p{font-size:17px;line-height:1.85;color:var(--text);opacity:0.82;margin-bottom:20px;}
  .about-text strong{color:var(--cyan);font-weight:500;}
  .about-image{border-radius:26px;overflow:hidden;}
  .about-image img{width:100%;height:100%;object-fit:cover;}

  #shop-of-shops{padding-top:70px;padding-bottom:70px;}
  .shop-of-shops-inner{max-width:640px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;}
  .shop-of-shops-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--line);margin-bottom:24px;}
  .shop-of-shops-lead{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;margin-bottom:16px;}
  .shop-of-shops-body{max-width:520px;color:var(--muted);font-size:15px;line-height:1.75;}

  .ps-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .ps-col{border-radius:24px;padding:40px;}
  .ps-col h3{font-family:var(--font-mono);font-size:12px;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:26px;}
  .ps-col.problem h3{color:var(--red);}
  .ps-col.solution h3{color:var(--cyan);}
  .ps-item{padding:18px 0;border-top:1px solid rgba(var(--surface-rgb),0.08);display:flex;gap:16px;}
  .ps-item:first-of-type{border-top:none;}
  .ps-icon{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(var(--surface-rgb),0.04);}
  .ps-item .label{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:4px;}
  .ps-item .desc{font-size:13.5px;color:var(--muted);line-height:1.6;}

  /* ===== "Vom Chaos zum Cockpit": directional clip-path wipe, distinct from the standard .reveal fade =====
     Problem column unmasks left→right, solution column unmasks right→left — the two wipes converge toward
     the middle, visually staging the "chaos becomes cockpit" before/after moment. Reduced-motion is handled
     by the existing global `*{transition:none!important}` rule below — no extra media query needed here.
     NOTE: the clip-path lives on the .ps-col children, not on the observed .ps-wrap.reveal element itself —
     an element whose own clip-path collapses it to zero visible area can never be reported as intersecting
     by the IntersectionObserver that is supposed to reveal it (verified in Chromium), so the wipe target and
     the observed/toggled element must be different nodes. */
  .ps-wrap.reveal{opacity:1;transform:none;}
  .ps-wrap .ps-col.problem{clip-path:inset(0 100% 0 0 round 24px);transition:clip-path .9s cubic-bezier(.65,0,.35,1);}
  .ps-wrap .ps-col.solution{clip-path:inset(0 0 0 100% round 24px);transition:clip-path .9s cubic-bezier(.65,0,.35,1);transition-delay:.16s;}
  .ps-wrap.visible .ps-col.problem,
  .ps-wrap.visible .ps-col.solution{clip-path:inset(0 0 0 0 round 24px);}

  .services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .service-card{display:block;border-radius:24px;padding:34px 30px 30px;opacity:0;transform:translateY(18px) scale(0.94);transition:opacity .65s ease,transform .5s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .5s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d;will-change:transform;}
  .services.visible .service-card{opacity:1;transform:translateY(0) scale(1);}
  .services.visible .service-card:hover{transform:translateY(-10px) scale(1.02);border-color:var(--line-hi);box-shadow:0 28px 54px -20px rgba(16,23,42,0.3);}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .services.visible .service-card:hover{box-shadow:0 28px 54px -20px rgba(0,0,0,0.5),0 0 40px -12px rgba(23,227,255,0.28);}}
  [data-theme="dark"] .services.visible .service-card:hover{box-shadow:0 28px 54px -20px rgba(0,0,0,0.5),0 0 40px -12px rgba(23,227,255,0.28);}
  /* each card gets a visibly distinct easing + delay, not a near-uniform stagger: a springy overshoot,
     then a smooth glide, then a snappier settle — reads as a deliberate cascade rather than a repeated fade */
  .services.visible .service-card:nth-child(1){transition-delay:.05s;transition-timing-function:cubic-bezier(.34,1.56,.64,1);}
  .services.visible .service-card:nth-child(2){transition-delay:.24s;transition-timing-function:cubic-bezier(.22,1,.36,1);}
  .services.visible .service-card:nth-child(3){transition-delay:.43s;transition-timing-function:cubic-bezier(.65,0,.35,1);}
  .service-card:hover{border-color:var(--line-hi);}
  .service-thumb{position:relative;margin:-34px -30px 22px;border-radius:24px 24px 0 0;overflow:hidden;height:230px;}
  .service-thumb img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1);}
  .service-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,0) 45%,rgba(8,12,20,0.4) 100%);opacity:0.7;transition:opacity .45s ease;}
  .service-card:hover .service-thumb img{transform:scale(1.08);}
  .service-card:hover .service-thumb::after{opacity:1;}
  .service-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,145,178,0.18),rgba(124,92,255,0.14));margin-bottom:26px;}
  .service-num{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.1em;margin-bottom:10px;}
  .service-card h4{font-family:var(--font-display);font-size:22px;margin-bottom:10px;}
  .service-card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;}
  .service-link{font-family:var(--font-mono);font-size:12px;color:var(--cyan);}

  /* ===== SECTION-FIELD — the CTA's canvas particle/constellation motif, reused as a
     subtle background texture on two more sections (Blog showcase, FPV starter). Same
     generative technique (see createGalaxyField in js/script.js), just parameterised to
     draw with the page's own --cyan-bright/--violet tokens at a much lower density/opacity
     than the CTA's own field — atmosphere, not foreground. Negative z-index keeps it behind
     the section's own in-flow content without needing z-index gymnastics on every child. */
  .section-field{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0.4;width:100%;height:100%;display:block;}
  [data-theme="light"] .section-field{opacity:0.2;}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .section-field{opacity:0.2;}}

  /* ===== FPV STARTER — "Starte mit FPV" ===================================
     Three real interactive Sketchfab embeds (drone / goggles / radio), each paired with
     the beginner page it thematically matches, so the section reads as a curated starter
     kit rather than a bolted-on feature row. Entrance is a distinct third choreography:
     cards assemble in from three different directions (left / bottom / right) as if the
     kit is being put together, rather than repeating the clip-path wipe, service scale-in
     or highlight fly-by used elsewhere. Iframes are NOT in the initial markup at all —
     js/script.js injects the real Sketchfab <iframe src> only once the card scrolls into
     view (see the IntersectionObserver there), and autostart=0 on the embed URL itself
     means Sketchfab's own heavy WebGL scene still waits for an explicit user click even
     after the iframe mounts. Two independent layers of "don't load this until asked for". */
  /* ===== "Starte mit FPV" slider — drag+momentum+snap, same interaction language
     as the (removed) Highlights slider. Three linked pages instead of 3D embeds. ===== */
  .fpv-slider{position:relative;z-index:1;}
  .fpv-track{
    display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
  }
  .fpv-track::-webkit-scrollbar{display:none;}
  .fpv-track.is-dragging{cursor:grabbing;scroll-snap-type:none;}
  .fpv-post{
    scroll-snap-align:start;flex:0 0 320px;border-radius:24px;padding:32px 28px 30px;display:block;
    opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1),border-color .3s;
    will-change:transform,opacity;
  }
  .fpv-slider.visible .fpv-post{opacity:1;transform:translateY(0);}
  .fpv-slider.visible .fpv-post:nth-child(1){transition-delay:.05s;}
  .fpv-slider.visible .fpv-post:nth-child(2){transition-delay:.16s;}
  .fpv-slider.visible .fpv-post:nth-child(3){transition-delay:.27s;}
  .fpv-post:hover{border-color:var(--line-hi);}
  .fpv-post-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,145,178,0.18),rgba(124,92,255,0.14));margin-bottom:22px;}
  .fpv-post-num{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.1em;margin-bottom:10px;}
  .fpv-post h4{font-family:var(--font-display);font-size:21px;margin-bottom:10px;color:var(--text);}
  .fpv-post p{font-size:13.5px;color:var(--muted);line-height:1.65;margin-bottom:18px;}
  .fpv-post-link{font-family:var(--font-mono);font-size:12px;color:var(--cyan);}
  .fpv-slider-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:30px;}
  .fpv-slider-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);font-size:15px;cursor:pointer;transition:border-color .25s,color .25s,background .25s;}
  .fpv-slider-arrow:hover{border-color:var(--line-hi);color:var(--cyan);background:rgba(23,227,255,0.06);}
  .fpv-slider-dots{display:flex;gap:8px;}
  .fpv-slider-dots .dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:all .25s;cursor:pointer;}
  .fpv-slider-dots .dot.active{background:var(--cyan);box-shadow:0 0 10px rgba(23,227,255,0.6);width:20px;border-radius:4px;}

  /* ===== BLOG SHOWCASE — "Aus dem Blog" =====================================
     Cards are built entirely client-side from the real WordPress REST endpoint
     (see the fetch in js/script.js) — no hardcoded post content here. A calmer, more
     understated stagger than the FPV/service/highlight entrances on purpose: blog content
     is a lower-key moment than the hero/CTA, so it just settles up-and-in rather than flying,
     rotating or wiping. When there are zero published posts the same grid renders a single
     honest "Neue Beiträge in Kürze" card instead of fabricated placeholder posts. */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1;min-height:120px;}
  .blog-card{display:block;border-radius:22px;overflow:hidden;opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease,border-color .3s;}
  .blog-grid.visible .blog-card{opacity:1;transform:translateY(0);}
  .blog-grid.visible .blog-card:nth-child(1){transition-delay:.05s;}
  .blog-grid.visible .blog-card:nth-child(2){transition-delay:.14s;}
  .blog-grid.visible .blog-card:nth-child(3){transition-delay:.23s;}
  .blog-grid.visible .blog-card:nth-child(4){transition-delay:.32s;}
  .blog-grid.visible .blog-card:nth-child(5){transition-delay:.41s;}
  .blog-grid.visible .blog-card:nth-child(6){transition-delay:.5s;}
  .blog-card:hover{border-color:var(--line-hi);}
  .blog-card-media{aspect-ratio:16/10;overflow:hidden;background:rgba(var(--surface-rgb),0.05);}
  .blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
  .blog-card:hover .blog-card-media img{transform:scale(1.045);}
  .blog-card-body{padding:24px 24px 28px;}
  .blog-card-date{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:10px;}
  .blog-card-body h4{font-family:var(--font-display);font-size:18.5px;line-height:1.3;margin-bottom:10px;}
  .blog-card-body p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px;}
  .blog-card-link{font-family:var(--font-mono);font-size:12px;color:var(--cyan);}
  .blog-grid.is-empty{display:block;}
  .blog-empty{grid-column:1/-1;max-width:560px;margin:0 auto;border-radius:26px;padding:60px 40px;text-align:center;opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease;}
  .blog-grid.visible .blog-empty{opacity:1;transform:translateY(0);transition-delay:.05s;}
  .blog-empty-icon{width:52px;height:52px;margin:0 auto 22px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(8,145,178,0.18),rgba(124,92,255,0.14));}
  .blog-empty h3{font-family:var(--font-display);font-size:23px;margin-bottom:12px;}
  .blog-empty p{font-size:14px;color:var(--muted);line-height:1.7;max-width:400px;margin:0 auto;}
  .blog-empty p a{color:var(--cyan);border-bottom:1px solid var(--line-hi);padding-bottom:1px;}

  .marquee-wrap{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-top:70px;}
  .marquee{display:flex;gap:80px;white-space:nowrap;animation:scroll 18s linear infinite;width:max-content;}
  .marquee span{font-family:var(--font-mono);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;}
  .marquee span::before{content:'◆';color:var(--cyan);font-size:10px;}
  @keyframes scroll{to{transform:translateX(-50%);}}

  .rotor-sep{display:flex;align-items:center;justify-content:center;gap:22px;padding:60px 6%;}
  .rotor-sep .track{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);}
  .rotor{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 6px rgba(23,227,255,0.35));}
  .rotor svg{width:100%;height:100%;animation:spin 2.4s linear infinite;}
  .rotor .rotor-blade{fill:var(--cyan);}
  .rotor .rotor-hub{fill:var(--bg);stroke:var(--line-hi);stroke-width:1;}
  @keyframes spin{to{transform:rotate(360deg);}}

  .team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .team-card{border-radius:24px;padding:36px;display:flex;gap:22px;transition:border-color .3s;}
  .team-card:hover{border-color:var(--line-hi);}
  .avatar-orb{flex-shrink:0;width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:22px;color:#04141A;}
  .avatar-orb.a1{background:conic-gradient(from 120deg,var(--cyan-bright),var(--violet),var(--cyan-bright));}
  .avatar-orb.a2{background:conic-gradient(from 40deg,var(--violet),#0AFFC8,var(--violet));}
  .team-role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;}
  .team-card h4{font-family:var(--font-display);font-size:22px;margin-bottom:10px;}
  .team-card p{color:var(--muted);font-size:13.5px;line-height:1.7;margin-bottom:14px;}
  .team-card a{font-family:var(--font-mono);font-size:12px;color:var(--text);border-bottom:1px solid var(--line-hi);padding-bottom:2px;}

  .cta{text-align:center;padding:150px 6%;position:relative;}
  .cta .eyebrow{justify-content:center;}
  .cta .eyebrow::before{display:none;}
  .cta .eyebrow-hud .reticle{color:var(--cyan-bright);opacity:0.9;}

  /* ===== CTA — the page's closing "moment", staged more cinematically than the plain
     .reveal fade everywhere else: an ambient canvas dot-field behind the panel (drawn in
     js/script.js, paused off-screen and skipped entirely under reduced-motion), a HUD
     corner-lock frame that closes in on the panel as it arrives, and the panel itself
     blurring/settling into focus rather than just sliding up. This is deliberately the
     ONE other place (besides the hero) that gets the full HUD-corner treatment — see the
     "Vom Chaos zum Cockpit" wipe and the services scale-in for the other two orchestrated
     beats; everything else stays on the calm shared .reveal fade on purpose. */
  /* the outer .cta keeps the .reveal class only so the existing IntersectionObserver in
     js/script.js triggers its .visible state (same mechanism as .ps-wrap/.services below) —
     but its own opacity/translateY is neutralised so the panel, HUD corners and canvas
     field (children) can stage their own distinct entrance instead of double-fading. */
  .cta.reveal{opacity:1;transform:none;}
  .cta-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.55;width:100%;height:100%;display:block;}
  [data-theme="light"] .cta-field{opacity:0.32;}
  @media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .cta-field{opacity:0.32;}}

  .cta-hud{position:absolute;top:78px;left:6%;right:6%;bottom:78px;z-index:1;pointer-events:none;}
  .cta-hud-corner{position:absolute;width:30px;height:30px;opacity:0;filter:drop-shadow(0 0 4px rgba(23,227,255,0.4));transition:opacity .6s ease .5s,transform .7s cubic-bezier(.22,1,.36,1) .5s;}
  .cta-hud-corner.tl{top:0;left:0;border-top:1.5px solid var(--line-hi);border-left:1.5px solid var(--line-hi);transform:translate(-14px,-14px);}
  .cta-hud-corner.tr{top:0;right:0;border-top:1.5px solid var(--line-hi);border-right:1.5px solid var(--line-hi);transform:translate(14px,-14px);}
  .cta-hud-corner.bl{bottom:0;left:0;border-bottom:1.5px solid var(--line-hi);border-left:1.5px solid var(--line-hi);transform:translate(-14px,14px);}
  .cta-hud-corner.br{bottom:0;right:0;border-bottom:1.5px solid var(--line-hi);border-right:1.5px solid var(--line-hi);transform:translate(14px,14px);}
  .cta.visible .cta-hud-corner{opacity:0.85;transform:translate(0,0);}
  @media (max-width:700px){.cta-hud{display:none;}}

  .cta-panel{border-radius:32px;padding:80px 40px;position:relative;z-index:1;overflow:hidden;filter:blur(10px);opacity:0;transform:scale(0.96);transition:filter .9s ease,opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);}
  .cta.visible .cta-panel{filter:blur(0);opacity:1;transform:scale(1);}
  .cta-panel::before{content:'';position:absolute;inset:-2px;z-index:-1;border-radius:32px;background:conic-gradient(from 0deg,var(--cyan-bright),var(--violet),#0AFFC8,var(--cyan-bright));animation:spin 8s linear infinite;opacity:0.35;filter:blur(20px);}
  .cta h2{max-width:820px;margin:20px auto 34px;font-size:clamp(32px,5vw,58px);clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.65,0,.35,1) .35s;}
  .cta.visible h2{clip-path:inset(0 0 0% 0);}
  .cta-buttons{display:flex;gap:18px;justify-content:center;}


  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.visible{opacity:1;transform:translateY(0);}

  @media (max-width:900px){
    .about-grid,.ps-wrap,.team{grid-template-columns:1fr;}
    .about-image{order:-1;max-height:260px;}
    .services{grid-template-columns:1fr;}
    .fpv-post{flex-basis:260px;padding:26px 22px;}
    .blog-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}
  }