/* ============ TOKENS ============ */
:root{
  --bg: #07070c;
  --bg-alt: #0c0c14;
  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.09);
  --text: #ededf3;
  --text-dim: #9a9ab0;
  --text-dimmer: #6b6b82;
  --accent: #00f0ff;
  --accent-2: #7b5cff;
  --accent-3: #ff5cf0;
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--accent-3));
  --radius: 18px;
  --maxw: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{ font-family:'Space Grotesk', 'Inter', sans-serif; margin:0; letter-spacing: -0.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background: var(--accent); color:#000; }

.container{ max-width: var(--maxw); margin:0 auto; padding: 0 28px; }
.grad-text{
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ NOISE + CURSOR ============ */
.noise-overlay{
  position: fixed; inset:0; z-index: 2; pointer-events:none; opacity:0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 999;
  transform: translate(-50%,-50%);
  border-radius:50%;
}
.cursor-dot{ width:6px; height:6px; background: var(--accent); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,0.35); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s; }
.cursor-ring.hover{ width:56px; height:56px; border-color: var(--accent); }
@media (hover: none){ .cursor-dot,.cursor-ring{ display:none; } }

#bg-canvas{ position: fixed; inset:0; z-index:0; width:100%; height:100%; }

/* ============ NAV ============ */
.nav-wrap{ position: fixed; top:0; left:0; right:0; z-index: 100; }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 28px;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,7,12,0.7), rgba(7,7,12,0));
}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; }
.logo-mark{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background: var(--grad); color:#05050a; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.85rem;
}
.logo-text em{ color: var(--accent); font-style: normal; }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:.92rem; color: var(--text-dim); transition: color .2s; position:relative; }
.nav-links a:hover{ color: var(--text); }
.nav-cta{
  padding: 10px 20px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); color: var(--text) !important;
}
.nav-cta:hover{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); display:block; }

.lang-switch{ display:flex; gap:6px; margin-left: 18px; }
.lang-btn{
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.03em;
  padding:6px 11px; border-radius:999px; border:1px solid var(--border);
  background: var(--surface); color: var(--text-dimmer); transition: border-color .2s, color .2s, background .2s;
}
.lang-btn:hover{ color: var(--text); border-color: rgba(0,240,255,0.4); }
.lang-btn.active{ color: var(--text); border-color: var(--accent); background: rgba(0,240,255,0.1); }

/* ============ HERO ============ */
.hero{ position:relative; z-index:1; min-height: 100svh; display:flex; align-items:center; padding: 140px 0 80px; }
.hero-inner{ max-width: 880px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:.78rem;
  color: var(--text-dim); border:1px solid var(--border); padding:7px 14px; border-radius:999px;
  background: var(--surface); margin-bottom: 28px; letter-spacing: .03em;
}
.dot-live{ width:7px; height:7px; border-radius:50%; background: #00ff9d; box-shadow:0 0 10px #00ff9d; animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.hero-title{ font-size: clamp(2.4rem, 6.4vw, 5.2rem); font-weight:600; line-height: 1.04; }
.hero-sub{ font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: var(--text-dim); max-width: 640px; margin-top:26px; font-weight:300; }
.hero-actions{ display:flex; gap:16px; margin-top: 40px; flex-wrap: wrap; }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 30px; border-radius: 999px; font-size:.95rem; font-weight:500; overflow:hidden;
  transition: transform .3s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--grad); color:#05050a; font-weight:600; }
.btn-ghost{ border:1px solid var(--border); background: var(--surface); }
.btn-ghost:hover{ border-color: var(--accent); }

.hero-stats{ display:flex; gap:56px; margin-top: 76px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-num{ font-family:'Space Grotesk',sans-serif; font-size: 2.4rem; font-weight:600; color: var(--text); }
.stat-label{ font-size:.82rem; color: var(--text-dimmer); max-width: 160px; }

.scroll-cue{ position:absolute; bottom: 36px; left:50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color: var(--text-dimmer); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; }
.scroll-line{ width:1px; height:46px; background: linear-gradient(var(--accent), transparent); animation: scrollmove 1.8s infinite; }
@keyframes scrollmove{ 0%{ opacity:0; transform: scaleY(0); transform-origin: top;} 40%{opacity:1; transform: scaleY(1); transform-origin: top;} 100%{opacity:0; transform: scaleY(1); transform-origin: bottom;} }

/* ============ MARQUEE ============ */
.marquee-wrap{ position:relative; z-index:1; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding: 22px 0; background: var(--surface); overflow:hidden; }
.marquee-track{ display:flex; width:max-content; gap: 26px; animation: marquee 32s linear infinite; }
.marquee-track span{ font-family:'JetBrains Mono',monospace; font-size:.85rem; color: var(--text-dim); white-space:nowrap; }
.marquee-track .sep{ color: var(--accent); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ============ SECTION GENERIC ============ */
.section{ position:relative; z-index:1; padding: 130px 0; }
.section-alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02) 20%, rgba(255,255,255,0.02) 80%, transparent); }
.section-head{ max-width: 720px; margin-bottom: 64px; }
.tag{ font-family:'JetBrains Mono',monospace; font-size:.78rem; color: var(--accent); letter-spacing:.1em; }
.section-head h2{ font-size: clamp(1.9rem, 4vw, 3rem); font-weight:600; margin-top:16px; line-height:1.12; }
.section-desc{ color: var(--text-dim); margin-top: 18px; font-size:1.05rem; max-width: 560px; }

/* reveal animation base state */
[data-reveal]{ opacity:0; transform: translateY(28px); }

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items:start; }
.about-lead{ font-size:1.2rem; color: var(--text-dim); font-weight:300; line-height:1.7; }
.about-cards{ display:grid; gap:18px; }
.glass-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 28px; backdrop-filter: blur(10px); transition: border-color .3s, transform .3s var(--ease);
}
.glass-card:hover{ border-color: rgba(0,240,255,0.4); transform: translateY(-4px); }
.card-icon{ color: var(--accent); font-size:1.1rem; }
.glass-card h3{ font-size:1.15rem; margin: 14px 0 10px; }
.glass-card p{ color: var(--text-dim); font-size:.94rem; }

/* ============ PRICING ============ */
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card{
  position:relative; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 32px 26px; transition: transform .35s var(--ease), border-color .35s;
}
.price-card:hover{ transform: translateY(-6px); border-color: rgba(123,92,255,0.5); }
.price-card h3{ font-size:1.15rem; font-weight:600; min-height:52px; }
.price-range{ font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:600; margin-top:14px; color: var(--accent); }
.price-time{ font-size:.8rem; color: var(--text-dimmer); margin-top:6px; font-family:'JetBrains Mono',monospace; }
.price-card ul{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.price-card li{ font-size:.88rem; color: var(--text-dim); padding-left:18px; position:relative; }
.price-card li::before{ content:'—'; position:absolute; left:0; color: var(--accent-2); }
.price-featured{ background: linear-gradient(160deg, rgba(0,240,255,0.08), rgba(123,92,255,0.06)); border-color: rgba(0,240,255,0.35); }
.price-badge{ position:absolute; top:-12px; right:24px; background: var(--grad); color:#05050a; font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.03em; }

/* ============ PORTFOLIO ============ */
.case-list{ display:flex; flex-direction:column; gap:18px; }
.case-card{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 38px; transition: border-color .3s, background .3s;
  flex-wrap: wrap;
}
.case-card:hover{ border-color: rgba(255,92,240,0.4); background: var(--surface-strong); }
.case-tag{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color: var(--accent-3); text-transform:uppercase; letter-spacing:.08em; }
.case-info h3{ font-size:1.6rem; margin-top:12px; }
.case-info h3 em{ font-style:normal; color: var(--text-dimmer); font-size:1rem; font-weight:400; margin-left:6px; }
.case-info p{ color: var(--text-dim); margin-top:14px; max-width: 560px; font-size: .98rem; }
.case-tech{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.case-tech li{ font-size:.75rem; font-family:'JetBrains Mono',monospace; color: var(--text-dim); border:1px solid var(--border); padding:6px 12px; border-radius:999px; }
.case-link{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-weight:500; white-space:nowrap; color: var(--accent); border-bottom:1px solid transparent; transition: border-color .2s; }
.case-link:hover{ border-color: var(--accent); }
.case-link .arrow{ transition: transform .3s var(--ease); }
.case-link:hover .arrow{ transform: translate(3px,-3px); }

/* ============ TIMELINE ============ */
.timeline{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.timeline-item{ border-top:1px solid var(--border); padding-top:22px; }
.timeline-num{ font-family:'JetBrains Mono',monospace; color: var(--accent); font-size:.85rem; }
.timeline-item h3{ font-size:1.15rem; margin: 14px 0 10px; }
.timeline-item p{ color: var(--text-dim); font-size:.92rem; }

/* ============ CONTACT ============ */
.contact-section{ padding-bottom: 160px; }
.contact-box{
  text-align:center; max-width: 720px; margin: 0 auto; padding: 70px 40px;
  border-radius: 28px; border:1px solid var(--border);
  background: radial-gradient(circle at 50% 0%, rgba(0,240,255,0.08), transparent 60%), var(--surface);
}
.contact-box .tag{ display:block; margin-bottom: 18px; }
.contact-box h2{ font-size: clamp(1.8rem,4vw,2.7rem); }
.contact-box p{ color: var(--text-dim); margin-top:18px; font-size:1.05rem; }
.contact-actions{ display:flex; gap:16px; justify-content:center; margin-top:38px; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.footer{ position:relative; z-index:1; border-top:1px solid var(--border); padding: 36px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer p{ color: var(--text-dimmer); font-size:.85rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: repeat(2,1fr); }
  .timeline{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px){
  .nav-links{
    position: fixed; top:0; right:0; height:100svh; width: min(78vw, 320px);
    background: rgba(8,8,14,0.98); backdrop-filter: blur(20px);
    flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; padding: 40px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    border-left: 1px solid var(--border);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .case-card{ flex-direction:column; align-items:flex-start; }
  .hero-stats{ gap: 34px; }
  .lang-switch{ margin-left: auto; margin-right: 10px; }
  .lang-btn{ padding: 6px 8px; }
}