:root{
    --ink:#F5F5F3;
    --paper:#0A0A0B;
    --grey:#9C9C98;
    --grey-light:#5C5C58;
    --hairline: rgba(245,245,243,0.14);
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ box-sizing:border-box; }

  html,body{
    height:100%;
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  #stars{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
  }

  .stage{
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 8vh 6vw;
    position:relative;
    z-index:1;
  }

  .card{
    width:100%;
    max-width:520px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* ---------- terminal boot line ---------- */
  .terminal{
    font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-size:14px;
    color:var(--grey);
    margin-bottom:56px;
    min-height:20px;
    display:flex;
    align-items:center;
    gap:2px;
  }
  .terminal .prompt{ color:var(--grey-light); margin-right:8px; }
  .terminal .typed{ color:var(--ink); white-space:pre; }
  .terminal .cursor{
    display:inline-block;
    width:8px;
    height:16px;
    margin-left:2px;
    background: var(--ink);
    animation: blink 1s step-end infinite;
    opacity:1;
  }
  @keyframes blink{
    0%,49%{ opacity:1; }
    50%,100%{ opacity:0; }
  }

  /* ---------- reveal group ---------- */
  .reveal{
    opacity:0;
    transform: translateY(10px);
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .reveal.in{
    animation: rise .8s var(--ease) forwards;
  }
  @keyframes rise{
    to{ opacity:1; transform:translateY(0); }
  }

  .mark{
    width:52px;
    height:52px;
    margin-bottom:22px;
  }
  .mark svg{ width:100%; height:100%; display:block; }
  .mark path{ fill:var(--ink); }

  .wordmark{
    font-family:"Poppins", -apple-system, sans-serif;
    font-size:16px;
    font-weight:500;
    letter-spacing:0.02em;
    color:var(--ink);
    margin-bottom:32px;
  }

  h1{
    font-size:clamp(26px, 5vw, 34px);
    line-height:1.2;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0 0 14px;
    color:var(--ink);
  }

  .sub{
    font-size:15px;
    line-height:1.65;
    font-weight:400;
    color:var(--grey);
    max-width:380px;
    margin:0 0 44px;
  }
  .sub a{
    color:var(--ink);
    text-decoration:underline;
    text-decoration-color: var(--hairline);
    text-underline-offset:3px;
    transition: text-decoration-color .3s var(--ease);
  }
  .sub a:hover{
    text-decoration-color: var(--ink);
  }

  footer{
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    text-align:center;
    font-size:12px;
    color:var(--grey-light);
    opacity:0;
    z-index:1;
  }
  footer.in{ animation: rise .8s var(--ease) forwards; animation-delay:.2s; }

  @media (max-width: 420px){
    .terminal{ font-size:13px; margin-bottom:44px; }
    h1{ font-size:24px; }
    .sub{ font-size:14px; margin-bottom:36px; }
    footer{ bottom:20px; font-size:11px; }
  }