/* ============================================================
   Tobias Wachtel — KI & Automation
   Global styles. Dark terminal-inspired aesthetic.
============================================================ */

:root{
  /* Base palette */
  --bg:          #0a0a0c;
  --bg-2:        #101013;
  --bg-3:        #16161a;
  --bg-4:        #1d1d23;
  --surface:     #121217;
  --border:      #26262e;
  --border-2:    #34343e;

  /* Text */
  --fg:          #e8e8ea;
  --fg-dim:      #a8a8b0;
  --fg-mute:     #70707a;
  --fg-ghost:    #4a4a54;

  /* Accents */
  --accent:      #ff7a3d;   /* primary */
  --accent-hi:   #ff9561;
  --accent-lo:   #b4531f;
  --green:       #6bdf8a;
  --blue:        #7ad7ff;
  --yellow:      #ffcc55;

  /* Type */
  --mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:        'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Metrics */
  --nav-h:       64px;
  --r-sm:        6px;
  --r-md:        10px;
  --r-lg:        14px;
  --maxw:        1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--bg); color:var(--fg); scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(ellipse 800px 500px at 15% -10%, rgba(255,122,61,.08), transparent 60%),
    radial-gradient(ellipse 700px 400px at 85% 10%, rgba(122,215,255,.04), transparent 55%),
    var(--bg);
  min-height:100vh;
}

/* Subtle dot grid background — only on body */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.03) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events:none; z-index:0;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
p{ margin:0 0 1em; color:var(--fg-dim); }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; letter-spacing:-.01em; margin:0; color:var(--fg); }
h1{ font-size:clamp(38px, 5vw, 64px); line-height:1.05; letter-spacing:-.02em; }
h2{ font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; letter-spacing:-.015em; }
h3{ font-size:22px; line-height:1.25; }
h4{ font-size:17px; line-height:1.3; }

::selection{ background:var(--accent); color:#0a0a0c; }

/* ============ Layout ============ */
.container{
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 24px;
  position:relative; z-index:1;
}
section{ padding:96px 0; position:relative; z-index:1; }
section.slim{ padding:64px 0; }

/* Section meta (eyebrow label) */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px;
  color:var(--fg-mute); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--accent);
}

/* ============ Nav ============ */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; height:100%;
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:600; font-size:14px;
  color:var(--fg);
}
.brand-mark{
  width:28px; height:28px; border-radius:6px;
  background:var(--accent); color:#0a0a0c;
  display:grid; place-items:center; font-weight:700; font-size:13px;
  font-family:var(--mono);
  box-shadow: 0 0 0 1px rgba(255,122,61,.25), 0 4px 16px rgba(255,122,61,.25);
}
.brand em{ font-style:normal; color:var(--fg-mute); font-weight:400; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  font-family:var(--mono); font-size:13px; color:var(--fg-dim);
  padding:8px 12px; border-radius:6px; transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--fg); background:var(--bg-3); }
.nav-links a.primary{
  color:#0a0a0c; background:var(--accent); margin-left:8px;
  font-weight:600;
}
.nav-links a.primary:hover{ background:var(--accent-hi); color:#0a0a0c; }

.nav-toggle{ display:none; color:var(--fg); font-size:22px; padding:4px 8px; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:var(--r-md);
  font-family:var(--mono); font-size:14px; font-weight:500;
  border:1px solid var(--border-2);
  background:var(--bg-3); color:var(--fg);
  transition: transform .15s, background .15s, border-color .15s, color .15s;
  white-space:nowrap;
  cursor:pointer;
}
.btn:hover{ background:var(--bg-4); border-color:var(--border-2); transform:translateY(-1px); }
.btn .arr{ transition:transform .15s; }
.btn:hover .arr{ transform:translateX(3px); }

.btn-primary{
  background:var(--accent); color:#0a0a0c; border-color:var(--accent);
  font-weight:600;
  box-shadow: 0 4px 20px -4px rgba(255,122,61,.4);
}
.btn-primary:hover{ background:var(--accent-hi); border-color:var(--accent-hi); color:#0a0a0c; }

.btn-ghost{ background:transparent; }

/* ============ Terminal primitives ============ */
.term{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  font-family:var(--mono); font-size:14px; line-height:1.75;
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.term-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:var(--bg-3);
  border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:12px; color:var(--fg-mute);
}
.term-bar .dots{ display:flex; gap:6px; margin-right:10px; }
.term-bar .dots i{ display:block; width:11px; height:11px; border-radius:50%; background:var(--bg-4); }
.term-bar .dots i:nth-child(1){ background:#ff5f56; }
.term-bar .dots i:nth-child(2){ background:#ffbd2e; }
.term-bar .dots i:nth-child(3){ background:#27c93f; }

.term-body{ padding:22px 24px; }
.term-line{ display:block; }
.term-prompt{ color:var(--fg-mute); user-select:none; margin-right:8px; }
.term-cmd{ color:var(--blue); }
.term-out{ color:var(--fg-dim); }
.term-hl{ color:var(--accent); }
.term-green{ color:var(--green); }
.term-yellow{ color:var(--yellow); }
.term-ghost{ color:var(--fg-ghost); }
.term-comment{ color:var(--fg-ghost); font-style:italic; }

.cursor{
  display:inline-block; width:9px; height:16px;
  background:var(--fg); vertical-align:-3px; margin-left:2px;
  animation: blink 1.05s steps(2) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

/* ============ Chips & meta ============ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border:1px solid var(--border-2);
  background:var(--bg-3);
  border-radius:999px;
  font-family:var(--mono); font-size:12px; color:var(--fg-dim);
}
.chip-accent{ color:var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--border-2)); }

.kbd{
  display:inline-block; padding:1px 7px;
  font-family:var(--mono); font-size:12px; color:var(--fg);
  background:var(--bg-4); border:1px solid var(--border-2);
  border-bottom-width:2px; border-radius:5px;
}

/* ============ Footer ============ */
.footer{
  margin-top:80px;
  border-top:1px solid var(--border);
  background:var(--bg-2);
  position:relative; z-index:1;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:60px 24px 32px;
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:40px;
}
.footer h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute); margin:0 0 14px; font-weight:500;
}
.footer a{ color:var(--fg-dim); font-size:14px; display:block; padding:4px 0; }
.footer a:hover{ color:var(--accent); }
.footer-bot{
  max-width:var(--maxw); margin:0 auto; padding:20px 24px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--fg-mute);
}

/* ============ Responsive ============ */
@media (max-width: 860px){
  section{ padding:72px 0; }
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:var(--bg-2); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:stretch; padding:12px;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 16px; border-radius:6px; }
  .nav-links a.primary{ margin-left:0; margin-top:6px; text-align:center; }
  .nav-toggle{ display:inline-block; }

  .footer-inner{ grid-template-columns: 1fr 1fr; gap:30px 20px; }
  .footer-bot{ flex-direction:column; gap:8px; align-items:flex-start; }
}