:root{
    --bg: #060911;
    --surface: #0E1422;
    --surface-2: #161E32;
    --border: rgba(255,255,255,0.09);
    --accent: #00E6C3;
    --accent-dim: rgba(0,230,195,0.14);
    --accent-2: #FFB020;
    --text: #F3F6FB;
    --text-muted: #8B93A8;
    --radius: 14px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
      radial-gradient(circle at 78% 12%, rgba(0,230,195,0.10), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(255,176,32,0.06), transparent 40%);
    pointer-events:none;
    z-index:0;
  }

  a{ color:inherit; text-decoration:none; }

  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

  :focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ---------- SCREEN SWITCHING ---------- */
  .screen{
    min-height:100vh;
    width:100%;
    position:relative;
    z-index:1;
  }

  #login-screen{ display:none; }

  body.show-login #home-screen{ display:none; }
  body.show-login #login-screen{ display:flex; }

  /* ---------- NAV ---------- */
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 28px clamp(20px, 6vw, 72px);
    position:relative;
    z-index:2;
  }

  .logo{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    font-size:1.15rem;
    letter-spacing:0.02em;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .logo-dot{
    width:8px; height:8px;
    border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 12px 2px var(--accent-dim);
  }

  .nav-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.72rem;
    letter-spacing:0.12em;
    color: var(--text-muted);
  }

  .pulse-led{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 0 rgba(0,230,195,0.6);
    animation: led-pulse 2s infinite;
  }

  @keyframes led-pulse{
    0%{ box-shadow:0 0 0 0 rgba(0,230,195,0.55); }
    70%{ box-shadow:0 0 0 8px rgba(0,230,195,0); }
    100%{ box-shadow:0 0 0 0 rgba(0,230,195,0); }
  }

  .nav-cta{
    border:1px solid var(--border);
    padding:10px 20px;
    border-radius:999px;
    font-size:0.85rem;
    font-weight:500;
    transition: border-color .2s ease, background .2s ease;
  }
  .nav-cta:hover{ border-color: var(--accent); background: var(--accent-dim); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding: 6vh clamp(20px, 6vw, 72px) 10vh;
    z-index:1;
  }

  .hub-wrap{
    position:absolute;
    top:-4%;
    right:-6%;
    width:min(720px, 70vw);
    opacity:0.55;
    pointer-events:none;
    z-index:0;
  }

  .hub-wrap svg{ width:100%; height:auto; }

  .ring{
    fill:none;
    stroke: var(--accent);
    opacity:0.35;
    transform-origin: 300px 300px;
  }

  .ring.r1{ animation: ring-pulse 3.4s ease-in-out infinite; }
  .ring.r2{ animation: ring-pulse 3.4s ease-in-out infinite 0.5s; }
  .ring.r3{ animation: ring-pulse 3.4s ease-in-out infinite 1s; }

  @keyframes ring-pulse{
    0%{ transform:scale(0.85); opacity:0.5; }
    70%{ transform:scale(1.05); opacity:0.05; }
    100%{ transform:scale(1.08); opacity:0; }
  }

  .node{ fill: var(--accent); }
  .node.amber{ fill: var(--accent-2); }

  .spin-slow{
    transform-origin: 300px 300px;
    animation: spin 40s linear infinite;
  }

  @keyframes spin{ to{ transform: rotate(360deg); } }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.16em;
    color: var(--accent);
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    border:1px solid var(--border);
    border-radius:999px;
    background: rgba(255,255,255,0.02);
    margin-bottom: 32px;
  }

  .headline{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    line-height:0.98;
    letter-spacing:-0.01em;
    font-size: clamp(2.6rem, 8vw, 6.4rem);
    max-width: 16ch;
    background: linear-gradient(180deg, #FFFFFF 0%, #C9D3E0 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .headline .accent-word{
    background: linear-gradient(90deg, var(--accent), #6FF7DE);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .sub{
    margin-top:22px;
    color: var(--text-muted);
    font-size:1.05rem;
    max-width:46ch;
  }

  .cta-row{
    margin-top:44px;
    display:flex;
    gap:16px;
    align-items:center;
  }

  .btn-primary{
    background: var(--accent);
    color:#04120F;
    font-weight:600;
    font-size:0.98rem;
    padding:16px 34px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 0 0 0 rgba(0,230,195,0.35);
  }
  .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -8px rgba(0,230,195,0.45);
  }
  .btn-primary svg{ width:16px; height:16px; transition: transform .18s ease; }
  .btn-primary:hover svg{ transform: translateX(3px); }

  .btn-ghost{
    color: var(--text-muted);
    font-size:0.92rem;
    padding:16px 8px;
    border-bottom:1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .btn-ghost:hover{ color: var(--text); border-color: var(--border); }

  /* ---------- FEATURE GRID ---------- */
  .features{
    margin-top:88px;
    width:100%;
    max-width:920px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    border-top:1px solid var(--border);
  }

  .feature{
    padding: 26px 18px;
    border-right:1px solid var(--border);
    text-align:left;
  }
  .feature:last-child{ border-right:none; }

  .feature-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    color: var(--accent);
    margin-bottom:10px;
    display:block;
  }

  .feature-text{
    font-size:0.9rem;
    color: var(--text-muted);
    line-height:1.5;
  }

  @media (max-width: 760px){
    .features{ grid-template-columns: repeat(2, 1fr); }
    .feature:nth-child(2){ border-right:none; }
    .feature{ border-bottom:1px solid var(--border); }
    .hub-wrap{ opacity:0.28; width:110vw; right:-20%; }
  }

  /* ---------- LOGIN SCREEN ---------- */
  #login-screen{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 6vh 24px;
    position:relative;
  }

  .login-back{
    position:absolute;
    top:28px;
    left:clamp(20px, 6vw, 72px);
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.88rem;
    color: var(--text-muted);
    transition: color .18s ease;
  }
  .login-back:hover{ color: var(--text); }
  .login-back svg{ width:15px; height:15px; }

  .login-card{
    width:100%;
    max-width:400px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius: 20px;
    padding: 40px 34px 34px;
    position:relative;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
  }

  .login-hub{
    width:52px; height:52px;
    margin:0 auto 22px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .login-hub .core{
    width:14px; height:14px;
    border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 18px 4px var(--accent-dim);
  }
  .login-hub .ring-mini{
    position:absolute;
    inset:0;
    border:1px solid var(--accent);
    border-radius:50%;
    opacity:0.5;
    animation: ring-pulse 2.6s ease-in-out infinite;
  }
  .login-hub .ring-mini.delay{ animation-delay:0.7s; }

  .login-title{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:1.5rem;
    text-align:center;
  }

  .login-sub{
    text-align:center;
    color: var(--text-muted);
    font-size:0.87rem;
    margin-top:8px;
    margin-bottom:30px;
  }

  .field{
    margin-bottom:18px;
    text-align:left;
  }

  .field label{
    display:block;
    font-size:0.76rem;
    letter-spacing:0.04em;
    color: var(--text-muted);
    margin-bottom:8px;
  }

  .field input{
    width:100%;
    background: rgba(255,255,255,0.03);
    border:1px solid var(--border);
    border-radius:10px;
    padding:13px 14px;
    color: var(--text);
    font-size:0.95rem;
    font-family:inherit;
    transition: border-color .18s ease, background .18s ease;
  }

  .field input::placeholder{ color:#57607A; }

  .field input:focus{
    border-color: var(--accent);
    background: rgba(0,230,195,0.05);
    outline:none;
  }

  .field-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:0.78rem;
    color: var(--text-muted);
    margin: -4px 0 22px;
  }

  .checkbox-row{ display:flex; align-items:center; gap:7px; }
  .checkbox-row input{ accent-color: var(--accent); }

  .forgot-link{ color: var(--accent); transition: opacity .18s ease; }
  .forgot-link:hover{ opacity:0.8; }

  .btn-login{
    width:100%;
    background: var(--accent);
    color:#04120F;
    font-weight:600;
    font-size:0.96rem;
    padding:14px;
    border-radius:10px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .btn-login:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -10px rgba(0,230,195,0.5);
  }

  .login-footer{
    margin-top:22px;
    text-align:center;
    font-size:0.68rem;
    letter-spacing:0.1em;
    color:#4C5468;
  }

  .login-footer .dot{ color: var(--accent); }

  @media (prefers-reduced-motion: reduce){
    .ring, .ring-mini, .pulse-led, .spin-slow{ animation:none !important; }
  }