/* ============ TOKENS ============ */
:root{
  --black:#050505;
  --dark:#111111;
  --dark-2:#0b0c0e;
  --panel:#0e1012;
  --blue:#00bfff;
  --blue-deep:#0577a8;
  --blue-dim:#0a3a52;
  --blue-glow:#8fe4ff;
  --white:#f5f7f8;
  --grey:#83898f;
  --line:rgba(255,255,255,0.08);
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width: 900px){ body{ cursor:auto; } }
::selection{ background:var(--blue); color:#000; }

h1,h2,h3,h4{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.95;
}
.mono{ font-family:'JetBrains Mono', monospace; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:none; }
@media (max-width: 900px){ button{ cursor:pointer; } }

.container{ max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:700px){ .container{ padding:0 20px; } }

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--blue);
  box-shadow:0 0 8px var(--blue);
}

.section{ position:relative; padding:140px 0; }
@media (max-width:700px){ .section{ padding:88px 0; } }

.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(34px,5vw,58px); color:#fff; }
.section-head p{ color:var(--grey); font-size:17px; margin-top:18px; line-height:1.7; max-width:560px; }

/* ============ CUSTOM CURSOR ============ */
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
  will-change:transform;
}
#cursor-dot{ width:6px; height:6px; background:var(--blue); box-shadow:0 0 10px var(--blue); }
#cursor-ring{ width:34px; height:34px; border:1px solid rgba(0,191,255,0.5); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
#cursor-ring.hover{ width:60px; height:60px; background:rgba(0,191,255,0.08); border-color:var(--blue); }
@media (max-width:900px){ #cursor-dot,#cursor-ring{ display:none; } }

/* ============ PRELOADER ============ */
#preloader{
  position:fixed; inset:0; background:#050505; z-index:10000;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.done{ opacity:0; visibility:hidden; }
#preloader svg{ width:110px; overflow:visible; }
#preloader .bolt-path{
  fill:none; stroke:var(--blue); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  filter:drop-shadow(0 0 10px var(--blue));
  animation:draw 1.4s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
#preloader .pct{
  margin-top:26px; font-size:12px; letter-spacing:.3em; color:var(--grey);
}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:26px 0; transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 0; background:rgba(5,5,5,0.72); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:34px; height:auto; filter:drop-shadow(0 0 6px rgba(0,191,255,.5)); }
.brand span{ font-family:'Big Shoulders Display'; font-weight:800; font-size:20px; letter-spacing:.04em; text-transform:uppercase; }
.nav-links{ display:flex; gap:40px; align-items:center; }
.nav-links a{
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--grey);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--blue);
  box-shadow:0 0 8px var(--blue); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  border:1px solid var(--blue); color:var(--blue); padding:10px 22px; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; border-radius:2px; background:transparent;
  transition:background .3s, color .3s, box-shadow .3s;
}
.nav-cta:hover{ background:var(--blue); color:#000; box-shadow:0 0 24px rgba(0,191,255,.5); }
.menu-btn{ display:none; flex-direction:column; gap:5px; background:none; border:none; }
.menu-btn span{ width:24px; height:2px; background:#fff; }
@media (max-width:900px){
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
}

/* ============ HERO ============ */
#home{
  position:relative; height:100vh; min-height:700px; display:flex; align-items:center;
  overflow:hidden;
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(0,191,255,0.10), transparent 55%),
    linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.55) 55%, #050505 100%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:5; width:100%; }
.hero-logo{
  width:64px; margin-bottom:26px; filter:drop-shadow(0 0 20px rgba(0,191,255,.6));
  animation:flicker 5s infinite;
}
@keyframes flicker{
  0%,92%,100%{ opacity:1; } 93%{ opacity:.4; } 94%{ opacity:1; } 95%{ opacity:.3; } 96%{ opacity:1; }
}
h1.hero-title{
  font-size:clamp(44px, 7.4vw, 108px);
  color:#fff;
  max-width:1050px;
  text-shadow:0 0 40px rgba(0,191,255,.15);
}
h1.hero-title em{ font-style:normal; color:var(--blue); text-shadow:0 0 30px rgba(0,191,255,.7); }
.hero-sub{
  margin-top:28px; max-width:560px; color:var(--grey); font-size:17px; line-height:1.75;
}
.hero-actions{ margin-top:44px; display:flex; gap:20px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; border-radius:2px; font-weight:500;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-primary{ background:var(--blue); color:#020202; border:1px solid var(--blue); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 34px rgba(0,191,255,.45); }
.btn-ghost{ background:rgba(255,255,255,.02); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-2px); }
.btn svg{ width:16px; height:16px; }

.scroll-cue{
  position:absolute; bottom:36px; left:32px; display:flex; align-items:center; gap:12px; z-index:5;
  color:var(--grey); font-size:11px; letter-spacing:.25em;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(to bottom, var(--blue), transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:60%; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:pulse-line 2s infinite; }
@keyframes pulse-line{ 0%{ top:-60%; } 100%{ top:120%; } }

/* ============ GLASS CARD BASE ============ */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  border-radius:6px;
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, rgba(0,191,255,0), rgba(0,191,255,0));
  transition:background .4s;
  pointer-events:none;
}
.glass:hover::before{ background:linear-gradient(135deg, rgba(0,191,255,.5), rgba(0,191,255,0)); }

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============ ABOUT ============ */
#about .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
@media (max-width:900px){ #about .about-grid{ grid-template-columns:1fr; gap:40px; } }
.about-copy p{ color:var(--grey); font-size:16px; line-height:1.85; margin-bottom:20px; }
.about-copy p strong{ color:#fff; font-weight:500; }
.about-visual{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.about-visual canvas{ width:100%; height:100%; display:block; }
.about-frame{
  position:absolute; inset:16px; border:1px solid rgba(0,191,255,.35); pointer-events:none;
}
.about-frame::before, .about-frame::after{
  content:''; position:absolute; width:16px; height:16px; border:1.5px solid var(--blue);
}
.about-frame::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.about-frame::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
.rec-tag{
  position:absolute; top:30px; left:30px; z-index:2; display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.15em; color:var(--blue);
}
.rec-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue); animation:blink 1.4s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* ============ SERVICES ============ */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
@media (max-width:900px){ .services-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }
.service-card{
  background:var(--dark-2); padding:44px 34px; position:relative; transition:background .4s var(--ease);
}
.service-card:hover{ background:#101418; }
.service-num{ font-family:'JetBrains Mono'; font-size:12px; color:var(--blue); opacity:.7; }
.service-icon{ width:42px; height:42px; margin:22px 0 26px; color:var(--blue); }
.service-icon svg{ width:100%; height:100%; }
.service-card h3{ font-size:22px; color:#fff; margin-bottom:14px; letter-spacing:.01em; }
.service-card p{ color:var(--grey); font-size:14.5px; line-height:1.7; }
.service-card::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
  box-shadow:0 0 10px var(--blue);
}
.service-card:hover::after{ transform:scaleX(1); }

/* ============ WHY US ============ */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{ padding:32px 28px; transition:transform .4s var(--ease), border-color .4s; }
.why-card:hover{ transform:translateY(-6px); border-color:rgba(0,191,255,.4); }
.why-check{ width:30px; height:30px; border:1px solid var(--blue); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--blue); }
.why-check svg{ width:14px; height:14px; }
.why-card h4{ font-size:17px; color:#fff; text-transform:none; font-family:'Inter'; font-weight:600; margin-bottom:10px; }
.why-card p{ color:var(--grey); font-size:14px; line-height:1.6; }

/* ============ PIPELINE ============ */
#pipeline{ background:var(--dark-2); }
.pipeline-wrap{ position:relative; margin-top:20px; }
.pipeline-track{
  position:absolute; top:23px; left:0; right:0; height:2px; background:var(--line); z-index:0;
}
.pipeline-track .fill{
  position:absolute; top:0; left:0; height:100%; width:0%; background:var(--blue);
  box-shadow:0 0 12px var(--blue); transition:width 1.6s var(--ease);
}
.pipeline-steps{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:900px){ .pipeline-steps{ grid-template-columns:1fr 1fr; } .pipeline-track{ display:none; } }
@media (max-width:520px){ .pipeline-steps{ grid-template-columns:1fr; } }
.pipeline-step{ text-align:left; }
.pipeline-dot{
  width:14px; height:14px; border-radius:50%; background:var(--dark-2); border:2px solid var(--blue);
  margin-bottom:22px; box-shadow:0 0 0 4px var(--dark-2);
  transition:background .4s, box-shadow .4s;
}
.pipeline-step.active .pipeline-dot{ background:var(--blue); box-shadow:0 0 14px var(--blue), 0 0 0 4px var(--dark-2); }
.pipeline-step .step-num{ font-family:'JetBrains Mono'; font-size:12px; color:var(--blue); }
.pipeline-step h4{ font-size:16px; color:#fff; text-transform:none; font-family:'Inter'; font-weight:600; margin-top:8px; }

/* ============ INDUSTRIES ============ */
.industry-row{ display:flex; flex-wrap:wrap; gap:14px; }
.industry-chip{
  padding:14px 24px; border:1px solid var(--line); border-radius:30px; font-size:13.5px; color:var(--grey);
  transition:border-color .3s, color .3s, background .3s;
}
.industry-chip:hover{ border-color:var(--blue); color:#fff; background:rgba(0,191,255,.06); }

/* ============ STATS ============ */
#stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; text-align:center; }
@media (max-width:700px){ .stats-grid{ grid-template-columns:1fr 1fr; gap:36px; } }
.stat-num{ font-family:'Big Shoulders Display'; font-weight:900; font-size:clamp(36px,5vw,64px); color:var(--blue); text-shadow:0 0 30px rgba(0,191,255,.35); }
.stat-label{ margin-top:8px; font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--grey); }

/* ============ SHOWREEL ============ */
.reel-player{
  position:relative; aspect-ratio:16/8; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  margin-bottom:20px; cursor:none;
}
@media (max-width:900px){ .reel-player{ cursor:pointer; } }
.reel-player canvas{ width:100%; height:100%; display:block; }
.reel-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.play-btn{
  width:84px; height:84px; border-radius:50%; border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.3); backdrop-filter:blur(6px); transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.reel-player:hover .play-btn{ transform:scale(1.1); border-color:var(--blue); background:rgba(0,191,255,.12); }
.play-btn svg{ width:22px; height:22px; margin-left:4px; fill:#fff; }
.reel-tag{ position:absolute; bottom:20px; left:24px; font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.15em; color:#fff; }

.reel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .reel-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .reel-grid{ grid-template-columns:1fr; } }
.reel-thumb{ position:relative; aspect-ratio:16/10; border-radius:5px; overflow:hidden; border:1px solid var(--line); }
.reel-thumb canvas{ width:100%; height:100%; display:block; }
.reel-thumb .rt-info{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85)); opacity:0; transition:opacity .35s; }
.reel-thumb:hover .rt-info{ opacity:1; }
.reel-thumb .rt-info .split{ font-family:'JetBrains Mono'; font-size:10px; letter-spacing:.15em; color:var(--blue); margin-bottom:4px; }
.reel-thumb .rt-info h5{ font-size:14px; font-weight:500; color:#fff; font-family:'Inter'; }

/* ============ TESTIMONIALS ============ */
#testimonials{ background:var(--dark-2); }
.test-wrap{ position:relative; max-width:780px; margin:0 auto; text-align:center; min-height:220px; }
.test-slide{ position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none; }
.test-slide.active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.test-quote{ font-family:'Big Shoulders Display'; font-weight:600; font-size:clamp(22px,3.2vw,32px); color:#fff; text-transform:none; line-height:1.35; }
.test-role{ margin-top:22px; font-family:'JetBrains Mono'; font-size:12px; color:var(--blue); letter-spacing:.1em; }
.test-dots{ display:flex; justify-content:center; gap:10px; margin-top:50px; }
.test-dots button{ width:8px; height:8px; border-radius:50%; background:var(--line); border:none; transition:background .3s, transform .3s; }
.test-dots button.active{ background:var(--blue); transform:scale(1.3); box-shadow:0 0 8px var(--blue); }

/* ============ CTA ============ */
#cta{
  position:relative; text-align:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 100%, rgba(0,191,255,0.12), transparent 60%), var(--black);
  border-top:1px solid var(--line);
}
#cta h2{ font-size:clamp(32px,5.6vw,64px); color:#fff; max-width:820px; margin:0 auto; }
#cta .hero-actions{ justify-content:center; margin-top:40px; }

/* ============ FOOTER ============ */
footer{ padding:80px 0 34px; border-top:1px solid var(--line); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:50px; margin-bottom:70px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:40px; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand p{ color:var(--grey); font-size:14px; line-height:1.7; max-width:280px; }
.footer-col h5{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
.footer-col a, .footer-col p{ display:block; color:var(--grey); font-size:14px; margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:14px; margin-top:6px; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .3s, color .3s; }
.footer-social a:hover{ border-color:var(--blue); color:var(--blue); }
.footer-social svg{ width:15px; height:15px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line); font-size:12.5px; color:var(--grey); flex-wrap:wrap; gap:14px; }

/* utility */
.grow-1{ flex-grow:1; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:var(--blue-dim); border-radius:4px; }
/* ============ CONTACT FORM ============ */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
@media (max-width:900px){ .contact-wrap{ grid-template-columns:1fr; gap:44px; } }
.contact-info h3{ font-size:22px; color:#fff; margin-bottom:16px; text-transform:none; font-family:'Inter'; font-weight:600; }
.contact-info p{ color:var(--grey); font-size:15px; line-height:1.8; margin-bottom:10px; }
.contact-info .ci-block{ margin-bottom:32px; }
.contact-info .ci-label{ font-family:'JetBrains Mono'; font-size:11px; letter-spacing:.2em; color:var(--blue); margin-bottom:8px; }
.contact-form{ padding:40px; }
.form-row{ margin-bottom:20px; }
.form-row label{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:3px;
  padding:14px 16px; color:#fff; font-family:'Inter'; font-size:14px; transition:border-color .3s, background .3s;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--blue); background:rgba(0,191,255,0.04); }
.form-row textarea{ resize:vertical; min-height:130px; }
.contact-form button[type="submit"]{ width:100%; justify-content:center; border:none; }