:root {
  --bg: #020713;
  --bg-soft: #061126;
  --panel: rgba(7, 25, 57, .7);
  --panel-solid: #071735;
  --line: rgba(57, 135, 255, .22);
  --line-strong: rgba(53, 141, 255, .58);
  --blue: #1498ff;
  --blue-2: #055bd8;
  --cyan: #39c8ff;
  --gold: #efb53d;
  --gold-2: #a96a08;
  --text: #f4f8ff;
  --muted: #a9b9d0;
  --muted-2: #7386a3;
  --success: #26d37d;
  --shadow: 0 30px 80px rgba(0,0,0,.42);
  --radius: 24px;
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 75% 10%, rgba(7, 88, 206, .15), transparent 34%),
    radial-gradient(circle at 15% 55%, rgba(11, 110, 255, .08), transparent 30%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
img, video { max-width: 100%; display: block; }
::selection { background: rgba(239,181,61,.32); color: white; }

.noscript { position: fixed; inset: 0 auto auto 0; width: 100%; z-index: 9999; padding: 12px; background: #a31616; color: white; text-align: center; }
.container { width: var(--container); margin-inline: auto; }
.section { position: relative; padding: 112px 0; }

#particleCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; z-index: -4; }
.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; z-index: -3; }
.ambient-one { background: var(--blue); right: -160px; top: 10%; }
.ambient-two { background: var(--gold); left: -240px; bottom: 5%; opacity: .05; }
.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: -2; background: radial-gradient(circle, rgba(31,131,255,.13), transparent 68%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s; }

.loading-screen { position: fixed; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; background: #01050d; transition: opacity .7s ease, visibility .7s; }
.loading-screen.hidden { opacity: 0; visibility: hidden; }
.loading-logo-wrap { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.loading-logo { width: 82px; filter: drop-shadow(0 0 25px rgba(28,132,255,.55)); animation: loadFloat 1.5s ease-in-out infinite; }
.loading-ring { position: absolute; inset: 0; border: 1px solid rgba(53,150,255,.24); border-top-color: var(--gold); border-radius: 50%; animation: spin 1.2s linear infinite; }
.loading-screen p { color: var(--muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
@keyframes loadFloat { 50% { transform: translateY(-7px); } }
@keyframes spin { to { transform: rotate(360deg); } }

.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: 1px solid transparent; transition: background .3s, border-color .3s, backdrop-filter .3s; }
.site-header.scrolled { background: rgba(2,7,19,.76); backdrop-filter: blur(18px); border-color: rgba(75,130,210,.14); }
.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo { width: 172px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,80,190,.22)); }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a { position: relative; color: #dbe7f8; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 2px; background: linear-gradient(90deg,var(--gold),var(--blue)); transition: right .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(6,19,43,.8); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: white; border-radius: 3px; transition: .25s; }

.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; padding: 0 20px; border: 1px solid transparent; cursor: pointer; font-weight: 850; font-size: 13px; letter-spacing: .01em; transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; inset: 0; transform: translateX(-115%) skewX(-18deg); width: 45%; background: rgba(255,255,255,.23); transition: transform .5s; z-index: -1; }
.button:hover::before { transform: translateX(280%) skewX(-18deg); }
.button:hover { transform: translateY(-3px); }
.button-gold { color: #071125; background: linear-gradient(135deg,#ffe48b 0%,var(--gold) 35%,#b97810 100%); box-shadow: 0 12px 32px rgba(196,126,10,.2), inset 0 1px rgba(255,255,255,.55); }
.button-gold:hover { box-shadow: 0 18px 44px rgba(222,155,37,.3); }
.button-outline { background: rgba(3,13,32,.54); border-color: rgba(56,141,255,.55); color: #eef6ff; box-shadow: inset 0 0 20px rgba(14,85,196,.08); }
.button-outline:hover { border-color: var(--gold); background: rgba(8,26,58,.9); }
.nav-cta { min-height: 44px; padding: 0 16px; white-space: nowrap; }

.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 126px; padding-bottom: 48px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 68% 42%, rgba(10,100,255,.15), transparent 32%), linear-gradient(180deg, rgba(2,7,19,.12), rgba(2,7,19,.88)); pointer-events: none; }
.hero-grid-lines { position: absolute; inset: 0; opacity: .25; mask-image: linear-gradient(to bottom, black, transparent 92%); background-image: linear-gradient(rgba(42,106,200,.17) 1px, transparent 1px), linear-gradient(90deg,rgba(42,106,200,.17) 1px, transparent 1px); background-size: 70px 70px; transform: perspective(700px) rotateX(62deg) scale(1.8) translateY(36%); transform-origin: center bottom; }
.hero-layout { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 28px; position: relative; z-index: 2; }
.hero-copy { max-width: 610px; padding: 40px 0; }
.eyebrow, .section-label { display: inline-flex; align-items: center; gap: 9px; color: #76bcff; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 850; }
.eyebrow { padding: 8px 13px; border: 1px solid rgba(57,143,255,.32); border-radius: 999px; background: rgba(10,40,83,.45); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(239,181,61,.1), 0 0 18px var(--gold); }
h1,h2,h3,p { margin-top: 0; }
h1 { margin: 24px 0 22px; font-size: clamp(46px, 5.4vw, 76px); line-height: .99; letter-spacing: -.055em; max-width: 770px; }
h1 span, h2 span { color: transparent; background: linear-gradient(125deg,#fff3bf 0%,var(--gold) 42%,#c78314 100%); -webkit-background-clip: text; background-clip: text; }
.hero-lead { color: #bac9dc; font-size: 17px; max-width: 610px; line-height: 1.8; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 28px; }
.play-mini { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(23,121,255,.17); color: var(--cyan); font-size: 10px; }
.trust-row { display: flex; gap: 22px; flex-wrap: wrap; color: #afbed2; font-size: 12px; }
.trust-row div { display: flex; align-items: center; gap: 7px; }
.trust-row span { color: var(--blue); text-shadow: 0 0 16px var(--blue); }

.hero-stage { height: 670px; position: relative; perspective: 1100px; transform-style: preserve-3d; }
.stage-backglow { position: absolute; width: 540px; height: 540px; left: 50%; top: 47%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(15,100,255,.22),rgba(9,37,94,.08) 42%,transparent 70%); filter: blur(8px); }
.logo-rig { position: absolute; z-index: 5; width: 380px; height: 410px; left: 50%; top: 48%; transform: translate(-50%,-50%); transform-style: preserve-3d; transition: transform .15s ease-out; display: grid; place-items: center; }
.hero-logo { position: relative; width: 300px; z-index: 4; filter: drop-shadow(0 36px 30px rgba(0,0,0,.58)) drop-shadow(0 0 42px rgba(32,134,255,.38)); animation: logoFloat 5s ease-in-out infinite; }
.logo-halo { position: absolute; width: 310px; height: 310px; border-radius: 50%; background: radial-gradient(circle,rgba(35,143,255,.35),rgba(21,85,200,.08) 48%,transparent 72%); filter: blur(18px); animation: pulse 3s ease-in-out infinite; }
.reflection { position: absolute; width: 250px; height: 70px; bottom: 20px; border-radius: 50%; background: radial-gradient(ellipse,rgba(25,125,255,.35),transparent 67%); filter: blur(15px); transform: rotateX(68deg); }
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(61,148,255,.25); box-shadow: inset 0 0 20px rgba(21,107,240,.12), 0 0 18px rgba(21,107,240,.1); }
.orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); top: 50%; left: -5px; }
.orbit-one { width: 360px; height: 360px; transform: rotateX(68deg) rotateZ(12deg); animation: orbitA 11s linear infinite; }
.orbit-two { width: 330px; height: 230px; transform: rotateY(65deg) rotateZ(-10deg); animation: orbitB 9s linear infinite; }
.orbit-three { width: 275px; height: 390px; transform: rotateY(72deg) rotateZ(25deg); animation: orbitA 14s linear infinite reverse; opacity: .7; }
@keyframes logoFloat { 50% { transform: translateY(-16px) rotateY(2deg); } }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .7; } }
@keyframes orbitA { to { transform: rotateX(68deg) rotateZ(372deg); } }
@keyframes orbitB { to { transform: rotateY(65deg) rotateZ(350deg); } }

.platform { position: absolute; left: 50%; bottom: 60px; width: 460px; height: 160px; transform: translateX(-50%) rotateX(66deg); transform-style: preserve-3d; }
.platform-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(48,135,255,.44); box-shadow: 0 0 30px rgba(18,109,255,.23), inset 0 0 28px rgba(16,83,198,.18); }
.ring-b { inset: 17px 28px; border-color: rgba(238,178,56,.46); animation: ringPulse 3s ease-in-out infinite; }
.ring-c { inset: 37px 62px; border-color: rgba(59,174,255,.68); animation: ringPulse 3s ease-in-out 1s infinite; }
.platform-core { position: absolute; inset: 54px 90px; border-radius: 50%; background: radial-gradient(circle,#103d83,#07162f 60%,transparent 61%); box-shadow: 0 0 55px rgba(35,131,255,.5); }
@keyframes ringPulse { 50% { transform: scale(1.04); filter: brightness(1.35); } }

.holo-card { position: absolute; width: 220px; min-height: 122px; padding: 17px; z-index: 7; border: 1px solid rgba(61,147,255,.42); border-radius: 18px; background: linear-gradient(145deg,rgba(11,37,82,.76),rgba(3,15,35,.55)); backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06), 0 0 30px rgba(11,92,220,.12); transform-style: preserve-3d; transition: transform .2s ease-out; }
.holo-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg,transparent,rgba(255,255,255,.07),transparent); transform: translateX(-120%); animation: shine 5s ease-in-out infinite; }
@keyframes shine { 55%,100% { transform: translateX(140%); } }
.holo-kicker { display: block; color: #78bdff; font-size: 9px; font-weight: 850; letter-spacing: .12em; margin-bottom: 7px; }
.holo-card strong { font-size: 13px; }
.holo-one { top: 105px; left: 2%; transform: rotateY(13deg) rotateX(2deg); animation: holoFloat 6s ease-in-out infinite; }
.holo-two { left: 0; bottom: 135px; transform: rotateY(11deg); animation: holoFloat 5s ease-in-out .8s infinite; }
.holo-three { top: 120px; right: -2%; transform: rotateY(-13deg); animation: holoFloat 5.5s ease-in-out .3s infinite; }
.holo-four { right: 1%; bottom: 145px; transform: rotateY(-11deg); animation: holoFloat 6.4s ease-in-out 1.2s infinite; }
@keyframes holoFloat { 50% { translate: 0 -9px; } }
.mini-site { height: 45px; margin-top: 13px; border-radius: 7px; background: #06152d; border: 1px solid rgba(48,130,247,.25); padding: 7px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 5px; }
.mini-site i { grid-row: 1 / 4; border-radius: 3px; background: linear-gradient(135deg,#116ddd,#061c3e); }
.mini-site b { border-radius: 2px; background: rgba(76,141,222,.3); }
.brand-gem { margin-top: 9px; font-size: 35px; color: var(--gold); text-shadow: 0 0 18px rgba(239,181,61,.5); }
.chart-bars { height: 44px; display: flex; align-items: end; gap: 6px; margin-top: 10px; }
.chart-bars i { flex: 1; min-height: 10px; border-radius: 4px 4px 0 0; background: linear-gradient(var(--cyan),var(--blue-2)); box-shadow: 0 0 11px rgba(35,140,255,.3); animation: bars 3s ease-in-out infinite; }
.chart-bars i:nth-child(2){height:34%}.chart-bars i:nth-child(3){height:70%}.chart-bars i:nth-child(4){height:52%}.chart-bars i:nth-child(5){height:95%}
@keyframes bars { 50% { filter: brightness(1.5); transform: scaleY(.82); transform-origin: bottom; } }
.ai-core { position: relative; width: 55px; height: 45px; margin-top: 8px; border: 1px solid rgba(69,166,255,.35); border-radius: 50%; box-shadow: 0 0 22px rgba(26,131,255,.18); }
.ai-core i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.ai-core i:nth-child(1){left:10px;top:19px}.ai-core i:nth-child(2){left:28px;top:7px}.ai-core i:nth-child(3){right:7px;bottom:7px}
.reel-trigger { position: absolute; right: 2%; bottom: 48px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.reel-trigger:hover .reel-play { transform: scale(1.12); border-color: var(--gold); }
.reel-play { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(75,153,255,.55); border-radius: 50%; background: rgba(7,28,65,.75); box-shadow: 0 0 28px rgba(24,121,255,.25); color: var(--cyan); transition: .25s; }
.reel-trigger strong { display:block; font-size: 11px; letter-spacing:.08em; text-transform:uppercase; }
.reel-trigger small { color: var(--muted-2); }
.logo-strip { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; border: 1px solid rgba(57,128,225,.18); border-radius: 16px; background: rgba(4,16,37,.58); backdrop-filter: blur(10px); color: #9fb1ca; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; }
.logo-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.problem-section { background: linear-gradient(180deg,rgba(5,15,34,.15),rgba(5,18,42,.65),rgba(5,15,34,.1)); border-block: 1px solid rgba(56,124,214,.1); }
.problem-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 80px; align-items: center; }
.section-heading h2, .reel-copy h2, .process-copy h2, .ai-copy h2, .contact-copy h2 { font-size: clamp(36px,4.1vw,58px); letter-spacing: -.045em; line-height: 1.08; margin: 14px 0 0; }
.section-heading { max-width: 790px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.problem-copy > p, .section-top > p, .reel-copy > p, .process-copy > p, .ai-copy > p, .contact-copy > p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.insight-card { margin-top: 28px; display: flex; gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(8,31,70,.8),rgba(4,15,34,.72)); border-radius: 18px; }
.insight-icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: #091127; background: linear-gradient(135deg,#ffdf7b,var(--gold)); font-weight: 900; }
.insight-card strong, .insight-card small { display:block; }
.insight-card small { color: var(--muted); margin-top: 3px; }

.section-top { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin-bottom: 46px; }
.section-top > p { max-width: 430px; margin-bottom: 7px; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { min-height: 360px; position: relative; padding: 28px; border-radius: var(--radius); background: linear-gradient(155deg,rgba(10,34,76,.82),rgba(3,14,32,.88)); border: 1px solid rgba(53,134,255,.22); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 22px 50px rgba(0,0,0,.18); overflow: hidden; transform-style: preserve-3d; }
.service-card::before { content:""; position:absolute; inset:-1px; background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(43,145,255,.18),transparent 36%); opacity:0; transition:.25s; }
.service-card:hover::before { opacity:1; }
.service-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue),var(--gold),transparent); transform:scaleX(.1); opacity:.5; transition:.35s; }
.service-card:hover::after { transform:scaleX(1); opacity:1; }
.service-number { position:absolute; right:22px; top:18px; color:rgba(147,182,224,.34); font-weight:900; font-size:13px; letter-spacing:.16em; }
.service-icon { width: 72px; height: 72px; margin-bottom: 27px; display:grid; place-items:center; border-radius:20px; background:linear-gradient(145deg,rgba(24,94,194,.35),rgba(4,19,44,.4)); border:1px solid rgba(68,153,255,.26); color:#64b9ff; font-size:28px; box-shadow:inset 0 0 24px rgba(21,112,255,.12),0 0 28px rgba(10,88,210,.08); transform:translateZ(25px); }
.service-card h3 { position:relative; font-size:21px; margin-bottom:10px; }
.service-card p { position:relative; color:var(--muted); font-size:14px; }
.service-card a { position:absolute; left:28px; bottom:25px; color:#8fc7ff; font-weight:800; font-size:12px; }
.service-card a span { color:var(--gold); margin-left:5px; }
.icon-screen i { width:34px;height:27px;border:2px solid currentColor;border-radius:4px;box-shadow:0 0 15px rgba(63,166,255,.4);position:relative; }
.icon-screen i::after { content:"";position:absolute;width:20px;height:2px;background:currentColor;bottom:-8px;left:5px;box-shadow:0 4px 0 -1px currentColor; }
.icon-cube i { width:31px;height:31px;border:2px solid currentColor;transform:rotate(30deg) skew(-4deg);box-shadow:0 0 16px rgba(63,166,255,.4); }
.icon-ai { position:relative; }
.icon-ai i { position:absolute;width:12px;height:12px;border:2px solid currentColor;border-radius:50%; }
.icon-ai i:nth-child(1){translate:-10px -8px}.icon-ai i:nth-child(2){translate:11px 0}.icon-ai i:nth-child(3){translate:-2px 13px}
.icon-flow { display:flex;gap:4px; }
.icon-flow i { width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor; }

.reel-section { overflow:hidden; }
.reel-section::before { content:"";position:absolute;width:520px;height:520px;right:-120px;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(17,101,229,.17),transparent 70%); }
.reel-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center; }
.reel-copy h2 { margin-top:14px; }
.feature-list { list-style:none;padding:0;margin:28px 0 32px;display:grid;gap:12px;color:#c3d2e5; }
.feature-list li { display:flex;gap:11px;align-items:center; }
.feature-list span { width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:rgba(23,119,255,.16);color:#58b5ff;font-size:12px; }
.video-shell { position:relative;border-radius:28px;padding:10px;background:linear-gradient(135deg,rgba(66,156,255,.6),rgba(12,42,87,.08),rgba(239,181,61,.45));box-shadow:var(--shadow),0 0 70px rgba(20,102,220,.12);overflow:hidden;transform-style:preserve-3d; }
.video-shell video { width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px; }
.video-overlay { position:absolute;inset:10px;border-radius:20px;background:linear-gradient(180deg,transparent 55%,rgba(2,8,20,.75));pointer-events:none; }
.big-play { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(3,17,42,.66);backdrop-filter:blur(8px);color:white;cursor:pointer;box-shadow:0 0 35px rgba(28,126,255,.35); }
.big-play span { display:block;translate:3px 0; }
.big-play:hover { border-color:var(--gold);transform:translate(-50%,-50%) scale(1.08); }
.video-badge { position:absolute;left:30px;bottom:26px;padding:7px 11px;border-radius:999px;background:rgba(3,13,31,.72);border:1px solid rgba(98,162,244,.28);font-size:10px;letter-spacing:.14em;color:#bfdaff; }

.portfolio-section { background:linear-gradient(180deg,rgba(4,13,29,.3),rgba(6,20,46,.65),rgba(4,13,29,.3));border-block:1px solid rgba(56,124,214,.1); }
.portfolio-grid { display:grid;grid-template-columns:repeat(12,1fr);gap:20px; }
.project-card { grid-column:span 6;border:1px solid rgba(57,136,244,.22);border-radius:24px;background:linear-gradient(145deg,rgba(8,29,65,.82),rgba(3,13,31,.9));overflow:hidden;box-shadow:0 24px 65px rgba(0,0,0,.24); }
.project-card:nth-child(3) { grid-column:4 / span 6; }
.project-visual { height:330px;padding:36px;display:grid;place-items:center;overflow:hidden;position:relative; }
.project-visual::before { content:"";position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(55px);opacity:.18; }
.project-luxe .project-visual::before { background:#bd8c55; }
.project-school .project-visual::before { background:#441dff; }
.project-auto .project-visual::before { background:#d08b1c; }
.browser-frame { width:90%;height:80%;position:relative;border-radius:14px;background:#07152e;border:1px solid rgba(118,174,255,.3);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 30px rgba(20,105,224,.1);transform:perspective(900px) rotateX(5deg) rotateY(-8deg);overflow:hidden;transition:.45s; }
.project-card:hover .browser-frame { transform:perspective(900px) rotateX(1deg) rotateY(0) scale(1.04); }
.browser-bar { height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid rgba(76,139,227,.14); }
.browser-bar i { width:6px;height:6px;border-radius:50%;background:#34527b; }
.browser-frame > div:last-child { height:calc(100% - 28px);padding:28px;display:flex;flex-direction:column;justify-content:center; }
.browser-frame span { font-size:10px;letter-spacing:.18em;font-weight:900; }
.browser-frame strong { max-width:290px;font-size:27px;line-height:1.08;margin:12px 0;color:white; }
.luxury-layout { background:linear-gradient(120deg,#17110c,#4c2919); }
.luxury-layout span { color:#d3a56a; }.luxury-layout button { width:max-content;padding:8px 13px;border:1px solid #d3a56a;background:transparent;color:#f2d8b4;border-radius:4px;font-size:10px; }
.school-layout { background:radial-gradient(circle at 80% 30%,#4227d6,#16104c 35%,#0d0c28); }.school-layout span { color:#a998ff; }.school-orbit { position:absolute;right:50px;font-size:90px;color:#f3d846;opacity:.8;text-shadow:0 0 30px rgba(243,216,70,.4); }
.auto-layout { background:linear-gradient(120deg,#111,#32200c); }.auto-layout span { color:#f0aa32; }.speed-line { width:80%;height:2px;background:linear-gradient(90deg,transparent,#f0aa32);box-shadow:0 0 15px #f0aa32; }
.project-info { display:flex;align-items:center;justify-content:space-between;padding:22px 25px;border-top:1px solid rgba(69,138,228,.14); }
.project-info span { color:#77baff;font-size:10px;letter-spacing:.12em;text-transform:uppercase; }.project-info h3 { margin:4px 0 0;font-size:20px; }.project-info a { width:43px;height:43px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(82,152,247,.3);color:var(--gold); }

.process-layout { display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:start; }
.process-copy { position:sticky;top:135px; }
.text-link { display:inline-flex;align-items:center;gap:10px;color:#8ec6ff;font-weight:800;margin-top:18px; }
.text-link span { color:var(--gold); }
.timeline { position:relative;padding-left:45px;display:grid;gap:20px; }
.timeline-line { position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:rgba(47,118,213,.2);overflow:hidden; }
.timeline-line i { display:block;width:100%;height:0;background:linear-gradient(var(--blue),var(--gold));box-shadow:0 0 15px var(--blue); }
.timeline-item { position:relative;display:grid;grid-template-columns:48px 1fr;gap:22px;padding:24px 26px;border:1px solid rgba(59,136,237,.18);border-radius:20px;background:linear-gradient(145deg,rgba(8,28,61,.62),rgba(4,14,32,.75)); }
.timeline-item::before { content:"";position:absolute;width:12px;height:12px;border-radius:50%;left:-41px;top:39px;background:#0b2b60;border:2px solid var(--blue);box-shadow:0 0 15px rgba(34,129,255,.5); }
.timeline-item > span { color:var(--gold);font-weight:900;font-size:13px;letter-spacing:.12em; }.timeline-item h3 { margin-bottom:5px; }.timeline-item p { margin:0;color:var(--muted);font-size:14px; }

.ai-shell { position:relative;min-height:620px;border-radius:36px;padding:70px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;overflow:hidden;border:1px solid rgba(62,142,249,.28);background:radial-gradient(circle at 25% 45%,rgba(21,111,245,.17),transparent 38%),linear-gradient(145deg,rgba(8,31,69,.86),rgba(3,13,30,.93));box-shadow:var(--shadow); }
.ai-shell::after { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(57,131,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(57,131,230,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,black,transparent 70%);pointer-events:none; }
.ai-visual { min-height:430px;position:relative;display:grid;place-items:center; }
.neural-sphere { width:270px;height:270px;border-radius:50%;position:relative;display:grid;place-items:center;border:1px solid rgba(66,156,255,.3);box-shadow:inset 0 0 55px rgba(18,96,220,.2),0 0 70px rgba(18,96,220,.16);animation:neuralRotate 15s linear infinite; }
.neural-sphere::before,.neural-sphere::after { content:"";position:absolute;border-radius:50%;border:1px solid rgba(78,165,255,.35); }
.neural-sphere::before { inset:25px;transform:rotateX(67deg); }.neural-sphere::after { inset:48px;transform:rotateY(67deg); }
.neural-sphere i { position:absolute;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan); }
.neural-sphere i:nth-child(1){top:35px;left:90px}.neural-sphere i:nth-child(2){top:60px;right:42px}.neural-sphere i:nth-child(3){bottom:38px;left:80px}.neural-sphere i:nth-child(4){bottom:75px;right:30px}.neural-sphere i:nth-child(5){left:20px;top:135px}.neural-sphere i:nth-child(6){right:18px;top:130px}
.neural-core { width:86px;height:86px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#2a9eff,#0b397d 60%,#07152f 61%);font-size:28px;font-weight:950;box-shadow:0 0 40px rgba(31,142,255,.55),inset 0 0 20px rgba(255,255,255,.15); }
@keyframes neuralRotate { to{transform:rotate(360deg)} }
.data-chip { position:absolute;padding:9px 13px;border-radius:999px;border:1px solid rgba(69,150,255,.3);background:rgba(4,18,42,.8);color:#bddbff;font-size:11px;box-shadow:0 0 20px rgba(21,105,220,.12); }
.chip-one{left:0;top:90px}.chip-two{right:0;top:110px}.chip-three{left:15px;bottom:70px}.chip-four{right:5px;bottom:90px}
.ai-copy { position:relative;z-index:2; }.ai-benefits { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0; }.ai-benefits div { padding:16px;border-radius:15px;border:1px solid rgba(63,139,235,.18);background:rgba(7,25,54,.55); }.ai-benefits strong,.ai-benefits small{display:block}.ai-benefits small{color:var(--muted-2);font-size:11px;margin-top:4px}

.why-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px; }
.why-card { min-height:230px;padding:27px;border-top:1px solid rgba(67,147,255,.45);background:linear-gradient(180deg,rgba(9,31,67,.55),rgba(4,14,32,.22)); }
.why-card > span { color:var(--gold);font-weight:900;font-size:12px;letter-spacing:.13em; }.why-card h3 { margin:44px 0 9px;font-size:20px; }.why-card p { color:var(--muted);font-size:13px; }

.contact-section { padding-bottom:130px; }
.contact-shell { display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;padding:64px;border:1px solid rgba(66,145,249,.25);border-radius:34px;background:radial-gradient(circle at 0 20%,rgba(22,104,230,.16),transparent 36%),linear-gradient(145deg,rgba(8,29,65,.82),rgba(3,13,31,.94));box-shadow:var(--shadow); }
.contact-points { display:grid;gap:15px;margin-top:30px; }.contact-points > div { display:flex;gap:12px; }.contact-points > div > span { flex:0 0 27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(24,119,255,.15);color:#62bcff;font-size:12px; }.contact-points p,.contact-points small,.contact-points strong { margin:0;display:block; }.contact-points small { color:var(--muted-2);margin-top:2px; }
.contact-form { display:grid;gap:16px;padding:28px;border-radius:24px;background:rgba(2,10,25,.55);border:1px solid rgba(61,133,229,.18); }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px; }
.contact-form label { display:grid;gap:7px;color:#c8d6e8;font-size:12px;font-weight:800; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%;border:1px solid rgba(64,134,226,.24);border-radius:12px;background:rgba(6,22,49,.72);color:white;padding:13px 14px;outline:none;transition:.25s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:rgba(57,154,255,.75);box-shadow:0 0 0 3px rgba(21,110,230,.1); }
.contact-form textarea { resize:vertical;min-height:120px; }.contact-form select option { background:#07152f; }.form-note { color:var(--muted-2);font-size:11px;margin:0;text-align:center; }

.site-footer { border-top:1px solid rgba(58,128,219,.14);background:#01050d;padding:70px 0 24px; }
.footer-grid { display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:55px; }.footer-brand img { width:180px;height:100px;object-fit:contain;margin-bottom:10px; }.footer-brand p { color:var(--muted);font-size:13px;max-width:330px; }.footer-grid h3 { font-size:13px;margin-bottom:16px; }.footer-grid > div:not(.footer-brand) { display:flex;flex-direction:column;gap:9px; }.footer-grid a,.footer-grid span { color:var(--muted);font-size:12px; }.footer-grid a:hover { color:var(--gold); }
.footer-bottom { margin-top:50px;padding-top:22px;border-top:1px solid rgba(63,122,198,.12);display:flex;align-items:center;justify-content:space-between;color:var(--muted-2);font-size:11px; }
#backToTop { width:40px;height:40px;border-radius:12px;border:1px solid rgba(67,142,242,.24);background:rgba(7,25,54,.65);cursor:pointer; }
.floating-whatsapp { position:fixed;right:24px;bottom:24px;z-index:900;min-width:56px;height:56px;padding:0 18px;display:flex;align-items:center;gap:9px;border-radius:999px;background:#16b962;color:white;box-shadow:0 14px 35px rgba(9,128,65,.3);font-weight:850; }.floating-whatsapp span { font-size:24px; }.floating-whatsapp small { font-size:11px; }.floating-whatsapp:hover { transform:translateY(-3px); }

.reel-modal { position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;background:rgba(0,4,12,.88);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:.3s; }
.reel-modal.open { opacity:1;visibility:visible; }.modal-video-wrap { width:min(1100px,92vw);position:relative;border-radius:24px;padding:8px;background:linear-gradient(135deg,var(--blue),rgba(8,33,75,.3),var(--gold));box-shadow:0 40px 100px rgba(0,0,0,.55);transform:scale(.94);transition:.35s; }.reel-modal.open .modal-video-wrap{transform:scale(1)}.modal-video-wrap video{width:100%;border-radius:18px;background:#000;}.modal-close{position:absolute;right:24px;top:20px;width:46px;height:46px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(4,15,34,.8);z-index:3;font-size:28px;cursor:pointer;}.modal-caption{position:absolute;left:30px;bottom:26px;display:grid;text-shadow:0 2px 12px #000;pointer-events:none;}.modal-caption span{color:#c5d4e7;font-size:12px;}
.toast { position:fixed;left:50%;bottom:26px;z-index:7000;transform:translate(-50%,20px);padding:13px 18px;border-radius:12px;background:#0a244d;border:1px solid rgba(67,154,255,.36);box-shadow:0 15px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:.3s;font-size:12px; }.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

.reveal { opacity:0;transform:translateY(34px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.25,1); }.reveal.is-visible { opacity:1;transform:none; }
.tilt-card { transform-style:preserve-3d; will-change:transform; }

@media (max-width: 1100px) {
  .main-nav { gap:17px; }.main-nav a{font-size:11px}.nav-cta{display:none}
  .hero-layout { grid-template-columns:1fr; }.hero-copy{max-width:780px;padding-bottom:0}.hero-stage{height:650px;max-width:800px;width:100%;margin-inline:auto}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .reel-grid,.process-layout,.contact-shell{grid-template-columns:1fr;}.process-copy{position:relative;top:auto}.reel-grid{gap:45px}.ai-shell{padding:45px;gap:30px}.why-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 800px) {
  :root { --container:min(100% - 28px, 680px); }
  .section{padding:82px 0}.nav-wrap{height:76px}.brand-logo{width:145px;height:62px}
  .nav-toggle{display:flex}.main-nav{position:fixed;inset:76px 14px auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px;border-radius:18px;background:rgba(3,13,31,.96);border:1px solid rgba(64,137,235,.25);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-12px);transition:.25s;box-shadow:0 30px 70px rgba(0,0,0,.45)}.main-nav.open{opacity:1;visibility:visible;transform:none}.main-nav a{padding:13px 10px;font-size:13px;border-bottom:1px solid rgba(68,130,211,.1)}.main-nav a:last-child{border:0}.main-nav a::after{display:none}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  h1{font-size:clamp(44px,13vw,65px)}.hero{padding-top:110px}.hero-copy{text-align:center}.eyebrow{margin-inline:auto}.hero-lead{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-stage{height:590px;transform:scale(.9);transform-origin:top center;margin-bottom:-60px}.logo-strip{overflow:auto;justify-content:flex-start;gap:18px;white-space:nowrap}.logo-strip i{flex:0 0 4px}
  .problem-grid,.section-top{display:grid;grid-template-columns:1fr;gap:28px}.section-top{margin-bottom:35px}.services-grid{grid-template-columns:1fr}.service-card{min-height:330px}
  .reel-grid{grid-template-columns:1fr}.portfolio-grid{display:grid;grid-template-columns:1fr}.project-card,.project-card:nth-child(3){grid-column:auto}.project-visual{height:290px;padding:20px}.browser-frame{width:100%}
  .ai-shell{grid-template-columns:1fr;padding:35px 22px}.ai-visual{min-height:360px}.ai-benefits{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr 1fr}.contact-shell{padding:36px 22px}.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}

@media (max-width: 560px) {
  .hero-actions .button{width:100%}.trust-row{display:grid;gap:8px;text-align:left}.hero-stage{height:480px;transform:scale(.74);width:135%;margin-left:-17%;margin-bottom:-105px}.holo-card{width:185px}.platform{bottom:40px}.reel-trigger{bottom:12px;right:8%}
  .section-heading h2,.reel-copy h2,.process-copy h2,.ai-copy h2,.contact-copy h2{font-size:36px}.project-visual{height:250px}.browser-frame strong{font-size:21px}.why-grid{grid-template-columns:1fr}.why-card{min-height:190px}.why-card h3{margin-top:28px}.timeline{padding-left:30px}.timeline-line{left:4px}.timeline-item{grid-template-columns:1fr;gap:8px}.timeline-item::before{left:-31px}.ai-visual{transform:scale(.82);margin:-30px}.contact-shell{gap:40px}.footer-grid{grid-template-columns:1fr}.floating-whatsapp{width:56px;min-width:56px;padding:0;justify-content:center}.floating-whatsapp small{display:none}.modal-caption{display:none}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.cursor-glow{display:none}
}