@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #08090b;
    --text: #f2f2ed;
    --muted: #999b9d;
    --line: #25272b;
    --accent: #d8ff54
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Manrope,Arial,sans-serif; overflow-x: hidden }
a { color: inherit; text-decoration: none }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .12; pointer-events: none }
.orb-a { width: 420px; height: 420px; background: #b7ff30; right: -140px; top: 100px }
.orb-b { width: 300px; height: 300px; background: #4d78ff; left: -130px; top: 700px }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 6vw; border-bottom: 1px solid var(--line); position: relative; z-index: 2 }
.brand { font-size: 19px; font-weight: 800; letter-spacing: -1px }
.brand span { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #555; border-radius: 50%; width: 27px; height: 27px; font-size: 9px; margin-right: 5px; letter-spacing: 0 }
.nav nav { display: flex; gap: 34px; font-size: 13px; color: #aaa }
.nav nav a:hover, .text-link:hover { color: #fff }
.nav-btn { border: 1px solid #383a3e; border-radius: 30px; padding: 11px 16px; font-size: 12px }
.nav-btn i { font-style: normal; margin-left: 9px }
.hero { min-height: calc(100vh - 88px); padding: 15vh 9vw 7vh; position: relative }
.eyebrow, .section-head small, .statement-label, footer small { font: 500 10px 'DM Mono',monospace; letter-spacing: 2px; color: #8e9093 }
.eyebrow span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; box-shadow: 0 0 15px var(--accent) }
h1 { font-size: clamp(58px,9vw,132px); line-height: .91; letter-spacing: -.075em; margin: 27px 0 34px; font-weight: 700; max-width: 1000px }
em { font-style: normal; color: #76797d }
.hero-copy { font-size: 17px; line-height: 1.65; color: #a6a7aa; max-width: 530px }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 42px; position: relative; z-index: 3 }
.primary { display: inline-flex; gap: 28px; align-items: center; background: var(--accent); color: #08090b; padding: 15px 18px 15px 20px; border: 1px solid rgba(216,255,84,.35); border-radius: 4px; font-weight: 800; font-size: 12px; box-shadow: 0 0 28px rgba(216,255,84,.08); transition: transform .25s,box-shadow .25s,background .25s }
.primary:hover { transform: translateY(-2px); background: #e2ff78; box-shadow: 0 0 34px rgba(216,255,84,.16) }
.primary b { font-size: 16px }
.text-link { font-size: 12px; color: #a3a5a7 }
.hero-meta { position: relative; left: auto; right: auto; bottom: auto; margin-top: 38px; border-top: 1px solid var(--line); padding-top: 13px; display: flex; justify-content: space-between; font: 10px 'DM Mono',monospace; color: #686b70 }
.section { padding: 130px 9vw }
.section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 55px }
.section-head h2, .statement h2 { font-size: clamp(44px,6vw,78px); line-height: .95; letter-spacing: -.06em; margin: 16px 0 0 }
.section-head p { color: #777a7e; max-width: 310px; line-height: 1.6; font-size: 13px }
.cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px }
.card { min-height: 460px; border: 1px solid var(--line); border-radius: 8px; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; transition: transform .35s,border-color .35s }
.card:hover { transform: translateY(-5px); border-color: #4b4e53 }
.card-main { background: radial-gradient(circle at 70% 45%,#1d2a18,transparent 45%),#0d0f11 }
.card-calendar { background: radial-gradient(circle at 70% 45%,#222b18,transparent 48%),#0d0f11 }
.calendar-mark { position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 190px }
.calendar-icon { border: 1px solid #3b4330; border-radius: 12px; padding: 22px 18px; background: rgba(8,9,11,.72); box-shadow: 0 20px 60px rgba(216,255,84,.08); text-align: center }
.calendar-month { display: block; font: 10px 'DM Mono',monospace; letter-spacing: 1.5px; color: var(--accent); margin-bottom: 9px }
.calendar-icon strong { display: block; font-size: 25px; letter-spacing: -1.5px }
.calendar-icon small { display: block; margin-top: 8px; font: 9px 'DM Mono',monospace; color: #777b80 }
.card-pause { background: radial-gradient(circle at 50% 45%,#1d2a18,transparent 45%),#0d0f11 }
.card-top { display: flex; justify-content: space-between; font: 10px 'DM Mono',monospace; color: #777b80 }
.arrow { font-size: 20px; color: #ddd }
.pause-mark { position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%) }
.pause-bars { display: flex; gap: 13px }
.pause-bars i { display: block; width: 32px; height: 112px; background: var(--accent); border-radius: 5px; box-shadow: 0 0 50px rgba(216,255,84,.2) }
.card-bottom { display: flex; justify-content: space-between; align-items: end; position: relative; z-index: 1 }
.card h3 { font-size: 29px; margin: 0 0 7px; letter-spacing: -1px }
.card p { font-size: 12px; color: #81858a; margin: 0; max-width: 380px; line-height: 1.5 }
.launch { font: 10px 'DM Mono',monospace; color: var(--accent) }
.card-soon { background: #0b0c0e }
.soon-symbol { font-size: 120px; font-weight: 200; color: #26282b; text-align: center; line-height: 1 }
.statement { display: grid; grid-template-columns: .8fr 2fr; gap: 60px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.statement p { max-width: 610px; color: #999b9f; line-height: 1.8; font-size: 17px; margin-top: 35px }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-top: 90px; padding-bottom: 150px }
.principle { border-top: 1px solid var(--line); padding-top: 18px }
.principle span { font: 10px 'DM Mono',monospace; color: #666 }
.principle h3 { font-size: 25px; margin: 50px 0 10px }
.principle p { color: #777a7e; font-size: 13px; line-height: 1.6; max-width: 250px }
footer { border-top: 1px solid var(--line); padding: 55px 9vw 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px }
.footer-brand p { color: #66696d; font-size: 12px }
.footer-links { display: flex; gap: 100px }
.footer-links div { display: flex; flex-direction: column; gap: 12px }
.footer-links a { font-size: 12px; color: #888b90 }
.footer-links a:hover { color: var(--accent) }
.copyright { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); color: #55585c; font: 10px 'DM Mono',monospace }

@media (max-width: 900px) {
    .hero-actions { flex-wrap: wrap }
    .hero-meta { position: static; margin-top: 90px }
    .section-head, .statement { display: block }
    .section-head p { margin-top: 25px }
    footer { grid-template-columns: 1fr }
}

@media (max-width: 760px) {
    .nav nav { display: none }
    .hero { padding: 12vh 6vw 6vh }
    .section { padding: 90px 6vw }
    .cards, .principles { grid-template-columns: 1fr }
    .hero-meta { gap: 14px; flex-wrap: wrap }
    .footer-links { gap: 45px }
}

/* Restored global visual layer and original secondary-page styling. */
body:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -5;
    background: radial-gradient(ellipse at 50% -15%,#1a1d20 0%,#0c0e10 38%,#08090b 70%);
    pointer-events: none;
}

.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    opacity: .27;
    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,black 0%,transparent 82%);
}

.noise {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: .035;
    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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.orb { mix-blend-mode: screen }
.orb-a { background: #caff55 }
.orb-b { background: #5c76ff }

.legal {
    max-width: 780px;
    padding: 110px 9vw 150px;
    margin: auto;
}

.legal h1 {
    font-size: clamp(55px,7vw,90px);
    margin-bottom: 15px;
}

.legal h2 {
    font-size: 21px;
    margin: 48px 0 12px;
}

.legal p {
    color: #999b9f;
    line-height: 1.8;
    font-size: 14px;
}

.legal .updated {
    font: 10px 'DM Mono',monospace;
    color: #666;
}

.hero-page { min-height: 70vh }
.hero-page h1 { font-size: clamp(58px,8vw,110px) }
.hero-page .primary { margin-top: 35px }

.delivered {
    margin-top: 100px;
    border-top: 1px solid var(--line);
    padding-top: 38px;
}

.delivered-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 25px;
}

.delivered-head h3 {
    font-size: clamp(31px,4vw,50px);
    line-height: 1;
    letter-spacing: -.055em;
    margin: 14px 0 0;
}

.delivered-head p {
    max-width: 310px;
    color: #777a7e;
    font-size: 12px;
    line-height: 1.6;
}

.delivered-grid { border-top: 1px solid var(--line) }

.delivered-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 25px;
    padding: 23px 0;
    border-bottom: 1px solid var(--line);
}

.delivered-item > span,
.delivered-item > b {
    font: 10px 'DM Mono',monospace;
    color: #5e6267;
}

.delivered-item strong { font-size: 19px; letter-spacing: -.5px }
.delivered-item p { margin: 5px 0 0; color: #73767b; font-size: 11px }
.delivered-item > b { font-weight: 400 }
.delivered-item:hover strong { color: var(--accent) }

.contact-hero { min-height: auto; padding-bottom: 95px }
.contact-lead { font-size: 18px !important; line-height: 1.75 !important; max-width: 650px !important }

.contact-details {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 9vw 130px;
}

.contact-detail {
    display: grid;
    grid-template-columns: 55px 1fr;
    border-top: 1px solid var(--line);
    padding: 42px 0;
    gap: 25px;
}

.contact-detail:last-child { border-bottom: 1px solid var(--line) }
.contact-detail > span { font: 10px 'DM Mono',monospace; color: #5e6267 }
.contact-detail small,
.contact-cta small { font: 500 10px 'DM Mono',monospace; letter-spacing: 2px; color: #8e9093 }
.contact-detail h2 { font-size: clamp(25px,3vw,38px); letter-spacing: -.045em; margin: 14px 0 14px }
.contact-detail p { max-width: 650px; color: #999b9f; line-height: 1.8; font-size: 14px; margin: 0 0 18px }
.contact-detail a { font: 11px 'DM Mono',monospace; color: var(--accent) }

.contact-cta {
    margin: 0 9vw 130px;
    padding: 55px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.contact-cta h2 { font-size: clamp(35px,5vw,62px); letter-spacing: -.06em; margin: 14px 0 0 }

.project-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.project-notes > div { border-top: 1px solid var(--line); padding: 20px 0 }
.project-notes span { font: 10px 'DM Mono',monospace; color: #686b70; letter-spacing: 1px }
.project-notes p { margin: 9px 0 0; color: #777a7e; font-size: 12px; line-height: 1.65; max-width: 520px }

@media (max-width: 760px) {
    .nav { padding: 0 5vw }
    .hero, .section { padding-left: 5vw; padding-right: 5vw }
    .hero { padding-top: 110px; min-height: calc(100vh - 88px) }
    h1 { font-size: 58px }
    .hero-meta { left: 5vw; right: 5vw; gap: 10px }
    .hero-meta span:nth-child(2) { display: none }
    .section-head { display: block }
    .section-head p { margin-top: 25px }
    .cards { grid-template-columns: 1fr }
    .card { min-height: 390px }
    .statement { grid-template-columns: 1fr; gap: 25px }
    .principles { grid-template-columns: 1fr; padding-top: 60px }
    .footer-links { gap: 35px }
    footer { grid-template-columns: 1fr; padding-left: 5vw; padding-right: 5vw }
    .legal { padding-left: 5vw; padding-right: 5vw }
    .legal h1 { font-size: 58px }
    .delivered-head { display: block }
    .delivered-head p { margin-top: 22px }
    .delivered-item { grid-template-columns: 35px 1fr }
    .delivered-item > b { display: none }
    .contact-details { padding-left: 5vw; padding-right: 5vw }
    .contact-detail { grid-template-columns: 35px 1fr }
    .contact-cta { margin-left: 5vw; margin-right: 5vw; display: block }
    .contact-cta .primary { margin-top: 28px }
    .project-notes { grid-template-columns: 1fr }
}