/* =====================================================================
   BinaryBlazar — cosmic single page (HTML + CSS only)
   Palette: #000000  #011C40  #033E8C  #0C87F2  #16F2F2
   ===================================================================== */

   @font-face {
    font-family: "Cairo";
    src: url("../assets/Cairo.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal oblique -11deg 11deg;
    font-display: swap;
  }
  
  @property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @property --n   { syntax: "<integer>"; inherits: false; initial-value: 0; }
  
  :root {
    --black: #000000;
    --navy: #011C40;
    --blue: #033E8C;
    --sky: #0C87F2;
    --cyan: #16F2F2;
    --text: #e9f4ff;
    --muted: #9bb4d1;
    --line: rgba(22, 242, 242, .16);
    --hh: 72px;
    --gut: clamp(20px, 5vw, 48px);
    --radius: 22px;
    color-scheme: dark;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hh) + 12px);
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
  }
  
  body {
    margin: 0;
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: var(--black);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  img, video, svg { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; margin: 0; padding: 0; }
  h1, h2, h3, p { margin: 0; }
  ::selection { background: var(--sky); color: #fff; }
  
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
  
  /* ---------- State controllers (language) ---------- */
  .state { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
  
  /* Language switch: show one language, hide the other */
  #l-en:checked ~ * .ar { display: none !important; }
  #l-ar:checked ~ * .en { display: none !important; }
  
  /* RTL for Arabic */
  #l-ar:checked ~ * { direction: rtl; }
  #l-ar:checked ~ * .arrow { transform: scaleX(-1); }
  #l-ar:checked ~ main h1,
  #l-ar:checked ~ main h2 { line-height: 1.4; }
  .ar { letter-spacing: 0 !important; text-transform: none !important; }
  
  /* ---------- Layout helpers ---------- */
  .wrap { width: min(1200px, 100% - var(--gut) * 2); margin-inline: auto; }
  .section { position: relative; padding-block: clamp(76px, 10vw, 140px); }
  main { position: relative; z-index: 1; }
  
  .ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .ico.big {
    width: 56px; height: 56px; padding: 13px; border-radius: 16px; color: var(--cyan);
    background: linear-gradient(145deg, rgba(12, 135, 242, .22), rgba(3, 62, 140, .12));
    border: 1px solid rgba(22, 242, 242, .28);
    box-shadow: 0 0 28px -6px rgba(22, 242, 242, .45), inset 0 0 14px rgba(22, 242, 242, .08);
  }
  
  /* ---------- Cosmic backdrop ---------- */
  .cosmos { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000; }
  .nebula {
    position: absolute; inset: -10%;
    background:
      radial-gradient(60vw 50vh at 88% 6%, rgba(3, 62, 140, .60), transparent 70%),
      radial-gradient(50vw 48vh at 2% 42%, rgba(1, 28, 64, .95), transparent 72%),
      radial-gradient(46vw 40vh at 82% 88%, rgba(12, 135, 242, .20), transparent 72%),
      radial-gradient(34vw 30vh at 18% 96%, rgba(22, 242, 242, .09), transparent 72%),
      radial-gradient(30vw 26vh at 50% 50%, rgba(3, 62, 140, .22), transparent 75%);
    animation: breathe 22s ease-in-out infinite alternate;
  }
  .grid-fx {
    position: absolute; inset: 0; opacity: .5;
    background-image:
      linear-gradient(rgba(12, 135, 242, .07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(12, 135, 242, .07) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%);
  }
  .stars { position: absolute; top: 0; left: 0; border-radius: 50%; background: transparent; will-change: transform; }
  .stars.s1 { width: 1px; height: 1px; animation: drift 140s linear infinite; box-shadow: 32.38vw 15.08vh 0px rgba(255,255,255,.45), 32.38vw 115.08vh 0px rgba(255,255,255,.45), 4.83vw 82.13vh 0px rgba(255,255,255,.75), 4.83vw 182.13vh 0px rgba(255,255,255,.75), 36.57vw 5.8vh 0px rgba(255,255,255,.45), 36.57vw 105.8vh 0px rgba(255,255,255,.45), 21.47vw 8.59vh 0px rgba(155,216,255,.7), 21.47vw 108.59vh 0px rgba(155,216,255,.7), 6.99vw 9.07vh 0px rgba(155,216,255,.7), 6.99vw 109.07vh 0px rgba(155,216,255,.7), 5.91vw 56.55vh 0px rgba(255,255,255,.75), 5.91vw 156.55vh 0px rgba(255,255,255,.75), 63.06vw 58.3vh 0px rgba(255,255,255,.75), 63.06vw 158.3vh 0px rgba(255,255,255,.75), 57.71vw 39.67vh 0px rgba(255,255,255,.75), 57.71vw 139.67vh 0px rgba(255,255,255,.75), 4.66vw 85.85vh 0px rgba(155,216,255,.7), 4.66vw 185.85vh 0px rgba(155,216,255,.7), 41.91vw 54.07vh 0px rgba(255,255,255,.45), 41.91vw 154.07vh 0px rgba(255,255,255,.45), 30.85vw 81.61vh 0px rgba(255,255,255,.75), 30.85vw 181.61vh 0px rgba(255,255,255,.75), 10.31vw 57.12vh 0px rgba(255,255,255,.75), 10.31vw 157.12vh 0px rgba(255,255,255,.75), 37.24vw 54.77vh 0px rgba(255,255,255,.75), 37.24vw 154.77vh 0px rgba(255,255,255,.75), 56.44vw 61.9vh 0px rgba(155,216,255,.7), 56.44vw 161.9vh 0px rgba(155,216,255,.7), 68.04vw 42.76vh 0px rgba(155,216,255,.7), 68.04vw 142.76vh 0px rgba(155,216,255,.7), 46.56vw 92.34vh 0px rgba(155,216,255,.7), 46.56vw 192.34vh 0px rgba(155,216,255,.7), 29.98vw 79.44vh 0px rgba(255,255,255,.45), 29.98vw 179.44vh 0px rgba(255,255,255,.45), 77.98vw 8.19vh 0px rgba(155,216,255,.7), 77.98vw 108.19vh 0px rgba(155,216,255,.7), 52.52vw 87.51vh 0px rgba(255,255,255,.45), 52.52vw 187.51vh 0px rgba(255,255,255,.45), 44.88vw 60.9vh 0px rgba(255,255,255,.75), 44.88vw 160.9vh 0px rgba(255,255,255,.75), 11.81vw 41.81vh 0px rgba(155,216,255,.7), 11.81vw 141.81vh 0px rgba(155,216,255,.7), 15.2vw 48.9vh 0px rgba(255,255,255,.75), 15.2vw 148.9vh 0px rgba(255,255,255,.75), 96.2vw 7.76vh 0px rgba(255,255,255,.45), 96.2vw 107.76vh 0px rgba(255,255,255,.45), 57.3vw 87.55vh 0px rgba(155,216,255,.7), 57.3vw 187.55vh 0px rgba(155,216,255,.7), 34.01vw 35.02vh 0px rgba(155,216,255,.7), 34.01vw 135.02vh 0px rgba(155,216,255,.7), 57.99vw 45.62vh 0px rgba(255,255,255,.75), 57.99vw 145.62vh 0px rgba(255,255,255,.75), 94.47vw 47.41vh 0px rgba(255,255,255,.45), 94.47vw 147.41vh 0px rgba(255,255,255,.45), 6.5vw 73.12vh 0px rgba(155,216,255,.7), 6.5vw 173.12vh 0px rgba(155,216,255,.7), 64.71vw 99.31vh 0px rgba(155,216,255,.7), 64.71vw 199.31vh 0px rgba(155,216,255,.7), 28.46vw 38.58vh 0px rgba(255,255,255,.45), 28.46vw 138.58vh 0px rgba(255,255,255,.45), 34.7vw 94.06vh 0px rgba(155,216,255,.7), 34.7vw 194.06vh 0px rgba(155,216,255,.7), 16.8vw 11.71vh 0px rgba(255,255,255,.75), 16.8vw 111.71vh 0px rgba(255,255,255,.75), 21.82vw 28.74vh 0px rgba(255,255,255,.45), 21.82vw 128.74vh 0px rgba(255,255,255,.45), 24.76vw 39.09vh 0px rgba(155,216,255,.7), 24.76vw 139.09vh 0px rgba(155,216,255,.7), 8.06vw 44.92vh 0px rgba(255,255,255,.45), 8.06vw 144.92vh 0px rgba(255,255,255,.45), 27.78vw 13.69vh 0px rgba(155,216,255,.7), 27.78vw 113.69vh 0px rgba(155,216,255,.7), 86.4vw 27.84vh 0px rgba(155,216,255,.7), 86.4vw 127.84vh 0px rgba(155,216,255,.7), 98.65vw 68.27vh 0px rgba(155,216,255,.7), 98.65vw 168.27vh 0px rgba(155,216,255,.7), 95.77vw 15.09vh 0px rgba(255,255,255,.75), 95.77vw 115.09vh 0px rgba(255,255,255,.75), 15.13vw 65.85vh 0px rgba(255,255,255,.75), 15.13vw 165.85vh 0px rgba(255,255,255,.75), 48.5vw 58.91vh 0px rgba(155,216,255,.7), 48.5vw 158.91vh 0px rgba(155,216,255,.7), 28.19vw 14.57vh 0px rgba(255,255,255,.45), 28.19vw 114.57vh 0px rgba(255,255,255,.45), 36.93vw 56.63vh 0px rgba(255,255,255,.75), 36.93vw 156.63vh 0px rgba(255,255,255,.75), 69.05vw 51.55vh 0px rgba(255,255,255,.45), 69.05vw 151.55vh 0px rgba(255,255,255,.45), 65.5vw 73.98vh 0px rgba(155,216,255,.7), 65.5vw 173.98vh 0px rgba(155,216,255,.7), 89.95vw 78.0vh 0px rgba(255,255,255,.45), 89.95vw 178.0vh 0px rgba(255,255,255,.45), 79.79vw 39.24vh 0px rgba(155,216,255,.7), 79.79vw 139.24vh 0px rgba(155,216,255,.7), 39.41vw 48.15vh 0px rgba(155,216,255,.7), 39.41vw 148.15vh 0px rgba(155,216,255,.7), 6.22vw 6.73vh 0px rgba(255,255,255,.75), 6.22vw 106.73vh 0px rgba(255,255,255,.75), 44.06vw 10.99vh 0px rgba(255,255,255,.45), 44.06vw 110.99vh 0px rgba(255,255,255,.45), 5.26vw 0.02vh 0px rgba(255,255,255,.75), 5.26vw 100.02vh 0px rgba(255,255,255,.75), 53.66vw 94.89vh 0px rgba(255,255,255,.45), 53.66vw 194.89vh 0px rgba(255,255,255,.45), 2.55vw 87.43vh 0px rgba(255,255,255,.45), 2.55vw 187.43vh 0px rgba(255,255,255,.45), 37.62vw 63.44vh 0px rgba(155,216,255,.7), 37.62vw 163.44vh 0px rgba(155,216,255,.7), 60.23vw 47.42vh 0px rgba(255,255,255,.75), 60.23vw 147.42vh 0px rgba(255,255,255,.75), 84.89vw 99.31vh 0px rgba(155,216,255,.7), 84.89vw 199.31vh 0px rgba(155,216,255,.7), 48.04vw 31.19vh 0px rgba(255,255,255,.75), 48.04vw 131.19vh 0px rgba(255,255,255,.75), 10.22vw 34.26vh 0px rgba(155,216,255,.7), 10.22vw 134.26vh 0px rgba(155,216,255,.7), 47.86vw 69.21vh 0px rgba(255,255,255,.45), 47.86vw 169.21vh 0px rgba(255,255,255,.45), 2.31vw 95.1vh 0px rgba(255,255,255,.45), 2.31vw 195.1vh 0px rgba(255,255,255,.45), 36.18vw 69.01vh 0px rgba(255,255,255,.75), 36.18vw 169.01vh 0px rgba(255,255,255,.75), 75.81vw 29.81vh 0px rgba(255,255,255,.45), 75.81vw 129.81vh 0px rgba(255,255,255,.45), 86.33vw 69.62vh 0px rgba(155,216,255,.7), 86.33vw 169.62vh 0px rgba(155,216,255,.7), 51.84vw 90.83vh 0px rgba(155,216,255,.7), 51.84vw 190.83vh 0px rgba(155,216,255,.7), 77.19vw 53.26vh 0px rgba(255,255,255,.45), 77.19vw 153.26vh 0px rgba(255,255,255,.45), 32.97vw 22.3vh 0px rgba(255,255,255,.75), 32.97vw 122.3vh 0px rgba(255,255,255,.75), 80.61vw 81.83vh 0px rgba(255,255,255,.45), 80.61vw 181.83vh 0px rgba(255,255,255,.45), 80.33vw 19.99vh 0px rgba(155,216,255,.7), 80.33vw 119.99vh 0px rgba(155,216,255,.7), 35.56vw 2.9vh 0px rgba(255,255,255,.75), 35.56vw 102.9vh 0px rgba(255,255,255,.75), 79.01vw 47.22vh 0px rgba(255,255,255,.75), 79.01vw 147.22vh 0px rgba(255,255,255,.75), 69.25vw 95.65vh 0px rgba(155,216,255,.7), 69.25vw 195.65vh 0px rgba(155,216,255,.7), 80.86vw 72.31vh 0px rgba(155,216,255,.7), 80.86vw 172.31vh 0px rgba(155,216,255,.7), 95.5vw 36.46vh 0px rgba(255,255,255,.75), 95.5vw 136.46vh 0px rgba(255,255,255,.75), 10.22vw 47.01vh 0px rgba(155,216,255,.7), 10.22vw 147.01vh 0px rgba(155,216,255,.7), 20.44vw 62.41vh 0px rgba(255,255,255,.45), 20.44vw 162.41vh 0px rgba(255,255,255,.45), 84.04vw 47.95vh 0px rgba(255,255,255,.45), 84.04vw 147.95vh 0px rgba(255,255,255,.45), 34.4vw 64.31vh 0px rgba(255,255,255,.45), 34.4vw 164.31vh 0px rgba(255,255,255,.45), 11.99vw 38.85vh 0px rgba(255,255,255,.45), 11.99vw 138.85vh 0px rgba(255,255,255,.45), 75.01vw 47.8vh 0px rgba(255,255,255,.75), 75.01vw 147.8vh 0px rgba(255,255,255,.75), 43.39vw 63.58vh 0px rgba(255,255,255,.75), 43.39vw 163.58vh 0px rgba(255,255,255,.75), 80.08vw 97.17vh 0px rgba(155,216,255,.7), 80.08vw 197.17vh 0px rgba(155,216,255,.7), 46.32vw 74.34vh 0px rgba(255,255,255,.75), 46.32vw 174.34vh 0px rgba(255,255,255,.75), 72.48vw 17.0vh 0px rgba(255,255,255,.75), 72.48vw 117.0vh 0px rgba(255,255,255,.75), 2.75vw 59.08vh 0px rgba(155,216,255,.7), 2.75vw 159.08vh 0px rgba(155,216,255,.7), 80.65vw 14.62vh 0px rgba(255,255,255,.45), 80.65vw 114.62vh 0px rgba(255,255,255,.45), 98.03vw 65.73vh 0px rgba(155,216,255,.7), 98.03vw 165.73vh 0px rgba(155,216,255,.7), 15.59vw 54.83vh 0px rgba(255,255,255,.75), 15.59vw 154.83vh 0px rgba(255,255,255,.75), 1.42vw 97.09vh 0px rgba(255,255,255,.45), 1.42vw 197.09vh 0px rgba(255,255,255,.45), 10.28vw 74.95vh 0px rgba(255,255,255,.75), 10.28vw 174.95vh 0px rgba(255,255,255,.75), 43.38vw 87.17vh 0px rgba(255,255,255,.75), 43.38vw 187.17vh 0px rgba(255,255,255,.75), 2.8vw 21.28vh 0px rgba(255,255,255,.45), 2.8vw 121.28vh 0px rgba(255,255,255,.45), 24.05vw 58.64vh 0px rgba(155,216,255,.7), 24.05vw 158.64vh 0px rgba(155,216,255,.7), 54.44vw 83.42vh 0px rgba(255,255,255,.75), 54.44vw 183.42vh 0px rgba(255,255,255,.75), 91.0vw 35.38vh 0px rgba(155,216,255,.7), 91.0vw 135.38vh 0px rgba(155,216,255,.7), 66.25vw 81.5vh 0px rgba(255,255,255,.45), 66.25vw 181.5vh 0px rgba(255,255,255,.45), 42.06vw 91.77vh 0px rgba(255,255,255,.45), 42.06vw 191.77vh 0px rgba(255,255,255,.45), 13.08vw 15.18vh 0px rgba(255,255,255,.45), 13.08vw 115.18vh 0px rgba(255,255,255,.45), 1.87vw 44.01vh 0px rgba(255,255,255,.75), 1.87vw 144.01vh 0px rgba(255,255,255,.75), 60.86vw 77.6vh 0px rgba(255,255,255,.75), 60.86vw 177.6vh 0px rgba(255,255,255,.75), 17.23vw 47.35vh 0px rgba(255,255,255,.45), 17.23vw 147.35vh 0px rgba(255,255,255,.45), 12.03vw 6.18vh 0px rgba(255,255,255,.45), 12.03vw 106.18vh 0px rgba(255,255,255,.45), 51.83vw 55.54vh 0px rgba(255,255,255,.75), 51.83vw 155.54vh 0px rgba(255,255,255,.75), 88.32vw 5.68vh 0px rgba(255,255,255,.75), 88.32vw 105.68vh 0px rgba(255,255,255,.75), 27.69vw 77.23vh 0px rgba(255,255,255,.45), 27.69vw 177.23vh 0px rgba(255,255,255,.45), 45.22vw 2.79vh 0px rgba(255,255,255,.75), 45.22vw 102.79vh 0px rgba(255,255,255,.75), 44.32vw 61.25vh 0px rgba(255,255,255,.45), 44.32vw 161.25vh 0px rgba(255,255,255,.45), 60.61vw 19.94vh 0px rgba(155,216,255,.7), 60.61vw 119.94vh 0px rgba(155,216,255,.7), 45.23vw 53.33vh 0px rgba(155,216,255,.7), 45.23vw 153.33vh 0px rgba(155,216,255,.7), 50.78vw 24.77vh 0px rgba(255,255,255,.45), 50.78vw 124.77vh 0px rgba(255,255,255,.45), 87.65vw 94.22vh 0px rgba(155,216,255,.7), 87.65vw 194.22vh 0px rgba(155,216,255,.7), 92.28vw 89.28vh 0px rgba(255,255,255,.75), 92.28vw 189.28vh 0px rgba(255,255,255,.75), 84.0vw 13.71vh 0px rgba(255,255,255,.75), 84.0vw 113.71vh 0px rgba(255,255,255,.75), 39.24vw 31.6vh 0px rgba(255,255,255,.45), 39.24vw 131.6vh 0px rgba(255,255,255,.45), 24.06vw 7.31vh 0px rgba(255,255,255,.45), 24.06vw 107.31vh 0px rgba(255,255,255,.45), 30.28vw 12.23vh 0px rgba(255,255,255,.75), 30.28vw 112.23vh 0px rgba(255,255,255,.75), 93.95vw 64.35vh 0px rgba(155,216,255,.7), 93.95vw 164.35vh 0px rgba(155,216,255,.7), 14.3vw 88.28vh 0px rgba(155,216,255,.7), 14.3vw 188.28vh 0px rgba(155,216,255,.7), 21.96vw 95.25vh 0px rgba(155,216,255,.7), 21.96vw 195.25vh 0px rgba(155,216,255,.7), 88.49vw 16.28vh 0px rgba(255,255,255,.45), 88.49vw 116.28vh 0px rgba(255,255,255,.45), 83.24vw 16.15vh 0px rgba(155,216,255,.7), 83.24vw 116.15vh 0px rgba(155,216,255,.7), 99.41vw 40.38vh 0px rgba(155,216,255,.7), 99.41vw 140.38vh 0px rgba(155,216,255,.7), 19.57vw 31.85vh 0px rgba(255,255,255,.45), 19.57vw 131.85vh 0px rgba(255,255,255,.45), 36.6vw 33.8vh 0px rgba(155,216,255,.7), 36.6vw 133.8vh 0px rgba(155,216,255,.7), 44.05vw 1.81vh 0px rgba(155,216,255,.7), 44.05vw 101.81vh 0px rgba(155,216,255,.7), 51.74vw 29.55vh 0px rgba(255,255,255,.75), 51.74vw 129.55vh 0px rgba(255,255,255,.75), 11.28vw 91.85vh 0px rgba(255,255,255,.75), 11.28vw 191.85vh 0px rgba(255,255,255,.75), 97.17vw 10.48vh 0px rgba(155,216,255,.7), 97.17vw 110.48vh 0px rgba(155,216,255,.7), 27.19vw 90.59vh 0px rgba(255,255,255,.75), 27.19vw 190.59vh 0px rgba(255,255,255,.75), 27.04vw 12.96vh 0px rgba(155,216,255,.7), 27.04vw 112.96vh 0px rgba(155,216,255,.7), 84.96vw 67.6vh 0px rgba(155,216,255,.7), 84.96vw 167.6vh 0px rgba(155,216,255,.7), 40.59vw 53.66vh 0px rgba(255,255,255,.45), 40.59vw 153.66vh 0px rgba(255,255,255,.45), 57.06vw 70.04vh 0px rgba(255,255,255,.75), 57.06vw 170.04vh 0px rgba(255,255,255,.75), 27.91vw 79.96vh 0px rgba(255,255,255,.75), 27.91vw 179.96vh 0px rgba(255,255,255,.75), 42.53vw 7.24vh 0px rgba(255,255,255,.75), 42.53vw 107.24vh 0px rgba(255,255,255,.75), 63.44vw 80.16vh 0px rgba(255,255,255,.75), 63.44vw 180.16vh 0px rgba(255,255,255,.75), 60.82vw 22.24vh 0px rgba(155,216,255,.7), 60.82vw 122.24vh 0px rgba(155,216,255,.7), 86.28vw 45.38vh 0px rgba(155,216,255,.7), 86.28vw 145.38vh 0px rgba(155,216,255,.7), 99.43vw 41.78vh 0px rgba(155,216,255,.7), 99.43vw 141.78vh 0px rgba(155,216,255,.7), 62.17vw 4.32vh 0px rgba(255,255,255,.45), 62.17vw 104.32vh 0px rgba(255,255,255,.45), 23.84vw 10.95vh 0px rgba(255,255,255,.75), 23.84vw 110.95vh 0px rgba(255,255,255,.75), 26.19vw 18.11vh 0px rgba(155,216,255,.7), 26.19vw 118.11vh 0px rgba(155,216,255,.7), 62.87vw 53.11vh 0px rgba(255,255,255,.75), 62.87vw 153.11vh 0px rgba(255,255,255,.75), 29.0vw 50.01vh 0px rgba(255,255,255,.75), 29.0vw 150.01vh 0px rgba(255,255,255,.75), 27.05vw 80.37vh 0px rgba(155,216,255,.7), 27.05vw 180.37vh 0px rgba(155,216,255,.7), 3.69vw 1.84vh 0px rgba(255,255,255,.45), 3.69vw 101.84vh 0px rgba(255,255,255,.45), 55.1vw 18.95vh 0px rgba(155,216,255,.7), 55.1vw 118.95vh 0px rgba(155,216,255,.7), 24.57vw 44.71vh 0px rgba(255,255,255,.45), 24.57vw 144.71vh 0px rgba(255,255,255,.45), 81.89vw 43.22vh 0px rgba(155,216,255,.7), 81.89vw 143.22vh 0px rgba(155,216,255,.7), 54.59vw 88.87vh 0px rgba(255,255,255,.45), 54.59vw 188.87vh 0px rgba(255,255,255,.45), 30.78vw 21.52vh 0px rgba(255,255,255,.75), 30.78vw 121.52vh 0px rgba(255,255,255,.75), 0 0 transparent; }
  .stars.s2 { width: 2px; height: 2px; animation: drift 90s linear infinite, twinkle 5s ease-in-out infinite alternate; box-shadow: 34.27vw 83.23vh 1px rgba(22,242,242,.9), 34.27vw 183.23vh 1px rgba(22,242,242,.9), 72.88vw 13.97vh 1px #bfe6ff, 72.88vw 113.97vh 1px #bfe6ff, 98.19vw 83.7vh 1px #fff, 98.19vw 183.7vh 1px #fff, 7.07vw 74.09vh 1px #bfe6ff, 7.07vw 174.09vh 1px #bfe6ff, 43.07vw 5.54vh 1px rgba(22,242,242,.9), 43.07vw 105.54vh 1px rgba(22,242,242,.9), 84.13vw 87.05vh 1px rgba(22,242,242,.9), 84.13vw 187.05vh 1px rgba(22,242,242,.9), 97.09vw 59.88vh 1px rgba(22,242,242,.9), 97.09vw 159.88vh 1px rgba(22,242,242,.9), 29.31vw 45.95vh 1px #fff, 29.31vw 145.95vh 1px #fff, 26.9vw 0.36vh 1px #bfe6ff, 26.9vw 100.36vh 1px #bfe6ff, 96.18vw 97.26vh 1px rgba(22,242,242,.9), 96.18vw 197.26vh 1px rgba(22,242,242,.9), 32.35vw 3.44vh 1px #bfe6ff, 32.35vw 103.44vh 1px #bfe6ff, 21.79vw 18.3vh 1px #bfe6ff, 21.79vw 118.3vh 1px #bfe6ff, 38.16vw 47.46vh 1px rgba(22,242,242,.9), 38.16vw 147.46vh 1px rgba(22,242,242,.9), 65.6vw 24.82vh 1px #fff, 65.6vw 124.82vh 1px #fff, 9.09vw 81.7vh 1px #fff, 9.09vw 181.7vh 1px #fff, 39.95vw 4.17vh 1px #fff, 39.95vw 104.17vh 1px #fff, 29.96vw 62.97vh 1px #fff, 29.96vw 162.97vh 1px #fff, 58.56vw 52.92vh 1px #fff, 58.56vw 152.92vh 1px #fff, 65.75vw 71.6vh 1px rgba(22,242,242,.9), 65.75vw 171.6vh 1px rgba(22,242,242,.9), 38.95vw 32.61vh 1px #bfe6ff, 38.95vw 132.61vh 1px #bfe6ff, 14.95vw 72.42vh 1px rgba(22,242,242,.9), 14.95vw 172.42vh 1px rgba(22,242,242,.9), 14.48vw 82.49vh 1px rgba(22,242,242,.9), 14.48vw 182.49vh 1px rgba(22,242,242,.9), 89.19vw 62.73vh 1px rgba(22,242,242,.9), 89.19vw 162.73vh 1px rgba(22,242,242,.9), 70.11vw 50.55vh 1px rgba(22,242,242,.9), 70.11vw 150.55vh 1px rgba(22,242,242,.9), 75.29vw 56.85vh 1px #fff, 75.29vw 156.85vh 1px #fff, 82.64vw 58.41vh 1px rgba(22,242,242,.9), 82.64vw 158.41vh 1px rgba(22,242,242,.9), 68.29vw 69.33vh 1px #fff, 68.29vw 169.33vh 1px #fff, 8.51vw 4.19vh 1px rgba(22,242,242,.9), 8.51vw 104.19vh 1px rgba(22,242,242,.9), 36.07vw 10.49vh 1px #bfe6ff, 36.07vw 110.49vh 1px #bfe6ff, 55.85vw 62.78vh 1px rgba(22,242,242,.9), 55.85vw 162.78vh 1px rgba(22,242,242,.9), 53.14vw 24.46vh 1px #bfe6ff, 53.14vw 124.46vh 1px #bfe6ff, 0.33vw 79.77vh 1px rgba(22,242,242,.9), 0.33vw 179.77vh 1px rgba(22,242,242,.9), 93.25vw 89.79vh 1px #fff, 93.25vw 189.79vh 1px #fff, 65.93vw 6.61vh 1px rgba(22,242,242,.9), 65.93vw 106.61vh 1px rgba(22,242,242,.9), 47.39vw 80.92vh 1px #bfe6ff, 47.39vw 180.92vh 1px #bfe6ff, 23.48vw 75.64vh 1px #fff, 23.48vw 175.64vh 1px #fff, 73.98vw 97.57vh 1px #bfe6ff, 73.98vw 197.57vh 1px #bfe6ff, 84.55vw 7.67vh 1px rgba(22,242,242,.9), 84.55vw 107.67vh 1px rgba(22,242,242,.9), 28.73vw 4.67vh 1px rgba(22,242,242,.9), 28.73vw 104.67vh 1px rgba(22,242,242,.9), 64.28vw 7.75vh 1px #fff, 64.28vw 107.75vh 1px #fff, 33.18vw 65.15vh 1px rgba(22,242,242,.9), 33.18vw 165.15vh 1px rgba(22,242,242,.9), 30.44vw 56.78vh 1px #fff, 30.44vw 156.78vh 1px #fff, 48.24vw 48.58vh 1px rgba(22,242,242,.9), 48.24vw 148.58vh 1px rgba(22,242,242,.9), 9.95vw 21.77vh 1px #bfe6ff, 9.95vw 121.77vh 1px #bfe6ff, 29.09vw 51.65vh 1px #bfe6ff, 29.09vw 151.65vh 1px #bfe6ff, 46.59vw 76.72vh 1px rgba(22,242,242,.9), 46.59vw 176.72vh 1px rgba(22,242,242,.9), 19.93vw 97.81vh 1px #bfe6ff, 19.93vw 197.81vh 1px #bfe6ff, 1.75vw 45.9vh 1px rgba(22,242,242,.9), 1.75vw 145.9vh 1px rgba(22,242,242,.9), 96.81vw 44.95vh 1px #bfe6ff, 96.81vw 144.95vh 1px #bfe6ff, 38.68vw 91.66vh 1px #fff, 38.68vw 191.66vh 1px #fff, 7.46vw 9.03vh 1px rgba(22,242,242,.9), 7.46vw 109.03vh 1px rgba(22,242,242,.9), 52.41vw 95.27vh 1px #fff, 52.41vw 195.27vh 1px #fff, 60.34vw 63.17vh 1px #bfe6ff, 60.34vw 163.17vh 1px #bfe6ff, 88.69vw 70.33vh 1px #fff, 88.69vw 170.33vh 1px #fff, 49.79vw 87.61vh 1px #bfe6ff, 49.79vw 187.61vh 1px #bfe6ff, 0 0 transparent; }
  .stars.s3 { width: 3px; height: 3px; animation: drift 55s linear infinite, twinkle 3s ease-in-out infinite alternate; box-shadow: 2.48vw 0.36vh 4px rgba(22,242,242,1), 2.48vw 100.36vh 4px rgba(22,242,242,1), 68.16vw 40.54vh 4px rgba(12,135,242,1), 68.16vw 140.54vh 4px rgba(12,135,242,1), 14.07vw 34.4vh 4px rgba(22,242,242,1), 14.07vw 134.4vh 4px rgba(22,242,242,1), 12.09vw 33.13vh 4px rgba(22,242,242,1), 12.09vw 133.13vh 4px rgba(22,242,242,1), 75.07vw 83.91vh 4px #fff, 75.07vw 183.91vh 4px #fff, 93.99vw 19.57vh 4px #fff, 93.99vw 119.57vh 4px #fff, 90.16vw 28.98vh 4px rgba(22,242,242,1), 90.16vw 128.98vh 4px rgba(22,242,242,1), 6.5vw 39.02vh 4px rgba(12,135,242,1), 6.5vw 139.02vh 4px rgba(12,135,242,1), 7.64vw 92.54vh 4px rgba(22,242,242,1), 7.64vw 192.54vh 4px rgba(22,242,242,1), 85.43vw 28.06vh 4px #fff, 85.43vw 128.06vh 4px #fff, 83.47vw 28.56vh 4px #fff, 83.47vw 128.56vh 4px #fff, 24.93vw 26.57vh 4px rgba(12,135,242,1), 24.93vw 126.57vh 4px rgba(12,135,242,1), 31.56vw 77.32vh 4px rgba(22,242,242,1), 31.56vw 177.32vh 4px rgba(22,242,242,1), 88.43vw 81.2vh 4px rgba(12,135,242,1), 88.43vw 181.2vh 4px rgba(12,135,242,1), 40.0vw 87.57vh 4px rgba(12,135,242,1), 40.0vw 187.57vh 4px rgba(12,135,242,1), 54.92vw 71.96vh 4px #fff, 54.92vw 171.96vh 4px #fff, 93.35vw 41.09vh 4px rgba(12,135,242,1), 93.35vw 141.09vh 4px rgba(12,135,242,1), 75.27vw 64.45vh 4px rgba(22,242,242,1), 75.27vw 164.45vh 4px rgba(22,242,242,1), 0 0 transparent; }
  
  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    padding: .85em 1.6em; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer;
    transition: translate .25s, box-shadow .25s, background .25s, border-color .25s;
  }
  .btn .ico { width: 1.15em; height: 1.15em; }
  .btn-primary {
    color: #00122b;
    background: linear-gradient(100deg, var(--sky), var(--cyan));
    box-shadow: 0 8px 30px -8px rgba(22, 242, 242, .55), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  }
  .btn-primary:hover { translate: 0 -3px; box-shadow: 0 14px 40px -8px rgba(22, 242, 242, .8), 0 0 0 1px rgba(255, 255, 255, .25) inset; }
  .btn-ghost { color: var(--text); background: rgba(12, 135, 242, .10); border-color: rgba(22, 242, 242, .35); backdrop-filter: blur(8px); }
  .btn-ghost:hover { translate: 0 -3px; background: rgba(12, 135, 242, .22); border-color: var(--cyan); }
  .btn-whatsapp { color: #fff; background: rgba(37, 211, 102, .14); border-color: rgba(37, 211, 102, .55); backdrop-filter: blur(8px); }
  .btn-whatsapp .ico { color: #25d366; }
  .btn-whatsapp:hover { translate: 0 -3px; background: rgba(37, 211, 102, .26); border-color: #25d366; box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6); }
  .btn-sm { padding: .55em 1.2em; font-size: .92rem; }
  
  /* ---------- Header ---------- */
  .site-header {
    position: fixed; top: 0; inset-inline: 0; z-index: 50; height: var(--hh);
    background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35));
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }
  .site-header::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .35;
  }
  .bar { height: 100%; display: flex; align-items: center; gap: 24px; }
  .brand img { height: 22px; width: auto; }
  .nav { display: none; margin-inline: auto; align-items: center; gap: 6px; }
  .nav a:not(.btn) {
    position: relative; padding: .4em 1em; font-weight: 600; font-size: .98rem; color: var(--muted); border-radius: 999px;
    transition: color .2s, background .2s;
  }
  .nav a:not(.btn):hover { color: #fff; background: rgba(12, 135, 242, .16); }
  .nav .nav-cta { margin-inline-start: 10px; }
  .bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
  
  .lang-pill {
    display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(1, 28, 64, .7);
    border: 1px solid rgba(22, 242, 242, .3); direction: ltr;
  }
  .lang-pill label {
    cursor: pointer; padding: .2em .95em; border-radius: 999px; font-size: .88rem; font-weight: 700; line-height: 1.6; color: var(--muted);
    transition: background .25s, color .25s, box-shadow .25s;
  }
  .lang-pill label:hover { color: #fff; }
  #l-en:checked ~ .site-header .lp-en,
  #l-ar:checked ~ .site-header .lp-ar {
    color: #00122b; background: linear-gradient(100deg, var(--sky), var(--cyan)); box-shadow: 0 0 18px -2px rgba(22, 242, 242, .7);
  }
  #l-en:focus-visible ~ .site-header .lp-en,
  #l-ar:focus-visible ~ .site-header .lp-ar { outline: 2px solid var(--cyan); outline-offset: 2px; }
  
  /* Mobile dock */
  .dock {
    position: fixed; z-index: 60; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; justify-content: space-between; gap: 2px; padding: 6px; border-radius: 22px;
    background: rgba(1, 12, 30, .78); border: 1px solid rgba(22, 242, 242, .28);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 30px -8px rgba(12, 135, 242, .5);
  }
  .dock a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; border-radius: 16px; font-size: .7rem; font-weight: 600; color: var(--muted); line-height: 1.3; }
  .dock a .ico { width: 21px; height: 21px; }
  .dock a:active, .dock a:hover { color: var(--cyan); background: rgba(12, 135, 242, .18); }
  
  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100svh; display: flex; align-items: center;
    padding: calc(var(--hh) + 36px) 0 120px;
  }
  .hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  }
  .hero-shade {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .94) 0%, rgba(1, 28, 64, .62) 46%, rgba(0, 0, 0, .15) 100%),
      radial-gradient(70vw 60vh at 80% 40%, rgba(3, 62, 140, .38), transparent 70%);
  }
  #l-ar:checked ~ main .hero-shade,
  #l-ar:checked ~ main .hero-video { transform: scaleX(-1); }
  
  .beam {
    position: absolute; z-index: -1; top: -15%; inset-inline-end: 22%; width: 2px; height: 130%;
    background: linear-gradient(180deg, transparent, rgba(22, 242, 242, .9) 40%, rgba(12, 135, 242, .6) 60%, transparent);
    box-shadow: 0 0 40px 10px rgba(12, 135, 242, .35), 0 0 120px 40px rgba(22, 242, 242, .10);
    transform: rotate(24deg); transform-origin: top; opacity: .55; animation: pulse 6s ease-in-out infinite;
  }
  
  .hero-grid { display: grid; gap: 56px; align-items: center; grid-template-columns: 1.08fr .92fr; }
  
  .eyebrow {
    display: inline-flex; align-items: center; gap: .7em; padding: .35em 1.1em; margin-bottom: 26px;
    border-radius: 999px; font-size: .86rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
    background: rgba(12, 135, 242, .12); border: 1px solid rgba(22, 242, 242, .3);
  }
  .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: blink 2s ease-in-out infinite; }
  
  h1 { font-size: clamp(2.35rem, 5.8vw, 4.7rem); line-height: 1.07; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
  h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); line-height: 1.12; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
  h3 { font-size: 1.22rem; line-height: 1.35; font-weight: 700; }
  
  em {
    font-style: normal; color: transparent;
    background: linear-gradient(100deg, var(--sky) 0%, var(--cyan) 30%, #ffffff 50%, var(--cyan) 70%, var(--sky) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    animation: shimmer 7s linear infinite;
  }
  #l-ar:checked ~ * em { animation-direction: reverse; }
  
  .lead { margin-top: 26px; max-width: 60ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #c3d6ec; }
  .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
  
  .hud { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
  .hud li { display: flex; flex-direction: column; line-height: 1.3; font-size: .9rem; color: var(--muted); }
  .hud b { font-size: 1.9rem; font-weight: 800; color: #fff; text-shadow: 0 0 22px rgba(22, 242, 242, .55); }
  
  /* Hero visual */
  .hero-visual { position: relative; width: min(100%, 540px); margin-inline: auto; aspect-ratio: 1; }
  .orbit { position: absolute; top: 50%; left: 50%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; animation: rot linear infinite; }
  .orbit i { position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px 4px rgba(22, 242, 242, .8); }
  .o1 { width: 100%; border: 1px dashed rgba(22, 242, 242, .30); animation-duration: 70s; }
  .o2 { width: 79%; border: 1px solid rgba(12, 135, 242, .40); animation-duration: 42s; animation-direction: reverse; box-shadow: 0 0 60px -10px rgba(12, 135, 242, .4) inset; }
  .o2 i { background: var(--sky); box-shadow: 0 0 18px 4px rgba(12, 135, 242, .9); width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .o3 { width: 58%; border: 1px dashed rgba(255, 255, 255, .22); animation-duration: 28s; }
  .o3 i { background: #fff; box-shadow: 0 0 14px 3px rgba(255, 255, 255, .8); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
  .core-glow { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(22, 242, 242, .35), rgba(12, 135, 242, .22) 40%, transparent 70%); filter: blur(24px); animation: pulse 5s ease-in-out infinite; }
  .emblem {
    position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%); mask-image: radial-gradient(circle, #000 52%, transparent 71%);
    filter: drop-shadow(0 0 24px rgba(22, 242, 242, .5));
  }
  
  .glass {
    background: linear-gradient(160deg, rgba(3, 62, 140, .38), rgba(1, 28, 64, .55));
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(22, 242, 242, .25); border-radius: 18px;
    box-shadow: 0 16px 50px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .float { position: absolute; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; animation: float 7s ease-in-out infinite; }
  .float .k { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .float .v { font-size: 1.7rem; font-weight: 800; color: #fff; }
  .float .v small { font-size: 1rem; color: var(--cyan); margin-inline-start: 2px; }
  .f1 { top: 7%; inset-inline-start: -3%; min-width: 150px; }
  .f2 { bottom: 9%; inset-inline-end: -4%; min-width: 210px; animation-delay: -3.5s; }
  .bar-mini { display: block; height: 5px; margin-top: 8px; border-radius: 9px; background: rgba(255, 255, 255, .1); overflow: hidden; }
  .bar-mini i { display: block; height: 100%; width: 99%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transform-origin: left; animation: grow 3.2s ease-out infinite alternate; }
  .delta { font-size: .85rem; font-weight: 700; color: #4dffb0; }
  .spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; margin-top: 8px; direction: ltr; }
  .spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cyan), rgba(12, 135, 242, .35)); animation: bars 2.6s ease-in-out infinite alternate; }
  .spark i:nth-child(1) { height: 30%; animation-delay: -.2s; }
  .spark i:nth-child(2) { height: 45%; animation-delay: -.6s; }
  .spark i:nth-child(3) { height: 38%; animation-delay: -1s; }
  .spark i:nth-child(4) { height: 62%; animation-delay: -1.4s; }
  .spark i:nth-child(5) { height: 55%; animation-delay: -.8s; }
  .spark i:nth-child(6) { height: 74%; animation-delay: -1.8s; }
  .spark i:nth-child(7) { height: 68%; animation-delay: -.4s; }
  .spark i:nth-child(8) { height: 92%; animation-delay: -1.2s; }
  
  .scroll-cue { position: absolute; bottom: 36px; left: 50%; translate: -50% 0; width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid rgba(22, 242, 242, .55); }
  .scroll-cue span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 3px; background: var(--cyan); animation: wheel 1.8s ease-in-out infinite; }
  
  /* ---------- Section headings ---------- */
  .kicker { display: inline-flex; align-items: center; gap: .8em; margin-bottom: 16px; font-size: .86rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
  .kicker::before { content: ""; width: 34px; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
  #l-ar:checked ~ * .kicker::before { background: linear-gradient(270deg, var(--cyan), transparent); }
  .section-head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
  .section-head.center { text-align: center; margin-inline: auto; }
  .section-head .sub, .cta-panel .sub { margin-top: 20px; color: #bcd0e8; font-size: 1.08rem; }
  
  /* ---------- About ---------- */
  .about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
  .about-copy h2 { margin-bottom: 26px; }
  .about-copy p + p { margin-top: 18px; }
  .about-copy p { color: #c3d6ec; }
  
  .frame {
    position: relative; aspect-ratio: 3 / 4; width: min(100%, 480px); margin-inline: auto; border-radius: 30px; overflow: hidden; isolation: isolate;
    background:
      radial-gradient(circle at 50% 38%, rgba(12, 135, 242, .55), rgba(3, 62, 140, .35) 40%, rgba(1, 28, 64, .8) 70%),
      linear-gradient(160deg, var(--navy), #000);
    border: 1px solid rgba(22, 242, 242, .32);
    box-shadow: 0 30px 90px -20px rgba(12, 135, 242, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  }
  .frame img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent);
    filter: drop-shadow(0 0 30px rgba(12, 135, 242, .55));
  }
  .ring { position: absolute; top: 34%; left: 50%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; z-index: 0; animation: rot linear infinite; }
  .ring.r1 { width: 95%; border: 1px dashed rgba(22, 242, 242, .4); animation-duration: 50s; }
  .ring.r2 { width: 70%; border: 1px solid rgba(12, 135, 242, .5); animation-duration: 30s; animation-direction: reverse; }
  .ring::after { content: ""; position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px 4px rgba(22, 242, 242, .8); }
  .scan { position: absolute; inset-inline: 0; height: 90px; z-index: 2; background: linear-gradient(180deg, transparent, rgba(22, 242, 242, .22), transparent); border-bottom: 1px solid rgba(22, 242, 242, .6); animation: scan 5.5s ease-in-out infinite; }
  .corner { position: absolute; width: 26px; height: 26px; z-index: 3; border: 2px solid var(--cyan); opacity: .9; }
  .corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
  .corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
  .corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
  .corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
  .tag {
    position: absolute; z-index: 3; inset-inline-start: 22px; display: inline-flex; align-items: center; gap: .6em; padding: .3em .9em; border-radius: 999px;
    font-size: .78rem; font-weight: 600; line-height: 1.5; color: #dff; background: rgba(0, 10, 28, .65); border: 1px solid rgba(22, 242, 242, .35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .tag i { width: 7px; height: 7px; border-radius: 50%; background: #4dffb0; box-shadow: 0 0 10px #4dffb0; animation: blink 1.8s infinite; }
  .tag.t1 { bottom: 64px; }
  .tag.t2 { bottom: 24px; }
  
  /* Stats */
  .stats-wrap { margin-top: 0; }
  .stats-title { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 32px; font-weight: 700; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stat { padding: 34px 28px; text-align: center; border-radius: var(--radius); }
  .num {
    font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
    background: linear-gradient(180deg, #fff 10%, var(--cyan) 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px rgba(22, 242, 242, .35));
  }
  .num small { font-size: .6em; font-weight: 700; }
  .stat p { margin-top: 10px; color: var(--muted); font-size: .98rem; line-height: 1.5; }
  
  .count { counter-reset: n var(--n); }
  .count::after { content: counter(n); }
  .c99 { --n: 99; }
  .c30 { --n: 30; }
  
  /* ---------- Cards (shared) ---------- */
  .card {
    position: relative; padding: 32px 30px 34px; border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(3, 62, 140, .26), rgba(1, 28, 64, .46) 55%, rgba(0, 0, 0, .35));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(12, 135, 242, .2);
    transition: translate .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
  }
  .card::before {
    content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--ang), transparent 0 60%, rgba(12, 135, 242, .9) 78%, var(--cyan) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    opacity: .45; animation: spin 8s linear infinite; transition: opacity .35s;
  }
  .card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: radial-gradient(340px 220px at 100% 0%, rgba(22, 242, 242, .16), transparent 70%);
  }
  .card:hover { translate: 0 -8px; box-shadow: 0 30px 70px -26px rgba(22, 242, 242, .45); }
  .card:hover::before, .card:hover::after { opacity: 1; }
  .card h3 { margin: 22px 0 12px; }
  .card p { color: var(--muted); font-size: 1rem; line-height: 1.7; }
  
  /* ---------- Innovation ---------- */
  .pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pillar { padding: 38px 36px; }
  
  /* ---------- Services ---------- */
  .services { overflow: hidden; }
  .services-bg {
    position: absolute; inset: 0; z-index: -1; opacity: .42;
    background: url("../assets/circuit-bg.webp") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .svc .idx { position: absolute; top: 24px; inset-inline-end: 26px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; font-weight: 700; letter-spacing: .1em; color: rgba(22, 242, 242, .55); }
  .svc:hover .ico.big { color: #fff; background: linear-gradient(145deg, var(--sky), var(--blue)); }
  .svc-grid { align-items: start; }
  .svc h3 { padding-inline-end: 34px; }
  .svc .tagline { margin: -2px 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--cyan); }
  .svc .headline { margin-bottom: 18px; font-size: 1.04rem; font-weight: 600; line-height: 1.55; color: #e3f0ff; }
  .svc details { border-top: 1px solid rgba(22, 242, 242, .14); padding-top: 14px; }
  .svc summary {
    display: inline-flex; align-items: center; gap: .6em; cursor: pointer; list-style: none; user-select: none;
    font-size: .92rem; font-weight: 700; color: var(--sky); transition: color .2s;
  }
  .svc summary::-webkit-details-marker { display: none; }
  .svc summary::after {
    content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 1rem; line-height: 1;
    color: var(--cyan); border: 1px solid rgba(22, 242, 242, .45); transition: transform .3s, background .3s;
  }
  .svc summary:hover { color: var(--cyan); }
  .svc details[open] summary::after { content: "\2212"; background: rgba(22, 242, 242, .14); }
  .svc details p { margin-top: 14px; font-size: .96rem; line-height: 1.75; }
  .svc-wide { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 30px; padding: 36px 40px; }
  .svc-wide .svc-body { flex: 1; }
  .svc-wide h3 { margin-top: 0; }
  
  /* ---------- Clients (logo marquee) ---------- */
  .clients { overflow: hidden; padding-bottom: clamp(60px, 8vw, 110px); }
  .clients .section-head { margin-bottom: 44px; }
  .clients-mark { width: 64px; height: 64px; margin: 0 auto 18px; filter: drop-shadow(0 0 22px rgba(22, 242, 242, .7)); animation: rot 24s linear infinite; }
  .clients h2 { max-width: 20ch; margin-inline: auto; }
  .logo-marquee {
    position: relative; overflow: hidden; padding-block: 9px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
  .track.slower { animation-duration: 75s; }
  .logo-marquee.rev .track { animation-direction: reverse; }
  .logo-marquee:hover .track { animation-play-state: paused; }
  .track ul { display: flex; gap: 18px; padding-inline-end: 18px; }
  .logo-tile {
    position: relative; flex: none; width: 196px; height: 128px; display: grid; place-items: center; border-radius: 22px;
    background: linear-gradient(160deg, rgba(12, 135, 242, .16), rgba(1, 28, 64, .55));
    border: 1px solid rgba(22, 242, 242, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px -18px rgba(0, 0, 0, .8);
    transition: translate .3s, border-color .3s, box-shadow .3s, background .3s;
  }
  .logo-tile img { width: 150px; height: 104px; object-fit: contain; opacity: .92; transition: opacity .3s, transform .3s; }
  .logo-tile:hover { translate: 0 -6px; border-color: var(--cyan); background: linear-gradient(160deg, rgba(12, 135, 242, .3), rgba(1, 28, 64, .6)); box-shadow: 0 0 34px -6px rgba(22, 242, 242, .55); }
  .logo-tile:hover img { opacity: 1; transform: scale(1.06); }
  
  .stats-sec { padding-top: 0; }
  .stats-sec .stats-wrap { margin-top: 0; }
  
  /* ---------- Values ---------- */
  .val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .val {
    position: relative; padding: 30px 28px 32px; border-radius: 6px var(--radius) var(--radius) 6px;
    border-inline-start: 2px solid rgba(22, 242, 242, .45);
    background: linear-gradient(90deg, rgba(12, 135, 242, .12), rgba(1, 28, 64, .12) 60%, transparent);
    transition: background .3s, border-color .3s, translate .3s;
  }
  #l-ar:checked ~ * .val { border-radius: var(--radius) 6px 6px var(--radius); background: linear-gradient(270deg, rgba(12, 135, 242, .12), rgba(1, 28, 64, .12) 60%, transparent); }
  .val:hover { translate: 0 -5px; border-color: var(--cyan); background: linear-gradient(90deg, rgba(12, 135, 242, .24), rgba(1, 28, 64, .2) 70%, transparent); }
  .val .ico { width: 34px; height: 34px; color: var(--cyan); filter: drop-shadow(0 0 10px rgba(22, 242, 242, .6)); }
  .val h3 { margin: 18px 0 10px; }
  .val p { color: var(--muted); font-size: .98rem; line-height: 1.7; }
  
  /* ---------- Contact ---------- */
  .cta-panel {
    position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 6vw, 80px); border-radius: 34px;
    border: 1px solid rgba(22, 242, 242, .3);
    background:
      linear-gradient(100deg, rgba(0, 0, 0, .95) 0%, rgba(1, 28, 64, .8) 50%, rgba(1, 28, 64, .25) 100%),
      url("../assets/face-bg.webp") right bottom / cover no-repeat;
    box-shadow: 0 40px 100px -30px rgba(12, 135, 242, .5);
  }
  #l-ar:checked ~ * .cta-panel {
    background:
      linear-gradient(260deg, rgba(0, 0, 0, .95) 0%, rgba(1, 28, 64, .8) 50%, rgba(1, 28, 64, .25) 100%),
      url("../assets/face-bg.webp") left bottom / cover no-repeat;
  }
  .cta-glow { position: absolute; z-index: -1; width: 60%; aspect-ratio: 1; top: -40%; inset-inline-start: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(22, 242, 242, .18), transparent 65%); animation: breathe 9s ease-in-out infinite alternate; }
  .cta-panel h2 { max-width: 16ch; }
  .cta-panel .sub { max-width: 62ch; }
  
  .offices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 28px; }
  .office { padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
  .office h3 { margin: 6px 0 0; }
  .office .cc {
    align-self: flex-start; font-size: 2rem; line-height: 1; direction: ltr;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  .office .loc, .office a { display: flex; align-items: center; gap: .6em; color: var(--muted); font-size: .98rem; line-height: 1.5; }
  .office .loc .ico, .office a .ico { color: var(--sky); }
  .office a { font-weight: 600; color: #cfe6ff; transition: color .2s; }
  .office a:hover { color: var(--cyan); }
  .office.soon .loc { color: #ffcf6b; }
  .office.soon .loc .ico { color: #ffcf6b; }
  
  /* ---------- Footer ---------- */
  .site-footer { position: relative; z-index: 1; margin-top: clamp(40px, 8vw, 100px); padding-top: 60px; background: linear-gradient(180deg, transparent, rgba(1, 28, 64, .55)); border-top: 1px solid var(--line); }
  .foot-grid { display: grid; grid-template-columns: 1.4fr auto auto; gap: 40px; align-items: center; }
  .foot-brand img { height: 24px; width: auto; }
  .foot-brand p { margin-top: 14px; color: var(--muted); font-size: .96rem; }
  .foot-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .foot-nav a { color: var(--muted); font-weight: 600; transition: color .2s; }
  .foot-nav a:hover { color: var(--cyan); }
  .foot-social { display: flex; gap: 12px; }
  .foot-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--cyan); background: rgba(12, 135, 242, .12); border: 1px solid rgba(22, 242, 242, .28); transition: background .25s, box-shadow .25s, translate .25s; }
  .foot-social a:hover { background: rgba(12, 135, 242, .3); box-shadow: 0 0 24px -4px var(--cyan); translate: 0 -3px; }
  .foot-social .ico { width: 22px; height: 22px; }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-block: 26px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .88rem; color: #6f8aab; }
  
  /* ---------- Scroll-driven reveal (progressive enhancement) ---------- */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    .count { animation: cnt-reset linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    .c99 { animation-name: cnt99; }
    .c30 { animation-name: cnt30; }
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(48px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes cnt99 { from { --n: 0; } to { --n: 99; } }
  @keyframes cnt30 { from { --n: 0; } to { --n: 30; } }
  @keyframes cnt-reset { from { --n: 0; } }
  
  /* ---------- Keyframes ---------- */
  @keyframes drift   { to { transform: translateY(-100vh); } }
  @keyframes twinkle { from { opacity: 1; } to { opacity: .35; } }
  @keyframes breathe { from { transform: scale(1) translate3d(0, 0, 0); opacity: .85; } to { transform: scale(1.12) translate3d(-2%, 2%, 0); opacity: 1; } }
  @keyframes rot     { to { transform: rotate(360deg); } }
  @keyframes spin    { to { --ang: 360deg; } }
  @keyframes shimmer { to { background-position: -250% 0; } }
  @keyframes pulse   { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
  @keyframes blink   { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
  @keyframes float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
  @keyframes grow    { from { transform: scaleX(.55); } to { transform: scaleX(1); } }
  @keyframes bars    { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
  @keyframes wheel   { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }
  @keyframes scan    { 0% { top: -90px; } 100% { top: 100%; } }
  @keyframes marquee { to { transform: translateX(-50%); } }
  .spark i, .bar-mini i { transform-origin: bottom; }
  .bar-mini i { transform-origin: left; }
  
  /* ---------- Responsive ---------- */
  @media (min-width: 960px) {
    .nav { display: flex; }
    .dock { display: none; }
  }
  
  @media (max-width: 1100px) {
    .svc-grid, .val-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-wide { grid-column: auto; display: block; padding: 32px 30px 34px; }
    .svc-wide h3 { margin-top: 22px; }
    .offices { grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (max-width: 959px) {
    :root { --hh: 64px; }
    body { padding-bottom: 96px; }
    .hero { min-height: auto; padding-bottom: 80px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { width: min(88%, 440px); order: -1; margin-top: 8px; }
    .hero-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(1, 28, 64, .7) 55%, rgba(0, 0, 0, .9)); }
    #l-ar:checked ~ main .hero-shade, #l-ar:checked ~ main .hero-video { transform: none; }
    .scroll-cue, .beam { display: none; }
    .about-grid { grid-template-columns: 1fr; }
    .about-visual { order: -1; }
    .frame { width: min(86%, 420px); }
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .foot-bottom { flex-direction: column; margin-bottom: 8px; }
  }
  
  @media (max-width: 680px) {
    body { font-size: 1rem; }
    .brand img { height: 19px; }
    .stats, .pillars, .svc-grid, .val-grid, .offices { grid-template-columns: 1fr; }
    .pillar, .card { padding: 28px 24px 30px; }
    .cta-row .btn { width: 100%; }
    .hud { gap: 12px 26px; }
    .f1 { inset-inline-start: 0; }
    .f2 { inset-inline-end: 0; min-width: 180px; }
    .float { padding: 10px 14px; }
    .float .v { font-size: 1.3rem; }
    .hero { background: url("../assets/hero-poster.jpg") center / cover no-repeat; }
    .services-bg { background-image: url("../assets/circuit-bg-portrait.webp"); }
    .cta-panel { border-radius: 26px; }
    .cta-panel h2 { max-width: none; }
    .svc .idx { top: 20px; inset-inline-end: 22px; }
  }
  
  @media (max-width: 680px) {
    .logo-tile { width: 150px; height: 100px; border-radius: 18px; }
    .logo-tile img { width: 116px; height: 80px; }
    .track ul { gap: 12px; padding-inline-end: 12px; }
  }
  
  @media (max-width: 380px) {
    .lang-pill label { padding-inline: .7em; }
    .dock a { font-size: .62rem; }
  }
  
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .hero-video { display: none; }
    .hero { background: url("../assets/hero-poster.jpg") center / cover no-repeat; }
    .reveal { opacity: 1; transform: none; filter: none; }
    .logo-marquee { -webkit-mask-image: none; mask-image: none; }
    .track { width: auto; flex-wrap: wrap; justify-content: center; animation: none !important; }
    .track ul { flex-wrap: wrap; justify-content: center; }
    .track ul:not(:first-child), .logo-marquee[aria-hidden="true"] { display: none; }
    .track .logo-tile:nth-child(n+8) { display: none; }
  }