:root{
  --bg:#0b0f0c; --panel:#0f1512; --text:#b7ffc8; --muted:#7ee6a0; --accent:#39ff14;
  --line:#1f3328; --radius:6px; --gap:14px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.7 "IBM Plex Mono", ui-monospace, monospace;
}
.hero{margin:20px auto 20px; text-align:center; font-size:clamp(20px,2.5vw,32px); letter-spacing:.5px}
.hero2{margin:0px auto 0px; text-align:center; font-size:clamp(5px,2.5vw,12px); letter-spacing:.5px}

.seg{display:flex; gap:var(--gap); justify-content:center; margin:0 auto 10px; padding:0 12px}
.seg > button{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--text);
  padding:12px 18px; min-width:140px; text-transform:uppercase; letter-spacing:.08em;
  position:relative; border-radius:4px; cursor:pointer; outline:none;
  box-shadow: 0 1px 0 #0a1a12 inset, 0 -1px 0 rgba(255,255,255,.03) inset;
}
.seg > button:hover{border-color:#27533d}
.seg > button[aria-selected="true"]{
  translate:0 1px; /* pressed look */
  box-shadow: 0 -1px 0 #0a1a12 inset, 0 2px 0 rgba(0,0,0,.5) inset;
  border-color:#2a6b4b;
}

.panel{
  width:min(1100px, 92vw);
  height:clamp(50vh, 70vh, 92vh);
  margin:20px auto 20px;
  border:5px solid var(--line);
  background:
    radial-gradient(120% 80% at 50% 15%, rgba(0,220,106,.06), transparent),
    var(--panel);
  overflow:auto; /* internal scrolling; border moves with scroll */
  padding:20px 40px;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 0 0 1px #0a1a12 inset, 0 8px 24px rgba(0,0,0,.35);
}
.terminal-output{white-space:pre-wrap}
a{color:var(--accent); border-bottom:1px dotted var(--accent); text-decoration:none}

/* Optional subtle scanlines (disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  .panel::before{
    content:""; position:sticky; top:0; left:0; right:0; height:0;
    background:repeating-linear-gradient(
      to bottom, rgba(0,0,0,.18) 0, rgba(0,0,0,.18) 1px, transparent 2px, transparent 3px
    );
    pointer-events:none; display:block;
  }
}

/* --- Small‑phone tab wrap (≤420px) --- */
@media (max-width: 420px){
  .seg{ flex-wrap: wrap; }
  .seg > button{ min-width:120px; }
}

/* --- Contact form theme (matches existing UI) --- */
.contact-form { margin-top: 18px; display: grid; gap: var(--gap); max-width: 720px; }
.contact-form .row { display: grid; gap: 8px; }
.contact-form label { font-weight: 600; color: var(--muted); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px;
  padding:10px 12px;
  font:inherit;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form button{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--text);
  padding:12px 18px; text-transform:uppercase; letter-spacing:.08em; border-radius:4px; cursor:pointer;
  box-shadow: 0 1px 0 #0a1a12 inset, 0 -1px 0 rgba(255,255,255,.03) inset;
}
.contact-form button:hover{ border-color:#27533d }
.contact-form button:disabled{ opacity:.6; cursor:progress }