:root{
  --bg: #07070a;
  --bg-alt: #0d0e12;
  --text: #f4f3ef;
  --muted: #9a9aa4;
  --accent: #ff5227;
  --accent-2: #ffb27a;
  --line: rgba(244,243,239,0.12);
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{ scroll-behavior: smooth; background: var(--bg); }
html.intro-lock, html.intro-lock body{ overflow: hidden; height: 100%; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3, .brand, .service-index{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
img{ max-width: 100%; display:block; }

/* cursor glow */
.cursor-glow{
  position: fixed; top:0; left:0; width: 560px; height:560px; z-index: 60;
  pointer-events:none; border-radius:50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,82,39,0.18) 0%, rgba(255,82,39,0) 65%);
  mix-blend-mode: screen; opacity:0; transition: opacity .4s;
  will-change: transform;
}
.cursor-glow.active{ opacity:1; }
@media (max-width: 860px){ .cursor-glow{ display:none; } }

/* magnetic buttons */
.btn{ will-change: transform; }

/* cinematic intro */
.intro-overlay{
  position: fixed; inset:0; z-index: 500; pointer-events: auto;
  display:flex; align-items:center; justify-content:center;
}
.intro-frame-top, .intro-frame-bottom{
  position:absolute; left:0; right:0; height:50%; background: #050506;
}
.intro-frame-top{ top:0; }
.intro-frame-bottom{ bottom:0; }
.intro-stage{
  position:relative; z-index:2; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

/* scene: real cinematic footage */
.intro-video-wrap{ position:absolute; inset:0; width:100%; height:100%; overflow:hidden; background:#050506; }
.intro-video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.001);
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition: opacity .5s ease;
}
.intro-video.is-ready{ opacity:1; }
.intro-video-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(3,3,5,0.68) 100%),
    linear-gradient(to bottom, rgba(3,3,5,0.35) 0%, transparent 18%, transparent 78%, rgba(3,3,5,0.45) 100%);
}
.intro-video-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.intro-skip{
  position:absolute; right: 28px; bottom: 28px; z-index:3; opacity:0; pointer-events:none;
  background:transparent; border:1px solid var(--line); color: var(--muted);
  font-family:'Inter',sans-serif; font-size: 12.5px; letter-spacing:.05em;
  padding: 9px 18px; border-radius:999px; cursor:pointer; transition: all .25s;
}
.intro-skip:hover{ color: var(--text); border-color: var(--text); }
.intro-skip.show{ opacity:1; pointer-events:auto; }

.intro-sound{
  position:absolute; left: 28px; bottom: 28px; z-index:3; opacity:0; pointer-events:none;
  width: 38px; height: 38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); color: var(--muted);
  border-radius:999px; cursor:pointer; transition: all .25s;
}
.intro-sound svg{ width:17px; height:17px; }
.intro-sound .ic-mute-x{ opacity:1; transition: opacity .2s; }
.intro-sound:hover{ color: var(--text); border-color: var(--text); }
.intro-sound.show{ opacity:1; pointer-events:auto; }
.intro-sound.is-on .ic-mute-x{ opacity:0; }

/* film grain overlay */
.grain{
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* progress bar */
.progress-bar{ position: fixed; top:0; left:0; width:100%; height:2px; z-index: 210; background: transparent; }
.progress-fill{ height:100%; width:0%; background: linear-gradient(90deg,var(--accent),var(--accent-2)); }

/* nav */
.nav{
  position: fixed; top:0; left:0; width:100%; z-index:150;
  padding: 22px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(7,7,10,0.75);
  backdrop-filter: blur(14px);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.04em; font-size: 15px; }
.brand-mark{ height: 26px; width:auto; }
.brand span{ opacity:.85; }
.nav-links{ display:flex; gap: 32px; }
.nav-links a{ font-size: 14px; color: var(--muted); transition: color .25s; position:relative; }
.nav-links a:hover{ color: var(--text); }
.nav-cta{
  font-size: 13px; font-weight:600; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--line); transition: all .3s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover{ background: var(--text); color: var(--bg); border-color: var(--text); }

@media (max-width: 860px){
  .nav-links{ display:none; }
}

/* sections base */
.section{
  position: relative; min-height: 100vh; width:100%;
  display:flex; align-items:center;
  overflow: hidden;
}

/* HERO */
.hero{
  justify-content:flex-start; flex-direction: column; align-items:flex-start;
  padding: 0 8vw; background: radial-gradient(120% 100% at 50% 0%, #14121a 0%, #07070a 60%);
}
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.4; }
.canvas-3d{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero-vignette{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--bg) 0%, rgba(7,7,10,0.8) 26%, rgba(7,7,10,0.25) 46%, transparent 62%),
    radial-gradient(80% 60% at 62% 45%, transparent 0%, var(--bg) 94%);
  pointer-events:none;
}
.hero-watermark{
  position:absolute; right:-6vw; bottom:-8vh; width: 46vw; max-width:640px;
  opacity:.05; filter: blur(.5px); pointer-events:none;
}
.hero-content{ position:relative; z-index:2; max-width: 880px; margin: auto 0; }
.eyebrow{
  font-size: 13px; letter-spacing: .22em; color: var(--accent); font-weight:600;
  margin-bottom: 22px; text-transform: uppercase;
}
.hero-title{ font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: .98; font-weight:700; letter-spacing:-.02em; }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line-inner{ display:block; will-change: transform; }
.hero-title .accent{ color: var(--accent); }
.hero-sub{
  margin-top: 28px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--muted); font-weight:300;
}
.btn{
  display:inline-block; padding: 15px 32px; border-radius: 999px; font-size: 14px; font-weight:600;
  transition: transform .35s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn-primary{ background: var(--accent); color: #0a0a0a; margin-top: 40px; }
.btn-primary:hover{ transform: translateY(-3px); background: var(--accent-2); }
.btn-ghost{ border: 1px solid var(--line); }
.btn-ghost:hover{ border-color: var(--text); transform: translateY(-3px); }

.scroll-cue{
  position:absolute; bottom: 40px; left: 8vw; z-index:2;
  display:flex; align-items:center; gap:12px; color: var(--muted); font-size:12px; letter-spacing:.12em;
}
.scroll-line{ width:1px; height:46px; background: var(--line); position:relative; overflow:hidden; }
.scroll-dot{ position:absolute; top:0; left:-1px; width:3px; height:14px; background: var(--accent); animation: scrollDown 2.2s ease-in-out infinite; }
@keyframes scrollDown{
  0%{ transform: translateY(-20px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform: translateY(56px); opacity:0; }
}

/* SERVICE SECTIONS */
.service{
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 0 8vw;
}
.service.alt{ background: var(--bg-alt); }
.service-bg{
  position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:flex-end;
  pointer-events:none;
}
.service-bg::before{
  content:''; position:absolute; right: 8%; top:50%; transform: translateY(-50%);
  width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,82,39,0.16) 0%, rgba(255,82,39,0) 70%);
  filter: blur(6px);
}
.bg-art{
  width: 60%; max-width: 720px; height:auto; opacity:.85; transform: translateX(8%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}
.art-lines{ fill:none; stroke: var(--line); stroke-width: 1.4; }
.art-lines circle{ fill: var(--bg); }
.service.alt .art-lines circle{ fill: var(--bg-alt); }
.service::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(120% 100% at 15% 50%, rgba(0,0,0,0.35) 0%, transparent 55%);
}

.service-content{ position:relative; z-index:1; max-width: 620px; padding: 14vh 0; }
.service-index{
  display:block; font-size: 14px; color: var(--accent); font-weight:600; letter-spacing:.1em; margin-bottom: 18px;
}
.service-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight:600; letter-spacing:-.01em; line-height:1.08; margin-bottom: 22px;
}
.service-desc{ font-size: 16px; line-height:1.7; color: var(--muted); max-width: 480px; font-weight:300; }
.service-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 28px; }
.service-tags li{
  font-size: 12.5px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  letter-spacing:.02em;
}

/* reveal animation targets (set by JS/GSAP) */
.reveal{ opacity: 0; }

/* CTA */
.cta-section{
  flex-direction: column; justify-content:center; align-items:center; text-align:center;
  background: linear-gradient(180deg, var(--bg) 0%, #120c09 100%);
  padding: 0 8vw;
}
#ctaCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.cta-bg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; pointer-events:none; }
.handshake-art{ width: min(720px, 85vw); height:auto; opacity:.9; }
.handshake-art .hs-path{
  fill: none; stroke: rgba(244,243,239,0.55); stroke-width: 1.4; stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 26px rgba(255,82,39,0.18));
}
.handshake-art .hs-spark{ fill: var(--accent); opacity:0; filter: drop-shadow(0 0 16px rgba(255,82,39,0.85)); }
.cta-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta-title{ font-size: clamp(2.2rem, 6vw, 4.6rem); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin-top: 14px; }
.cta-sub{ margin-top: 22px; max-width: 460px; color: var(--muted); font-size:16px; font-weight:300; }
.cta-actions{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top: 38px; }

.footer{
  position:relative; z-index:1; width:100%; max-width:1280px; margin-top: 10vh; padding: 28px 0 36px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); letter-spacing:.03em;
}
.footer-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{ color: var(--muted); transition: color .25s; }
.footer-links a:hover{ color: var(--text); }

@media (max-width: 700px){
  .service-content{ padding: 10vh 0; }
  .bg-art{ width:90%; opacity:.35; }
  .hero-sub{ max-width:100%; }
  .footer{ justify-content:center; text-align:center; }
}