/* ============================================================
   V//A — Development Studio
   Design tokens
   ============================================================ */
:root{
  --bg:        #0a0a0c;
  --bg-soft:   #111116;
  --surface:   #16161c;
  --surface-2: #1c1c24;
  --border:    #2a2a33;
  --border-soft: #1f1f27;

  --text:       #eeeef2;
  --text-muted: #8d8d98;
  --text-dim:   #5c5c66;

  --accent:      #7c5cff;   /* electric violet — primary cut colour   */
  --accent-soft: #7c5cff22;
  --mint:        #00e6a8;   /* status / online / success              */
  --warn:        #ff5b39;   /* offline / error / alpha-tag            */

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --cut: 18px; /* size of the recurring diagonal notch */
  --maxw: 1180px;

  --logo-filter: brightness(0) invert(1);
  --grid-opacity: .35;
  --watermark-opacity: .05;
  --header-bg: rgba(10,10,12,.75);
}

:root[data-theme="light"]{
  --header-bg: rgba(250,250,250,.8);
  --bg:        #fafafa;
  --bg-soft:   #f2f2f4;
  --surface:   #ffffff;
  --surface-2: #f5f5f7;
  --border:    #e2e2e7;
  --border-soft: #ececef;

  --text:       #16161a;
  --text-muted: #57575f;
  --text-dim:   #9b9ba4;

  --accent:      #6a3ff0;
  --accent-soft: #6a3ff01a;
  --mint:        #00a887;
  --warn:        #d94a2f;

  --logo-filter: brightness(0);
  --grid-opacity: .5;
  --watermark-opacity: .04;
}

/* smooth theme transition */
body, .card, .pcard, .terminal, header, footer, .btn, .field input, .field textarea{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  /* faint fixed grid, studio/blueprint feel */
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:var(--grid-opacity);
  pointer-events:none;
  z-index:0;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--accent);
}

/* ============================================================
   Header / nav
   ============================================================ */
header{
  position:sticky; top:0; z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px;
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700;
  font-size:18px; letter-spacing:-.01em;
}
.brand img{ height:38px; width:auto; filter:var(--logo-filter); }
.brand .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1);}
  50%{ opacity:.4; transform:scale(.7);}
}

.navlinks{ display:flex; gap:2px; }
.navlinks a{
  position:relative;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-muted);
  padding:8px 16px;
  transition:color .25s ease;
}
.navlinks a:hover{ color:var(--text); }
.navlinks a::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:4px; height:1px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.65,0,.35,1);
}
.navlinks a:hover::after,
.navlinks a.active::after{ transform:scaleX(1); }
.navlinks a.active{ color:var(--text); }

.nav-cta{
  font-family:var(--font-mono); font-size:13px;
  border:1px solid var(--border); padding:9px 18px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
  transition:border-color .25s ease, background .25s ease;
}
.nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  flex-shrink:0;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:50%;
  cursor:pointer;
  color:var(--text);
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
  margin-left:10px;
  padding:0;
}
.theme-toggle span{
  font-size:17px;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }
.theme-toggle .glyph-sun{ display:none; }
.theme-toggle .glyph-moon{ display:flex; }
:root[data-theme="light"] .theme-toggle .glyph-sun{ display:flex; }
:root[data-theme="light"] .theme-toggle .glyph-moon{ display:none; }

.burger{ display:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:14px;
  padding:14px 26px;
  border:1px solid var(--border);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% 100%, var(--cut) 100%);
  transition:all .25s ease;
  cursor:pointer;
  background:none;
}
.btn-primary{
  background:var(--accent);
  color:#0a0a0c;
  border-color:var(--accent);
  font-weight:600;
}
.btn-primary:hover{ background:#9276ff; transform:translateY(-2px); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ============================================================
   Hero / terminal
   ============================================================ */
.hero{
  padding:120px 0 100px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:50%; right:-6%;
  width:56%; aspect-ratio:1536/1024;
  transform:translateY(-50%);
  background-image:url('../assets/logo.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:var(--watermark-opacity);
  filter:var(--logo-filter);
  pointer-events:none;
  z-index:0;
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:clamp(40px, 5.4vw, 74px);
  line-height:1.04;
}
.hero h1 .cut{ color:var(--accent); }
.hero p.lead{
  color:var(--text-muted);
  font-size:18px;
  max-width:46ch;
  margin:22px 0 36px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.terminal{
  background:var(--surface);
  border:1px solid var(--border);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  box-shadow:0 40px 80px -30px #00000090;
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
}
.terminal-bar span.tdot{ width:9px; height:9px; border-radius:50%; background:var(--border); }
.terminal-body{
  font-family:var(--font-mono); font-size:13.5px; line-height:1.9;
  padding:22px 20px; min-height:200px; color:var(--mint);
}
.terminal-body .muted{ color:var(--text-dim); }
.terminal-body .out{ color:var(--text-muted); }
.caret{
  display:inline-block; width:8px; height:16px; background:var(--mint);
  vertical-align:middle; margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   Section scaffolding
   ============================================================ */
section{ padding:90px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,3.6vw,44px); }
.section-head p{ color:var(--text-muted); margin-top:16px; font-size:16px; }

.divider{
  height:64px;
  background:linear-gradient(120deg, transparent 48%, var(--border) 48.4%, var(--border) 49.4%, transparent 49.8%);
  opacity:.6;
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   Cards (services / projects)
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }

.card{
  background:var(--surface);
  padding:34px 30px;
  position:relative;
  transition:background .3s ease;
}
.card:hover{ background:var(--surface-2); }
.card .num{ font-family:var(--font-mono); color:var(--text-dim); font-size:12px; }
.card h3{ font-size:20px; margin:14px 0 10px; }
.card p{ color:var(--text-muted); font-size:14.5px; }

/* project card */
.pcard{
  background:var(--surface);
  padding:28px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  transition:background .3s ease, transform .3s ease;
}
.pcard:hover{ background:var(--surface-2); }
.pcard-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.pcard h3{ font-size:19px; }
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border:1px solid var(--border); color:var(--text-muted);
}
.tag.stable{ color:var(--mint); border-color:#00e6a850; }
.tag.alpha{ color:var(--warn); border-color:#ff5b3950; }
.tag.beta{ color:var(--accent); border-color:#7c5cff50; }
.stack{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.chip{
  font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
  border:1px solid var(--border-soft); padding:4px 9px;
}
.pcard-foot{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.pcard-foot a{ color:var(--accent); }
.pcard-foot a:hover{ text-decoration:underline; }

/* ============================================================
   Stats / ticker
   ============================================================ */
/* ============================================================
   Footer
   ============================================================ */
footer{ border-top:1px solid var(--border-soft); padding:56px 0 34px; }
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px;
}
.foot-col h4{
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px;
}
.foot-col a{ display:block; color:var(--text-muted); font-size:14px; margin-bottom:10px; transition:color .2s; }
.foot-col a:hover{ color:var(--accent); }
.foot-brand p{ color:var(--text-muted); font-size:14px; max-width:34ch; margin-top:14px; }
.foot-brand .brand{ margin-bottom:2px; }
.foot-brand .brand img{ height:52px; filter:var(--logo-filter); }
.foot-wordmark{
  width:100%; aspect-ratio:1536/280; max-height:170px;
  background-image:url('../assets/logo.png');
  background-size:contain; background-repeat:no-repeat; background-position:left center;
  filter:var(--logo-filter);
  opacity:.9;
  margin-top:36px;
}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border-soft); padding-top:24px;
  font-family:var(--font-mono); font-size:12px; color:var(--text-dim);
}

/* ============================================================
   Page hero (sub-pages)
   ============================================================ */
.pagehero{ padding:70px 0 60px; position:relative; overflow:hidden; }
.pagehero::before{
  content:"";
  position:absolute;
  top:50%; right:-8%;
  width:42%; aspect-ratio:1536/1024;
  transform:translateY(-50%);
  background-image:url('../assets/logo.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:var(--watermark-opacity);
  filter:var(--logo-filter);
  pointer-events:none;
  z-index:0;
}
.pagehero .wrap{ position:relative; z-index:1; }
.pagehero .eyebrow{ margin-bottom:20px; }
.pagehero h1{ font-size:clamp(34px,4.6vw,56px); max-width:16ch; }
.pagehero p{ color:var(--text-muted); max-width:56ch; margin-top:18px; font-size:17px; }

/* manifesto / about */
.manifesto{ font-family:var(--font-display); font-size:clamp(22px,2.6vw,32px); line-height:1.4; max-width:900px; }
.manifesto .accent{ color:var(--accent); }

.value-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-top:40px; }

/* contact form */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }
.field input, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:13px 14px; font-family:var(--font-body); font-size:14.5px;
  outline:none; transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin-top:6px; }

.info-block{ border:1px solid var(--border); padding:26px; margin-bottom:1px; }
.info-block h4{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; color:var(--text-dim); letter-spacing:.08em; margin-bottom:12px; }
.info-block p, .info-block a{ font-size:15px; color:var(--text-muted); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .value-list{ grid-template-columns:1fr; }
  .navlinks{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--bg); flex-direction:column; padding:20px 32px;
    transform:translateY(-110%); transition:transform .35s ease;
    border-top:1px solid var(--border-soft);
  }
  .navlinks.open{ transform:translateY(0); }
  .navlinks a{ padding:16px 0; border-bottom:1px solid var(--border-soft); font-size:15px; }
  .burger{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
  }
  .burger span{ width:20px; height:1.5px; background:var(--text); }
}