/* timeleft-like theme for your site (merge or replace as needed) */

/*-------------------------
    Variables & theming
--------------------------*/
:root{
    --bg: #071026;               /* deep navy */
    --surface: rgba(255,255,255,0.03);
    --panel: rgba(255,255,255,0.02);
    --text: #e6f7ff;            /* cool off-white */
    --muted: #9fb6cc;
    --primary: linear-gradient(90deg,#00f5ff 0%,#7c5cff 100%); /* cyan -> purple */
    --accent: #00f5ff;          /* neon cyan */
    --accent-600: #00c7d9;
    --danger: #ff6b6b;
    --radius: 12px;
    --container-max: 1100px;
    --gap: 1rem;
    --shadow-sm: 0 6px 18px rgba(2,6,23,0.5);
    --shadow-md: 0 18px 40px rgba(2,6,23,0.6);
    --transition: 220ms cubic-bezier(.2,.8,.2,1);
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
    --code-bg: rgba(255,255,255,0.02);
    --max-content-width: 75ch;
}

/* Respect user's dark mode fallback (keeps the same but ensures contrast) */
@media (prefers-color-scheme: light){
    :root{
         --bg: #0b1220;
         --surface: rgba(255,255,255,0.03);
         --text: #e6f7ff;
         --muted: #9fb6cc;
    }
}

/*-------------------------
    Base / Reset (kept minimal)
--------------------------*/
*,
*::before,
*::after { box-sizing: border-box; }

html, body, #root { height: 100%; }

html {
    font-family: var(--font-sans);
    line-height: 1.45;
    font-size: 16px;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(0,245,255,0.04), transparent 10%),
                            radial-gradient(900px 400px at 90% 90%, rgba(124,92,255,0.03), transparent 12%),
                            var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
}

/* links */
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus { color: var(--accent-600); outline: none; }

/* headings */
h1,h2,h3,h4 { color: var(--text); font-weight: 700; margin: 0 0 .5rem 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(4rem, 11vw, 8.2rem); color: #ffffff; }

/* paragraphs */
p { margin: 0 0 1rem 0; color: var(--muted); font-size: 1.1rem; }

/* small code */
code { font-family: var(--mono); background: var(--code-bg); padding: .15rem .4rem; border-radius: 6px; font-size: .95em; }

/* containers */
.container { width: min(100%, var(--container-max)); padding: 1rem; margin: 0 auto; }

/* header */
.site-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    padding: .75rem 0;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
}
.site-header .container { display:flex; gap:var(--gap); align-items:center; justify-content:space-between; }

/* nav */
.nav a { color: var(--muted); padding: .45rem .65rem; border-radius: 8px; font-weight:600; }
.nav a:hover { color: var(--text); background: rgba(255,255,255,0.02); }

/* main */
.main { padding: 3rem 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.content { max-width: var(--max-content-width); margin: 0 auto; text-align: center; }

/* cards/panels - glassy */
.card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    backdrop-filter: blur(6px) saturate(120%);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.8rem;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color: var(--text);
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-primary {
    background: var(--primary);
    color: #01121b;
    box-shadow: 0 12px 40px rgba(0,245,255,0.15);
    font-weight: 700;
    letter-spacing: 0.8px;
}

.btn-primary:hover {
    box-shadow: 0 18px 50px rgba(0,245,255,0.25);
    transform: translateY(-4px);
}

/* button group */
.button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* subtle glow utility */
.glow {
    text-shadow: 0 6px 28px rgba(0,245,255,0.08), 0 2px 8px rgba(124,92,255,0.04);
}

/*-------------------------
    Timeleft-like hero / timer components
--------------------------*/
.hero {
    display:flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.5rem 1rem;
}

.hero .meta { max-width: 56ch; color: var(--muted); margin: 0 auto 1.25rem; }

.countdown {
    display: grid;
    grid-auto-flow: column;
    gap: 0.9rem;
    align-items: end;
    justify-content: center;
}

/* each time block */
.time-block {
    display:flex;
    flex-direction:column;
    gap:.5rem;
    align-items:center;
}

/* large digit capsule */
.digit {
    min-width: 5.4rem;
    padding: .6rem .9rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 12px 40px rgba(2,6,23,0.5), inset 0 1px 0 rgba(255,255,255,0.02);
    color: var(--text);
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(1.4rem, 4.6vw, 3.6rem);
    line-height: 1;
    display:flex;
    align-items:center;
    justify-content:center;
    letter-spacing: -0.02em;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

/* slight hover / active emphasis */
.digit:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(2,6,23,0.6); }

/* label under numbers */
.digit-label {
    font-size: .75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* separator / colon */
.colon {
    color: var(--muted);
    font-weight:700;
    font-size: clamp(1.2rem, 3vw, 2rem);
    align-self: center;
    padding: 0 .25rem;
}

/* compact / mobile adjustments */
@media (max-width:720px){
    .hero { padding: 2rem 1rem; flex-direction:column; }
    .countdown { gap: .6rem; grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
    .digit { min-width: 4.6rem; font-size: clamp(1.1rem, 8vw, 2.4rem); padding:.5rem .75rem; }
    .colon { display:none; }
}

/* accent gradient text helper */
.gradient-text {
    background: linear-gradient(90deg,#00f5ff 0%, #7c5cff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* small utilities */
.text-center { text-align: center; }
.lead { font-size: 1.05rem; color: var(--muted); }

/* about page header */
.about-header {
    padding: 2rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
}

.about-header h2 {
    font-size: clamp(1.8rem, 5vw, 3.6rem);
    color: #ffffff;
    margin: 0;
}

.main-about {
    padding: 3rem 0;
    padding-top: 12rem;
}

/* footer */
.site-footer {
    padding: 1.25rem 0;
    color: var(--muted);
    border-top: 1px solid rgba(255,255,255,0.03);
    background: transparent;
}