:root {
    --bg: #07090d;
    --bg-soft: #0c1017;
    --panel: #111722;
    --panel-2: #171f2c;
    --line: rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.18);
    --text: #f6f7fb;
    --muted: #9ca6b7;
    --muted-2: #6f7a8c;
    --accent: #87a8ff;
    --accent-2: #d6c28a;
    --max: 1440px;
    --pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}
body::selection { background: var(--accent); color: #05070a; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.site-noise {
    position: fixed;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    z-index: 999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.section-shell {
    width: min(100%, var(--max));
    margin-inline: auto;
    padding-inline: var(--pad);
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px var(--pad);
    transition: background .3s ease, border-color .3s ease, padding .3s ease;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: rgba(7,9,13,.84);
    backdrop-filter: blur(20px);
    border-color: var(--line);
    padding-top: 15px;
    padding-bottom: 15px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .16em; }
.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
    font-size: 18px;
}
.brand-word { font-size: 14px; }

.site-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; color: #d7dce5; }
.site-nav > a:not(.button) { position: relative; }
.site-nav > a:not(.button)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1px;
    background: #fff;
    transition: right .25s ease;
}
.site-nav > a:hover::after { right: 0; }
.nav-login { margin-left: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: #fff; }
.nav-toggle span { display: block; width: 18px; height: 1px; background: currentColor; margin: 5px auto; transition: transform .25s ease; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 24px;
    border: 1px solid #fff;
    background: #fff;
    color: #07090d;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .03em;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 18px; }
.button-outline { background: transparent; color: #fff; border-color: var(--line-strong); }
.button-outline:hover { background: #fff; color: #07090d; }
.button-light { background: #07090d; color: #fff; border-color: #07090d; }

.text-link { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px,-3px); }

.hero {
    min-height: 100svh;
    padding-top: 155px;
    padding-bottom: 70px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    gap: clamp(40px, 7vw, 110px);
    align-items: center;
    isolation: isolate;
}
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.7) 60%, transparent 100%);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -2; opacity: .28; }
.hero-orb-one { width: 420px; height: 420px; background: #3d65d8; right: 3%; top: 14%; }
.hero-orb-two { width: 260px; height: 260px; background: #826f3d; left: 22%; bottom: 5%; opacity: .14; }

.eyebrow,.section-kicker { margin: 0 0 20px; color: var(--accent); font-size: 11px; letter-spacing: .23em; font-weight: 700; }
.hero h1 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(58px, 7.5vw, 116px);
    line-height: .91;
    letter-spacing: -.055em;
    max-width: 890px;
}
.hero-lead { max-width: 700px; margin: 28px 0 0; color: #b8c1cf; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.hero-status { position: absolute; bottom: 32px; left: var(--pad); display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #84e3a7; box-shadow: 0 0 16px rgba(132,227,167,.6); }

.feature-card { border: 1px solid var(--line-strong); background: rgba(11,15,22,.72); backdrop-filter: blur(16px); padding: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.28); transform: rotate(1.2deg); }
.feature-card-topline { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 9px; letter-spacing: .18em; padding: 2px 2px 12px; }
.feature-visual { min-height: 450px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(126,163,255,.22), transparent 28%), linear-gradient(135deg,#0f1724,#141925 45%,#0c0f15); display: grid; place-items: center; }
.feature-visual::before,.feature-visual::after { content:''; position:absolute; inset:9%; border:1px solid rgba(255,255,255,.08); transform:rotate(12deg); }
.feature-visual::after { inset:18%; transform:rotate(-13deg); border-color:rgba(214,194,138,.20); }
.feature-monogram { font-family:'Space Grotesk'; font-size:clamp(140px,18vw,260px); line-height:1; font-weight:700; color:rgba(255,255,255,.92); text-shadow:0 12px 60px rgba(90,130,255,.28); z-index:2; }
.feature-scan { position:absolute; inset:-30% 0 auto; height:22%; background:linear-gradient(to bottom, transparent, rgba(135,168,255,.10), transparent); animation:scan 5s linear infinite; }
@keyframes scan { to { transform:translateY(650px); } }
.feature-caption { position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.18em; color:#bdc6d4; }
.feature-card-bottom { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:16px 4px 4px; }
.feature-card-bottom strong,.feature-card-bottom span { display:block; }
.feature-card-bottom strong { font-size:14px; }
.feature-card-bottom span { color:var(--muted); font-size:11px; margin-top:4px; }
.feature-card-bottom > a { font-size:22px; }

.statement { padding-top: 140px; padding-bottom: 150px; border-top: 1px solid var(--line); }
.statement h2 { font-family:'Space Grotesk'; font-size:clamp(38px,5vw,76px); letter-spacing:-.045em; line-height:1.03; max-width:1200px; margin:0; }
.statement h2 em { color:var(--accent-2); font-style:normal; }
.statement > p:last-child { color:var(--muted); max-width:730px; font-size:18px; margin:38px 0 0 auto; }

.build-section,.process-section,.about-section { padding-top: 120px; padding-bottom: 130px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; margin-bottom:50px; }
.section-heading h2,.about-copy h2,.beats-copy h2,.start-inner h2 { font-family:'Space Grotesk'; font-size:clamp(38px,4.8vw,70px); line-height:1; letter-spacing:-.045em; margin:0; }
.section-heading > p { color:var(--muted); max-width:520px; margin:0; font-size:16px; }

.build-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.build-card { min-height:370px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; transition:background .3s ease, transform .3s ease; }
.build-card::before { content:''; position:absolute; inset:auto -20% -50% auto; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(135,168,255,.14), transparent 70%); transition:transform .3s ease; }
.build-card:hover { background:#0d121a; }
.build-card:hover::before { transform:scale(1.3); }
.build-number { color:var(--muted-2); font-size:10px; letter-spacing:.14em; }
.build-icon { margin-top:54px; font-size:27px; color:var(--accent); }
.build-card h3 { font-family:'Space Grotesk'; font-size:34px; margin:15px 0 10px; }
.build-card p { color:var(--muted); max-width:520px; margin:0; }
.card-arrow { position:absolute; bottom:30px; left:34px; font-size:12px; font-weight:600; }
.build-card-featured { background:linear-gradient(145deg,rgba(135,168,255,.13),rgba(214,194,138,.05)); }

.work-section { padding:120px 0 130px; background:#0a0d12; border-block:1px solid var(--line); }
.project-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; }
.project-card { border:1px solid var(--line); background:#0c1016; }
.project-card:nth-child(3) { grid-column:2; }
.project-large { grid-row:span 2; }
.project-art { min-height:340px; position:relative; overflow:hidden; padding:20px; }
.project-large .project-art { min-height:650px; }
.project-art-label { position:relative; z-index:2; font-size:9px; letter-spacing:.18em; color:#cbd3df; }
.art-one { background:radial-gradient(circle at 30% 30%,rgba(135,168,255,.26),transparent 25%),linear-gradient(145deg,#172033,#090c12 65%); display:flex; align-items:flex-end; }
.project-art-word { font-family:'Space Grotesk'; font-weight:700; font-size:clamp(60px,9vw,140px); letter-spacing:-.08em; line-height:.8; transform:translateX(-6px); }
.art-two { background:linear-gradient(150deg,#1a2130,#0c1017); display:grid; place-items:center; }
.browser-frame { width:78%; height:66%; border:1px solid rgba(255,255,255,.14); background:rgba(7,9,13,.78); padding:18px; transform:perspective(700px) rotateY(-8deg) rotateX(5deg); box-shadow:25px 30px 60px rgba(0,0,0,.3); }
.browser-dots { display:flex; gap:5px; margin-bottom:22px; }
.browser-dots i { width:6px;height:6px;border-radius:50%;background:#566176; }
.browser-line { height:9px; width:72%; background:#46536a; margin-bottom:12px; }
.browser-line.short { width:46%; }
.browser-panel { height:55%; margin-top:24px; background:linear-gradient(120deg,rgba(135,168,255,.20),rgba(214,194,138,.10)); border:1px solid rgba(255,255,255,.08); }
.art-three { background:radial-gradient(circle at 75% 20%,rgba(214,194,138,.18),transparent 25%),#11151d; display:flex; align-items:flex-end; }
.brand-stack { display:flex; gap:.04em; font-family:'Space Grotesk'; font-size:clamp(54px,7vw,100px); line-height:.7; letter-spacing:-.09em; }
.brand-stack b:nth-child(2),.brand-stack b:nth-child(4){ color:#657796; }
.project-meta { display:flex; justify-content:space-between; gap:20px; padding:22px; border-top:1px solid var(--line); }
.project-meta span { color:var(--muted-2); font-size:10px; letter-spacing:.08em; }
.project-meta h3 { font-family:'Space Grotesk'; font-size:20px; margin:6px 0 0; }
.project-link { font-size:21px!important; color:#fff!important; }

.beats-section { padding-top:130px; padding-bottom:130px; }
.beats-panel { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; border:1px solid var(--line); padding:clamp(28px,5vw,70px); background:linear-gradient(135deg,#0c1119,#101722); }
.beats-copy p:not(.section-kicker) { color:var(--muted); max-width:560px; margin:22px 0 30px; }
.player-shell { border:1px solid var(--line-strong); background:#080b10; padding:16px; box-shadow:0 30px 80px rgba(0,0,0,.25); }
.player-art { aspect-ratio:16/9; display:grid; place-items:center; background:radial-gradient(circle,rgba(135,168,255,.24),transparent 28%),repeating-linear-gradient(135deg,transparent 0 25px,rgba(255,255,255,.025) 25px 26px),#121824; font-family:'Space Grotesk'; font-size:clamp(42px,6vw,90px); font-weight:700; letter-spacing:.12em; }
.player-info { padding:18px 4px 2px; }
.player-title { display:flex; justify-content:space-between; gap:20px; }
.player-title strong { font-size:14px; }
.player-title span { color:var(--muted); font-size:12px; }
.waveform { display:flex; height:70px; align-items:center; gap:5px; overflow:hidden; margin:10px 0; }
.waveform i { flex:1; min-width:3px; background:#667695; height:var(--h,30%); opacity:.9; }
.waveform i:nth-child(2n){height:65%}.waveform i:nth-child(3n){height:35%}.waveform i:nth-child(4n){height:85%}.waveform i:nth-child(5n){height:50%}
.player-controls { display:flex; align-items:center; gap:12px; font-size:10px; color:var(--muted); }
.play-button { width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#090b10;cursor:pointer; }
.player-line { height:2px; background:#273141; flex:1; position:relative; }
.player-line span { position:absolute; inset:0 72% 0 0; background:#fff; }
.license-button { border:1px solid var(--line); background:transparent; color:#fff; padding:9px 12px; cursor:pointer; }

.process-track { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.process-step { min-height:260px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px; }
.process-step > span { color:var(--accent); font-size:10px; letter-spacing:.15em; }
.process-step strong { display:block; font-family:'Space Grotesk'; font-size:23px; margin:65px 0 10px; }
.process-step p { color:var(--muted); font-size:14px; margin:0; }

.about-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(50px,10vw,150px); align-items:center; border-top:1px solid var(--line); }
.about-mark { aspect-ratio:1; border:1px solid var(--line); display:grid; place-items:center; font-family:'Space Grotesk'; font-size:clamp(130px,20vw,300px); font-weight:700; background:radial-gradient(circle,rgba(135,168,255,.13),transparent 45%); }
.about-copy p:not(.section-kicker) { color:var(--muted); font-size:17px; max-width:760px; margin:26px 0; }

.start-section { background:#e9edf5; color:#07090d; padding:120px 0; }
.start-inner { text-align:center; }
.start-inner .section-kicker { color:#53627b; }
.start-inner h2 { font-size:clamp(48px,7vw,100px); max-width:1000px; margin-inline:auto; }
.start-inner > p:not(.section-kicker) { color:#596273; font-size:18px; }
.start-actions { margin-top:36px; display:flex; justify-content:center; gap:28px; align-items:center; }
.text-link-light { color:#07090d; }

.site-footer { padding-top:55px; padding-bottom:35px; }
.footer-top,.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-top { padding-bottom:45px; border-bottom:1px solid var(--line); }
.footer-top p { color:var(--muted); }
.footer-bottom { padding-top:24px; color:var(--muted-2); font-size:11px; }
.footer-bottom div { display:flex; gap:20px; }
.footer-bottom a:hover { color:#fff; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.delay-one { transition-delay:.12s; }
.delay-two { transition-delay:.22s; }

@media (max-width: 1050px) {
    .site-nav { position:fixed; inset:0 0 auto auto; width:min(420px,100%); height:100svh; padding:100px 32px 32px; background:#090c11; flex-direction:column; align-items:flex-start; transform:translateX(100%); transition:transform .3s ease; border-left:1px solid var(--line); }
    .site-nav.open { transform:none; }
    .site-nav a { font-size:20px; }
    .nav-toggle { display:block; position:relative; z-index:101; }
    .nav-toggle.open span:first-child{ transform:translateY(3px) rotate(45deg); }
    .nav-toggle.open span:last-child{ transform:translateY(-3px) rotate(-45deg); }
    .hero { grid-template-columns:1fr; padding-top:140px; }
    .hero-feature { width:min(720px,100%); justify-self:end; }
    .feature-visual { min-height:380px; }
    .hero-status { display:none; }
    .project-grid { grid-template-columns:1fr; }
    .project-card:nth-child(3){grid-column:auto}.project-large{grid-row:auto}.project-large .project-art{min-height:480px}
    .beats-panel { grid-template-columns:1fr; }
    .process-track { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px) {
    .site-header { padding-inline:20px; }
    .section-shell { padding-inline:20px; }
    .hero { padding-top:120px; padding-bottom:80px; }
    .hero h1 { font-size:clamp(50px,14.5vw,78px); }
    .hero-lead { font-size:16px; }
    .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
    .feature-card { transform:none; }
    .feature-visual { min-height:320px; }
    .statement,.build-section,.work-section,.beats-section,.process-section,.about-section { padding-top:90px; padding-bottom:90px; }
    .statement > p:last-child { margin-left:0; }
    .section-heading { align-items:flex-start; flex-direction:column; gap:20px; }
    .build-grid { grid-template-columns:1fr; }
    .build-card { min-height:330px; }
    .project-large .project-art,.project-art { min-height:380px; }
    .beats-panel { padding:24px; gap:40px; }
    .player-title { flex-direction:column; gap:2px; }
    .player-controls { flex-wrap:wrap; }
    .player-line { min-width:120px; }
    .process-track { grid-template-columns:1fr; }
    .about-section { grid-template-columns:1fr; }
    .about-mark { max-width:420px; width:100%; }
    .start-actions { flex-direction:column; }
    .footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; }
    .footer-bottom div { flex-wrap:wrap; }
}

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