:root{
    --void:#000103;
    --panel:#010204;
    --panel-2:#040810;
    --ring:#298AFE;
    --ring-bright:#A6E6FD;
    --ring-dim:#2268FB;
    --deep-blue:#062680;
    --ink:#F0F3FA;
    --ink-dim:#8FA3C4;
    --gold:#F0F3FA;
    --gold-deep:#C9D8EC;
    --line:#132048;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--void);
    color:var(--ink);
    font-family:'Space Grotesk',sans-serif;
    line-height:1.7;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  #starfield{
    position:fixed; top:0; left:0;
    width:100vw; height:100vh;
    z-index:0;
    pointer-events:none;
  }

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

  /* ============ NAV ============ */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 6vw;
    background:linear-gradient(to bottom, rgba(0,1,3,0.9), rgba(0,1,3,0));
    backdrop-filter:blur(3px);
    opacity:0;
    transition:opacity 0.4s ease-out;
    pointer-events:none;
  }
  nav.nav-visible{
    pointer-events:auto;
  }
  .nav-brand{
    display:flex; align-items:center; gap:10px;
  }
  .nav-icon{
    height:34px; width:auto;
    filter:drop-shadow(0 0 8px rgba(41,138,254,0.5));
  }
  .nav-word{
    font-family:'Dancing Script',cursive;
    font-weight:700;
    font-size:26px;
    color:var(--ink);
  }
  .nav-cta{
    font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--ring-bright); text-decoration:none;
    border:1px solid var(--ring-dim); padding:9px 18px; border-radius:2px;
    transition:all 0.3s ease;
  }
  .nav-cta:hover{
    background:var(--ring); color:var(--void); border-color:var(--ring);
    box-shadow:0 0 22px rgba(41,138,254,0.55);
  }

  /* ============ HERO — full-bleed nebula background ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 6vw;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background-image:url('images/hero-background.jpg');
    background-size:cover;
    background-position:center 40%;
    will-change:transform;
    transform:scale(1.08);
  }
  .hero-bg::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(0,1,3,0.15) 0%, rgba(0,1,3,0.35) 55%, rgba(0,1,3,0.97) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
  }
  .hero-wordmark{
    font-family:'Dancing Script',cursive;
    font-weight:700;
    font-size:clamp(54px, 10vw, 128px);
    letter-spacing:0.5px;
    color:var(--ink);
    text-shadow:0 0 5px rgba(93,200,240,0.55);
    opacity:0;
    animation:riseIn 1.1s ease-out 0.3s forwards;
  }
  .hero-rule{
    width:300px; height:auto;
    display:block;
    margin:-6px auto 18px;
    opacity:0;
    animation:riseIn 1s ease-out 0.55s forwards;
  }
  .hero-tagline{
    font-size:14px; font-weight:600; letter-spacing:4px; text-transform:uppercase;
    color:var(--ring-bright);
    opacity:0;
    animation:riseIn 1s ease-out 0.7s forwards;
  }
  .hero-sub{
    font-size:18px; color:var(--ink); font-weight:500;
    margin-top:30px;
    opacity:0;
    animation:riseIn 1s ease-out 0.9s forwards;
  }
  .hero-location{
    font-size:14px; color:var(--ink-dim);
    margin-top:8px;
    opacity:0;
    animation:riseIn 1s ease-out 1.05s forwards;
  }
  @keyframes riseIn{
    from{opacity:0; transform:translateY(16px);}
    to{opacity:1; transform:translateY(0);}
  }
  /* ============ CIRCUIT CORNER ACCENTS ============ */
  .circuit-corner{
    position:absolute; width:230px; height:auto;
    pointer-events:none; z-index:3; opacity:1;
    filter:drop-shadow(0 0 18px rgba(41,138,254,0.45)) brightness(1.15);
  }
  .circuit-corner.tl{ top:80px; left:0; }
  .circuit-corner.br{ bottom:0; right:0; transform:rotate(180deg); }

  /* ============ PHILOSOPHY ============ */
  .connected-bg{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 45% at 85% 10%, rgba(34,104,251,0.24) 0%, transparent 60%),
      radial-gradient(ellipse 65% 45% at 12% 55%, rgba(41,138,254,0.18) 0%, transparent 62%),
      radial-gradient(ellipse 70% 40% at 50% 100%, rgba(34,104,251,0.20) 0%, transparent 65%),
      var(--panel-2);
  }
  .connected-bg::before{
    content:'';
    position:absolute;
    top:0; left:0; width:100%; height:2px;
    background:var(--ring-bright);
    box-shadow:0 0 24px 2px rgba(93,200,240,0.7);
    z-index:2;
  }
.philosophy{
    position:relative;
    padding:90px 6vw 0;
    z-index:1;
  }
  .philosophy-inner{ max-width:640px; margin:0 auto; }
  .philosophy p{ font-size:17.5px; color:var(--ink); margin-bottom:26px; }
  .philosophy p.dim{ color:var(--ink-dim); }
  .pull-quote{
    font-family:'Space Grotesk',sans-serif;
    font-weight:600;
    font-style:italic;
    font-size:26px;
    color:var(--ring-bright);
    text-align:center;
    margin:56px 0 !important;
    line-height:1.5;
    text-shadow:0 0 30px rgba(93,200,240,0.35);
  }
  .tagline-block{ text-align:center; margin-top:68px; }
  .tagline-line{
    font-size:14px; font-weight:700; letter-spacing:4px; text-transform:uppercase;
    color:var(--gold); margin-bottom:16px;
  }
  .philosophy p.tagline-sub{ font-size:15px; color:var(--ink-dim); font-style:italic; margin-bottom:14px; }

  .section-divider{
    display:block;
    width:340px; height:auto;
    margin:0 auto;
    position:relative;
    z-index:1;
  }

  /* ============ SIGNUP ============ */
  .signup{
    position:relative;
    padding:70px 6vw 150px;
    text-align:center;
    z-index:1;
  }
  .signup-glow{
    position:absolute; bottom:-220px; left:50%; transform:translateX(-50%);
    width:1100px; height:750px;
    background:radial-gradient(ellipse at center, rgba(41,138,254,0.24) 0%, rgba(34,104,251,0.1) 45%, transparent 68%);
    animation:breathe 9s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes breathe{
    0%,100%{ opacity:0.7; transform:translateX(-50%) scale(1); }
    50%{ opacity:1; transform:translateX(-50%) scale(1.08); }
  }
  .signup h2{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:44px;
    color:var(--ink);
    margin-bottom:16px;
    position:relative;
  }
  .signup-sub{
    font-size:16px; color:var(--ink-dim); max-width:480px;
    margin:0 auto 44px; position:relative;
  }
  .follow-buttons{
    display:flex; justify-content:center; gap:16px;
    flex-wrap:wrap; position:relative;
  }
  .follow-btn{
    padding:15px 34px;
    background:var(--gold); color:var(--void);
    border-radius:2px;
    font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    text-decoration:none;
    position:relative; overflow:hidden; display:inline-block;
    transition:background 0.25s ease, box-shadow 0.25s ease;
  }
  .follow-btn::before{
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
    transition:left 0.5s ease;
  }
  .follow-btn:hover{ background:var(--gold-deep); box-shadow:0 0 22px rgba(201,216,236,0.4); }
  .follow-btn:hover::before{ left:100%; }
  .follow-btn:focus-visible{
    outline:2px solid var(--ring); outline-offset:2px;
  }

  /* ============ FOOTER ============ */
  footer{
    position:relative;
    padding:70px 6vw 100px;
    text-align:center;
    z-index:1;
    background:var(--panel);
    border-top:1px solid var(--line);
  }
  .footer-banner{
    max-width:480px;
    width:80%;
    height:auto;
    margin:0 auto 26px;
    display:block;
    -webkit-mask-image:radial-gradient(ellipse 65% 65% at center, black 55%, transparent 100%);
    mask-image:radial-gradient(ellipse 65% 65% at center, black 55%, transparent 100%);
  }
  .social-row{ display:flex; justify-content:center; gap:22px; margin-bottom:26px; }
  .social-row a{
    color:var(--ink-dim); text-decoration:none; font-size:13px; font-weight:500;
    letter-spacing:0.5px; border-bottom:1px solid transparent;
    transition:all 0.25s ease;
  }
  .social-row a:hover{ color:var(--ring-bright); border-color:var(--ring-bright); }
  footer .loc{ font-size:13px; color:var(--ink-dim); margin-bottom:6px; }
  footer .copy{
    font-family:'JetBrains Mono',monospace; font-size:11px;
    color:var(--ring-dim); letter-spacing:0.5px;
  }

  @media (max-width: 640px){
    .hero{ padding:0 6vw; }
    .philosophy{ padding:60px 6vw 0; }
    .philosophy p{ font-size:16px; }
    .pull-quote{ font-size:21px; }
    .signup{ padding:50px 6vw 100px; }
    .signup h2{ font-size:32px; }
    .follow-buttons{ flex-direction:column; align-items:center; }
    .circuit-corner{ width:90px; }
  }