:root{
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top: 84px;}
  body{
    background:#05070d;
    color:#e7ecf5;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  ::selection{background:rgba(62,166,255,.35); color:#fff;}

  /* --- glass --- */
  .glass{
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .glass-strong{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  /* --- glow blobs --- */
  .glow{
    position:absolute;
    border-radius:9999px;
    filter:blur(90px);
    pointer-events:none;
  }

  .gradient-text{
    background:linear-gradient(100deg,#3ea6ff 0%,#7c5cff 55%,#22d3ee 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .nav-link{position:relative; color:#a9b6cc; transition:color .2s ease;}
  .nav-link:hover{color:#fff;}
  .nav-link::after{
    content:"";
    position:absolute; left:0; bottom:-4px;
    width:0; height:1px;
    background:linear-gradient(90deg,#3ea6ff,#22d3ee);
    transition:width .25s ease;
  }
  .nav-link:hover::after{width:100%;}

  .btn-primary{
    background:linear-gradient(100deg,#3ea6ff,#7c5cff);
    box-shadow:0 0 0 rgba(62,166,255,0);
    transition:box-shadow .25s ease, transform .2s ease;
  }
  .btn-primary:hover{
    box-shadow:0 0 32px rgba(62,166,255,.45);
    transform:translateY(-1px);
  }
  .btn-ghost{
    border:1px solid rgba(255,255,255,.16);
    transition:border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .btn-ghost:hover{
    border-color:rgba(62,166,255,.55);
    background:rgba(62,166,255,.08);
    transform:translateY(-1px);
  }

  .card-hover{transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;}
  .card-hover:hover{
    transform:translateY(-4px);
    border-color:rgba(62,166,255,.4);
    box-shadow:0 12px 40px -12px rgba(62,166,255,.25);
  }

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

  .pulse-dot{
    box-shadow:0 0 0 0 rgba(62,166,255,.6);
    animation:pulse 2.4s infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(62,166,255,.55);}
    70%{box-shadow:0 0 0 10px rgba(62,166,255,0);}
    100%{box-shadow:0 0 0 0 rgba(62,166,255,0);}
  }

  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
  }
  .float{animation:float 5s ease-in-out infinite;}

  .timeline-line{
    background:linear-gradient(180deg, rgba(62,166,255,.7), rgba(124,92,255,.15));
  }

  .tag{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
  }

  input:focus, textarea:focus{outline:none;}

  :focus-visible{outline:2px solid #3ea6ff; outline-offset:2px;}

  .mono-caret::after{
    content:"_";
    animation:blink 1s step-start infinite;
    color:#22d3ee;
  }
  @keyframes blink{50%{opacity:0;}}