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

:root { color-scheme: dark; --bg:#08090b; --text:#e9e8e4; --subtle:#a5a29e; --muted:#656665; --line:#343638; --accent:#b69e83; }
* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; }
body { margin:0; min-height:100svh; color:var(--text); background:var(--bg); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:var(--accent); color:var(--bg); }
.site-shell { min-height:100svh; width:100%; display:grid; grid-template-rows:auto 1fr auto; position:relative; isolation:isolate; padding:0 clamp(24px,5.2vw,94px); }
.site-shell::before { content:""; position:absolute; pointer-events:none; inset:0; z-index:-3; background:radial-gradient(ellipse 43% 53% at 52% 52%,rgba(37,40,44,.35),transparent 76%); }
.grain { position:fixed; inset:-50%; z-index:7; pointer-events:none; opacity:.11; 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='.2'/%3E%3C/svg%3E"); background-size:200px; }
.ambient { position:fixed; border-radius:50%; z-index:-2; pointer-events:none; filter:blur(80px); opacity:.35; animation:drift 22s ease-in-out infinite alternate; }
.ambient-one { width:min(40vw,620px); height:min(40vw,620px); background:#202b31; top:15%; left:21%; }
.ambient-two { width:min(27vw,410px); height:min(27vw,410px); background:#30251f; bottom:5%; right:9%; animation-duration:30s; animation-direction:alternate-reverse; opacity:.22; }
.site-header, .site-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; z-index:2; }
.site-header { padding-top:clamp(26px,4.7vh,54px); }
.brand-small { font-size:27px; font-weight:800; line-height:1; letter-spacing:-.115em; }
.brand-mark, .terminal-dot, .subtitle-dot { color:var(--accent); }
.header-index, .sound-toggle, .site-footer, .eyebrow { font-family:'DM Mono',monospace; letter-spacing:.15em; font-size:10px; }
.header-index { color:#777978; position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; }
.sound-toggle { background:none; color:#9b9c99; border:0; display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 0 8px 12px; }
.sound-toggle:hover, .site-footer a:hover { color:var(--text); }
.toggle-indicator { height:5px; width:5px; border-radius:50%; background:#9baf9b; box-shadow:0 0 12px #9baf9b80; }
.motion-paused .toggle-indicator { background:#656665; box-shadow:none; }
.hero { min-height:540px; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-inner { position:relative; z-index:1; width:100%; transform:translateY(-2%); }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:16px; color:var(--accent); margin:0 0 clamp(30px,5.2vh,65px); font-weight:400; font-size:10px; }
.eyebrow-line { width:24px; height:1px; background:var(--accent); opacity:.6; }
.wordmark { font-weight:600; font-size:clamp(60px,12.25vw,220px); line-height:1.05; letter-spacing:-.095em; margin:0; white-space:nowrap; padding-right:.065em; text-indent:-.065em; text-shadow:0 1px 45px #ffffff06; }
.terminal-dot { letter-spacing:-.09em; }
.hero-subtitle { font-size:clamp(11px,1.15vw,15px); line-height:2.1; letter-spacing:.3em; font-weight:400; color:#9a9997; margin:clamp(30px,5vh,58px) 0 0; }
.hero-orbit { width:min(46vw,640px); height:min(46vw,640px); border:1px solid rgba(167,155,140,.06); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; pointer-events:none; box-shadow:0 0 110px #c0a68b05,inset 0 0 110px #c0a68b04; animation:breath 9s ease-in-out infinite alternate; }
.hero-orbit::before, .hero-orbit::after { content:""; border:1px solid rgba(167,155,140,.045); border-radius:50%; position:absolute; inset:10%; }
.hero-orbit::after { inset:24%; }
.hero-orbit-core { position:absolute; inset:35%; border-radius:50%; background:#a58d7320; filter:blur(60px); }
.site-footer { min-height:98px; border-top:1px solid #ffffff1a; color:#777978; }
.footer-left, .footer-right { flex:1; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.footer-symbol { font-size:18px; color:var(--accent); line-height:1; }
.footer-center { flex:1; text-align:center; white-space:nowrap; }
.footer-right { justify-content:flex-end; }
.footer-right a { transition:color .25s; white-space:nowrap; }
.footer-right a span { font-size:15px; margin-left:7px; color:var(--accent); }
.reveal { opacity:0; transform:translateY(15px); animation:appear 1.25s cubic-bezier(.2,.6,.2,1) forwards; }
.reveal-one { animation-delay:.2s; }.reveal-two { animation-delay:.45s; }.reveal-three { animation-delay:.8s; }
@keyframes appear { to { opacity:1; transform:translateY(0); } }
@keyframes drift { to { transform:translate(8vw,-5vh) scale(1.15); } }
@keyframes breath { to { opacity:.4; transform:translate(-50%,-50%) scale(1.075); } }
.motion-paused .ambient, .motion-paused .hero-orbit { animation-play-state:paused; }
@media(max-width:650px) { .site-shell { padding:0 24px; }.header-index { display:none; }.site-header { padding-top:28px; }.hero { min-height:480px; }.wordmark { font-size:clamp(44px,12.7vw,78px); letter-spacing:-.09em; }.eyebrow { font-size:8px; letter-spacing:.1em; gap:10px; }.eyebrow-line { width:15px; }.hero-subtitle { letter-spacing:.18em; font-size:10px; }.hero-orbit { width:88vw; height:88vw; }.site-footer { min-height:100px; flex-wrap:wrap; padding:23px 0; row-gap:15px; }.footer-center { order:3; flex-basis:100%; margin:0; text-align:left; font-size:9px; }.footer-left,.footer-right { font-size:9px; }.sound-toggle { font-size:9px; } }
@media(max-width:380px) { .wordmark { font-size:12vw; }.site-shell { padding:0 18px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } .reveal { opacity:1; transform:none; } }





/* ============================================================
   PRALINQ LOGO / COUNTDOWN TRANSITION
   ============================================================ */

.hero-display {
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
}

/* Both elements occupy the same space */
.hero-display-item {
    grid-area: 1 / 1;
    transition: opacity 1.5s ease-in-out;
}

/* Logo visible by default */
.hero-display .wordmark {
    opacity: 1;
    visibility: visible;
}

/* Countdown hidden by default */
.hero-display .countdown {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1.5s ease-in-out,
        visibility 1.5s;
}

/* When countdown is active */
.hero-display.show-countdown .wordmark {
    opacity: 0;
    visibility: hidden;
}

.hero-display.show-countdown .countdown {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   COUNTDOWN STYLING
   ============================================================ */

.countdown {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.countdown-values {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, 1vw, 16px);

    font-family: inherit;
    font-size: clamp(1.8rem, 5.5vw, 5.5rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.15;

    color: #eeece8;
}

.countdown-separator {
    color: #b69e83;
    font-weight: 200;
}

.countdown-labels {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    padding-top: 14px;

    font-size: clamp(0.5rem, 1vw, 0.7rem);
    font-weight: 400;
    letter-spacing: 0.18em;

    color: #8c8177;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .countdown-values {
        font-size: clamp(1.4rem, 6vw, 2.5rem);
        gap: 5px;
    }

    .countdown-labels {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
        padding-top: 10px;
    }
}