/* === Jake's Tech Labs – styles.css === */
:root{
    --bg:#0b0e14;
    --panel:#111521;
    --muted:#8a94a7;
    --text:#e7eaf0;
    --accent:#5865f2;     /* indigo vibe */
    --accent-2:#4451d6;
    --ring: rgba(88,101,242,.45);
    --success:#22c55e;
    --danger:#ef4444;
  
    --radius:14px;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
  
    --maxw: 880px;
    --pad: clamp(16px, 2.2vw, 28px);
    --gap: clamp(12px, 2vw, 20px);
    --hero-gap: clamp(18px, 3vw, 28px);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: radial-gradient(1200px 800px at 70% -10%, #182036 0%, transparent 60%) var(--bg);
    color:var(--text);
    line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  
  /* Layout */
  .container{
    max-width: var(--maxw);
    margin-inline:auto;
    padding: clamp(28px, 6vw, 64px) var(--pad);
  }
  .center-screen{
    min-height: 100dvh;
    display:grid;
    place-items:center;
  }
  
  /* Panel Card */
  .card{
    width:100%;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) , var(--panel);
    border:1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(22px, 4.5vw, 48px);
  }
  
  /* Typography */
  h1{
    font-size: clamp(32px, 6vw, 56px);
    line-height:1.06;
    margin:0 0 10px 0;
    letter-spacing:-.02em;
  }
  .lead{
    color: var(--muted);
    font-size: clamp(16px, 2.2vw, 18px);
  }
  
  /* Form */
  .form{
    display:flex;
    gap: var(--gap);
    margin-top: var(--hero-gap);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .input{
    min-width: min(420px, 100%);
    padding: 14px 16px;
    border-radius: 12px;
    border:1px solid rgba(255,255,255,.1);
    background:#0e1220;
    color:var(--text);
    outline:none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease;
  }
  .input:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--ring);
  }
  
  /* Buttons */
  .btn{
    appearance:none;
    border:0;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    color:white;
    font-weight:700;
    padding:14px 22px;
    border-radius:12px;
    cursor:pointer;
    box-shadow: var(--shadow-soft);
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
    white-space: nowrap;
  }
  .btn:hover{ filter: brightness(1.05) }
  .btn:active{ transform: translateY(1px) }
  
  /* Badges / tiny text */
  .note{
    margin-top:10px;
    color: var(--muted);
    font-size:12px;
  }
  
  /* Feature chips (optional) */
  .chips{
    margin-top: clamp(18px, 3vw, 26px);
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  }
  .chip{
    font-size:12px;
    color:#cfd6e6;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    padding:8px 10px;
    border-radius:999px;
  }
  
  /* Footer */
  .footer{
    margin-top: clamp(24px, 4vw, 36px);
    border-top:1px solid rgba(255,255,255,.06);
    padding-top: clamp(14px, 2vw, 20px);
    color: var(--muted);
    font-size: 13px;
    text-align:center;
  }
  .footer a{ color:#cfd6e6; text-decoration: underline; text-underline-offset: 3px; }
  
  /* Small screens: stack form nicely */
  @media (max-width: 640px){
    .form{ flex-direction: column; align-items: stretch }
    .input{ min-width: 100% }
    .btn{ width:100% }
  }