:root{
  --bg:#0B1512;
  --panel:#101E19;
  --card:#0F1D18;
  --ink:#F3F1E7;
  --muted:#93A79D;
  --line:rgba(243,241,231,0.10);
  --accent:#34E5A6;
  --accent-2:#FFB648;
  --radius:6px;
  color-scheme: dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(72px + env(safe-area-inset-top,0px));}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(52,229,166,0.10), transparent 60%),
    radial-gradient(700px 400px at -5% 20%, rgba(255,182,72,0.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif; margin:0; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; position:relative;}
.eyebrow{color:var(--accent-2); font-weight:600; font-size:0.82rem; margin-bottom:14px; font-family:'JetBrains Mono',monospace; letter-spacing:0.04em;}
.eyebrow-gold{color:var(--accent-2);}
.testi-sub{color:var(--muted); font-size:0.9rem; font-family:'JetBrains Mono',monospace;}
.chip{display:inline-flex; padding:7px 14px; border:1px solid var(--line); border-radius:999px; font-size:0.82rem; color:var(--muted); margin-bottom:20px; font-family:'JetBrains Mono',monospace;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* NAV */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(11,21,18,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
  transition:box-shadow .2s ease;
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.1rem; text-decoration:none;}
.brand{min-width:0;}
.brand .mark{width:28px;height:28px;flex:0 0 auto; color:var(--accent);}
.brand-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-links{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:0.94rem;}
.nav-links a{text-decoration:none; opacity:0.8;}
.nav-links a:hover{opacity:1; color:var(--accent);}
.nav-links-mobile-only{display:none;}
.nav-right{display:flex; align-items:center; gap:16px;}
.phone-link{font-size:0.94rem; text-decoration:none; white-space:nowrap; font-family:'JetBrains Mono',monospace;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  font-size:0.9rem; font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn-primary{background:var(--accent); color:#06120D;}
.btn-primary:hover{transform:translateY(-2px); background:#4EF0B8;}
.btn-outline{background:transparent; border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  align-items:center; width:44px; height:44px; margin-right:-8px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-right{flex:0 0 auto;}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* HERO */
.hero{position:relative; padding:110px 0 90px; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(600px 400px at 68% 45%, rgba(52,229,166,0.10), transparent 70%);}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center;}
.hero-copy{max-width:640px;}
.hero-visual{position:relative; height:460px;}
#heroCanvas{width:100%; height:100%; display:block;}
.hero h1{font-size:clamp(2.3rem, 5vw, 3.7rem); line-height:1.08;}
.hero .hl{position:relative; display:inline-block; color:var(--accent);}
.scribble-underline{position:absolute; left:0; bottom:-10px; width:100%; height:16px;}
.hero p.lede{margin:26px 0 32px; font-size:1.12rem; color:var(--muted); max-width:46ch;}
.hero-ctas{display:flex; gap:16px; align-items:center; flex-wrap:wrap; position:relative;}
.scribble-arrow{width:70px; height:auto; color:var(--accent-2); margin-left:-4px;}

/* SECTION HEADERS */
section{padding:88px 0; position:relative; z-index:1;}
.sec-head{max-width:640px; margin-bottom:44px;}
.sec-head h2{font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.15;}
.sec-head p{color:var(--muted); margin-top:14px; font-size:1.02rem;}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.service{padding:30px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); transition:border-color .2s ease, transform .2s ease;}
.service:hover{border-color:rgba(52,229,166,0.4); transform:translateY(-4px);}
.badge{width:52px; height:52px; margin-bottom:16px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(52,229,166,0.12);}
.badge svg{width:26px; height:26px; color:var(--accent);}
.badge.amber{background:rgba(255,182,72,0.12);}
.badge.amber svg{color:var(--accent-2);}
.service .tag{font-size:0.76rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.06em; font-family:'JetBrains Mono',monospace;}
.service h3{font-size:1.28rem; margin:12px 0 10px;}
.service p{color:var(--muted); margin:0 0 16px; font-size:0.96rem;}
.service ul{margin:0 0 20px; padding-left:0; list-style:none; font-size:0.92rem;}
.service li{padding-left:20px; position:relative; margin-bottom:8px; color:var(--ink);}
.service li::before{content:"—"; position:absolute; left:0; color:var(--accent-2);}
.service a.link{font-size:0.92rem; font-weight:600; color:var(--accent); text-decoration:none;}

/* TESTIMONIALS */
.testi-head{display:flex; align-items:baseline; gap:14px; margin-bottom:20px; flex-wrap:wrap;}
.stars{color:var(--accent-2); letter-spacing:2px;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px;}
.testi{background:var(--card); border:1px solid var(--line); padding:28px; border-radius:var(--radius);}
.quote-mark{width:36px; height:auto; margin-bottom:12px;}
.testi p{font-size:0.98rem; margin:0 0 18px; color:var(--ink);}
.testi .who{font-size:0.85rem; color:var(--muted); font-family:'JetBrains Mono',monospace;}
.testi .who b{color:var(--ink); font-family:'Inter',sans-serif;}

/* PRICING */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tier{padding:32px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card);}
.tier-hl{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 20px 40px -20px rgba(52,229,166,0.35);}
.tier .num{font-family:'JetBrains Mono',monospace; color:var(--accent-2); font-size:0.85rem;}
.tier h3{font-size:1.25rem; margin:8px 0 6px;}
.tier .desc{color:var(--muted); font-size:0.92rem; margin-bottom:18px;}
.tier .price{font-family:'Space Grotesk',sans-serif; font-size:1.8rem; margin-bottom:2px; color:var(--accent);}
.tier .price span{font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--muted); font-weight:400;}
.tier .rev-note{font-size:0.82rem; color:var(--muted); margin-bottom:18px;}
.tier ul{list-style:none; padding:0; margin:0 0 22px; font-size:0.9rem;}
.tier li{padding-left:18px; position:relative; margin-bottom:9px;}
.tier li::before{content:"—"; position:absolute; left:0; color:var(--accent-2);}
.tier .link{color:var(--accent); font-size:0.9rem; font-weight:600; text-decoration:none;}
.pricing-note{margin-top:26px; color:var(--muted); font-size:0.92rem; max-width:70ch;}

/* ABOUT */
.about .wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center;}
.about-doodle{max-width:300px; margin:0 auto;}
.about h2{font-size:clamp(1.7rem,2.8vw,2.3rem); margin-bottom:18px;}
.about p{color:var(--muted); margin-bottom:16px; max-width:60ch;}
.facts{display:flex; gap:28px; margin-top:24px; flex-wrap:wrap;}
.facts div{font-size:0.85rem; color:var(--muted);}
.facts b{display:block; color:var(--accent); font-family:'Space Grotesk',sans-serif; font-size:1.1rem;}

/* CONTACT */
.contact{background:linear-gradient(160deg, #123024, var(--bg) 70%); border-top:1px solid var(--line);}
.contact .wrap{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;}
.contact-links{display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.contact-links a{text-decoration:none; font-size:1.05rem; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace;}
.contact-card{background:rgba(255,255,255,0.03); border:1px solid var(--line); padding:28px; border-radius:var(--radius);}
.contact-card h3{font-size:1.1rem; margin-bottom:10px;}
.contact-card p{color:var(--muted); font-size:0.92rem; margin-bottom:18px;}

footer{padding:40px 0; border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:0.84rem; color:var(--muted);}
footer .foot-links{display:flex; gap:20px; list-style:none; padding:0; margin:0;}
footer .foot-links a{text-decoration:none; color:var(--muted);}
footer .foot-links a:hover{color:var(--accent);}

/* ============ RESPONSIVE ============ */
@media (min-width:1441px){ .wrap{max-width:1280px;} .hero h1{font-size:3.9rem;} }

@media (max-width:1100px){
  .wrap{padding:0 20px;}
  .hero-visual{height:380px;}
}

@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{max-height:480px; padding-bottom:6px;}
  .nav-links li{border-top:1px solid var(--line);}
  .nav-links a{display:block; padding:16px 24px;}
  .nav-links li.nav-links-mobile-only{border-top:0;}
  .nav-links .btn{
    display:flex; justify-content:center; text-align:center;
    margin:10px 24px 14px; width:calc(100% - 48px);
    padding:14px 20px; min-height:48px; opacity:1; font-size:0.95rem;
  }
  .nav-links .btn-primary,
  .nav-links .btn-primary:hover{color:#06120D; opacity:1;}
  .nav-links-mobile-only{display:block;}
  .nav-right{gap:8px;}
  .nav-right .phone-link{display:none;}
  .nav-right .btn{padding:9px 16px; font-size:0.85rem;}
  .menu-toggle{display:flex;}

  .about .wrap, .contact .wrap{grid-template-columns:1fr;}
  .hero{padding:64px 0 48px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; height:280px; max-width:340px; margin:0 auto;}
  .hero-bg{position:static;}
  .about-doodle{max-width:240px;}

  section{padding:60px 0;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .service:last-child{grid-column:1 / -1;}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid .testi:last-child{grid-column:1 / -1;}
  .pricing-grid{grid-template-columns:1fr;}
}

@media (max-width:600px){
  .wrap{padding:0 18px;}
  nav.wrap{height:64px;}
  .brand{font-size:1.02rem;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-ctas .btn{justify-content:center; text-align:center; min-height:50px; font-size:0.95rem;}
  .scribble-arrow{display:none;}
  .contact-card{padding:22px;}
  .contact-card .btn{display:flex; width:100%; justify-content:center; text-align:center; min-height:50px; font-size:0.95rem;}
  .contact-links a{font-size:0.95rem; overflow-wrap:anywhere;}
  .services-grid{grid-template-columns:1fr;}
  .service:last-child{grid-column:auto;}
  .testi-grid{grid-template-columns:1fr;}
  .testi-grid .testi:last-child{grid-column:auto;}
  footer .wrap{flex-direction:column; align-items:flex-start;}
}

@media (max-width:520px){
  .nav-right .btn{display:none;}
  .brand{font-size:1rem;}
}

@media (max-width:380px){
  .hero h1{font-size:1.95rem;}
  .sec-head h2{font-size:1.4rem;}
  .brand{font-size:0.92rem; gap:8px;}
  .btn{padding:11px 16px; font-size:0.88rem;}
  .tier .price{font-size:1.5rem;}
}