:root{
    --ink:#080B14;
    --ink-2:#0D1322;
    --line:#1B2438;
    --amber:#FFB000;
    --amber-soft:#C98A12;
    --amber-ghost:rgba(255,176,0,.10);
    --bone:#E9E5DA;
    --slate:#7D8AA0;
    --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--bone);
    font-family:var(--mono);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ---------- background layers ---------- */
  #rain{
    position:fixed; inset:0; z-index:0;
    width:100%; height:100%;
    opacity:.42;
  }
  .vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(8,11,20,.72) 62%, rgba(8,11,20,.96) 100%);
  }
  .scanlines{
    position:fixed; inset:0; z-index:2; pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,176,0,.045) 0px,
      rgba(255,176,0,.045) 1px,
      transparent 1px,
      transparent 3px);
    mix-blend-mode:screen;
    opacity:.55;
  }

  /* ---------- shell ---------- */
  .shell{
    position:relative; z-index:3;
    min-height:100%;
    display:flex; flex-direction:column;
    padding:clamp(18px,4vw,40px);
    gap:clamp(24px,5vh,56px);
  }

  header.bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:14px;
  }
  .mark{
    height:clamp(20px,2.6vw,26px);
    width:auto;
    display:block;
  }
  .status{
    display:flex; align-items:center; gap:9px;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--slate);
  }
  .pulse{
    width:7px; height:7px; border-radius:50%;
    background:var(--amber);
    animation:pulse 2.4s ease-out infinite;
  }
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(255,176,0,.5);}
    70%{box-shadow:0 0 0 9px rgba(255,176,0,0);}
    100%{box-shadow:0 0 0 0 rgba(255,176,0,0);}
  }

  main{
    flex:1;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(28px,5vw,72px);
    align-items:center;
    max-width:1180px; width:100%; margin:0 auto;
  }

  .eyebrow{
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--amber-soft);
    margin:0 0 18px;
  }
  h1{
    font-family:var(--display); font-weight:700;
    font-size:clamp(34px,6.2vw,62px);
    line-height:1.02; letter-spacing:-.035em;
    margin:0 0 20px;
  }
  h1 .glow{
    color:var(--amber);
    text-shadow:0 0 26px rgba(255,176,0,.28);
  }
  .lede{
    font-size:clamp(14px,1.6vw,16px);
    line-height:1.72; color:var(--slate);
    max-width:46ch; margin:0 0 30px;
  }
  .lede strong{color:var(--bone); font-weight:500;}

  .chips{
    display:flex; flex-wrap:wrap; gap:8px;
    margin:0 0 30px; padding:0; list-style:none;
  }
  .chips li{
    font-size:11px; letter-spacing:.09em;
    padding:6px 10px;
    border:1px solid var(--line);
    background:rgba(255,176,0,.03);
    color:var(--slate);
  }
  .chips li b{color:var(--amber-soft); font-weight:500;}

  .contact{
    display:inline-flex; align-items:center; gap:10px;
    font-size:13px; letter-spacing:.04em;
    color:var(--bone); text-decoration:none;
    padding:11px 18px;
    border:1px solid var(--amber-soft);
    background:var(--amber-ghost);
    transition:background .18s ease, transform .18s ease;
  }
  .contact:hover{background:rgba(255,176,0,.16); transform:translateY(-1px);}
  .contact:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}
  .contact .caret{color:var(--amber);}
  .actions{display:flex; flex-wrap:wrap; gap:10px;}
  .contact-alt{
    background:transparent;
    border-color:var(--line);
    color:var(--slate);
  }
  .contact-alt:hover{
    background:var(--amber-ghost);
    border-color:var(--amber-soft);
    color:var(--bone);
  }
  .contact-alt .tg{fill:var(--amber); flex:none;}

  /* ---------- terminal ---------- */
  .term{
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(13,19,34,.94), rgba(8,11,20,.94));
    box-shadow:0 30px 90px -40px rgba(0,0,0,.9), inset 0 0 60px rgba(255,176,0,.02);
    min-height:340px;
    display:flex; flex-direction:column;
  }
  .term-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--slate);
  }
  .dots{display:flex; gap:6px;}
  .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;}
  .dots i:first-child{background:var(--amber-soft);}
  .term-body{
    padding:16px 16px 22px;
    font-size:12.5px; line-height:1.95;
    white-space:pre-wrap; word-break:break-word;
    flex:1;
  }
  .term-body .prompt{color:var(--amber);}
  .term-body .ok{color:var(--amber-soft);}
  .term-body .dim{color:var(--slate);}
  .cursor{
    display:inline-block; width:8px; height:14px;
    background:var(--amber); vertical-align:-2px;
    animation:blink 1.05s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0;}}

  footer{
    border-top:1px solid var(--line);
    padding-top:14px;
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:#4E5A70;
  }

  @media (max-width:880px){
    main{grid-template-columns:1fr; gap:34px; padding:8px 0 20px;}
    .term{min-height:260px;}
  }

  @media (prefers-reduced-motion:reduce){
    #rain{display:none;}
    .pulse,.cursor{animation:none;}
    .scanlines{opacity:.25;}
  }