:root {
  --bg:#060808;
  --bg-alt:#0b1111;
  --gradient-1:linear-gradient(110deg,#00f5c9 0%,#00b897 40%,#007e70 70%,#00f5c9 100%);
  --gradient-2:linear-gradient(100deg,#1df9ff 0%,#04c2a7 55%,#038d80 100%);
  --glass:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --text:#f5f8f7;
  --muted:#a9b7b4;
  --accent:#00c9a7;
  --radius:18px;
  --transition:180ms cubic-bezier(.4,0,.2,1);
  --shadow:0 2px 8px -2px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.55);
}
* {box-sizing:border-box; margin:0; padding:0;}
html,body {height:100%; scroll-behavior:smooth;}
body {
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:radial-gradient(circle at 30% 20%,#06211d,#03110f 40%,#000 75%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Global typography */
h1,h2,h3 {font-weight:800; letter-spacing:-.02em; line-height:1.05;}
h1 {font-size:clamp(3.2rem,7vw,6.2rem);}
h2 {font-size:clamp(2.4rem,4.2vw,3.6rem);}
h3 {font-size:clamp(1.4rem,2vw,1.8rem);}
p {line-height:1.55; max-width:68ch;}
a {color:var(--accent); text-decoration:none;}
a:hover {text-decoration:underline;}

/* Navigation */
.nav-wrap {position:fixed; top:0; left:0; width:100%; z-index:1000; pointer-events:none;}
nav {
  max-width:1320px; margin:16px auto; padding:10px 22px; display:flex; align-items:center; gap:40px; backdrop-filter:blur(22px) saturate(160%);
  background:linear-gradient(145deg,rgba(0,35,30,0.65),rgba(0,25,20,0.4)); border:1px solid var(--border); border-radius:calc(var(--radius) + 6px);
  position:relative; box-shadow:var(--shadow); pointer-events:auto;
}
nav:before {content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 30% 20%,rgba(0,255,205,0.18),transparent 60%); mix-blend-mode:overlay; opacity:.6; pointer-events:none;}
.brand {display:flex; align-items:center; gap:14px; font-weight:700; font-size:1.1rem; letter-spacing:.04em;}
.brand img {height:42px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));}
.nav-links {margin-left:auto; display:flex; gap:34px; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;}
.nav-links a {position:relative; padding:10px 4px; color:var(--text); opacity:.82; transition:var(--transition);}
.nav-links a:after {content:''; position:absolute; left:0; bottom:4px; width:0; height:2px; background:var(--gradient-2); border-radius:2px; transition:width .4s cubic-bezier(.65,.05,.36,1);}
.nav-links a:hover {opacity:1;}
.nav-links a:hover:after {width:100%;}
.cta-btn {--btn-grad:linear-gradient(90deg,#00f5c9,#009b82 55%,#00d5b2); background:var(--btn-grad); color:#022a23; padding:12px 22px; font-weight:700; border-radius:999px; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; border:none; cursor:pointer; position:relative; overflow:hidden; box-shadow:0 4px 18px -4px rgba(0,255,199,.35);}    
.cta-btn:before {content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%); mix-blend-mode:overlay; opacity:0; transition:var(--transition);}    
.cta-btn:hover:before {opacity:1;}    
.cta-btn:hover {transform:translateY(-2px);}    

/* Hero */
header.hero {position:relative; display:flex; align-items:center; min-height:100svh; padding:180px clamp(1.5rem,6vw,8rem) 140px; overflow:hidden;}
.hero-inner {position:relative; max-width:1280px; margin:0 auto; width:100%; z-index:10;}
.eyebrow {display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--border); border-radius:999px; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; background:rgba(0,40,32,.35); backdrop-filter:blur(10px) saturate(140%); box-shadow:0 2px 6px -2px rgba(0,0,0,.5);}
.hero h1 {background:linear-gradient(90deg,#ffffff,#8efbe8 65%,#38c9b0); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 12px 40px rgba(0,0,0,.6);}
.hero-lede {margin-top:34px; font-size:clamp(1.15rem,1.6vw,1.5rem); color:var(--muted); max-width:720px; font-weight:400;}
.hero-actions {display:flex; gap:22px; margin-top:54px; flex-wrap:wrap;}
.outline-btn {--b:2px; position:relative; background:rgba(0,0,0,.35); border:var(--b) solid var(--accent); color:var(--text); padding:14px 26px; border-radius:999px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; overflow:hidden; cursor:pointer; transition:var(--transition);} 
.outline-btn:after {content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(0,245,201,.35),rgba(0,245,201,0)); opacity:0; transition:var(--transition);}    
.outline-btn:hover {background:rgba(0,50,40,.55); transform:translateY(-2px);}    
.outline-btn:hover:after {opacity:1;}    

/* Animated gradient strips */
.gradient-strips {position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.strip {position:absolute; top:-10%; left:-30%; width:180%; height:34%; background:var(--gradient-1); filter:brightness(1.05) saturate(120%) drop-shadow(0 8px 25px rgba(0,255,209,.18)); opacity:.24; transform:rotate(-32deg) translate3d(0,0,0); mix-blend-mode:screen; will-change:transform;}
.strip:nth-child(2){top:10%; opacity:.27; filter:brightness(1.15) saturate(150%);}
.strip:nth-child(3){top:30%; opacity:.2;}
.strip:nth-child(4){top:50%; opacity:.25;}
.strip:nth-child(5){top:70%; opacity:.18;}

/* Section base styling */
section {position:relative; padding:130px clamp(1.5rem,6vw,6rem);}
section.alt {background:linear-gradient(160deg,#040c0c,#071715);}
.section-head {margin-bottom:54px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.section-head p {color:var(--muted); font-size:1rem;}

/* Services grid */
.services-grid {display:grid; gap:38px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));}
.service-card {position:relative; padding:34px 30px 40px; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:linear-gradient(150deg,rgba(0,40,34,.55),rgba(0,20,16,.35)); backdrop-filter:blur(18px) saturate(160%); overflow:hidden; min-height:240px; display:flex; flex-direction:column; justify-content:space-between; gap:22px; opacity:0; transform:translateY(40px); transition:600ms cubic-bezier(.33,.05,.24,1);}
.service-card:before {content:''; position:absolute; inset:0; background:radial-gradient(circle at 28% 22%,rgba(0,255,205,.22),transparent 60%); opacity:.6; mix-blend-mode:overlay;}
.service-card h3 {background:linear-gradient(90deg,#fff,#a5fff1 70%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.service-card p {color:var(--muted); font-size:.95rem;}
.service-card.active {opacity:1; transform:translateY(0);}

/* Process / timeline */
.process-grid {display:grid; gap:48px; max-width:1200px; margin:0 auto; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.process-step {position:relative; padding:30px 28px 36px; border:1px solid var(--border); border-radius:calc(var(--radius) - 6px); background:linear-gradient(160deg,rgba(0,40,32,.5),rgba(0,25,20,.45)); backdrop-filter:blur(14px) saturate(150%); overflow:hidden;}
.process-step:before {content:attr(data-step); position:absolute; top:14px; right:16px; font-size:3.4rem; font-weight:800; line-height:.8; background:linear-gradient(90deg,#043c34,#00d6b5,#007e70); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.12;}
.process-step h4 {font-size:1.1rem; margin-bottom:10px; letter-spacing:.04em; font-weight:700;}
.process-step p {color:var(--muted); font-size:.92rem;}

/* Portfolio placeholder */
.work-grid {display:grid; gap:42px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.work-item {position:relative; aspect-ratio:16/11; border-radius:calc(var(--radius) - 4px); overflow:hidden; background:#061412; border:1px solid var(--border); cursor:pointer; isolation:isolate;}
.work-item:before {content:''; position:absolute; inset:0; background:linear-gradient(145deg,rgba(0,255,205,.08),rgba(0,255,205,0)); mix-blend-mode:overlay;}
.work-item .inner {position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; gap:6px; background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.05));}
.work-item h4 {font-size:1rem; font-weight:600; letter-spacing:.05em;}
.work-item span {color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;}
.work-item:hover {outline:1px solid #00f5c9; box-shadow:0 0 0 4px rgba(0,245,201,.15);}

/* Contact CTA */
.cta {text-align:center; max-width:860px; margin:0 auto;}
.cta h2 {margin-bottom:34px;}
.cta p {color:var(--muted); font-size:1.05rem; margin-inline:auto;}

/* Footer */
footer {position:relative; padding:80px clamp(1.5rem,6vw,6rem) 60px; background:#020504; margin-top:120px;}
.footer-grid {display:grid; gap:48px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:1240px; margin:0 auto;}
.footer-brand img {height:54px; width:auto; margin-bottom:18px;}
.footer-brand p {color:var(--muted); font-size:.85rem;}
.foot-col h5 {font-size:.85rem; letter-spacing:.12em; font-weight:700; text-transform:uppercase; margin-bottom:18px;}
.foot-col ul {list-style:none; display:grid; gap:10px;}
.foot-col a {color:var(--muted); font-size:.85rem; letter-spacing:.03em;}
.foot-col a:hover {color:var(--text);}    
.copyright {margin-top:58px; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:#5d6b69; text-align:center;}

/* Scroll reveal utility */
[data-reveal] {opacity:0; transform:translateY(50px); transition:800ms cubic-bezier(.33,.05,.24,1);}
[data-reveal].revealed {opacity:1; transform:translateY(0);}    

/* Media adjustments */
@media (max-width:900px){
  nav {gap:22px;}
  .nav-links {gap:20px;}
  header.hero {padding:160px 1.4rem 120px;}
  .hero-actions {flex-direction:column; align-items:flex-start;}

  /* Ensure gradient stripes hidden on all mobile/tablet widths */
  .gradient-strips {display:none !important;}
}
@media (max-width:640px){
  /* Hide extra brand text, simplify nav */
  .nav-links {display:none;}
  .brand img {height:38px;}
  .brand span {display:none;}
  nav {padding:8px 16px; gap:14px;}
  .cta-btn {padding:10px 18px; font-size:.7rem; letter-spacing:.12em;}

  /* Hero adjustments (updated spacing) */
  header.hero {padding:110px 1.05rem 40px; min-height:unset;} /* reduced bottom padding */

  /* Restore process numerals */
  .process-step:before {display:block;}

  /* Service cards tighter */
  .services-grid {gap:26px;}
  .service-card {padding:26px 22px 30px; min-height:unset;}
  .service-card h3 {font-size:1.15rem;}
  .service-card p {font-size:.9rem;}

  /* Process grid spacing */
  .process-grid {gap:34px;}
  .process-step {padding:26px 22px 30px;}
  .process-step h4 {font-size:1rem;}
  .process-step p {font-size:.85rem;}

  /* CTA adjustments */
  .cta p {font-size:.95rem;}

  /* Footer tweaks */
  footer {padding:70px 1.05rem 50px;}
  .footer-grid {gap:40px;}

  /* Reduce global section padding & heading sizes */
  section {padding:90px 1.05rem 80px;}
  section.alt {padding:90px 1.05rem 80px;}
  .section-head {margin-bottom:38px;}
  h2 {font-size:1.85rem; line-height:1.12;}
  .cta h2 {font-size:1.9rem;}

  /* Tone down heavy effects for perf */
  nav {backdrop-filter:blur(14px) saturate(140%);}
  .service-card, .process-step {backdrop-filter:blur(12px) saturate(140%);}  
  .service-card:before {background:radial-gradient(circle at 35% 25%,rgba(0,255,205,.18),transparent 60%);}  

  /* Hide large numeric watermark to reduce clutter */
  .process-step:before {display:none;}

  /* Improve tap targets / spacing */
  .cta-btn, .outline-btn {padding:14px 20px; font-size:.75rem; letter-spacing:.14em;}
  .hero-actions {gap:16px;}

  /* Safe-area adjustments for iOS notch */
  .nav-wrap {padding-top:env(safe-area-inset-top);}
  header.hero {padding-top:calc(110px + env(safe-area-inset-top));}

  /* Footer compress */
  footer {margin-top:90px;}
}

/* Focus visibility (accessibility) */
:where(a,button):focus-visible {outline:2px solid #00f5c9; outline-offset:3px; border-radius:6px;}