/* ============================================================
   Hero Shell — header, hero, footer, migrated 1:1 from the
   costum/ prototype (dark "flight-computer" HUD design). Scoped
   deliberately: this is a self-contained dark block bracketing
   the rest of the page, which keeps its own light/dark toggle and
   --bg/--glass/--cyan/--violet token system untouched. Every custom
   property here is prefixed --cx- specifically so it can never
   silently override the live site's own tokens of the same name
   (--cyan/--line/--muted exist in both systems with different
   values/meaning — this file never writes the live site's own
   token names).
   ============================================================ */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/unbounded-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Hero';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Hero';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://www.flyronix.ch/hero-assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --cx-void: #080b10;
  --cx-void-raised: #10161f;
  --cx-void-raised-2: #161d29;
  --cx-line: rgba(244,247,250,0.08);
  --cx-line-strong: rgba(244,247,250,0.16);
  --cx-cyan: #4ce0ff;
  --cx-cyan-bright: #a6f2ff;
  --cx-cyan-mute: rgba(76,224,255,0.12);
  --cx-white: #f3f7fa;
  --cx-muted: #8d97a6;
  --cx-muted-2: #6b7686;
  --cx-muted-dim: #525964;
  --cx-font-display: 'Unbounded', 'Arial Narrow', sans-serif;
  --cx-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --cx-font-mono: 'JetBrains Mono Hero', ui-monospace, monospace;
  --cx-sp-1: 0.25rem; --cx-sp-2: 0.5rem; --cx-sp-3: 0.75rem; --cx-sp-4: 1rem;
  --cx-sp-6: 1.5rem; --cx-sp-8: 2rem; --cx-sp-12: 3rem; --cx-sp-16: 4rem; --cx-sp-24: 6rem;
  --cx-edge-pad: clamp(1.25rem, 5vw, 4rem);
  --cx-max-w: 1360px;
  --cx-ease-power2: cubic-bezier(0.45,0,0.55,1);
  --cx-radius-pill: 999px;
  --cx-z-header: 500;
  --cx-z-menu: 900;
}

/* ================= HUD frame (fixed, ambient — hero/header only) ================= */

.hud-frame{position:fixed;inset:clamp(12px,2vw,28px);z-index:var(--cx-z-header);pointer-events:none;}
.hud-frame__corner{position:absolute;width:18px;height:18px;border:1px solid var(--cx-line-strong);opacity:0.5;}
.hud-frame__corner--tl{top:0;left:0;border-right:none;border-bottom:none;}
.hud-frame__corner--tr{top:0;right:0;border-left:none;border-bottom:none;}
.hud-frame__corner--bl{bottom:0;left:0;border-right:none;border-top:none;}
.hud-frame__corner--br{bottom:0;right:0;border-left:none;border-top:none;}
.hud-frame__tag{position:absolute;font-family:var(--cx-font-mono);font-size:0.6875rem;letter-spacing:0.08em;color:var(--cx-muted-2);white-space:nowrap;}
.hud-frame__tag--bl{bottom:-4px;left:24px;}
.hud-frame__tag--br{bottom:-4px;right:24px;text-align:right;}
@media (max-width:720px){ .hud-frame{display:none;} }

/* ================= Header ================= */

.header{position:fixed;top:0;left:0;right:0;z-index:var(--cx-z-header);padding:var(--cx-sp-4) var(--cx-edge-pad);display:flex;align-items:center;justify-content:space-between;gap:var(--cx-sp-6);transition:background-color .4s var(--cx-ease-power2),border-color .4s ease,backdrop-filter .4s ease;border-bottom:1px solid transparent;font-family:var(--cx-font-body);
  /* WP subpages have no dark hero section for a transparent header to sit on
     top of (unlike the homepage), so this version stays permanently docked/
     opaque instead of only turning solid after .is-scrolled. */
  background:rgba(8,11,16,0.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--cx-line);
}
.header.is-scrolled{background:rgba(8,11,16,0.72);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--cx-line);}
.header__brand{display:flex;align-items:center;gap:var(--cx-sp-3);z-index:2;}
.header__logo{width:28px;height:28px;flex:none;}
.header__wordmark{font-family:var(--cx-font-display);font-size:0.95rem;font-weight:600;letter-spacing:0.02em;color:var(--cx-white);}
.header__nav{display:flex;align-items:center;}
.header__nav-list{display:flex;gap:var(--cx-sp-6);list-style:none;margin:0;padding:0;}
.header__nav-list a{font-size:0.875rem;color:var(--cx-muted);position:relative;padding-block:var(--cx-sp-1);transition:color .3s ease;}
.header__nav-list a:hover,.header__nav-list a.is-active{color:var(--cx-white);}
.header__nav-list a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cx-cyan);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--cx-ease-power2);}
.header__nav-list a:hover::after,.header__nav-list a.is-active::after{transform:scaleX(1);transform-origin:left;}
.header__actions{display:flex;align-items:center;gap:var(--cx-sp-4);}
.header__utility{display:flex;align-items:center;gap:8px;}

@media (max-width:980px){ .header__nav-list{display:none;} }
@media (max-width:640px){
  .header{padding-inline:1rem;gap:var(--cx-sp-3);}
  .header__wordmark{display:none;}
  .header__utility{gap:6px;}
  .lang-toggle__btn{padding:0 9px;font-size:0.7rem;}
  .search-toggle.is-open .search-toggle__input{width:34vw;padding:0 12px;}
}
@media (max-width:380px){
  .header-icon-btn{width:34px;height:34px;}
  .lang-toggle{height:34px;}
}

/* Shared circular icon-button treatment — search + theme toggle intentionally
   look and animate identically (same height, radius, border, hover) so the
   whole utility cluster reads as one designed unit. */
.header-icon-btn{width:38px;height:38px;padding:0;box-sizing:border-box;flex-shrink:0;border-radius:50%;border:1px solid var(--cx-line-strong);background:transparent;color:var(--cx-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s ease,color .25s ease,background .25s ease,transform .25s var(--cx-ease-power2);}
.header-icon-btn:hover{border-color:var(--cx-cyan);color:var(--cx-cyan);transform:translateY(-1px);}
.header-icon-btn:active{transform:translateY(0);}

.search-toggle{position:relative;display:flex;align-items:center;}
.search-toggle__input{width:0;min-width:0;height:38px;padding:0;margin-left:0;border:1px solid transparent;border-radius:var(--cx-radius-pill);background:rgba(255,255,255,0.04);color:var(--cx-white);font-family:var(--cx-font-body);font-size:0.85rem;opacity:0;pointer-events:none;transition:width .4s var(--cx-ease-power2),opacity .3s ease,padding .4s var(--cx-ease-power2),margin .4s var(--cx-ease-power2),border-color .3s ease;}
.search-toggle__input::placeholder{color:var(--cx-muted);}
.search-toggle.is-open .search-toggle__input{width:180px;padding:0 16px;margin-left:8px;opacity:1;pointer-events:auto;border-color:var(--cx-line-strong);}
.search-toggle.is-open .search-toggle__input:focus{outline:none;border-color:var(--cx-cyan);}
.search-toggle.is-open .header-icon-btn{border-color:var(--cx-cyan);color:var(--cx-cyan);}

/* Language toggle — same pill/segmented language as the theme switch, same
   38px height, same hover/active motion vocabulary. */
.lang-toggle{display:flex;align-items:center;height:38px;border-radius:var(--cx-radius-pill);border:1px solid var(--cx-line-strong);padding:3px;font-family:var(--cx-font-mono);gap:2px;}
.lang-toggle__btn{height:100%;padding:0 12px;box-sizing:border-box;border-radius:var(--cx-radius-pill);font-size:0.75rem;letter-spacing:0.04em;color:var(--cx-muted);background:transparent;cursor:pointer;transition:color .3s ease,background .3s ease;}
.lang-toggle__btn:hover{color:var(--cx-white);}
.lang-toggle__btn.is-active{color:var(--cx-void);background:var(--cx-cyan);}
.lang-toggle__btn.is-active:hover{color:var(--cx-void);}

.header .theme-toggle{width:38px;height:38px;padding:0;box-sizing:border-box;flex-shrink:0;border-radius:50%;border:1px solid var(--cx-line-strong);background:transparent;color:var(--cx-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .25s,color .25s,background .25s;}
.header .theme-toggle:hover{border-color:var(--cx-cyan);color:var(--cx-cyan);}


/* ================= Footer ================= */

.footer{position:relative;padding:var(--cx-sp-24) var(--cx-edge-pad) var(--cx-sp-8);border-top:1px solid var(--cx-line);background:var(--cx-void);color:var(--cx-white);font-family:var(--cx-font-body);}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--cx-sp-12);padding-bottom:var(--cx-sp-16);max-width:var(--cx-max-w);margin-inline:auto;}
.footer .header__brand{display:flex;align-items:center;gap:var(--cx-sp-3);}
.footer .header__logo{width:28px;height:28px;flex:none;}
.footer .header__wordmark{font-family:var(--cx-font-display);font-size:0.95rem;font-weight:600;letter-spacing:0.02em;}
.footer__brand-col p{color:var(--cx-muted);max-width:30ch;margin-top:var(--cx-sp-4);}
.footer__col-title{font-family:var(--cx-font-mono);font-size:0.6875rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cx-muted-2);margin-bottom:var(--cx-sp-4);}
.footer__col a,.footer__col span{display:block;color:var(--cx-muted);padding-block:var(--cx-sp-1);font-size:0.9rem;transition:color .25s ease;}
.footer__col a:hover{color:var(--cx-cyan);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--cx-sp-3);max-width:var(--cx-max-w);margin-inline:auto;padding-top:var(--cx-sp-8);border-top:1px solid var(--cx-line);font-family:var(--cx-font-mono);font-size:0.75rem;color:var(--cx-muted-dim);}
.footer__bottom-links{display:flex;gap:var(--cx-sp-6);}
.footer__bottom a:hover{color:var(--cx-cyan);}
@media (max-width:900px){ .footer__top{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .footer__top{grid-template-columns:1fr;gap:var(--cx-sp-8);} .footer__bottom{flex-direction:column;align-items:flex-start;} }

/* ================= Footer logo assembly effect ================= */

.footer-logo{position:relative;width:min(420px,78vw);aspect-ratio:1;margin:0 auto clamp(3rem,8vw,6rem);display:grid;place-items:center;}
.footer-logo::before{content:'';position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,var(--cx-cyan-mute),transparent 68%);opacity:0;transition:opacity 1.2s ease;}
.footer-logo.is-revealed::before{opacity:1;}
.footer-logo__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.footer-logo__svg circle,.footer-logo__svg line{fill:none;stroke:var(--cx-cyan);vector-effect:non-scaling-stroke;}
.fl-ring--main{stroke-width:1;opacity:0.55;stroke-dasharray:942.5;stroke-dashoffset:942.5;transition:stroke-dashoffset 1.8s cubic-bezier(0.16,1,0.3,1);}
.footer-logo.is-revealed .fl-ring--main{stroke-dashoffset:0;}
.fl-ring--outer{stroke-width:1;opacity:0.22;stroke-dasharray:2 10;transform-origin:200px 200px;animation:cx-fl-rotate 40s linear infinite;}
.fl-ring--inner{stroke-width:1;opacity:0.3;stroke-dasharray:40 18;transform-origin:200px 200px;animation:cx-fl-rotate 26s linear infinite reverse;}
.fl-tick{stroke-width:1.5;opacity:0;stroke-dasharray:22;stroke-dashoffset:22;}
.footer-logo.is-revealed .fl-tick{animation:cx-fl-tick-in .9s cubic-bezier(0.16,1,0.3,1) forwards,cx-fl-tick-pulse 4s ease-in-out infinite;}
.footer-logo.is-revealed .fl-tick:nth-child(1){animation-delay:0.6s,1.5s;}
.footer-logo.is-revealed .fl-tick:nth-child(2){animation-delay:0.68s,1.6s;}
.footer-logo.is-revealed .fl-tick:nth-child(3){animation-delay:0.76s,1.7s;}
.footer-logo.is-revealed .fl-tick:nth-child(4){animation-delay:0.84s,1.8s;}
.footer-logo.is-revealed .fl-tick:nth-child(5){animation-delay:0.92s,1.9s;}
.footer-logo.is-revealed .fl-tick:nth-child(6){animation-delay:1.0s,2.0s;}
@keyframes cx-fl-tick-in{to{opacity:0.7;stroke-dashoffset:0;}}
@keyframes cx-fl-tick-pulse{0%,100%{opacity:0.7;}50%{opacity:0.25;}}
@keyframes cx-fl-rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.footer-logo__emblem{position:relative;width:42%;aspect-ratio:1;display:grid;place-items:center;opacity:0;transform:scale(0.85);transition:opacity 1s ease .3s,transform 1.4s cubic-bezier(0.16,1,0.3,1) .3s;}
.footer-logo.is-revealed .footer-logo__emblem{opacity:1;transform:scale(1);}
.footer-logo__emblem img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;}
.footer-logo__emblem::before{content:'';position:absolute;inset:0;background:var(--cx-cyan);-webkit-mask:url("https://www.flyronix.ch/hero-assets/logo/flyronix-f-white.png") center/contain no-repeat;mask:url("https://www.flyronix.ch/hero-assets/logo/flyronix-f-white.png") center/contain no-repeat;filter:drop-shadow(1px 0 0 var(--cx-cyan)) drop-shadow(-1px 0 0 var(--cx-cyan)) drop-shadow(0 1px 0 var(--cx-cyan)) drop-shadow(0 -1px 0 var(--cx-cyan)) drop-shadow(0 0 10px var(--cx-cyan)) drop-shadow(0 0 22px rgba(76,224,255,0.7));transform:scale(1.05);opacity:0;z-index:0;}
.footer-logo.is-revealed .footer-logo__emblem::before{opacity:1;animation:cx-fl-neon-pulse 3.2s ease-in-out 1.4s infinite;}
@keyframes cx-fl-neon-pulse{
  0%,100%{opacity:0.55;filter:drop-shadow(1px 0 0 var(--cx-cyan)) drop-shadow(-1px 0 0 var(--cx-cyan)) drop-shadow(0 1px 0 var(--cx-cyan)) drop-shadow(0 -1px 0 var(--cx-cyan)) drop-shadow(0 0 8px var(--cx-cyan)) drop-shadow(0 0 16px rgba(76,224,255,0.5));}
  50%{opacity:1;filter:drop-shadow(1px 0 0 var(--cx-cyan)) drop-shadow(-1px 0 0 var(--cx-cyan)) drop-shadow(0 1px 0 var(--cx-cyan)) drop-shadow(0 -1px 0 var(--cx-cyan)) drop-shadow(0 0 14px var(--cx-cyan)) drop-shadow(0 0 30px rgba(76,224,255,0.85));}
}
.footer-logo__scan{position:absolute;inset:0;-webkit-mask:url("https://www.flyronix.ch/hero-assets/logo/flyronix-f-white.png") center/contain no-repeat;mask:url("https://www.flyronix.ch/hero-assets/logo/flyronix-f-white.png") center/contain no-repeat;background:linear-gradient(to bottom,transparent 44%,rgba(166,242,255,0.85) 50%,transparent 56%);background-size:100% 220%;opacity:0;pointer-events:none;}
.footer-logo.is-revealed .footer-logo__scan{animation:cx-fl-scan 4.5s ease-in-out 1.8s infinite;}
@keyframes cx-fl-scan{0%{background-position:0 -60%;opacity:0;}12%{opacity:1;}40%{opacity:1;}52%{background-position:0 160%;opacity:0;}100%{background-position:0 160%;opacity:0;}}

@media (prefers-reduced-motion: reduce){
  .fl-ring--outer,.fl-ring--inner,
  .footer-logo.is-revealed .fl-tick,
  .footer-logo.is-revealed .footer-logo__scan,
  .footer-logo.is-revealed .footer-logo__emblem::before{ animation:none; }
  .footer-logo.is-revealed .fl-tick{opacity:0.6;stroke-dashoffset:0;}
}