@import url("/assets/css/continuous-contour-field.css");

:root{
      /* ===== About-matched theme vars ===== */
      --bg:#000;
      --text:#eaf8ff;
      --muted:#bfefff;
      --accent:#00d9ff;
      --accent-strong:#00e0ff;
      --frame-stroke: rgba(0,217,255,.45);
      --card-radius:16px;

      /* keep compatible */
      --beam-cyan: var(--accent-strong);
      --accent1:#00eaff;
      --accent1-rgb:0,234,255;
      --white-rgb:255,255,255;

      /* Careers body vars (kept) */
      --card:#0f1117;
      --line:#162032;
      --text2:#e8eef7;
      --muted2:#9fb0c5;
      --lime:#6ee7b7;
      --radius:18px;
      --shadow:0 10px 30px rgba(0,0,0,.45);
      --maxw:1100px;
      --pad:22px;

      /* controls spacing between lead paragraph and the word-nav/beam */
      --hero-gap: 18px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      line-height:1.5;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      display:flex;
      flex-direction:column;
      min-height:100svh;
      overflow-x:hidden;
      text-size-adjust:100%;
      -webkit-text-size-adjust:100%;
    }

    img,svg,video,canvas{max-width:100%; height:auto}
    a{color:var(--accent1); text-decoration:none}
    a:hover{text-decoration:underline}

    /* ===== Interactive Parallax Starfield ===== */
    .space{
      position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:#000;
      -webkit-mask:radial-gradient(60% 45% at 50% 30%, #000 55%, transparent 80%);
      mask:radial-gradient(60% 45% at 50% 30%, #000 55%, transparent 80%);
    }
    .p-layer {
      position: absolute;
      inset: -100px;
    }
    .stars,.stars2,.stars3{position:absolute; inset:0; background-repeat:repeat; animation:drift 140s linear infinite}
    .stars{opacity:.10; filter:blur(.2px); background-image:
      radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7) 50%, transparent 51%),
      radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,.6) 50%, transparent 51%),
      radial-gradient(1px 1px at 70px 150px, rgba(255,255,255,.55) 50%, transparent 51%);
      background-size:200px 200px;
    }
    .stars2{opacity:.08; background-image:
      radial-gradient(1px 1px at 50px 60px, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 160px 140px, rgba(255,255,255,.45) 50%, transparent 51%);
      background-size:250px 250px; animation-duration:180s;
    }
    .stars3{opacity:.06; background-image:
      radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 180px 190px, rgba(255,255,255,.35) 50%, transparent 51%);
      background-size:300px 300px; animation-duration:220s;
    }
    @keyframes drift{from{transform:translateY(0)} to{transform:translateY(-240px)}}
    @media (prefers-reduced-motion:reduce){.stars,.stars2,.stars3{animation:none}}

    /* ===== Scroll Reveal Animations ===== */
    .reveal-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }
    .reveal-up.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ===== Dynamic Brand Text Glow Wave ===== */
    .brand-text .char {
      display: inline-block;
      will-change: transform, color, text-shadow;
    }
    @keyframes brandWave {
      0%, 80%, 100% {
        color: #ffffff;
        text-shadow: none;
        transform: translateY(0) scale(1);
      }
      10% {
        color: var(--accent-strong);
        text-shadow: 0 0 12px var(--accent-strong), 0 0 24px var(--accent-strong);
        transform: translateY(-2px) scale(1.05);
      }
      20% {
        color: var(--accent-strong);
        text-shadow: 0 0 12px var(--accent-strong), 0 0 20px var(--accent-strong);
        transform: translateY(-1px) scale(1.02);
      }
      35% {
        color: #ffffff;
        text-shadow: none;
        transform: translateY(0) scale(1);
      }
    }

    /* ===== About-matched header/navbar ===== */
    header.site-header{
      position:sticky; top:0; z-index:60;
      background:rgba(8,9,12,.72);
      backdrop-filter:saturate(140%) blur(8px);
      -webkit-backdrop-filter:saturate(140%) blur(8px);
      border-bottom:1px solid var(--frame-stroke);
      box-shadow:0 8px 22px rgba(0,217,255,.10);
    }
    .nav-wrap{
      max-width:min(1200px,95vw);
      margin:0 auto;
      padding:10px 10px;
      display:flex;
      align-items:center;
      gap:14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:var(--text);
      padding:6px 8px;
      border-radius:12px;
      font-weight:800;
      letter-spacing:.25px
    }
    .brand .brand-icon{
      width:34px; height:34px; display:block; object-fit:contain;
      background:transparent !important; border:0 !important;
      outline:0 !important; box-shadow:none !important; filter:none !important;
    }
    .nav-toggle{
      margin-left:auto;
      display:none;
      border:1px solid rgba(0,217,255,.4);
      background:rgba(0,0,0,.35);
      color:var(--text);
      padding:8px 12px;
      border-radius:12px;
      font:inherit;
      cursor:pointer;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    }
    nav.primary{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
      flex-wrap:wrap;
      position:relative;
      padding-top:12px; /* room for indicator above labels */
    }

    /* Navbar labels white */
    nav.primary a,
    nav.primary button{
      color:#ffffff !important;
      text-decoration:none;
      padding:8px 10px;
      border-radius:10px;
      position:relative;
      line-height:1;
      white-space:nowrap;
      background:none;
      border:0;
      font:inherit;
      font-weight:600;
      cursor:pointer;
    }
    nav.primary a[aria-current="page"]{ color:#ffffff; font-weight:700 }
    nav.primary a::after, nav.primary button::after{ display:none !important; content:none !important; }

    .has-menu{ position:relative; }
    .has-menu .menu-trigger{ display:inline-flex; align-items:center; gap:6px; }
    .menu-trigger .caret{
      width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #cfefff;
      filter:drop-shadow(0 0 6px rgba(0,217,255,.6));
      margin-top:2px;
      transition:transform .18s ease;
    }
    .has-menu[data-open="true"] .menu-trigger .caret{ transform:rotate(180deg); }

    .dropdown{
      position:absolute;
      top:100%;
      left:0;
      min-width:240px;
      margin-top:10px;
      background:rgba(5,7,10,.92);
      border:1px solid var(--frame-stroke);
      border-radius:16px;
      padding:8px;
      display:none; /* JS toggles */
      box-shadow:
        0 14px 30px rgba(0,217,255,.10),
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 0 18px rgba(0,217,255,.18);
      backdrop-filter:saturate(140%) blur(10px);
      -webkit-backdrop-filter:saturate(140%) blur(10px);
    }
    .dropdown a{
      display:block;
      padding:12px 14px;
      border-radius:12px;
      color:#eaf6ff;
      text-decoration:none;
      font:inherit;
      font-weight:600;
    }
    .dropdown a:hover{
      background:rgba(255,255,255,.06);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
      color:#fff;
    }

    .lang-trigger{ background:transparent !important; }
    .has-menu-language .dropdown{ right:0; left:auto; min-width:190px; }
    .language-option[aria-current="true"]{
      background:rgba(0,217,255,.14);
      box-shadow:inset 0 0 0 1px rgba(0,217,255,.22);
      color:#fff;
    }

    @media (max-width:880px){
      .nav-toggle{display:inline-block}
      nav.primary{
        display:none;
        width:100%;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        margin:10px 0 4px;
        padding-top:0;
      }
      header.site-header[data-open="true"] nav.primary{display:flex}
      .has-menu{ width:100% }
      .dropdown{ position:static; margin:6px 0 0; width:100% }
    }

    @media (max-width:720px){
      .brand{ gap:10px; }
    }

    [id]{scroll-margin-top:72px}

    /* ===== About-matched upright pulsing triangle indicator (NO lightning beam) ===== */
    nav.primary .beam-active{
      --beam-show:0;
      position:absolute;
      left:0;
      top:0px;
      width:18px;
      height:12px;
      opacity:var(--beam-show);
      z-index:2;
      pointer-events:none;
      transform-origin:center center;
    }

    @keyframes triPulse {
      0%, 100% {
        transform: translateX(-50%) scale(1);
        filter:
          drop-shadow(2px 0px 8px rgba(4, 175, 255, 0.45))
          drop-shadow(1px 0px 2px rgba(0, 196, 226, 0.40))
          drop-shadow(0px 0px 3px rgba(17, 204, 255, 0.35))
          drop-shadow(8px 0px 16px rgba(0, 156, 199, 0.35));
        opacity: 0.92;
      }
      50% {
        transform: translateX(-50%) scale(1.08);
        filter:
          drop-shadow(2px 0px 14px rgba(0, 224, 255, 0.75))
          drop-shadow(0px 0px 6px rgba(0, 217, 255, 0.70))
          drop-shadow(0px 0px 18px rgba(0, 224, 255, 0.60))
          drop-shadow(10px 0px 26px rgba(0, 156, 199, 0.55));
        opacity: 1;
      }
    }

    nav.primary .beam-active::before{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      width:0; height:0;
      border-left:9px solid transparent;
      border-right:9px solid transparent;
      border-bottom:12px solid var(--beam-cyan);
      animation: triPulse 1.35s ease-in-out infinite;
      will-change: transform, filter, opacity;
    }
    nav.primary .beam-active::after{
      content:"";
      position:absolute;
      left:50%;
      top:1px;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:7px solid transparent;
      border-right:7px solid transparent;
      border-bottom:10px solid rgba(255,255,255,.18);
      pointer-events:none;
      filter:none;
    }
    @media (prefers-reduced-motion: reduce){
      nav.primary .beam-active::before{ animation:none !important; }
    }
    @media (max-width:880px){
      nav.primary .beam-active{ display:none !important; }
    }

    /* Letter wrapping for hover targeting (no visual change) */
    nav.primary .nav-word{ display:inline-flex; gap:0; }
    nav.primary .nav-char{ display:inline-block; }
    nav.primary .nav-space{ display:inline-block; width:.33em; }

    /* ===== Careers body styles ===== */
    .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}

    main{flex:1 0 auto}
    .section{padding:64px 0}
    .stack{display:grid; gap:22px}

    /* Breadcrumbs Styling */
    .breadcrumbs { margin-bottom: 2px; font-size: 14px; color: var(--muted2); font-weight: 500; }
    .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
    .breadcrumbs li { display: flex; align-items: center; }
    .breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: rgba(0,217,255,.5); font-size: 18px; line-height: 1; }
    .breadcrumbs a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
    .breadcrumbs a:hover { color: var(--accent1); }
    .breadcrumbs span { color: #fff; }

    .card{
      background:linear-gradient(180deg,#0f1117,#0b0d12);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      position:relative;
      overflow:visible;
    }
    .card::after{
      content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
      box-shadow:
        0 0 0 1.25px rgba(var(--accent1-rgb), .9),
        0 0 18px rgba(var(--accent1-rgb), .35),
        0 0 40px rgba(var(--accent1-rgb), .18);
      animation:neonPulse 5.5s ease-in-out infinite;
    }
    @keyframes neonPulse{
      0%,100%{box-shadow:0 0 0 1.25px rgba(var(--accent1-rgb), .9),0 0 18px rgba(var(--accent1-rgb), .35),0 0 40px rgba(var(--accent1-rgb), .18)}
      50%{box-shadow:0 0 0 1.25px rgba(var(--accent1-rgb), .85),0 0 26px rgba(var(--accent1-rgb), .5),0 0 64px rgba(var(--accent1-rgb), .28)}
    }
    @media (prefers-reduced-motion:reduce){.card::after{animation:none}}
    .card-in{padding:var(--pad)}

    h1{font-size:clamp(28px,5vw,52px); line-height:1.05; margin:12px 0 10px}
    h2{font-size:clamp(18px,3vw,26px); line-height:1.15; margin:22px 0 10px}
    p{margin:10px 0}

    /* hero lead paragraph white */
    .lead{color:#fff !important; max-width:78ch; margin-bottom: var(--hero-gap) !important;}

    /* Title Styling & Scramble Specifics */
    .neon-title, .whiteBlock h2, .whiteBlock h3 {
      color: var(--accent1) !important;
      text-shadow: 0 0 6px rgba(var(--accent1-rgb),.6), 0 0 20px rgba(var(--accent1-rgb),.35);
      letter-spacing: .06em;
    }

    .neon-title .char, .whiteBlock h2 .char, .whiteBlock h3 .char {
      display: inline-block;
      transition: transform .18s ease, text-shadow .18s ease, color .18s ease, filter .18s ease;
      will-change: transform, text-shadow, color, filter;
      padding: 0 .02em;
    }

    .neon-title .char:hover, .whiteBlock h2 .char:hover, .whiteBlock h3 .char:hover {
      color: #7df9ff !important;
      text-shadow: 0 0 6px #00eaff, 0 0 12px #00eaff, 0 0 22px #00eaff, 0 0 36px #00bfff !important;
      transform: translateY(-2px) scale(1.06);
      filter: brightness(1.08);
    }

    .word{display:inline-block; white-space:nowrap}
    .wspace{display:inline-block; width:.33em; white-space:pre;}

    /* White content blocks */
    .whiteBlock,
    .whiteBlock .char,
    .panel.whiteBlock li,
    .panel.whiteBlock li .char{ color:#fff !important; }

    .whiteGlow .char{
      display:inline-block; position:relative;
      transition:text-shadow .22s ease, transform .22s ease, filter .22s ease;
      will-change:text-shadow, transform, filter;
      cursor:default;
    }
    .whiteGlow .char:hover{
      text-shadow:
        0 0 2px rgba(255,255,255,.98),
        0 0 7px rgba(255,255,255,.88),
        0 0 16px rgba(255,255,255,.68),
        0 0 34px rgba(255,255,255,.48),
        0 0 72px rgba(255,255,255,.32) !important;
      filter:saturate(1.06);
      transform:translateY(-0.5px);
    }

    /* Lightning beam word nav */
    .word-nav{ margin-top:10px; margin-bottom:18px; position:relative; z-index:3; }
    .word-nav nav{position:relative; z-index:3}
    .word-nav ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:40px; }
    @media (min-width:700px){ .word-nav ul{ flex-wrap:nowrap; gap:clamp(80px,14vw,260px); } }
    .word-nav li{position:relative}
    .word-nav li button{
      appearance:none; border:none; background:transparent; padding:0; margin:0;
      font-weight:700; font-size:16px; line-height:22px;
      color:var(--beam-cyan) !important;
      transition:color .25s, text-shadow .25s;
      text-shadow:0 0 0 transparent;
      touch-action:manipulation;
      /* Magnetic effect support */
      will-change: transform; cursor: pointer; display: inline-block;
    }
    .word-nav li:not(.active):hover button{ text-shadow:0 0 10px rgba(0,234,255,.5), 0 0 20px rgba(0,234,255,.5); }

    .word-nav nav .active-element{
      --active-element-scale-x:1; --active-element-scale-y:1; --active-element-show:0;
      --active-element-opacity:0; --active-element-width:0px; --active-element-strike-x:0%; --active-element-mask-position:0%;
      position:absolute; left:0; top:-10px; height:3px; width:36px; border-radius:2px;
      background:#fff; opacity:var(--active-element-show); pointer-events:none;
      box-shadow:0 0 8px rgba(var(--accent1-rgb), .55), 0 0 20px rgba(var(--accent1-rgb), .40), 0 0 44px rgba(var(--accent1-rgb), .28);
      animation:beamGlow 4.5s ease-in-out infinite;
    }
    @keyframes beamGlow{
      0%,100%{box-shadow:0 0 8px rgba(var(--accent1-rgb), .55),0 0 20px rgba(var(--accent1-rgb), .40),0 0 44px rgba(var(--accent1-rgb), .28)}
      50%{box-shadow:0 0 10px rgba(var(--accent1-rgb), .70),0 0 28px rgba(var(--accent1-rgb), .55),0 0 64px rgba(var(--accent1-rgb), .35)}
    }
    .word-nav nav .active-element::before{
      content:""; position:absolute; inset:-6px -22px; border-radius:10px; pointer-events:none;
      background:linear-gradient(90deg, transparent, rgba(var(--accent1-rgb), .45) 10%, rgba(var(--accent1-rgb), .70) 50%, rgba(var(--accent1-rgb), .45) 90%, transparent);
      filter:blur(10px); opacity:.85;
    }
    .word-nav nav .active-element>svg,
    .word-nav nav .active-element .strike{
      position:absolute; right:0; top:50%; transform:translateY(-50%);
      opacity:var(--active-element-opacity); width:var(--active-element-width);
      mix-blend-mode:multiply;
    }
    .word-nav nav .active-element>svg{
      display:block; overflow:visible; height:5px;
      filter: blur(.5px)
        drop-shadow(2px 0 8px rgba(4,175,255,.5))
        drop-shadow(1px 0 2px rgba(0,196,226,.5))
        drop-shadow(0 0 3px rgba(17,204,255,.5))
        drop-shadow(2px 0 8px rgba(0,187,255,.5))
        drop-shadow(8px 0 16px rgba(0,156,199,.5));
    }
    .word-nav nav .active-element .strike{
      padding:24px 0;
      -webkit-mask-image:linear-gradient(to right,
        transparent calc(0% + var(--active-element-mask-position)),
        black calc(15% + var(--active-element-mask-position)),
        black 80%, transparent);
      mask-image:linear-gradient(to right,
        transparent calc(0% + var(--active-element-mask-position)),
        black calc(15% + var(--active-element-mask-position)),
        black 80%, transparent);
    }
    .word-nav nav .active-element .strike svg{
      display:block; overflow:visible; height:12px;
      width:calc(var(--active-element-width) * 2);
      transform:translate(var(--active-element-strike-x), 30%) scale(var(--active-element-scale-x), var(--active-element-scale-y));
    }
    .word-nav nav .active-element .strike svg:last-child{
      transform:translate(var(--active-element-strike-x), -30%) scale(-1);
    }
    .word-nav nav .active-element .strike svg g path:nth-child(2){ filter:blur(2px); }
    .word-nav nav .active-element .strike svg g path:nth-child(3){ filter:blur(4px); }
    .word-nav nav.before .active-element{ transform:rotateY(180deg); }

    .grid{display:grid; gap:14px; margin-top:12px}
    @media (min-width:900px){ .grid{grid-template-columns:1fr 1fr} }

    .panel{
      background:linear-gradient(180deg,#0e1118,#0b0e14);
      border:1px solid var(--line);
      border-radius:14px;
      padding:14px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
      position: relative;
      overflow: hidden;
    }
    .panel h3{margin:0 0 8px; font-size:16px; letter-spacing:.02em;}
    .panel ul{margin:0; padding-left:18px; color:#cfe2ff}
    .panel li{margin:6px 0}
    .pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
    .pill{
      font-size:12px; color:#cfefff;
      border:1px solid rgba(var(--accent1-rgb),.45);
      background:linear-gradient(180deg,#08131b,#050b12);
      padding:6px 10px; border-radius:999px;
      box-shadow:0 0 10px rgba(var(--accent1-rgb),.15);
    }

    /* ===== Mouse Tracking Spotlight Effect for Panels ===== */
    .card::before, .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 234, 255, 0.08),
        transparent 40%
      );
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .card:hover::before, .panel:hover::before { opacity: 1; }

    /* Ensure content stays clearly above the spotlight overlay */
    .card-in, .panel > * { position: relative; z-index: 3; }

    /* ===== Magnetic CTA Buttons ===== */
    .btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px}
    .btn{
      --br:16px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 18px; border-radius:var(--br); color:var(--text2); font-weight:700; isolation:isolate;
      appearance:none; -webkit-appearance:none; border:0; background:transparent; text-decoration:none;
      touch-action:manipulation;
      /* Magnetic support */
      will-change: transform; cursor: pointer; transition: filter 0.3s;
    }
    button.btn{cursor:pointer}
    button.btn[disabled]{opacity:.6; cursor:not-allowed}
    .btn::before{
      content:""; position:absolute; inset:0; padding:1.5px; border-radius:var(--br);
      background:conic-gradient(from var(--angle), var(--accent1), var(--lime), var(--accent1));
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude;
      filter:drop-shadow(0 0 12px rgba(var(--accent1-rgb),.33));
      animation:spin 3.5s linear infinite;
    }
    @property --angle{syntax:'<angle>'; inherits:false; initial-value:0deg}
    @keyframes spin{to{--angle:360deg}}
    .btn::after{content:""; position:absolute; inset:2px; border-radius:calc(var(--br) - 2px); background:linear-gradient(180deg,#101522,#0c0f15)}
    .btn > span{position:relative; z-index:2; will-change: transform; display: inline-block;}

    .fine{color:var(--muted2); font-size:13px; margin-top:10px}
    .hr{height:1px; background:#101521; margin:18px 0; opacity:.9}

    @media (prefers-reduced-motion:reduce){
      .word-nav nav .active-element{animation:none}
      .word-nav nav .active-element>svg{display:none}
    }

    /* Application form styling */
    .form-panel{ margin-top:18px; }
    .form-grid{ display:grid; gap:14px; }
    .field label{
      display:block;
      font-size:13px;
      letter-spacing:.04em;
      margin-bottom:6px;
      color:#fff !important;
    }
    .field input, .field select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid #1b2537;
      background:#050b12;
      color:#e8eef7;
      font-family:inherit;
      outline:none;
      min-height:44px;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .field input:focus, .field select:focus{
      border-color:rgba(var(--accent1-rgb),.65);
      box-shadow:0 0 0 3px rgba(var(--accent1-rgb),.18);
    }
    .field input::placeholder{color:#7f93ab}

    .app-status{
      margin-top:14px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(var(--accent1-rgb), .35);
      background:linear-gradient(180deg,#08131b,#050b12);
      color:#cfefff;
      box-shadow:0 0 14px rgba(var(--accent1-rgb), .18);
      line-height:1.35;
      overflow-wrap:anywhere;
    }
    .app-status.loading{
      border-color: rgba(var(--accent1-rgb), .55);
      box-shadow: 0 0 18px rgba(var(--accent1-rgb), .28);
    }
    .app-status.ok{
      border-color: rgba(var(--accent1-rgb), .85);
      box-shadow: 0 0 22px rgba(var(--accent1-rgb), .35);
    }
    .app-status.err{
      border-color: rgba(255, 80, 120, .55);
      box-shadow: 0 0 22px rgba(255, 80, 120, .25);
      color:#ffe6ef;
    }

    .hidden-iframe{
      position:absolute;
      left:-9999px;
      width:1px; height:1px;
      opacity:0; pointer-events:none;
    }

    /* Mobile */
    @media (max-width:720px){
      :root{ --pad:16px; --radius:16px; --hero-gap:22px; }
      .wrap{ padding-inline:14px; }
      .section{ padding:34px 0; }
      h1{ margin:10px 0 8px; letter-spacing:.04em; }
      h2{ margin:18px 0 10px; }
      .pill-row{ gap:8px; }
      .pill{ padding:6px 9px; }
      .hr{ margin:14px 0; }
      .grid{ grid-template-columns:1fr; }
      .word-nav ul{ gap:18px; }
      .word-nav li button{ font-size:15px; padding:8px 2px; }
      .word-nav nav .active-element{ top:-6px; }
      .panel{ padding:12px; border-radius:14px; }
      .panel ul{ padding-left:18px; }
      .panel li{ margin:8px 0; }
      .form-grid{ gap:12px; }
      .btn-row{ gap:10px; }
      .btn-row .btn{ width:100%; justify-content:center; padding:13px 18px; }
    }
    @media (hover:none){
      .whiteGlow .char:hover,
      .field label .char:hover,
      .lead .char:hover{ text-shadow:none; filter:none; transform:none; }
      .word-nav li:not(.active):hover button{ text-shadow:none; }
    }

    /* ===== About-matched footer ===== */
    footer.site-footer{
      margin-top:auto;
      border-top:1px solid var(--frame-stroke);
      background:rgba(8,9,12,.72);
      backdrop-filter:saturate(140%) blur(6px);
      -webkit-backdrop-filter:saturate(140%) blur(6px);
      color:#bdefff;
      box-shadow:0 -8px 22px rgba(0,217,255,.08);
    }
    .footer-wrap{
      max-width:min(1200px,95vw);
      margin:0 auto;
      padding:18px 10px;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:.95rem;
    }
    .footer-links{display:flex;gap:12px;flex-wrap:wrap}
    .footer-links a{
      color:var(--text);
      text-decoration:none;
      padding:6px 8px;
      border-radius:8px;
    }
    .footer-links a:hover{
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
      text-decoration:none;
    }