/* =========================================================
   3LINE DIGITAL — Design tokens
   Palette sampled from the brand mark: black field, lime→green
   sweep, dissolving pixel fragments.
   ========================================================= */
:root{
  --bg:            #0a0b0a;
  --bg-soft:       #0e100e;
  --surface:       #14171490;
  --surface-solid: #14171a;
  --surface-2:     #191d19;
  --border:        #262b26;
  --border-soft:   #1c201c;

  --text:          #f2f4ef;
  --text-muted:    #9aa39a;
  --text-dim:      #616b61;

  --green-deep:    #0e4422;
  --green:         #3f9e2e;
  --green-mid:     #6bc23e;
  --green-bright:  #8fdc4f;
  --green-lime:    #cdeb70;

  --grad-line: linear-gradient(100deg, var(--green-deep) 0%, var(--green) 32%, var(--green-bright) 62%, var(--green-lime) 100%);
  --grad-line-soft: linear-gradient(100deg, rgba(14,68,34,.5) 0%, rgba(63,158,46,.5) 40%, rgba(205,235,112,.5) 100%);

  --font-display: 'Chakra Petch', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.22,.9,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  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{
  content:'';
  position:fixed; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 0);
  background-size:26px 26px;
  pointer-events:none;
  z-index:0;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  position:relative;
  z-index:1;
}
@media(max-width:720px){ .container{ padding:0 20px; } }

section{ position:relative; z-index:1; }

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-bright);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--grad-line);
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.08;
  color:var(--text);
}
h1{ font-size:clamp(38px,6vw,72px); font-weight:700; }
h2{ font-size:clamp(28px,4vw,44px); }
h3{ font-size:20px; }
p{ color:var(--text-muted); }
.lede{ font-size:19px; color:var(--text-muted); max-width:56ch; }

.grad-text{
  background:var(--grad-line);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:13.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--border);
  transition:transform .35s var(--ease), border-color .35s, background .35s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--grad-line);
  color:#08130a;
  border:none;
  font-weight:700;
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-ghost{
  background:transparent;
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--green); color:var(--green-bright); transform:translateY(-2px); }
.btn-ghost span, .btn-primary span{ display:inline-block; }

/* ---------- Nav ---------- */
header.site-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,11,10,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:42px; height:42px; border-radius:50%; }
.brand-name{ font-family:var(--font-display); font-size:18px; letter-spacing:.02em; font-weight:700; }
.brand-name b{ color:var(--green-bright); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:14px; color:var(--text-muted); position:relative;
  padding:4px 0; transition:color .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px;
  width:0; height:1.5px; background:var(--grad-line);
  transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); border-radius:8px; width:42px; height:38px; color:var(--text); font-size:18px; }
.nav-cta .btn-primary span.short{ display:none; }

@media(max-width:900px){
  .nav-links{
    position:fixed; top:73px; left:0; right:0;
    background:var(--bg-soft); border-bottom:1px solid var(--border-soft);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
  }
  .nav-links.open{ max-height:400px; }
  .nav-links a{ width:100%; padding:16px 24px; border-bottom:1px solid var(--border-soft); }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
  .nav-cta .btn-primary span.long{ display:none; }
}

/* ---------- Hero swoosh signature ---------- */
.swoosh-wrap{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.swoosh-wrap svg{ position:absolute; }

/* pixel dissolve motif */
.pixel-dissolve{ display:flex; gap:6px; align-items:flex-end; }
.pixel-dissolve span{
  display:block; background:var(--green-mid); border-radius:2px;
  animation:pxfade 2.4s ease-in-out infinite;
}
@keyframes pxfade{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .pixel-dissolve span{ animation:none; }
}

/* ---------- Cards / grids ---------- */
.card{
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;
  transition:border-color .35s, transform .35s var(--ease), background .35s;
}
.card:hover{ border-color:var(--green); transform:translateY(-4px); background:var(--surface-2); }

.grid{ display:grid; gap:22px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

/* ---------- Section spacing ---------- */
.section{ padding:110px 0; }
.section-sm{ padding:70px 0; }
@media(max-width:720px){ .section{ padding:72px 0; } .section-sm{ padding:52px 0; } }

.divider-line{
  width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ---------- Pillars (the "3 hat" signature) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.pillar{ background:var(--bg-soft); padding:38px 30px; position:relative; }
.pillar .num{ font-family:var(--font-mono); color:var(--text-dim); font-size:13px; letter-spacing:.1em; }
.pillar h3{ margin:14px 0 10px; }
.pillar .bar{ height:3px; width:38px; border-radius:2px; margin-bottom:18px; }
.pillar:nth-child(1) .bar{ background:var(--green-deep); }
.pillar:nth-child(2) .bar{ background:var(--green); }
.pillar:nth-child(3) .bar{ background:var(--green-lime); }
@media(max-width:800px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.stat b{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); display:block; }
.stat span{ font-size:13px; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:.03em; }
@media(max-width:800px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--border-soft); padding:64px 0 28px; background:var(--bg-soft); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ font-size:14px; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:18px; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a{ color:var(--text-muted); font-size:14.5px; transition:color .25s; }
.footer-grid a:hover{ color:var(--green-bright); }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--border-soft); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:13px; color:var(--text-dim); }
@media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:74px 0 60px; border-bottom:1px solid var(--border-soft); position:relative; }
.breadcrumb{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); margin-bottom:18px; }
.breadcrumb .cur{ color:var(--green-bright); }

/* ---------- Tag / chip ---------- */
.chip{
  display:inline-block; padding:6px 14px; border-radius:999px;
  border:1px solid var(--border); font-family:var(--font-mono);
  font-size:12px; color:var(--text-muted); letter-spacing:.03em;
}

/* ---------- Form ---------- */
.form-field{ margin-bottom:20px; }
.form-field label{ display:block; font-size:13px; font-family:var(--font-mono); color:var(--text-muted); margin-bottom:8px; letter-spacing:.03em; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--surface-solid); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 16px; color:var(--text); font-family:var(--font-body);
  font-size:15px; transition:border-color .25s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--green); }
.form-field textarea{ resize:vertical; min-height:130px; }

/* ---------- Misc ---------- */
.mono{ font-family:var(--font-mono); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;} .mt-56{margin-top:56px;}
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.badge-ref{
  position:absolute; top:18px; right:18px;
  font-family:var(--font-mono); font-size:11px; padding:5px 10px;
  border-radius:999px; border:1px solid var(--green-deep); color:var(--green-bright);
  background:rgba(63,158,46,.08);
}

.project-thumb{
  aspect-ratio:16/10; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border); position:relative; margin-bottom:18px;
  background:linear-gradient(135deg, #101210, #171c14);
  display:flex; align-items:center; justify-content:center;
}
.project-thumb .glyph{ font-family:var(--font-display); font-size:15px; color:var(--text-dim); letter-spacing:.08em; }

/* scroll to top visibility handled by JS */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:var(--surface-solid); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
  color:var(--green-bright); font-size:16px;
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform:translateY(-3px); border-color:var(--green); }