/* ===== Limitless Web — neo build ===== */

/* Reset + base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
:root { color-scheme: dark; }
body.theme-dark { background:#0B0F19; color:#E6EAF2; font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
img, svg, video, canvas { display:block; max-width:100%; }
a { color:inherit; }
.skip { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus { position:fixed; left:16px; top:16px; z-index:9999; background:#121a2c; color:#fff; padding:10px 12px; border-radius:10px; }
.container { width:min(1200px,92vw); margin:0 auto; }

/* Header */
.header { position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); border-bottom:1px solid #1e2a44;
  background: color-mix(in srgb, #0B0F19 86%, transparent); }
.header__in { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:.2px; }
.brand__logo { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,#7B5CFF,#00D1FF); color:#00111a; font-weight:800; }
.brand__name b { background:linear-gradient(90deg,#7B5CFF,#00D1FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav { justify-self:end; position:relative; }
.nav__toggle { display:none; border:1px solid #1e2a44; background:#111a2c; color:#E6EAF2; padding:8px 12px; border-radius:10px; }
.nav__list { display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; }
.nav__list a { text-decoration:none; color:#9AA3B2; font-weight:600; }
.nav__list a:hover { color:#E6EAF2; }
.btn--small { padding:10px 12px; border-radius:12px; font-size:.95rem; }

@media (max-width: 860px){
  .nav__toggle { display:inline-flex; }
  .nav__list { position:absolute; right:0; top:calc(100% + 8px); background:#121a2c; border:1px solid #1e2a44; padding:12px; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.3); display:none; flex-direction:column; gap:10px; }
  .nav__list.open { display:flex; }
}

/* Spotlight cursor */
.spotlight { pointer-events:none; position:fixed; inset:0; background: radial-gradient(500px 500px at var(--mx,50%) var(--my,50%), rgba(123,92,255,.07), transparent 70%),
  radial-gradient(300px 300px at calc(var(--mx,50%) + 150px) calc(var(--my,50%) + 80px), rgba(0,209,255,.06), transparent 70%); z-index:0; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:14px; border:none; cursor:pointer; text-decoration:none; font-weight:700; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; position:relative; overflow:hidden; }
.btn--primary { background:linear-gradient(135deg,#7B5CFF,#00D1FF); color:#00111a; box-shadow:0 8px 18px rgba(123,92,255,.25); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(123,92,255,.34); }
.btn--ghost { border:1px solid #1e2a44; color:#E6EAF2; background:transparent; }
.btn--ghost:hover { background:#0e1426; }
.btn--magnetic::after{ content:""; position:absolute; inset:0; background: radial-gradient(160px 160px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%); opacity:0; transition:opacity .2s; }
.btn--magnetic:hover::after{ opacity:1; }

/* Hero */
.hero { position:relative; padding: 84px 0 40px; overflow:clip; }
.hero__bg img{ width:100%; height: clamp(360px, 55vw, 820px); object-fit:cover; border-radius:24px; filter:saturate(1.05) contrast(1.02) brightness(.9); opacity:.9; }
.hero__in { position:relative; margin-top:-22vh; }
.hero h1 { font: 800 clamp(32px, 6vw, 68px)/1.05 "Space Grotesk", Inter, system-ui; letter-spacing:-1.2px; margin:0 0 12px; }
.hero h1 em { font-style:normal; background:linear-gradient(135deg,#7B5CFF,#00D1FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { max-width: 60ch; color:#9AA3B2; margin: 10px 0 18px; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; }
.scroll-ind { margin-top:24px; color:#9AA3B2; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.82rem; }

.marquee { position:relative; margin-top:22px; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display:flex; gap:36px; padding:14px 0; animation: slide 22s linear infinite; color:#6d79a8; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.marquee__track span { white-space:nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }

/* Section */
.section { padding: 72px 0; position:relative; }
.section--alt { background: #0f1626; border-block: 1px solid #1e2a44; }
.section__head h2 { font: 800 clamp(24px, 3.4vw, 38px)/1.08 "Space Grotesk", Inter; margin:0 0 6px; }
.muted { color:#9AA3B2; }
.tiny { font-size:.85rem; }
.split-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:center; }
@media (max-width: 960px){ .split-grid { grid-template-columns: 1fr; } }

/* Work grid */
.work__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 1024px){ .work__grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .work__grid { grid-template-columns: 1fr; } }
.card3d { background:#111a2c; border:1px solid #1e2a44; border-radius:16px; overflow:hidden; transform-style:preserve-3d; will-change: transform; transition: transform .2s; }
.card3d:hover { transform: translateY(-4px); }
.card3d__media img{ aspect-ratio: 16/10; object-fit: cover; width:100%; }
.card3d__body { padding:14px; }
.card3d__body h3 { margin:0 0 6px; font: 800 1.25rem/1.2 "Space Grotesk", Inter; }

/* Services */
.services__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.service { background:#111a2c; border:1px solid #1e2a44; border-radius:16px; padding:18px; }
.service h3 { margin:0 0 8px; font: 800 1.2rem/1.2 "Space Grotesk", Inter; }
.service ul{ padding-left:18px; margin:0; }
@media (max-width: 960px){ .services__grid { grid-template-columns: 1fr; } }

/* Timeline */
.timeline { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; counter-reset: step; }
.timeline li { list-style:none; background:#111a2c; border:1px solid #1e2a44; border-radius:16px; padding:16px; }
.timeline li span { display:inline-block; font-weight:800; color:#8da2ff; margin-right:8px; }
@media (max-width: 960px){ .timeline { grid-template-columns: 1fr; } }

/* About */
.badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.badge { padding:8px 10px; border-radius:999px; background: color-mix(in srgb, #0B0F19 85%, white 15%); border:1px solid #1e2a44; font-weight:700; color:#c6d0ff; }

/* Forms */
.form { background:#111a2c; border:1px solid #1e2a44; border-radius:16px; padding:18px; }
.row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.row label { font-weight:700; }
input, textarea { background: #0f1626; color:#E6EAF2; border:1px solid #1e2a44; border-radius:12px; padding:12px 14px; outline:none; }
input:focus, textarea:focus { border-color:#3aa7ff; box-shadow:0 0 0 4px rgba(58,167,255,.18); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.contact__grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:start; }
.glass { backdrop-filter: blur(8px); background: color-mix(in srgb, #0B0F19 80%, transparent); border:1px solid #1e2a44; border-radius:16px; padding:16px; }
@media (max-width: 960px){ .contact__grid { grid-template-columns: 1fr; } }

/* Footer */
.footer { border-top:1px solid #1e2a44; padding:28px 0; }
.footer__in { display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; }
.footer__nav { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.nf { min-height:100vh; display:grid; place-items:center; }
@media (max-width: 760px){ .footer__in { grid-template-columns: 1fr; text-align:center; justify-items:center; } }

/* Reveal */
.reveal { opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity:1; transform:none; }

/* 3D Tilt */
.tilt { transform-style:preserve-3d; }
.tilt:hover { transform: perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0)); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; }
  .marquee__track { animation:none; }
}