:root{
  --background: hsl(150 14% 4%);
  --foreground: hsl(140 12% 92%);
  --card: hsl(150 11% 6.5%);
  --card-2: hsl(150 11% 8.5%);
  --primary: hsl(142 69% 55%);
  --primary-foreground: hsl(150 40% 6%);
  --muted: hsl(150 8% 11%);
  --muted-foreground: hsl(150 6% 58%);
  --accent-bg: hsl(150 10% 13%);
  --accent-fg: hsl(142 69% 60%);
  --border: hsl(150 8% 15%);
  --border-soft: hsl(150 8% 12%);
  --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --display: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0; background:var(--background); color-scheme:dark;}
p{margin:0;}
a{color:var(--primary); text-decoration:none;}
a:hover{color:hsl(142 69% 65%);}
::selection{background:hsl(142 69% 55% / .25); color:var(--foreground);}
body{font-family:var(--sans); color:var(--foreground);}
.container{max-width:1152px; margin:0 auto; padding-left:clamp(20px,5vw,48px); padding-right:clamp(20px,5vw,48px);}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--primary); margin:0 0 14px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:6px; font-family:var(--sans); font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease;}
.btn-primary{background:var(--primary); color:var(--primary-foreground); box-shadow:0 10px 28px -10px hsl(142 69% 55% / .5);}
.btn-primary:hover{background:hsl(142 69% 49%); color:var(--primary-foreground); box-shadow:0 12px 32px -8px hsl(142 69% 55% / .65); transform:translateY(-1px);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--foreground);}
.btn-ghost:hover{background:var(--accent-bg); border-color:hsl(150 8% 24%); color:var(--foreground);}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--accent-bg); border:1px solid var(--border); color:var(--accent-fg); font-family:var(--mono); font-size:12px; white-space:nowrap;}
.card{background:var(--card); border:1px solid var(--border); border-radius:8px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.card:hover{border-color:hsl(142 69% 55% / .35); transform:translateY(-3px); box-shadow:0 20px 48px -24px hsl(150 14% 1% / .8);}
.nav-links a{color:var(--muted-foreground); text-decoration:none; font-size:14px; font-weight:500;}
.nav-links a:hover,.nav-links a.active{color:var(--foreground);}
.field-label{display:block; font-size:13px; font-weight:500; color:var(--foreground); margin:0 0 8px;}
.field-input{width:100%; background:var(--muted); border:1px solid var(--border); border-radius:6px; padding:11px 14px; font-family:var(--sans); font-size:14px; color:var(--foreground);}
.field-input::placeholder{color:var(--muted-foreground);}
.check{flex-shrink:0; margin-top:2px;}
.svc-row{display:flex; gap:10px; font-size:13.5px; color:var(--foreground); align-items:flex-start;}
.check-row{display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.6;}
.pill{display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--foreground); font-size:13.5px; font-weight:500; transition:border-color .2s ease, background .2s ease;}
.pill:hover{border-color:hsl(142 69% 55% / .4); background:var(--card-2);}
.section-alt{background:var(--card-2);}
.tech-cell{transition:background .2s ease;}
.tech-cell:hover{background:var(--muted) !important;}
.h1{font-family:var(--display); font-weight:700; letter-spacing:-.02em; text-wrap:pretty;}
.h2{font-family:var(--display); font-weight:700; letter-spacing:-.01em; text-wrap:pretty;}
.h3{font-family:var(--display); font-weight:700; color:var(--foreground);}
.body-lg{font-size:15.5px; line-height:1.75; color:var(--muted-foreground);}
.body-md{font-size:14.5px; line-height:1.7; color:var(--muted-foreground);}
.faq-item{border-top:1px solid var(--border); padding:24px 0;}
.faq-item:last-child{padding-bottom:0;}
.faq-q{font-family:var(--display); font-size:16px; font-weight:700; color:var(--foreground); margin:0 0 8px;}
.faq-a{font-size:14.5px; line-height:1.7; color:var(--muted-foreground); margin:0;}
.page-hero{padding:64px 0 56px; border-bottom:1px solid var(--border);}

.nav-toggle{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:40px; height:40px; flex-shrink:0; border-radius:6px; border:1px solid var(--border); background:var(--card); cursor:pointer; padding:0;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--foreground); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .nav-links{display:none !important; position:absolute; top:72px; left:0; right:0; flex-direction:column; align-items:stretch !important; gap:0 !important; background:hsl(150 14% 4% / .98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:8px clamp(20px,5vw,48px) 16px; box-shadow:0 24px 40px -20px hsl(150 14% 1% / .7);}
  .nav-links.is-open{display:flex !important;}
  .nav-links a{padding:13px 0; border-bottom:1px solid var(--border-soft); font-size:15px;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-toggle{display:flex;}
  .hero-grid{grid-template-columns:1fr !important;}
  .head-badge{display:none !important;}
  .services-grid{grid-template-columns:1fr !important;}
  .cols-2{grid-template-columns:1fr !important;}
}

.contact-bubble{position:fixed; bottom:22px; right:22px; z-index:150; display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:13px 20px 13px 15px; box-shadow:0 20px 50px -15px hsl(150 14% 1% / .85); cursor:pointer; font-family:var(--sans); animation:bubbleFloat 3.2s ease-in-out infinite;}
.contact-bubble:hover{border-color:hsl(142 69% 55% / .5); transform:translateY(-2px);}
.contact-bubble-emoji{font-size:19px; line-height:1;}
.contact-bubble-text{font-size:13.5px; font-weight:600; color:var(--foreground); white-space:nowrap;}
@keyframes bubbleFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
@media (max-width:600px){
  .contact-bubble-text{display:none;}
  .contact-bubble{padding:14px;}
}
.reveal{transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change:opacity,transform;}
.reveal-armed .reveal{opacity:0; transform:translateY(24px);}
.reveal-armed .reveal.is-visible{opacity:1; transform:translateY(0);}
.stagger > *:nth-child(1){transition-delay:0ms;}
.stagger > *:nth-child(2){transition-delay:70ms;}
.stagger > *:nth-child(3){transition-delay:140ms;}
.stagger > *:nth-child(4){transition-delay:210ms;}
.stagger > *:nth-child(5){transition-delay:280ms;}
.stagger > *:nth-child(6){transition-delay:350ms;}
.stagger > *:nth-child(7){transition-delay:420ms;}
.stagger > *:nth-child(8){transition-delay:490ms;}
.stagger > *:nth-child(9){transition-delay:560ms;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.hero-fade{opacity:0; animation:fadeUp .8s cubic-bezier(.16,1,.3,1) forwards;}
.hero-fade-1{animation-delay:.05s;}
.hero-fade-2{animation-delay:.15s;}
.hero-fade-3{animation-delay:.25s;}
.hero-fade-4{animation-delay:.35s;}
@keyframes blink{0%,49%{opacity:.85;} 50%,100%{opacity:0;}}
.cursor-blink{animation:blink 1.1s step-end infinite;}
@media (prefers-reduced-motion: reduce){
  .reveal,.hero-fade{transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;}
  .cursor-blink{animation:none !important;}
}

/* contact popup */
.modal-overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:hsl(150 14% 2% / 0); backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px); transition:background .25s ease, backdrop-filter .25s ease; pointer-events:none; visibility:hidden;}
.modal-overlay.is-open{background:hsl(150 14% 2% / .72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); pointer-events:auto; visibility:visible;}
.modal-card{position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px; max-width:420px; width:100%; padding:40px 32px 32px; text-align:center; box-shadow:0 40px 90px -20px hsl(150 14% 1% / .9); transform:translateY(24px) scale(.96); opacity:0; transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s cubic-bezier(.16,1,.3,1);}
.modal-overlay.is-open .modal-card{transform:translateY(0) scale(1); opacity:1;}
.modal-close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--muted); color:var(--muted-foreground); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; line-height:1; padding:0;}
.modal-close:hover{color:var(--foreground); border-color:hsl(150 8% 24%);}
@keyframes modalBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.modal-emoji{font-size:34px; margin-bottom:14px; animation:modalBounce 1.8s ease-in-out infinite;}
.modal-title{font-family:var(--display); font-size:21px; font-weight:700; color:var(--foreground); margin:0 0 14px; letter-spacing:-.01em;}
.modal-body{font-size:14.5px; line-height:1.65; color:var(--muted-foreground); margin:0 0 16px;}
.modal-lead{font-size:14.5px; line-height:1.65; color:var(--foreground); font-weight:600; margin:0 0 18px;}
.modal-email{width:100%; margin-bottom:16px;}
.modal-footer{font-size:13px; color:var(--muted-foreground); margin:0;}
@media (prefers-reduced-motion: reduce){
  .modal-overlay,.modal-card{transition:none !important;}
  .modal-emoji,.contact-bubble{animation:none !important;}
  .card,.pill,.btn{transition:none !important;}
}