:root{
  --ink:#0A0D12;
  --panel:#12161C;
  --panel-2:#161B22;
  --panel-3:#1B212A;
  --line:rgba(230,232,235,0.08);
  --line-strong:rgba(230,232,235,0.16);
  --text:#E6E8EB;
  --muted:#8B929B;
  --muted-2:#565D66;
  --jade:#4FA98A;
  --jade-soft:rgba(79,169,138,0.14);
  --violet:#8D82D6;
  --violet-soft:rgba(141,130,214,0.14);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'IBM Plex Mono',monospace; }
.display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; }
section{ position:relative; z-index:1; }
.section-pad{ padding:110px 0; }
@media(max-width:767px){ .section-pad{ padding:70px 0; } .hero {padding-top: 120px; padding-bottom: 30px;} }
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:.74rem;
  letter-spacing:.12em;
  color:var(--jade);
  display:flex; align-items:center; gap:12px;
  margin-bottom:18px;
  text-transform:uppercase;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--jade); }
.sec-head{
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.2;
  max-width:680px;
  margin-bottom:16px;
}
.sec-sub{ color:var(--muted); max-width:560px; font-size:1rem; line-height:1.7; }
.hairline{ border-top:1px solid var(--line); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:22px 0; transition:.35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(10,13,18,.86); backdrop-filter:blur(10px); padding:14px 0; border-bottom:1px solid var(--line); }
.brand{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:9px; }
.brand-mark{ width:9px; height:9px; border-radius:2px; background:var(--jade); display:inline-block; }
.nav-links a{
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--muted);
  margin-left:32px; position:relative; transition:.25s ease;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--jade); transition:.25s ease; }
.nav-links a:hover::after{ width:100%; }
.btn-jade{
  background:var(--jade); color:var(--ink); font-family:'IBM Plex Mono',monospace;
  font-size:.82rem; font-weight:500; padding:11px 20px; border-radius:4px; border:1px solid var(--jade);
  transition:.25s ease; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.btn-jade:hover{ background:transparent; color:var(--jade); }
.btn-outline{
  font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--text);
  padding:11px 20px; border-radius:4px; border:1px solid var(--line-strong); transition:.25s ease;
}
.btn-outline:hover{ border-color:var(--text); }


/* ---------- MOBILE NAV / GLOBAL POLISH ---------- */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  width:42px; height:42px; border:1px solid var(--line-strong); border-radius:5px;
  background:rgba(18,22,28,.88); color:var(--text); display:none; align-items:center;
  justify-content:center; padding:0;
}
.nav-toggle span{ width:17px; height:1px; background:currentColor; display:block; margin:4px auto; transition:.25s ease; }
.mobile-panel{
  display:none; position:absolute; top:100%; left:12px; right:12px; padding:12px;
  background:rgba(18,22,28,.98); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.mobile-panel.open{ display:block; }
.mobile-panel a{ display:block; padding:12px 10px; font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--muted); border-bottom:1px solid var(--line); }
.mobile-panel a:last-child{ border-bottom:0; }
.mobile-panel a:hover{ color:var(--text); }
@media(max-width:991px){
  .nav-toggle{ display:inline-flex; flex-direction:column; }
  .nav .btn-jade.nav-cta{ display:none; }
  .nav{ padding:16px 0; }
}
@media(max-width:575px){ .brand{ font-size:1.05rem; } }

.site-status{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); }
.site-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 5px var(--jade-soft); }

.project-visual{ width:86%; height:78%; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:#0d1117; position:relative; z-index:1; box-shadow:0 16px 36px rgba(0,0,0,.32); }
.project-browserbar{ height:24px; border-bottom:1px solid var(--line); background:var(--panel-2); display:flex; align-items:center; gap:5px; padding:0 9px; }
.project-browserbar i{ width:5px; height:5px; border-radius:50%; background:var(--muted-2); }
.project-browserbody{ height:calc(100% - 24px); padding:14px; position:relative; overflow:hidden; }
.pv-brand{ width:42%; height:8px; border-radius:100px; background:var(--jade); opacity:.85; margin-bottom:10px; }
.pv-line{ height:5px; border-radius:100px; background:var(--line-strong); margin-bottom:6px; }
.pv-line.lg{ width:80%; height:8px; }
.pv-line.md{ width:60%; }
.pv-line.sm{ width:42%; }
.pv-cta{ width:62px; height:17px; background:var(--jade); border-radius:3px; margin-top:11px; }
.pv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:13px; }
.pv-grid span{ height:40px; border-radius:3px; background:linear-gradient(145deg,var(--jade-soft),var(--violet-soft)); border:1px solid var(--line); }
.project-steel .pv-brand{ background:#c7a86f; }
.project-baschi .pv-brand{ background:var(--violet); }
.project-sea .pv-brand{ background:#b1c2ad; }
.project-laundry .pv-brand{ background:#7cb5e8; }
.project-wash .pv-brand{ background:#e5b85c; }
.project-ballet .pv-brand{ background:#d09ab4; }
.project-tagline{ position:absolute; right:12px; bottom:10px; font-family:'IBM Plex Mono',monospace; font-size:.58rem; color:var(--muted-2); }

.external-badge{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted); }
.external-badge::before{ content:'↗'; color:var(--jade); }

.proof-source{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border:1px solid var(--line); background:var(--panel); border-radius:8px; margin-top:26px; }
.proof-source p{ margin:0; color:var(--muted); font-size:.84rem; }

.contact-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.contact-meta{ margin-top:22px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); }
.contact-meta span{ display:inline-flex; align-items:center; gap:7px; }
.contact-meta i{ width:5px; height:5px; border-radius:50%; background:var(--jade); display:inline-block; }
.social-links{ display:flex; gap:18px; flex-wrap:wrap; }
.social-links a{ font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--muted); }
.social-links a:hover{ color:var(--text); }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* ---------- HERO ---------- */
.hero{ min-height:100vh; display:flex; align-items:center;}
.hero h1{ font-size:clamp(2.3rem,4.6vw,3.6rem); line-height:1.14; margin-bottom:24px; }
.hero h1 span{ color:var(--jade); }
.hero-sub{ font-size:1.05rem; color:var(--muted); max-width:480px; line-height:1.75; margin-bottom:34px; }
.cred-strip{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--muted-2);
  display:flex; flex-wrap:wrap; gap:8px 22px;
}
.cred-strip b{ color:var(--text); font-weight:500; }

/* ---- device inspector (signature element) ---- */
.inspector{
  border:1px solid var(--line-strong); border-radius:10px; background:var(--panel);
  padding:34px 26px 26px; position:relative; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}
.inspector-tag{
  position:absolute; top:16px; right:16px;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--violet);
  border:1px solid rgba(141,130,214,.35); background:var(--violet-soft);
  padding:4px 10px; border-radius:100px; display:flex; align-items:center; gap:6px;
}
.inspector-tag .dim-dot{ width:5px;height:5px;border-radius:50%; background:var(--violet); }
.device-stage{ display:flex; justify-content:center; padding:20px 0 6px; }

/* Fixed-size outer frame — this never changes shape.
   Only .device-viewport inside it resizes, like a devtools responsive-mode canvas. */
.device-shell{
  width:100%; max-width:420px; height:296px;
  border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--ink);
  display:flex; flex-direction:column;
}
.device-bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:var(--panel-2); border-bottom:1px solid var(--line); flex-shrink:0; }
.device-bar .dot{ width:7px;height:7px;border-radius:50%; background:var(--muted-2); flex-shrink:0; }
.device-url{ margin-left:8px; font-family:'IBM Plex Mono',monospace; font-size:.62rem; color:var(--muted-2); }

/* the "canvas" — fixed size, faint dot grid like a design-tool artboard area */
.device-canvas{
  flex:1; display:flex; align-items:center; justify-content:center; padding:16px;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size:14px 14px;
}
.device-viewport{
  width:100%; height:100%; max-width:100%;
  transition:width .9s cubic-bezier(.65,0,.35,1);
  border:1px solid var(--line-strong); border-radius:4px; overflow:hidden;
  background:var(--ink); box-shadow:0 12px 30px -12px rgba(0,0,0,.55);
}
.device-viewport.tablet{ width:68%; }
.device-viewport.mobile{ width:38%; }

.device-body{ padding:16px; height:100%; overflow:hidden; }
.device-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.device-logo{ width:20px; height:8px; background:var(--jade); border-radius:2px; }
.device-links{ display:flex; gap:6px; }
.device-links i{ width:16px; height:5px; border-radius:2px; background:var(--line-strong); display:block; }
.device-viewport.mobile .device-links{ display:none; }
.device-viewport.mobile .device-burger{ display:flex !important; }
.device-burger{ display:none; flex-direction:column; gap:2px; }
.device-burger i{ width:14px; height:2px; background:var(--muted); display:block; }
.device-hbar{ height:9px; border-radius:2px; background:var(--line-strong); margin-bottom:8px; }
.device-hbar.w60{ width:60%; }
.device-hbar.w40{ width:40%; }
.device-cta{ width:44px; height:14px; border-radius:3px; background:var(--jade); margin:12px 0 16px; }
.device-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; transition:.9s ease; }
.device-viewport.tablet .device-grid{ grid-template-columns:repeat(2,1fr); }
.device-viewport.mobile .device-grid{ grid-template-columns:1fr; }
.device-tile{ aspect-ratio:1.3; border-radius:3px; background:linear-gradient(135deg,var(--jade-soft),var(--violet-soft)); border:1px solid var(--line); }
.guides{ display:flex; justify-content:center; margin-top:18px; }
.guide-label{
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted);
  border-left:1px dashed var(--line-strong); border-right:1px dashed var(--line-strong);
  padding:6px 14px; display:flex; align-items:center; gap:10px;
}
.guide-label b{ color:var(--jade); font-weight:500; }

/* ---------- MARQUEE-LIKE STAT ROW UNDER HERO ---------- */
.value-strip{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- CARDS ---------- */
.value-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:28px 24px; height:100%; transition:.25s ease;
}
.value-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.value-icon{
  width:38px; height:38px; border-radius:6px; background:var(--jade-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--jade);
}
.value-card h3{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin-bottom:10px; }
.value-card p{ color:var(--muted); font-size:.9rem; line-height:1.65; margin:0; }

/* ---------- PROJECT / SHOWCASE TILES ---------- */
.proj-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; height:100%; transition:.25s ease; }
.proj-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.proj-shot{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--panel-3),var(--panel-2));
  display:flex; align-items:center; justify-content:center;
}
.proj-shot::before{
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px; opacity:.5;
}
.proj-mono{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; color:var(--line-strong); position:relative; z-index:1; letter-spacing:.05em; }
.proj-body{ padding:20px 22px 22px; }
.proj-body h3{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin-bottom:4px; }
.proj-meta{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--muted-2); margin-bottom:12px; display:flex; gap:10px; flex-wrap:wrap;}
.proj-meta span{ color:var(--muted); }
.proj-note{ color:var(--muted); font-size:.85rem; font-style:italic; line-height:1.6; margin-bottom:14px; }
.proj-link{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--jade); display:inline-flex; align-items:center; gap:6px; }
.tag-fe{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:.65rem; color:var(--violet);
  background:rgba(10,13,18,.7); border:1px solid rgba(141,130,214,.35); padding:4px 9px; border-radius:100px;
}

/* ---------- SERVICES ---------- */
.svc-list{ list-style:none; padding:0; margin:0; }
.svc-list li{
  display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.svc-list li:last-child{ border-bottom:none; }
.svc-list b{ color:var(--jade); font-family:'IBM Plex Mono',monospace; font-size:.75rem; }

/* ---------- PROOF ---------- */
.proof-stat{ text-align:center; }
.proof-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; color:var(--text); }
.proof-num.violet{ color:var(--violet); }
.proof-label{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; margin-top:4px; }
.stars{ color:var(--violet); font-size:1rem; letter-spacing:2px; }
.testi-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:26px 24px; height:100%; }
.testi-quote{ font-size:.92rem; line-height:1.75; color:var(--text); margin-bottom:18px; }
.testi-quote::before{ content:'"'; color:var(--jade); font-family:'Space Grotesk',sans-serif; font-size:1.4rem; }
.testi-who{ font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--muted); }

/* ---------- ABOUT ---------- */
.avatar-box{
  width:100%; aspect-ratio:1; border-radius:10px; border:1px solid var(--line-strong);
  background:linear-gradient(150deg,var(--panel-3),var(--panel));
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
}
.avatar-box span.mono{ color:var(--muted-2); font-size:.72rem; }
.avatar-init{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; color:var(--line-strong); }
.about-facts{ list-style:none; padding:0; margin:0; }
.about-facts li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--muted); }
.about-facts li:last-child{ border-bottom:none; }
.about-facts li::before{ content:'—'; color:var(--jade); flex-shrink:0; }
.about-facts li b{ color:var(--text); font-weight:500; }

/* ---------- PROCESS ---------- */
.step-row{ display:flex; gap:22px; padding:26px 0; border-bottom:1px solid var(--line); }
.step-row:last-child{ border-bottom:none; }
.step-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; color:var(--jade); width:44px; flex-shrink:0; }
.step-row h3{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin-bottom:6px; }
.step-row p{ color:var(--muted); font-size:.9rem; margin:0; max-width:480px; }

/* ---------- STACK ---------- */
.stack-row{ display:flex; flex-wrap:wrap; gap:10px; }
.stack-chip{
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; padding:8px 14px; border-radius:5px;
  border:1px solid var(--line-strong); color:var(--text);
}
.stack-chip.secondary{ color:var(--muted); border-color:var(--line); }

/* ---------- ENGAGEMENT ---------- */
.eng-card{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:30px 26px; height:100%; }
.eng-card.featured{ border-color:var(--jade); background:linear-gradient(180deg,var(--panel-3),var(--panel)); }
.eng-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--jade); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; display:block; }
.eng-card h3{ font-family:'Space Grotesk',sans-serif; font-size:1.15rem; margin-bottom:10px; }
.eng-card p{ color:var(--muted); font-size:.9rem; line-height:1.65; }

/* ---------- FINAL CTA ---------- */
.final-cta{
  border:1px solid var(--line-strong); border-radius:14px; padding:70px 40px; text-align:center;
  background:radial-gradient(ellipse at 50% 0%, rgba(79,169,138,.08), transparent 60%);
}
.final-cta h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px; }
.final-cta p{ color:var(--muted); max-width:520px; margin:0 auto 32px; line-height:1.7; }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--line); padding:36px 0; }
.footer-links a{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--muted); margin-right:26px; }
.footer-links a:hover{ color:var(--text); }
.footer-copy{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--muted-2); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--jade); outline-offset:3px; }