@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* 60/30/10 RULE:
   60% = Dark backgrounds  (#0A0A0A, #111111, #121212)
   30% = Grey/navy tones   (#1A1E23, #1E2228, #2A2E35)
   10% = Lime green        (buttons + key highlights ONLY)
*/
:root {
  --ink:        #0A0A0A;
  --ink-2:      #111111;
  --ink-3:      #121212;
  --steel:      #1A1E23;
  --mid:        #1E2228;
  --dim:        #2A2E35;
  --border:     rgba(255,255,255,0.07);
  --lime:       #C1FF22;
  --lime-soft:  #A3E635;
  --lime-dim:   rgba(193,255,34,0.07);
  --ember:      #FF5733;
  --text-h:     #EAEAEA;
  --text-p:     #CFCFCF;
  --text-m:     #8A8F98;
  --cream:      #EAEAEA;
  --muted:      #8A8F98;
  --font-head:  'Syne', sans-serif;
  --font-body:  'Plus Jakarta Sans', sans-serif;
  --ease-out:   cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--ink);color:var(--text-p);font-family:var(--font-body);overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;}

/* ── NAV CLEARANCE — prevents hero content hiding behind fixed nav ── */
:root { --nav-h: 88px; }
.page-hero,
#hero,
#contact-hero { padding-top: calc(var(--nav-h) + 60px) !important; }
@media(max-width:768px){
  :root { --nav-h: 64px; }
  .page-hero,
  #hero,
  #contact-hero { padding-top: calc(var(--nav-h) + 40px) !important; }
}

/* CURSOR */
#cur{width:8px;height:8px;background:var(--lime);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .15s,width .3s,height .3s;mix-blend-mode:difference;}
#cur-ring{width:40px;height:40px;border:1.5px solid rgba(193,255,34,.3);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .18s ease;}
body:has(a:hover) #cur,body:has(button:hover) #cur{width:20px;height:20px;}
body:has(a:hover) #cur-ring,body:has(button:hover) #cur-ring{width:60px;height:60px;border-color:var(--lime);}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:26px 64px;background:linear-gradient(180deg,rgba(10,10,10,.97) 0%,transparent 100%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.04);}
.nav-logo{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--text-h);text-decoration:none;letter-spacing:-.5px;display:flex;align-items:center;gap:4px;}
.nav-logo .dot{color:var(--lime);font-size:28px;line-height:.5;}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;}
.nav-links a{font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text-m);text-decoration:none;position:relative;padding-bottom:4px;transition:color .25s;}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--lime-soft);transition:width .3s var(--ease-out);}
.nav-links a:hover,.nav-links a.active{color:var(--text-h);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.nav-btn{background:var(--lime);color:var(--ink);padding:10px 24px;border-radius:3px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.5px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 0 16px rgba(193,255,34,.3);}
.nav-btn:hover{transform:translateY(-2px);background:var(--lime-soft);box-shadow:0 0 28px rgba(163,230,53,.5);}

/* PAGE TRANSITION */
.page-mask{position:fixed;inset:0;background:var(--lime);z-index:1000;transform-origin:bottom;transform:scaleY(0);pointer-events:none;}

/* SECTION */
.section{padding:120px 64px;position:relative;}
.s-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--lime-soft);margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.s-label::before{content:'';width:24px;height:1px;background:var(--lime-soft);display:block;}
.s-title{font-family:var(--font-head);font-size:clamp(36px,5.5vw,70px);font-weight:800;line-height:1.0;letter-spacing:-2px;color:var(--text-h);}

/* REVEAL */
[data-reveal]{opacity:0;transform:translateY(48px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal="left"]{transform:translateX(-48px);}
[data-reveal="left"].in{transform:none;}
[data-reveal="right"]{transform:translateX(48px);}
[data-reveal="right"].in{transform:none;}
[data-reveal="scale"]{transform:scale(.93);}
[data-reveal="scale"].in{transform:none;}
[data-delay="1"]{transition-delay:.1s;}
[data-delay="2"]{transition-delay:.2s;}
[data-delay="3"]{transition-delay:.3s;}
[data-delay="4"]{transition-delay:.4s;}
[data-delay="5"]{transition-delay:.5s;}
[data-delay="6"]{transition-delay:.6s;}

/* TICKER — dark bg, soft lime text (not full neon) */
.ticker{background:var(--ink-3);border-top:1px solid rgba(163,230,53,.12);border-bottom:1px solid rgba(163,230,53,.12);color:var(--lime-soft);padding:12px 0;overflow:hidden;white-space:nowrap;}
.ticker-track{display:inline-flex;animation:tickRoll 30s linear infinite;}
.t-item{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:0 44px;display:flex;align-items:center;gap:14px;}
.t-star{opacity:.3;}
@keyframes tickRoll{to{transform:translateX(-50%);}}

/* FOOTER */
footer{background:var(--steel);border-top:1px solid var(--border);padding:64px;}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:64px;margin-bottom:56px;flex-wrap:wrap;}
.foot-logo{font-family:var(--font-head);font-weight:800;font-size:22px;color:var(--text-h);}
.foot-logo span{color:var(--lime);}
.foot-tagline{font-size:13px;color:var(--text-m);margin-top:8px;line-height:1.6;}
.foot-cols{display:flex;gap:72px;}
.foot-col h4{font-family:var(--font-head);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-m);margin-bottom:20px;}
.foot-col a{display:block;font-size:13px;color:rgba(207,207,207,.5);text-decoration:none;margin-bottom:10px;transition:color .2s;}
.foot-col a:hover{color:var(--lime-soft);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;border-top:1px solid var(--border);}
.foot-copy{font-size:12px;color:var(--text-m);}
.foot-socials{display:flex;gap:10px;}
.soc-btn{width:36px;height:36px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text-m);text-decoration:none;transition:all .25s;}
.soc-btn:hover{border-color:var(--lime-soft);color:var(--lime-soft);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.5px;padding:15px 34px;border-radius:3px;text-decoration:none;border:none;cursor:none;transition:all .25s;}
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 0 20px rgba(193,255,34,.35);}
.btn-primary:hover{background:var(--lime-soft);transform:translateY(-2px);box-shadow:0 0 36px rgba(193,255,34,.5),0 8px 24px rgba(0,0,0,.4);}
.btn-outline{border:1.5px solid rgba(255,255,255,.14);color:var(--text-p);background:transparent;}
.btn-outline:hover{border-color:var(--lime-soft);color:var(--lime-soft);}

/* NOISE */
body::after{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");pointer-events:none;z-index:9000;}

/* ══════════════════════════════════════
   HAMBURGER MENU
══════════════════════════════════════ */
.ham {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  cursor:none;
  z-index:600;
  background:none; border:none; padding:4px;
}
.ham span {
  display:block; height:2px; border-radius:2px;
  background:var(--text-h);
  transition:transform .35s var(--ease-out), opacity .25s, width .3s;
  transform-origin:center;
}
.ham span:nth-child(1){ width:24px; }
.ham span:nth-child(2){ width:18px; }
.ham span:nth-child(3){ width:24px; }
.ham.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:24px; }
.ham.open span:nth-child(2){ opacity:0; width:0; }
.ham.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:24px; }

/* MOBILE DRAWER */
.mobile-nav {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(10,10,10,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:490;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  transform:translateX(100%);
  transition:transform .45s var(--ease-out);
}
.mobile-nav.open {
  transform:translateX(0);
}
.mobile-nav a {
  font-family:var(--font-head);
  font-size:clamp(32px,8vw,52px);
  font-weight:800;
  letter-spacing:-1.5px;
  color:var(--text-h);
  text-decoration:none;
  padding:16px 0;
  width:80%;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .25s, padding-left .25s;
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav a:hover, .mobile-nav a.active { color:var(--lime); padding-left:12px; }
.mobile-nav a .mn-arrow { font-size:20px; opacity:0.4; }
.mobile-nav-footer {
  position:absolute; bottom:48px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.mobile-nav-footer a {
  font-size:14px !important; font-weight:500 !important;
  letter-spacing:1px !important; color:var(--text-m) !important;
  padding:0 !important; border:none !important; width:auto !important;
  font-family:var(--font-body) !important;
}
.mobile-nav-footer a:hover { color:var(--lime) !important; padding-left:0 !important; }
.mn-cta {
  background:var(--lime) !important;
  color:var(--ink) !important;
  padding:12px 28px !important;
  border-radius:3px;
  font-family:var(--font-head) !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:.5px !important;
  border:none !important;
  width:auto !important;
}

/* ══════════════════════════════════════
   MOBILE RESPONSIVE — ALL PAGES
══════════════════════════════════════ */
@media(max-width:768px){
  /* Nav */
  nav { padding:16px 20px; }
  .nav-links { display:none; }
  .nav-btn { display:none; }
  .ham { display:flex; }

  /* Sections */
  .section { padding:64px 20px; }

  /* Hero bottom */
  .hero-bottom { flex-direction:column; align-items:flex-start; gap:28px; }
  .hero-sub { max-width:100%; font-size:15px; }
  .hero-badge { display:none; }
  .scroll-cue { display:none; }

  /* Services bento */
  .services-bento,
  .what-header ~ .services-bento { grid-template-columns:1fr !important; }
  .svc:first-child { grid-column:span 1 !important; }
  .what-header { grid-template-columns:1fr !important; gap:16px; margin-bottom:40px; }

  /* Numbers */
  .num-grid { grid-template-columns:1fr 1fr !important; gap:2px; }
  .num-val { font-size:44px !important; }

  /* Industries */
  .ind-grid { gap:8px; }
  .ind-chip { font-size:13px; padding:10px 18px; }

  /* CTA band */
  #cta-band { padding:72px 20px; }
  .cta-title { letter-spacing:-2px !important; }
  .cta-actions { flex-direction:column; align-items:center; }

  /* Page hero */
  .page-hero { padding:calc(var(--nav-h) + 40px) 20px 56px; }
  .ph-title { letter-spacing:-2px !important; }

  /* Story / about grid */
  .story-grid,
  .about-grid,
  .founder-grid,
  .svcs-intro,
  .about-inner { grid-template-columns:1fr !important; gap:40px; }
  .story-float-1,.story-float-2 { display:none; }
  .founder-card { width:100% !important; }

  /* Values / tools */
  .values-grid { grid-template-columns:1fr !important; }
  .tools-grid { gap:2px; }
  .tool-block { min-width:calc(50% - 1px) !important; flex:none !important; width:calc(50% - 1px); }

  /* Stats */
  .stats-row,.num-grid { grid-template-columns:1fr 1fr !important; }
  .stat-val { font-size:40px !important; }

  /* Process steps */
  .proc-steps { grid-template-columns:1fr 1fr !important; gap:2px; }

  /* Services accordion */
  .svcs-intro { grid-template-columns:1fr !important; }
  .svc-row-head { padding:24px 0; }
  .svc-row-name { font-size:18px !important; }
  .svc-row-body.open { padding:0 0 28px 48px !important; }
  .svc-row-body-inner { grid-template-columns:1fr !important; gap:20px; }

  /* Packages */
  .pkg-grid { grid-template-columns:1fr !important; }
  #packages { padding:60px 20px; }

  /* Portfolio */
  .port-grid { grid-template-columns:1fr 1fr !important; }
  .port-card { aspect-ratio:3/4; }

  /* Testimonials */
  .testi-grid { grid-template-columns:1fr !important; }

  /* Contact hero split */
  #contact-hero { grid-template-columns:1fr !important; }
  .ch-left,.ch-right { padding:calc(var(--nav-h) + 32px) 20px 56px !important; }

  /* FAQ */
  .faq-grid { grid-template-columns:1fr !important; }
  .faq-q { font-size:15px !important; }

  /* Location */
  .loc-inner { grid-template-columns:1fr !important; gap:32px; }
  .loc-map { height:200px !important; }

  /* Footer */
  footer { padding:44px 20px; }
  .foot-top { flex-direction:column; gap:32px; }
  .foot-cols { flex-direction:column; gap:32px; }
  .foot-bottom { flex-direction:column; gap:12px; text-align:center; }

  /* Buttons */
  .btn { font-size:13px; padding:13px 24px; }
  .hero-ctas { flex-direction:column; width:100%; }
  .hero-ctas .btn { justify-content:center; }

  /* WhatsApp */
  .wa-sticky { bottom:20px; right:16px; }

  /* General */
  .s-title { letter-spacing:-1.5px !important; }
  .svc-cta-band,.work-cta { padding:64px 20px !important; }
  .svc-cta-title,.work-cta-title { letter-spacing:-1.5px !important; }
}

@media(max-width:480px){
  .port-grid { grid-template-columns:1fr !important; }
  .proc-steps { grid-template-columns:1fr !important; }
  .tool-block { min-width:100% !important; width:100%; }
  .num-grid,.stats-row { grid-template-columns:1fr 1fr !important; }
  .filter-bar { gap:6px; }
  .filter-btn { font-size:11px; padding:8px 14px; }
}