/*
 * cmleteam.com — public site theme
 *
 * Palette is taken from the brands' own logo files in the media kit, so the
 * site cannot drift away from the identity:
 *   Brolyz  #514CDF → #8791F2  (indigo)   → primary accent
 *   Vestra  #EA580C → #FB923C  (orange)   → secondary accent
 *   CMLE    white / greyscale             → neutral
 *
 * The accent does not stay on buttons: borders, glows and shadows all carry a
 * tint of it. That is what stops a dark layout from looking washed out.
 *
 * Each product section takes its own accent by setting --accent locally, so
 * Brolyz reads indigo and VestraDAO reads orange without a second stylesheet.
 */

:root {
    --bg:          #06070F;
    --bg-2:        #0A0C1A;
    --card:        #10132A;
    --card-hover:  #171B3C;

    --text:        #F2F4FF;
    --text-2:      #A8B0D8;
    --muted:       #6B739C;

    --indigo:      #6C63FF;
    --indigo-rgb:  108, 99, 255;
    --indigo-soft: #8791F2;
    --indigo-deep: #514CDF;

    --orange:      #FB923C;
    --orange-rgb:  251, 146, 60;
    --orange-deep: #EA580C;

    /* Sections override these two to take on their product's colour. */
    --accent:      var(--indigo);
    --accent-rgb:  var(--indigo-rgb);

    --border:       rgba(var(--accent-rgb), 0.16);
    --border-hover: rgba(var(--accent-rgb), 0.44);
    --glow:         rgba(var(--accent-rgb), 0.18);

    --radius:    16px;
    --radius-sm: 10px;

    --font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', -apple-system,
        BlinkMacSystemFont, Roboto, sans-serif;
    --display: 'Montserrat', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --wrap: 1180px;
    --nav-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.13;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.012em; }

p { margin: 0 0 16px; }

/* Text written in the panel's editor arrives as its own paragraphs inside a
   block, where a lead used to be a single <p class="lead"> and the paragraph's
   bottom margin and the block's were the same one. Giving the last child's
   margin back to the block keeps the spacing exactly where it was. */
.rich > :last-child { margin-bottom: 0; }

/* A section title never sits straight on its lead paragraph, wherever it lives. */
h2 + p { margin-top: 22px; }

/* The rule above was written for a heading followed by a paragraph; the same
   gap is owed when the paragraphs arrive wrapped in their block. */
h2 + .rich { margin-top: 22px; }

.gradient-text {
    background: linear-gradient(120deg, var(--indigo-soft) 0%, var(--orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The chip that names the section — "Kurumsal", "Yetkinlik alanları". It is
   read before the heading, so it was too quiet at 11.5px: a label nobody
   notices is a label that is not doing its job. */
.eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 13.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 7px 17px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: rgba(var(--accent-rgb), 0.07);
    margin-bottom: 20px;
}

.lead { font-size: 1.13rem; color: var(--text-2); max-width: 60ch; }
.muted { color: var(--muted); }

/* ---------- navbar ---------- */

.nav-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    transition: background-color 0.28s ease, border-color 0.28s ease;
    border-bottom: 1px solid transparent;
}

.nav-bar.scrolled {
    background: rgba(6, 7, 15, 0.9);
    backdrop-filter: blur(16px);
    border-bottom-color: var(--border);
}

.nav-bar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

/* The logo is a wordmark — it already says the name, so no text beside it. */
.nav-logo img { height: 26px; width: auto; display: block; }

.nav-links { display: none; align-items: center; gap: 28px; }

@media (min-width: 1000px) { .nav-links { display: flex; } }

.nav-links a {
    font-size: 15px;
    color: var(--text-2);
    position: relative;
    padding: 4px 0;
    transition: color 0.18s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--indigo-soft), var(--orange));
    transition: width 0.22s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

@media (min-width: 1000px) { .nav-toggle { display: none; } }

.nav-drawer {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    z-index: 55;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 10px 0 20px;
    display: none;
}

.nav-drawer.open { display: block; }
.nav-drawer a { display: block; padding: 12px 0; color: var(--text-2); border-bottom: 1px solid rgba(var(--accent-rgb), 0.08); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

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

.btn-primary {
    background: linear-gradient(120deg, var(--indigo-deep), var(--indigo));
    color: #fff;
    box-shadow: 0 10px 34px -12px rgba(var(--indigo-rgb), 0.75);
}

.btn-primary:hover { box-shadow: 0 16px 40px -12px rgba(var(--indigo-rgb), 0.9); }

.btn-accent {
    background: linear-gradient(120deg, var(--orange-deep), var(--orange));
    color: #fff;
    box-shadow: 0 10px 34px -12px rgba(var(--orange-rgb), 0.7);
}

.btn-ghost { border-color: var(--border-hover); color: var(--text); background: rgba(var(--accent-rgb), 0.05); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); }

.btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- sections ---------- */

.section { padding: 100px 0; position: relative; overflow: hidden; }

/* Borders are real borders so ::before stays free for the pattern layer. */
.section-dark {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.section > .wrap { position: relative; z-index: 1; }

/*
 * Every section carries a faint pattern and a gradient wash so the page never
 * reads as flat panels of one colour. Each pattern is different, all of them
 * are barely there, and each fades out through a mask rather than stopping at
 * a hard edge.
 */
.section-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.section-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 95% 65% at 50% 0%,
        rgba(var(--accent-rgb), 0.12), transparent 69%);
}

/* Square grid — the same language as the hero. */
.pat-grid::before {
    background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 33%, #000 24%, transparent 82%);
}

/* Dot matrix. */
.pat-dots::before {
    background-image: radial-gradient(rgba(var(--accent-rgb), 0.18) 1px, transparent 1px);
    background-size: 25px 25px;
    mask-image: radial-gradient(ellipse 85% 68% at 50% 42%, #000 10%, transparent 79%);
}

/* Diagonal hairlines. */
.pat-diagonal::before {
    background-image: repeating-linear-gradient(-45deg,
        rgba(var(--accent-rgb), 0.07) 0 1px, transparent 1px 16px);
    mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}

/* Concentric rings. */
.pat-rings::before {
    background-image: repeating-radial-gradient(circle at 78% 18%,
        rgba(var(--accent-rgb), 0.09) 0 1px, transparent 1px 44px);
    mask-image: radial-gradient(ellipse 88% 88% at 71% 27%, #000 14%, transparent 80%);
}

/* Vertical rules, like a column grid. */
.pat-columns::before {
    background-image: repeating-linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.09) 0 1px, transparent 1px 86px);
    mask-image: linear-gradient(180deg, transparent, #000 21%, #000 79%, transparent);
}

/* Wide soft waves. */
.pat-waves::before {
    background-image: repeating-linear-gradient(120deg,
        rgba(var(--accent-rgb), 0.06) 0 2px, transparent 2px 27px);
    mask-image: radial-gradient(ellipse 95% 78% at 31% 50%, #000 14%, transparent 83%);
}

/* Every section head is centred: the chip, the heading and the paragraphs
   under it sit on one axis down the middle of the page. Centring used to be an
   opt-in modifier and nothing ever opted in, which is how a section ended up
   reading differently from the one above it for no reason anybody could name.

   The paragraphs run the full width of the section rather than being held to a
   measure of their own — the wrap is the measure. */
.section-head { margin: 0 auto 52px; text-align: center; }
.section-head .lead { max-width: none; margin-left: auto; margin-right: auto; }
.section-head p:last-child { margin-bottom: 0; }

/* A rule between the chip that names the section and the heading that opens
   it: half the width of the section and centred on the same axis. Drawn by the
   heading rather than by an empty element every section would have to remember
   to carry, and faded at both ends so it reads as a mark on the axis rather
   than a rule cutting the page in two. */
.section-head h2::before {
    content: '';
    display: block;
    width: 50%;
    height: 1px;
    margin: 0 auto 26px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

/* The heading is centred and the paragraph under it is justified: the heading
   is one line finding its own middle, the paragraph is a block of text and a
   block reads as one when both its edges are straight. */
.section-head .lead { text-align: justify; }

/* ---------- hero ---------- */

.hero {
    position: relative;
    padding: calc(var(--nav-h) + 96px) 0 104px;
    overflow: hidden;
}

/* The canvas is the bottom layer of the hero and never takes a click: the
   pointer still reaches the CTA, and the script listens on the section
   itself so the camera follows the cursor across the whole hero. */
.hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--indigo-rgb), 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--indigo-rgb), 0.055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 78%);
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.hero-glow-1 {
    top: -170px; left: 8%;
    width: 480px; height: 420px;
    background: rgba(var(--indigo-rgb), 0.30);
}

.hero-glow-2 {
    top: 40px; right: 2%;
    width: 400px; height: 360px;
    background: rgba(var(--orange-rgb), 0.16);
}

.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; margin-bottom: 22px; }
.hero .lead { font-size: 1.2rem; margin-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Text on the left, the collection artwork on the right. Below 1000px the
   artwork drops under the text rather than shrinking into uselessness. */
.hero-split { display: grid; gap: 56px; align-items: center; grid-template-columns: 1fr; }

@media (min-width: 1000px) {
    .hero-split { grid-template-columns: 1.02fr 0.98fr; gap: 64px; }
}

.hero-art { position: relative; }

.hero-art-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border-hover);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9),
                0 0 70px -30px rgba(var(--indigo-rgb), 0.5);
    transform: rotate(-1.4deg);
}

.hero-art-frame img { display: block; width: 100%; }

/* Pulls the artwork's own blue-grey toward the site palette. */
.hero-art-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(var(--indigo-rgb), 0.24), transparent 55%,
        rgba(var(--orange-rgb), 0.14));
    pointer-events: none;
}

.hero-art-chip {
    position: absolute;
    left: -14px;
    bottom: -22px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(10, 12, 26, 0.94);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-hover);
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.9);
}

.hero-art-chip img { height: 20px; width: auto; }
.hero-art-chip .k { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.hero-art-chip .v { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

@media (max-width: 560px) {
    .hero-art-chip { left: 0; bottom: -16px; padding: 10px 14px; }
}

.hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 76px;
}

@media (min-width: 620px) { .hero-stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(var(--indigo-rgb), 0.07), transparent);
}

.stat-value {
    font-family: var(--display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 2px;
}

.stat-label { font-size: 13px; color: var(--muted); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px;
    overflow: hidden;
    transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.card:hover { border-color: var(--border-hover); background: var(--card-hover); transform: translateY(-3px); }
.card:hover::before { opacity: 1; }

.card h3 { margin-bottom: 20px; }
.card p { color: var(--text-2); font-size: 15.5px; margin-bottom: 0; }

.card-icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--border);
    color: var(--accent);
    margin-bottom: 18px;
}

/* The brand mark leads the card, so it gets room on both sides of it. */
.card-logo { height: 40px; width: auto; margin: 8px 0 32px; display: block; }

/* margin-top:auto pins the link to the card's foot, so every card in a row
   lines its link up regardless of how long the paragraph runs. */
.card-link {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 20px;
    font-size: 14.5px; font-weight: 600;
    color: var(--accent);
}

.card-link:hover { gap: 10px; }


.card-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    display: block;
}

/* Oversized, barely-there number sitting behind the card's text. */
.card-figure {
    position: absolute;
    top: 2px;
    right: 20px;
    z-index: 0;
    font-family: var(--display);
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(var(--accent-rgb), 0.11);
    pointer-events: none;
    user-select: none;
}

.card h3, .card p { position: relative; z-index: 1; }

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.card-meta .card-num { margin-bottom: 0; }

/* ---------- contact form ---------- */

/* Held to a measure of its own and centred on the same axis as the heading
   above it: a field running the full width of the wrap is a long way for the
   eye to travel back, and a 760px block left-aligned under a centred heading
   reads as two sections rather than one. */
.contact-form {
    display: grid;
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
}

.field-label {
    display: block;
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 7px;
}

.contact-form textarea.field { resize: vertical; min-height: 120px; font-family: inherit; }

/* ---------- split ---------- */

/*
 * Six columns, two and four. The narrow side carries what introduces the row —
 * the picture beside the corporate figures — and the wide side carries the
 * thing itself. The heading and its rule stay centred over the whole width, so
 * the section still announces itself down the middle and only what is read
 * left to right sits side by side.
 *
 * Named for the proportion rather than for the place it is used, because the
 * proportion is what would be shared with the next row wanting this shape.
 */
.split-2-4 { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }

@media (min-width: 980px) {
    .split-2-4 { grid-template-columns: 2fr 4fr; gap: 48px; }
}

.split { display: grid; gap: 44px; align-items: center; grid-template-columns: 1fr; }

@media (min-width: 980px) {
    .split { grid-template-columns: 1.05fr 0.95fr; gap: 68px; }
    .split.reverse > :first-child { order: 2; }
}

.checks { list-style: none; margin: 26px 0 0; padding: 0; }

.checks li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 13px;
    color: var(--text-2);
    font-size: 15.5px;
}

.checks li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 16px; height: 16px;
    border-radius: 5px;
    background: rgba(var(--accent-rgb), 0.18);
    border: 1px solid var(--border-hover);
}

.checks li::after {
    content: "";
    position: absolute;
    left: 5px; top: 12px;
    width: 5px; height: 8px;
    border: solid var(--accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.data-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px 28px;
}

.data-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
    font-size: 15px;
}

.data-row:last-of-type { border-bottom: none; }
.data-row span:first-child { color: var(--muted); }
.data-row span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- drifting wave backdrop ---------- */

/*
 * The roadmap is about movement over time, so its backdrop moves too: three
 * wave lines panning at different speeds. Its own layer, which leaves the
 * section's ::before free for the column pattern — the two together read as a
 * chart drawn on gridded paper.
 */
.section-waves > .waves {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

.section-waves > .waves svg { display: block; width: 100%; height: 100%; }

/* var() only resolves in a declaration, so the palette is applied here. */
.waves .wave-line {
    fill: none;
    stroke: rgb(var(--indigo-rgb));
    stroke-opacity: 0.2;
    stroke-width: 1.3;
}

.waves .wave-line.lead { stroke-opacity: 0.34; stroke-width: 1.6; }
.waves .wave-line.warm { stroke: rgb(var(--orange-rgb)); stroke-opacity: 0.16; stroke-width: 1.2; }

.waves .wave-area { fill: url(#wave-fade); stroke: none; }
.waves .wave-stop-top  { stop-color: rgb(var(--indigo-rgb)); stop-opacity: 0.16; }
.waves .wave-stop-foot { stop-color: rgb(var(--indigo-rgb)); stop-opacity: 0; }

/*
 * Each wave is drawn a whole number of periods wider than the frame, so a pan
 * of exactly one period lands the shape back on itself and the loop is seamless.
 */
.waves .drift-a { animation: wave-a 36s linear infinite; }
.waves .drift-b { animation: wave-b 58s linear infinite; }
.waves .drift-c { animation: wave-c 76s linear infinite; }

@keyframes wave-a { from { transform: translateX(0); } to { transform: translateX(-480px); } }
@keyframes wave-b { from { transform: translateX(0); } to { transform: translateX(720px); } }
@keyframes wave-c { from { transform: translateX(0); } to { transform: translateX(-360px); } }

/* ---------- a slot for a picture ---------- */

/*
 * The frame is drawn whether or not the file behind it has arrived, and it
 * holds its shape with an aspect ratio rather than with whatever the image
 * happens to be. That is what stops the section from jumping the day somebody
 * drops a photograph of a different size into it.
 */
.media-frame {
    position: relative;
    /* Square, because the column it stands in is the narrow one and a square
       lands close to the height of the panel beside it. */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.9);
}

.media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- nft showcase ---------- */

.nft-showcase { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }

@media (min-width: 900px) { .nft-showcase { grid-template-columns: 0.9fr 1.1fr; gap: 44px; } }

.nft-art {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.9);
}

.nft-art img { display: block; width: 100%; }

.nft-caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

/* ---------- the ecosystem, folded into the collection ---------- */

/*
 * The three products used to have a section of their own, with a card each.
 * They now sit under the founding collection as one strip: the collection is
 * where the ecosystem starts, and reading the two in the same breath is closer
 * to the truth than reading them a screen apart. A card carried a paragraph;
 * this carries a name, what it is and the way to it — the rest is on their own
 * sites, which is where somebody who wants it is going anyway.
 */
.eco-strip {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    margin-top: 46px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
}

@media (min-width: 860px) {
    .eco-strip { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

.eco-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-rgb), 0.05);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.eco-item:hover { border-color: var(--border-hover); background: rgba(var(--accent-rgb), 0.09); }

.eco-item img { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; }

.eco-item .eco-kind {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.eco-item .eco-name { display: block; font-weight: 600; color: var(--text); }

.eco-item a { color: inherit; text-decoration: none; }
.eco-item a:hover .eco-name { color: var(--accent); }

/* ---------- roadmap: horizontal timeline ---------- */

/*
 * A rail rather than a list. Every milestone owns a pin on the axis; the
 * selected one grows a stem with its card on the tip. Only one card is open at
 * a time, which is what keeps eighteen dates readable in one screen.
 */

/* Outside .wrap, so the rail runs the whole width of the screen. */
.timeline { position: relative; z-index: 1; }

.timeline-bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.timeline-hint {
    margin: 0;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.timeline-nav { display: flex; gap: 8px; }

.tl-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.tl-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.16);
}

.tl-btn:disabled { opacity: 0.28; cursor: default; }

/* The rail scrolls sideways on its own; the page never does. */
.timeline-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.timeline-viewport.dragging { cursor: grabbing; }
.timeline-viewport::-webkit-scrollbar { height: 6px; }
.timeline-viewport::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 100px; }
.timeline-viewport::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.4); border-radius: 100px; }

.timeline-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: max-content;
    height: 470px;
    padding: 0 190px;
}

.timeline-axis {
    position: absolute;
    left: 0; right: 0;
    bottom: 92px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, rgba(var(--accent-rgb), 0.2) 8%,
        rgba(var(--accent-rgb), 0.2) 92%, transparent);
}

/* Lit up to today, drawn only when the section is reached. */
.timeline-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--indigo-deep), var(--indigo), var(--orange));
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55);
    transition: width 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.timeline.is-live .timeline-fill { width: var(--fill, 100%); }

.tl-node { position: relative; flex: 0 0 122px; height: 100%; }

/* Year changes get a taller tick and a big faded number, like a ruler. */
.tl-year {
    position: absolute;
    left: 0; bottom: 0;
    z-index: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgba(var(--accent-rgb), 0.17);
    pointer-events: none;
}

.year-start::before {
    content: "";
    position: absolute;
    left: 0; bottom: 44px;
    width: 1px; height: 96px;
    background: linear-gradient(to top, rgba(var(--accent-rgb), 0.28), transparent);
}

/* The pin: dot on the axis, month under it, the whole thing clickable. */
.tl-pin {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    height: 150px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.tl-dot {
    position: absolute;
    left: 50%; bottom: 86px;
    width: 12px; height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 2px solid rgba(var(--accent-rgb), 0.5);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.state-done .tl-dot { background: rgba(var(--accent-rgb), 0.65); }
.state-next .tl-dot { border-style: dashed; border-color: rgba(var(--accent-rgb), 0.32); }
.tl-pin:hover .tl-dot { transform: scale(1.3); }

.is-open .tl-dot {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.5);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.13), 0 0 22px rgba(var(--accent-rgb), 0.8);
}

/* Today keeps breathing until it is the one selected. */
.state-active:not(.is-open) .tl-dot { animation: tl-pulse 2.6s ease-out infinite; }

@keyframes tl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 15px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.tl-when {
    position: absolute;
    left: -12px; right: -12px; bottom: 50px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.2s ease;
}

.tl-pin:hover .tl-when { color: var(--text-2); }
.is-open .tl-when { color: var(--accent); }

/* The stem only exists while its card is open, and it grows into place. */
.tl-stem {
    position: absolute;
    left: 50%; bottom: 98px;
    width: 2px; height: 0;
    margin-left: -1px;
    background: linear-gradient(to top, var(--accent), rgba(var(--accent-rgb), 0.1));
    transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-open .tl-stem { height: 132px; }

.tl-card {
    position: absolute;
    left: 50%; bottom: 242px;
    z-index: 3;
    width: 330px;
    margin-left: -165px;
    padding: 20px 22px 22px;
    border-radius: 16px;
    border: 1px solid var(--border-hover);
    background:
        radial-gradient(ellipse 80% 90% at 50% 100%, rgba(var(--accent-rgb), 0.13), transparent 70%),
        var(--card);
    box-shadow: 0 30px 60px -34px #000;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.is-open .tl-card { opacity: 1; transform: none; pointer-events: auto; }

/* A notch under the card so it reads as sitting on the stem. */
.tl-card::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -7px;
    width: 12px; height: 12px;
    margin-left: -6px;
    transform: rotate(45deg);
    border-right: 1px solid var(--border-hover);
    border-bottom: 1px solid var(--border-hover);
    background: var(--card);
}

.tl-card-when {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

.tl-card h3 { font-size: 1.05rem; margin-bottom: 12px; }
.tl-card p { margin: 0; font-size: 14.5px; color: var(--text-2); }

.chip {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    font-style: normal;
    padding: 3px 9px;
    border-radius: 100px;
    border: 1px solid var(--border-hover);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.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;
}

@media (max-width: 760px) {
    .timeline-track { height: 430px; padding: 0 46vw; }
    .tl-node { flex-basis: 96px; }
    .tl-card { width: 78vw; margin-left: calc(-39vw); bottom: 226px; }
    .is-open .tl-stem { height: 116px; }
    .tl-year { font-size: 26px; }
}

/* ---------- cta ---------- */

.cta-card {
    position: relative;
    border: 1px solid var(--border-hover);
    border-radius: 22px;
    padding: 56px 40px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(var(--indigo-rgb), 0.18), transparent 70%),
        var(--card);
}

.cta-card h2 { margin-bottom: 22px; }
.cta-card .lead { margin: 0 auto 28px; }

.subscribe { display: flex; gap: 10px; max-width: 470px; margin: 0 auto; flex-wrap: wrap; }

.field {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(6, 7, 15, 0.7);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}

.field::placeholder { color: var(--muted); }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); }

.subscribe .field { flex: 1 1 250px; width: auto; }

.note { font-size: 13.5px; margin-top: 14px; }
.note.ok { color: #6EE7B7; }
.note.err { color: #FCA5A5; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 60px 0 34px; }

.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 44px; }

@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; } }

.footer-logo img { height: 26px; width: auto; margin-bottom: 16px; }

.footer h4 {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 16px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--text-2); font-size: 15px; }
.footer ul a:hover { color: var(--accent); }

/* Sits under the logo blurb in the footer's first column. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-2);
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease,
        transform 0.16s ease;
}

.footer-social a:hover {
    color: var(--accent);
    border-color: var(--border-hover);
    background: rgba(var(--accent-rgb), 0.08);
    transform: translateY(-2px);
}

.footer-social svg { flex: none; }

.footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px; flex-wrap: wrap;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    font-size: 13.5px; color: var(--muted);
}

/* ---------- reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- page template ---------- */

.page-body { padding: calc(var(--nav-h) + 70px) 0 96px; }
.page-body .content { max-width: 68ch; }
.page-body .content h2 { font-size: 1.65rem; margin: 42px 0 20px; }
.page-body .content h3 { margin: 30px 0 18px; }
.page-body .content p, .page-body .content li { color: var(--text-2); }
.page-body .content a { color: var(--accent); text-decoration: underline; }
.page-body .content img { border-radius: 10px; }
.page-body .content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.page-body .content td, .page-body .content th { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.page-body .content iframe { max-width: 100%; border-radius: 10px; }

.preview-bar {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    background: var(--orange-deep); color: #fff;
    text-align: center; padding: 10px 16px; font-size: 14px;
}

/* ---------- focus ---------- */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}