/* Compiled CSS (hand-written) for a black & white, AI-inspired theme */
/* Fonts: Inter and Orbitron (linked in HTML) */

:root{
  --bg:#000;
  --panel:#0b0b0b;
  --fg:#ffffff;
  --muted:#cfcfcf;
  --accent:#e6e6e6;
  --glass: rgba(255,255,255,0.03);
  --trans: 200ms;
  --radius:12px;
  --container:1200px;
  --shadow: 0 6px 30px rgba(0,0,0,0.7);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  overflow-y:scroll;
}

/* Subtle animated grid background */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent 20%),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 100% 100%, 80px 80px;
  opacity:0.8;
  mix-blend-mode: overlay;
  animation: shift 28s linear infinite;
}
@keyframes shift{ from{transform:translateY(0)} to{transform:translateY(-120px)}}

/* Container */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding: 40px 22px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:10px 18px;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* Brand */
.brand{ display:flex; align-items:center; gap:10px }
.logo-mark{ width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03)
}
.brand-text h1{ font-family:Orbitron, Inter; font-weight:700; margin:0; font-size:18px; letter-spacing:0.6px }
.brand-text .tag{ font-size:11px; color:var(--muted); display:block }

/* Hamburger (three lines) */
.hamburger{
  appearance:none; border:0; background:transparent; display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:12px; cursor:pointer;
  transition:var(--trans); position:relative;
}
.hamburger span{ display:block; width:20px; height:2px; background:var(--fg); margin:3px 0; border-radius:2px; transition:200ms transform, 200ms opacity }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

/* Top actions */
.top-actions{ display:flex; gap:10px; align-items:center }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; cursor:pointer;
  text-decoration:none; color:var(--fg); border:1px solid rgba(255,255,255,0.04);
  background:transparent; font-weight:600; font-size:14px;
}
.btn:hover{ transform:translateY(-3px) }
.btn.primary{ background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.06) }
.btn.ghost{ background:transparent; opacity:0.9 }

/* Sidebar */
.sidebar{
  position:fixed; top:0; left:0; height:100vh; width:320px; max-width:85%;
  transform:translateX(-110%); transition:transform 320ms cubic-bezier(.2,.9,.3,1); z-index:70;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border-right:1px solid rgba(255,255,255,0.03); padding:20px;
  backdrop-filter: blur(8px);
  box-shadow:var(--shadow);
}
.sidebar[aria-hidden="false"]{ transform:translateX(0) }
.sidebar-inner{ display:flex; flex-direction:column; height:100% }
.sidebar-top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.sidebar h2{ margin:0; font-family:Orbitron; font-size:18px; }
.close-btn{ background:none; border:0; color:var(--fg); font-size:26px; cursor:pointer }

.nav-list{ margin-top:28px; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px }
.nav-list a{ color:var(--fg); text-decoration:none; font-weight:600; padding:10px; border-radius:8px; display:block }
.nav-list a:hover{ background:rgba(255,255,255,0.02) }

/* Overlay */
.overlay{ position:fixed; inset:0; z-index:65; background:rgba(0,0,0,0.5); transition:opacity 200ms; }

/* Main / Hero */
.main{ position:relative; z-index:10; padding-top:20px; margin-bottom:80px }

.hero{ padding:80px 0; position:relative }
.hero-inner{ display:grid; grid-template-columns: 1fr 360px; gap:36px; align-items:start; min-height:360px; }
.hero-copy h2{ font-size:16px; color:var(--muted); margin:0 0 8px; font-weight:600; letter-spacing:1px }
.hero-title{ font-family:Orbitron; font-weight:700; font-size:36px; margin:6px 0 12px; line-height:1.02 }
.lead{ color:var(--muted); margin-bottom:20px; max-width:58ch }

.hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius); padding:18px; border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}

.panel-ribbon{ display:inline-block; font-size:12px; padding:6px 8px; border-radius:8px;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03);
}

/* Cards */
.section{ padding:48px 0 }
.section-title{ font-size:22px; margin:6px 0 6px; font-weight:700 }
.section-sub{ color:var(--muted); margin-bottom:20px }

.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px }
.card{
  padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); background:var(--glass);
  transition: transform 220ms ease, box-shadow 220ms; min-height:150px;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 18px 50px rgba(0,0,0,0.6) }
.card-icon{ font-size:26px; margin-bottom:10px }
.card h4{ margin:0 0 8px; font-size:16px }
.card p{ color:var(--muted); margin:0 0 12px }
.card .link{ color:var(--accent); font-weight:700; text-decoration:none }

/* CTA */
.cta-inner{ text-align:center; padding:28px; border-radius:14px; border:1px solid rgba(255,255,255,0.02); background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent) }

/* Form */
.contact-form{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:13px }
.contact-form input, .contact-form textarea{
  background:transparent; border:1px solid rgba(255,255,255,0.04); padding:10px 12px; border-radius:8px; color:var(--fg)
}
.contact-form textarea{ grid-column: 1 / -1 }
.form-actions{ display:flex; gap:12px; align-items:center }

/* Footer */
.site-footer{ padding:30px 0 80px; border-top:1px solid rgba(255,255,255,0.02); margin-top:40px }
.footer-grid{ display:flex; justify-content:space-between; align-items:center }

/* Small utilities */
.muted{ color:var(--muted); font-size:13px }
.small{ font-size:13px }

/* Link preview popup */
.link-preview{
  position:fixed; z-index:1000; pointer-events:none; transform:translate(-50%,-50%) scale(.98);
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); padding:10px 12px; border-radius:12px;
  font-size:13px; color:var(--fg); max-width:320px; backdrop-filter:blur(6px); transition:200ms;
  box-shadow:0 8px 40px rgba(0,0,0,0.6)
}

/* Cookie consent */
.cookie-consent{
  position:fixed; right:22px; bottom:22px; z-index:120; border-radius:12px; padding:14px; width:min(420px,90%);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.cookie-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px }

/* Reveal animation (used by JS) */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 520ms ease, transform 520ms ease }
.reveal.visible{ opacity:1; transform:translateY(0) }

/* Responsive */
@media (max-width:920px){
  .hero-inner{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: repeat(2,1fr) }
  .contact-form{ grid-template-columns:1fr }
  .top-actions{ display:none }
}

@media (max-width:600px){
  .cards{ grid-template-columns: 1fr }
  .brand-text h1{ font-size:16px }
  .hamburger{ width:44px; height:44px }
}

/* small decorative waveform */
.wave{ width:100%; height:40px; opacity:0.9; stroke:var(--accent) }

/* tiny animation for hero typewriter underline */
#typewriter::after{
  content:""; display:inline-block; width:10px; height:14px; vertical-align:middle; background:var(--fg); margin-left:8px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }