/* Skycast site styles. One file, no build step. Sections: tokens, base, layout, header, footer, components, pages. */

/* ---------- Tokens ---------- */
:root {
    --bg: #fbfbfd;
    --surface: #ffffff;
    --surface-2: #f2f3f7;
    --ink: #0b0b10;
    --ink-2: #3f424b;
    --ink-3: #5f6370;
    --line: rgba(10, 12, 20, 0.09);
    --accent: #1f4fff;
    --accent-ink: #ffffff;
    --focus: #1f4fff;
    --logo: #03096b;

    --sky-1: #2a3cff;
    --sky-2: #00a3ff;
    --sky-3: #7c4dff;
    --sun: #ff8a3d;

    --radius-s: 12px;
    --radius: 22px;
    --radius-l: 32px;
    --shadow: 0 1px 2px rgba(10, 12, 20, 0.04), 0 8px 24px rgba(10, 12, 20, 0.06);
    --shadow-l: 0 2px 4px rgba(10, 12, 20, 0.04), 0 24px 60px rgba(10, 12, 20, 0.12);

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Noto Sans", "Noto Sans Tamil", "Noto Sans Devanagari", sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --wrap: 1200px;
    --gutter: clamp(20px, 5vw, 48px);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    color-scheme: light;
}

[data-theme="dark"],
.dark {
    --bg: #05060a;
    --surface: #0e1017;
    --surface-2: #151823;
    --ink: #f5f5f7;
    --ink-2: #c3c6cf;
    --ink-3: #9a9eab;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #5b8cff;
    --accent-ink: #05060a;
    --focus: #8fb0ff;
    --logo: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-l: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 400 1.0625rem/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
main:focus { outline: none; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; font-weight: 600;
    text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.section { padding-block: clamp(80px, 12vw, 160px); position: relative; }
.section-tight { padding-block: clamp(56px, 8vw, 104px); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.6; }
.display { font-size: clamp(2.75rem, 7.2vw, 6.25rem); letter-spacing: -0.045em; line-height: 0.98; }
.h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); letter-spacing: -0.04em; line-height: 1.02; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); letter-spacing: -0.035em; }
.h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.012em; }
.muted { color: var(--ink-3); }
.section-head { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

.gradient-text {
    background: linear-gradient(100deg, #2a3cff 0%, #0a7fd6 40%, #7c4dff 70%, #d9560f 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: sheen 9s var(--ease) infinite alternate;
}
.dark .gradient-text, [data-theme="dark"] .gradient-text {
    background-image: linear-gradient(100deg, #7aa2ff 0%, #39c6ff 40%, #b18cff 70%, #ffae73 100%);
}
@keyframes sheen { to { background-position: 100% 0; } }

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: 999px;
    font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: -0.01em;
    transition: transform 0.3s var(--ease), background-color 0.2s, box-shadow 0.3s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.link-arrow {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--accent);
}
.link-arrow::after { content: "→"; transition: transform 0.3s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow.ext::after { content: "↗"; }
.link-arrow.ext:hover::after { transform: translate(2px, -2px); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;

}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header { transition: border-color 0.3s, background-color 0.4s var(--ease), color 0.4s; }
.bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark {
    display: block; width: 116px; height: 18px; background-color: var(--logo);
    -webkit-mask: url(/assets/brand/skycast-logo-white.webp) left center / contain no-repeat;
    mask: url(/assets/brand/skycast-logo-white.webp) left center / contain no-repeat;
}
.wordmark:focus-visible { outline-offset: 6px; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
    font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}
.site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.menu-toggle { display: none; }

@media (max-width: 720px) {
    .menu-toggle {
        display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
        border: 0; background: transparent; color: var(--ink); border-radius: 999px; cursor: pointer;
    }
    .menu-icon, .menu-icon::before, .menu-icon::after {
        display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
        transition: transform 0.35s var(--ease), opacity 0.2s;
    }
    .menu-icon { position: relative; }
    .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
    .menu-icon::before { transform: translateY(-6px); }
    .menu-icon::after { transform: translateY(6px); }
    .menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
    .menu-toggle[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }

    .site-nav {
        position: absolute; inset: 64px 0 auto 0; height: calc(100dvh - 64px);
        background: var(--bg); padding: 16px var(--gutter) 40px;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s 0.3s;
    }
    .js .site-nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav li { border-bottom: 1px solid var(--line); }
    .site-nav a {
        min-height: 64px; width: 100%; padding: 0; border-radius: 0; background: none !important;
        font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink);
    }
    .site-nav a[aria-current="page"] { color: var(--accent); }
    html:not(.js) .site-nav { position: static; height: auto; opacity: 1; visibility: visible; transform: none; padding: 0; }
    html:not(.js) .bar { height: auto; flex-wrap: wrap; padding-block: 12px; }
    html:not(.js) .site-nav a { font-size: 1rem; min-height: 44px; }
    body.menu-open { overflow: hidden; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; font-size: 0.9375rem; background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { margin-top: 18px; color: var(--ink-3); max-width: 30ch; }
.site-footer h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.site-footer li + li { margin-top: 8px; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; color: var(--ink-3); font-size: 0.8125rem; }
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* ---------- Reveal motion ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
/* Above the fold, play on load rather than on scroll. */
.js .hero .reveal, .js .m-hero .reveal { opacity: 1; transform: none; transition: none; animation: rise 1.1s var(--ease) both; }
.js .hero .reveal[data-delay="1"], .js .m-hero .reveal[data-delay="1"] { animation-delay: 0.08s; }
.js .hero .reveal[data-delay="2"], .js .m-hero .reveal[data-delay="2"] { animation-delay: 0.16s; }
.js .hero .reveal[data-delay="3"], .js .m-hero .reveal[data-delay="3"] { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 12vw, 168px) 0 clamp(64px, 9vw, 120px); }
.hero-inner { display: grid; gap: 28px; justify-items: start; }
.hero.center .hero-inner { justify-items: center; text-align: center; }
.hero .lede { max-width: 40ch; }
.hero.center .lede { margin-inline: auto; }
.sky {
    position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -1; pointer-events: none;
    filter: blur(60px) saturate(130%); opacity: 0.55;
}
.sky span { position: absolute; border-radius: 50%; mix-blend-mode: multiply; animation: drift 22s ease-in-out infinite alternate; }
.sky span:nth-child(1) { width: 46vw; height: 46vw; left: 4%; top: 2%; background: radial-gradient(circle, #9fb4ff 0%, transparent 65%); }
.sky span:nth-child(2) { width: 40vw; height: 40vw; right: 6%; top: -6%; background: radial-gradient(circle, #8fe0ff 0%, transparent 65%); animation-duration: 26s; animation-delay: -6s; }
.sky span:nth-child(3) { width: 34vw; height: 34vw; left: 36%; top: 22%; background: radial-gradient(circle, #ffc9a6 0%, transparent 65%); animation-duration: 30s; animation-delay: -12s; }
.sky span:nth-child(4) { width: 30vw; height: 30vw; right: 24%; top: 34%; background: radial-gradient(circle, #d6c2ff 0%, transparent 65%); animation-duration: 24s; animation-delay: -3s; }
.dark .sky span, [data-theme="dark"] .sky span { mix-blend-mode: screen; }
.dark .sky, [data-theme="dark"] .sky { opacity: 0.38; }
@keyframes drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(4vw, 3vw, 0) scale(1.08); }
    100% { transform: translate3d(-3vw, 5vw, 0) scale(0.96); }
}
.hero-langs {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
}
.chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 999px;
    font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
    background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.chip strong { font-weight: 600; color: var(--ink); }

/* ---------- Facts strip ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--line); }
.fact { padding: 32px 24px; display: grid; gap: 6px; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact b { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem); letter-spacing: -0.04em; line-height: 1; font-weight: 700; }
.fact span { color: var(--ink-3); font-size: 0.9375rem; }
@media (max-width: 860px) {
    .facts { grid-template-columns: 1fr 1fr; }
    .fact:nth-child(3) { border-left: 0; }
    .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* ---------- Media cards ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.brand-card {
    grid-column: span 6; position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow);
    text-decoration: none; color: inherit;
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
a.brand-card:hover, .brand-card:has(a.card-link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.brand-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; --pad: 13% 16%; }
.brand-art img {
    position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--pad); object-fit: contain;
    transition: transform 0.8s var(--ease);
}
.brand-card:hover .brand-art img { transform: scale(1.03); }
.brand-body { display: grid; gap: 12px; align-content: start; padding: 28px 32px 32px; }
.brand-body .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2);
}
.brand-body .links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; }
.card-link { text-decoration: none; }
.card-link:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.card-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.brand-body .links a:not(.card-link) { position: relative; z-index: 1; }

.art-tamilwire { background: linear-gradient(160deg, #ffffff 0%, #eef1ff 100%); }
.art-witness, .art-mantra { background: radial-gradient(120% 120% at 50% 0%, #1a2290 0%, #0a1170 45%, #03096b 100%); }
.art-witness { --pad: 10% 9%; }
.art-dhool { background: radial-gradient(120% 120% at 30% 20%, #3a1d7a 0%, #170a33 55%, #0b0618 100%); --pad: 7% 18%; }
.art-mantra { --pad: 7% 14%; }

@media (max-width: 860px) {
    .brand-card { grid-column: 1 / -1; }
}

/* ---------- Product (technology) cards ---------- */
.dark-band { background: #05060a; color: #f5f5f7; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product-card {
    position: relative; overflow: hidden; display: grid; gap: 18px; align-content: start;
    padding: clamp(32px, 4vw, 48px) clamp(32px, 4vw, 48px) 250px; border-radius: var(--radius-l);
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.product-card:has(.card-link:hover) { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.product-card .h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.product-card p { color: var(--ink-2); max-width: 38ch; }
.product-card .visual { position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; }
.product-card .link-arrow { margin-top: 4px; }
.product-mark { width: 64px; height: 64px; border-radius: 16px; }
.neo-mark {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
    background: linear-gradient(145deg, #1b1f2e, #0b0d14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: 0.02em; color: #fff;
}
.neo-mark span { background: linear-gradient(90deg, #7aa2ff, #39c6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 860px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-card { padding-bottom: 230px; }
}

/* Rundown visual for NEO card */
.rundown { position: absolute; left: clamp(32px, 4vw, 48px); right: -40px; bottom: -20px; display: grid; gap: 8px; }
.rundown div {
    display: grid; grid-template-columns: 40px 1fr 64px; align-items: center; gap: 14px;
    height: 44px; padding: 0 16px; border-radius: 12px; font-size: 0.8125rem; color: var(--ink-3);
    background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono);
}
.rundown div i { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 16%, transparent); font-style: normal; }
.rundown div.live { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, #39c6ff 60%, transparent); background: color-mix(in srgb, #39c6ff 10%, var(--surface-2)); }
.rundown div.live i { background: linear-gradient(90deg, #7aa2ff, #39c6ff); }

/* Meridian bars visual */
.meridian-visual { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; overflow: hidden; }
.meridian-visual::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(70% 90% at 70% 110%, rgba(146, 3, 254, 0.45), transparent 70%),
        radial-gradient(60% 80% at 20% 120%, rgba(0, 225, 253, 0.35), transparent 70%);
}
.frames { position: absolute; left: clamp(32px, 4vw, 48px); right: -60px; bottom: 36px; display: flex; gap: 10px; }
.frames span {
    flex: 0 0 auto; width: 104px; aspect-ratio: 16 / 9; border-radius: 10px; display: grid; align-items: end; padding: 8px 10px;
    font: 500 0.6875rem/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--line);
}
.frames span.on {
    color: #fff; position: relative;
    background: linear-gradient(160deg, rgba(0, 225, 253, 0.28), rgba(146, 3, 254, 0.3) 55%, rgba(248, 4, 187, 0.28));
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 12px 30px rgba(146, 3, 254, 0.35);
}
.meridian-visual img { position: absolute; right: clamp(24px, 4vw, 48px); bottom: clamp(24px, 4vw, 40px); width: clamp(140px, 30%, 220px); }

/* ---------- Split / story ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.quote { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 600; }

/* ---------- CTA ---------- */
.cta {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-l);
    padding: clamp(48px, 8vw, 104px) clamp(24px, 6vw, 80px); text-align: center; display: grid; gap: 24px; justify-items: center;
    background: #05060a; color: #f5f5f7;
}
.cta .sky { inset: -40% -20%; height: 180%; opacity: 0.75; }
.cta .sky span { mix-blend-mode: screen; }
.cta .lede { color: #e4e6ec; max-width: 36ch; }
.cta .btn-primary { background: #fff; color: #05060a; }
.cta-email { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.035em; color: #fff; text-decoration: none; }
.cta-email:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Media detail page ---------- */
.brand-index { display: flex; flex-wrap: wrap; gap: 10px; }
.brand-index a { text-decoration: none; }
.brand-detail { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.brand-detail:nth-of-type(even) .brand-art-lg { order: 2; }
.brand-art-lg { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); }
.brand-art-lg .brand-art { aspect-ratio: 4 / 3; }
.brand-copy { display: grid; gap: 18px; justify-items: start; }
.brand-copy .lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.brand-copy blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--accent); font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; font-size: 0.9375rem; }
.dl dt { color: var(--ink-3); }
.dl dd { margin: 0; color: var(--ink); }
.carriage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.carriage li { padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 2px; }
.carriage b { font-weight: 600; font-size: 0.9375rem; }
.carriage span { font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
    .brand-detail { grid-template-columns: 1fr; }
    .brand-detail:nth-of-type(even) .brand-art-lg { order: 0; }
}

/* ---------- Feature grid (product pages) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile {
    grid-column: span 2; position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start;
    padding: 32px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    min-height: 240px;
}
.tile.wide { grid-column: span 3; }
.tile.full { grid-column: 1 / -1; }
.tile h3 { font-size: 1.375rem; letter-spacing: -0.02em; }
.tile p { color: var(--ink-2); font-size: 1rem; }
.tile .kicker { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tile .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.tile .icon svg { width: 22px; height: 22px; }
.tile .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
@media (max-width: 1000px) {
    .tile, .tile.wide { grid-column: span 3; }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .tile, .tile.wide, .tile.full { grid-column: 1 / -1; min-height: 0; }
}

/* ---------- Meridian page ---------- */
.meridian { --m-navy: #00062a; background: var(--m-navy); }
.meridian body, .meridian { color: #f5f5f7; }
.meridian .site-header { background: color-mix(in srgb, #00062a 72%, transparent); }
.meridian .site-footer { background: #00062a; }
.meridian .tile, .meridian .product-card { background: rgba(255, 255, 255, 0.035); }
.meridian .tile .icon { background: rgba(255, 255, 255, 0.06); }
.brand-rule { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #00e1fd, #0033fc, #9203fe, #f804bb, #fe9c02, #ffee05); }
.m-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 96px); text-align: center; }
.m-hero .hero-inner { justify-items: center; }
.m-hero .lede { max-width: 44ch; margin-inline: auto; }
.m-logo { width: clamp(200px, 26vw, 320px); margin-bottom: 8px; }
.m-glow {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 50% at 20% 30%, rgba(0, 225, 253, 0.16), transparent 70%),
        radial-gradient(40% 50% at 80% 25%, rgba(248, 4, 187, 0.14), transparent 70%),
        radial-gradient(50% 60% at 50% 100%, rgba(0, 51, 252, 0.22), transparent 70%);
}
.m-glow::after {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 80%);
}
.m-grad {
    background: linear-gradient(90deg, #00e1fd, #4d7dff 30%, #b04dff 55%, #ff4fcf 75%, #ffb43a);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pipeline diagram */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 8px; }
.pipeline::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 36px; height: 2px;
    background: linear-gradient(90deg, #00e1fd, #0033fc, #9203fe, #f804bb, #fe9c02);
    opacity: 0.8;
}
.pipeline li { position: relative; display: grid; align-content: start; justify-items: center; text-align: center; gap: 10px; padding: 0 8px; }
.pipeline .node {
    width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center;
    background: #0a1140; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.35);
    color: #fff;
}
.pipeline .node svg { width: 28px; height: 28px; }
.pipeline b { font-size: 1rem; font-weight: 600; }
.pipeline span { font-size: 0.875rem; color: var(--ink-3); max-width: 18ch; }
.pipeline-caption { margin-top: 40px; text-align: center; color: var(--ink-2); }
.memory-band {
    margin-top: 28px; padding: 14px 20px; border-radius: 999px; text-align: center; font-size: 0.875rem; font-weight: 500;
    color: #c9d3ff; background: rgba(0, 51, 252, 0.14); box-shadow: inset 0 0 0 1px rgba(77, 125, 255, 0.35);
}
@media (max-width: 760px) {
    .pipeline { grid-template-columns: 1fr; gap: 20px; }
    .pipeline::before { left: 35px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, #00e1fd, #0033fc, #9203fe, #f804bb, #fe9c02); }
    .pipeline li { grid-template-columns: 72px 1fr; justify-items: start; text-align: left; column-gap: 20px; row-gap: 2px; padding: 0; }
    .pipeline .node { grid-row: span 2; }
    .pipeline b { align-self: end; }
    .pipeline span { align-self: start; max-width: none; }
    .memory-band { border-radius: 18px; }
}

.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.spec-list li { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 0.9875rem; }
.spec-list li b { font-weight: 600; color: var(--ink); }
.spec-list li span { color: var(--ink-2); }
@media (max-width: 860px) {
    .spec-list { grid-template-columns: 1fr; }
    .spec-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Steps (NEO) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: 0.8125rem; color: var(--accent); font-weight: 600; }
.steps h3 { font-size: 1.25rem; }
.steps p { color: var(--ink-2); font-size: 0.975rem; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card { padding: 32px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.contact-card h2 { font-size: 1.375rem; }
.contact-card p { color: var(--ink-2); }
.contact-card .link-arrow { margin-top: 6px; word-break: break-word; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.address { font-style: normal; font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); }
.address strong { color: var(--ink); font-weight: 600; }

/* ---------- Values (About) ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.values li { padding: 32px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.values h3 { font-size: 1.25rem; }
.values p { color: var(--ink-2); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media print {
    .site-header, .sky, .m-glow, .cta .sky { display: none; }
}

/* ---------- Page extras ---------- */
.ideas { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .ideas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .ideas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ideas { grid-template-columns: 1fr; } }
.neo-logo { width: 104px; height: 104px; border-radius: 14.15%; box-shadow: 0 20px 50px rgba(0, 23, 104, 0.35); margin-bottom: 4px; }
.lang-stack { display: grid; gap: 18px; }
.lang-stack p {
    font-family: "Noto Sans Tamil", "Noto Sans Devanagari", var(--font-display); font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.375rem); line-height: 1.3; letter-spacing: -0.01em;
    padding: 22px 28px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line);
}
.lang-stack p:nth-child(1) { color: #ffd4b0; }
.lang-stack p:nth-child(2) { color: #b8ccff; }
.lang-stack p:nth-child(3) { color: var(--ink-2); font-size: clamp(1.25rem, 2.4vw, 1.875rem); }
.contact-email {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; text-decoration: none;
    font-size: clamp(1.75rem, 6vw, 4rem); line-height: 1.1; margin-top: 8px;
}
.contact-email:hover { text-decoration: underline; text-decoration-thickness: 2px; }
body.meridian { --bg: #00062a; --surface: #071047; --surface-2: #0c1655; --ink-3: #a3abcf; --line: rgba(160, 180, 255, 0.14); }
.meridian .btn-primary { background: #fff; color: #00062a; }
.product-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.product-title.center { text-align: center; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 4px; }

/* ---------- Format matrix and technical specifications ---------- */
.matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.matrix-cell { padding: 28px 28px 30px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; }
.matrix-cell.full { grid-column: 1 / -1; }
.matrix-cell h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
.matrix-cell p { color: var(--ink-3); font-size: 0.9375rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px;
    font-size: 0.875rem; font-weight: 500; color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 760px) { .matrix { grid-template-columns: 1fr; } }

.techspecs { border-bottom: 1px solid var(--line); }
.techspecs > div { display: grid; grid-template-columns: 260px 1fr; gap: 24px 48px; padding: 32px 0; border-top: 1px solid var(--line); }
.techspecs h3 { font-size: 1.25rem; letter-spacing: -0.02em; }
.techspecs ul { columns: 2; column-gap: 48px; }
.techspecs li { break-inside: avoid; padding: 0 0 10px 18px; position: relative; color: var(--ink-2); font-size: 0.975rem; line-height: 1.5; }
.techspecs li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.techspecs li b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) {
    .techspecs > div { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
    .techspecs ul { columns: 1; }
}
.fineprint { margin-top: 24px; font-size: 0.8125rem; color: var(--ink-3); max-width: 80ch; }
.hero.center .actions { justify-content: center; }

/* ---------- Mac band (Meridian) ---------- */
.mac-band {
    position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
    padding: clamp(36px, 6vw, 72px); border-radius: var(--radius-l);
    background: radial-gradient(80% 120% at 100% 50%, rgba(0, 51, 252, 0.28), transparent 60%), rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
}
.mac-copy { display: grid; gap: 20px; }
.mac-device { display: grid; justify-items: center; gap: 18px; }
.mac-device p { font-size: 0.875rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0.02em; }
.mini {
    position: relative; width: min(100%, 300px); aspect-ratio: 1 / 0.36; border-radius: 26px;
    background: linear-gradient(180deg, #e9ebf0 0%, #c9ccd4 55%, #a9adb7 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 -2px 0 rgba(0, 0, 0, 0.12) inset, 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 120px rgba(77, 125, 255, 0.25);
}
.mini::before { content: ""; position: absolute; left: 50%; bottom: 22%; width: 26%; height: 5px; transform: translateX(-50%); border-radius: 3px; background: rgba(0, 0, 0, 0.08); }
.mini span { position: absolute; right: 12%; bottom: 24%; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.mac-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.mac-points li { padding: 28px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.mac-points h3 { font-size: 1.25rem; }
.mac-points p { color: var(--ink-2); font-size: 0.975rem; }
@media (max-width: 1000px) { .mac-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .mac-band { grid-template-columns: 1fr; } .mac-points { grid-template-columns: 1fr; } }
.section:not(.dark-band) + .section-tight { padding-top: 0; }
.dark-band .mac-band { background: radial-gradient(80% 120% at 100% 50%, rgba(31, 79, 255, 0.3), transparent 60%), rgba(255, 255, 255, 0.04); }

/* ---------- Product screenshots ---------- */
.showcase { display: grid; gap: 20px; }
.showcase .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.showcase .pair.phone { grid-template-columns: 2.1fr 1fr; }
.shot { margin: 0; display: grid; gap: 14px; }
.window {
    border-radius: 14px; overflow: hidden; background: #0d0f16;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15), 0 30px 80px rgba(10, 12, 40, 0.35);
}
.window-bar { display: flex; gap: 7px; align-items: center; height: 30px; padding: 0 14px; background: #1b1e28; }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3e4b; }
.window-bar i:nth-child(1) { background: #ff5f57; } .window-bar i:nth-child(2) { background: #febc2e; } .window-bar i:nth-child(3) { background: #28c840; }
.light-window .window-bar { background: #e9eaef; }
.window img { width: 100%; height: auto; display: block; }
.device {
    border-radius: 38px; padding: 10px; background: #111318; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 80px rgba(10, 12, 40, 0.35); max-width: 300px; justify-self: center; width: 100%;
}
.device img { border-radius: 28px; width: 100%; height: auto; display: block; }
.shot figcaption { font-size: 0.9375rem; color: var(--ink-3); max-width: 70ch; }
.shot figcaption b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) {
    .showcase .pair, .showcase .pair.phone { grid-template-columns: 1fr; }
}
.footer-brand .recognition {
    display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 14px; border-radius: 12px;
    font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.recognition img, .recognition-lg img { display: block; height: auto; flex: 0 0 auto; }
.recognition img { width: 110px; }
.recognition-lg {
    display: inline-flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: 16px;
    background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 0.875rem; line-height: 1.45; color: #3f424b;
}
.recognition-lg img { width: 150px; }

/* Home hero: one strong line, then a quieter two-line follow-up with room to breathe. */
.hero-title { display: grid; justify-items: center; gap: clamp(14px, 2vw, 26px); line-height: 1; }
.hero-title .hl-main { display: block; }
.hero-title .hl-sub {
    display: block; font-size: max(0.5em, 1.625rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.03em;
}
.hero .hero-inner:has(.hero-title) { gap: 32px; }
sup.tm { font-size: 0.42em; font-weight: 500; vertical-align: super; line-height: 0; margin-left: 0.04em; letter-spacing: 0; }
.dl dd a { color: var(--accent); text-underline-offset: 0.2em; }

/* ---------- Mac mini vs server comparison ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats li { padding: 28px 26px; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; align-content: start; }
.stats b {
    font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1;
    background: linear-gradient(100deg, #7aa2ff, #39c6ff 50%, #b18cff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root:not([data-theme="dark"]) body:not(.meridian) .stats b { background-image: linear-gradient(100deg, #2a3cff, #0a7fd6 50%, #7c4dff); }
.stats span { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.stats small { font-size: 0.875rem; color: var(--ink-3); margin-top: 4px; }
.compare-table { margin-top: 20px; overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.compare-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 16px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { border-top: 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.compare-table tbody th { color: var(--ink); font-weight: 600; width: 16%; }
.compare-table td:nth-child(2) { color: var(--ink); font-weight: 600; }
.compare-table td:nth-child(3) { color: var(--ink-2); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
.footer-brand .recognition { max-width: none; }
.footer-brand .recognition span { white-space: nowrap; }
.compare-table sup { line-height: 0; }
.compare-table sup { font-size: 0.68em; margin-left: 2px; vertical-align: super; }
.compare-table sup a { color: var(--accent); text-decoration: none; font-weight: 600; }
.compare-notes {
    list-style: decimal; margin: 20px 0 0; padding: 0 0 0 1.3em;
    columns: 2; column-gap: 48px;
    font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3);
}
.compare-notes li { padding-left: 2px; margin-bottom: 6px; break-inside: avoid; }
.compare-notes li::marker { color: var(--accent); font-weight: 600; }
.compare-notes li:target { color: var(--ink); }
.compare-notes + .fineprint { margin-top: 14px; max-width: none; line-height: 1.5; }
@media (max-width: 760px) { .compare-notes { columns: 1; } }

/* Product cards: a real screen peeks in from the bottom right. */
.card-shot {
    position: absolute; left: clamp(32px, 4vw, 48px); right: -1px; bottom: -1px; height: 210px; overflow: hidden;
    border-top-left-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 -10px 40px rgba(0, 0, 0, 0.35);
}
.card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.footer-brand .recognition { color: #3f424b; }
.card-shot-wide img { object-position: center top; }