/* Landing hero — two-column: copy + orbital visual.
   Loaded after styles.css so it overrides the centred .welcome-screen layout. */

.welcome-screen .hero {
    display: grid;
    /* Copy column fixed at the width it had inside the 1304px hero row
       (1.05 / 2 of 1256px) so the H1 keeps its line count; the sphere column
       takes the rest and the sphere sits at its far end (justify-self below),
       leaving the open space between text and sphere instead of right of it. */
    grid-template-columns: minmax(0, 41.2rem) 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
    padding: 2rem 0 0;
}

/* Row height is set by the sphere column; centring the copy inside it made
   every pixel trimmed from the margins move the block only half a pixel. */
.hero-copy {
    align-self: start;
    grid-column: 1;
    grid-row: 1;
}

/* Slogan over the sphere. It shares the sphere's grid cell (same width and
   end-alignment, so it is centred over the sphere) and is lifted above the
   sphere box with a transform - transforms take no part in layout, so the
   sphere, the hero height and the first-screen reserve are untouched. There
   are 144px between the header and the sphere box at 1366-1920; the two lines
   use ~66px of it, close to the sphere, not to the header. */
.hero-slogan {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: 100%;
    max-width: 34rem;
    margin: 0;
    text-align: center;
    transform: translateY(calc(-100% - 14px));
    pointer-events: none;
}

.hero-slogan-main {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

.hero-slogan-sub {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* Landing, desktop: the header is a full-width block with its edge 2.5rem
   from the viewport, which is why the logo is always at 40px. The hero lived
   in .container (max-width 1400px, margin auto), so above ~1424px the
   container centred and the copy drifted right of the logo. Now the landing
   container and the header share one 1600px column (see below): the copy
   column keeps a fixed width so the H1 line count does not depend on the
   viewport, and the sphere sits at the column's far end. */
@media (min-width: 901px) {
    /* Landing column, per the approved mockup: the header logo stays 2.5rem
       from the viewport edge, while the content is inset more as the screen
       grows - 40px at 1366 (the sphere and the copy column leave no room for
       more there), 170px at 1920, capped. 100% is the body width, so the
       inset is exact regardless of the scrollbar. Above ~1940px the column is
       capped at 1600px of content and centred, as before. */
    .container:has(> #welcomeScreen.active) {
        max-width: 1940px;
        margin-inline: auto;
        padding-block: 0;
        padding-inline: clamp(2.5rem, calc(2.5rem + (100% - 1366px) * 0.2347), 10.625rem);
    }
    .container:has(> #welcomeScreen.active) .welcome-screen { padding-inline: 0; }
    /* Sections below the hero span the same column, so their left edge is
       the H1's vertical, not a centred 62rem block. */
    .container:has(> #welcomeScreen.active) .lp-section { max-width: none; margin-inline: 0; }
    body:has(#welcomeScreen.active) footer .footer-links {
        max-width: calc(1600px - 5rem);
        margin-inline: auto;
    }
    /* margin-inline:auto (base rule) would centre the sphere in its column and
       win over justify-self, so zero it here: the sphere ends on the container
       edge, 2.5rem from the viewport like the header buttons. */
    .welcome-screen .hero-visual { margin-inline: 0; justify-self: end; }
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.7;
    margin: 0;
}

.welcome-screen .hero-title {
    font-family: 'Playfair Display', serif;
    /* ~13% below the original 4.4rem cap. */
    font-size: clamp(2.1rem, 4.35vw, 61px);
    font-weight: 700;
    /* 1.0 had the ascenders of one line touching the descenders of the next. */
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    /* Bottom margin x1.5 twice over (0.9 -> 1.35 -> 2.025rem): the subtitle
       reads as its own block. */
    margin: 0.7rem 0 2.025rem;
}

/* Gold marks exactly one word; everything else in the headline stays white. */
.hero-title .accent {
    display: inline;
    background: linear-gradient(100deg, var(--primary-light), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-screen .hero-sub {
    font-size: 21px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 34rem;
    margin: 0;
}

.welcome-screen .hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    /* top margin x1.5 (1.35rem -> 2.025rem): air between subtitle and buttons */
    margin: 2.025rem 0 0.6rem;
    justify-content: flex-start;
}

/* Both CTAs share one size and one height; only fill vs outline separates them. */
.welcome-screen .hero-cta .btn {
    font-size: 18px;
    font-weight: 600;
    min-height: 58px;
}

.hero-micro {
    font-size: 15px;
    color: var(--text-muted);
    opacity: 0.65;
    margin: 0;
}

.hero-micro .dot { margin: 0 0.6rem; opacity: 0.5; }

/* ── Orbital visual ──────────────────────────────────────────────────────── */

.hero-visual {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    /* Pinned to the row top: with the 4-line RU headline the copy column is
       taller than the sphere and row-centring used to drop the sphere by up
       to 18px on RU only. Now it sits at the same height in every language. */
    align-self: start;
    aspect-ratio: 1 / 1;
    max-width: 34rem;
    margin-inline: auto;
    width: 100%;
}

/* Sphere with a lit rim — the dark planet from the reference. Sits behind the
   orbits; the rim highlight is a masked conic gradient so the light falls on
   the upper-right edge only. */
.hero-planet {
    position: absolute;
    width: 104%;
    height: 104%;
    top: -3%;
    right: 2%;
    border-radius: 50%;
    /* Light source upper-right: a small warm highlight there, body falling to
       near-black at the lower-left terminator. */
    background:
        radial-gradient(circle at 73% 24%, rgba(255, 238, 196, 0.14) 0%, rgba(212, 175, 55, 0.055) 20%, transparent 44%),
        radial-gradient(circle at 64% 32%, #1b1b1b 0%, #121212 34%, #0a0a0a 62%, #040404 100%);
    box-shadow:
        inset -70px -46px 130px rgba(0, 0, 0, 0.95),
        inset 34px 24px 80px rgba(212, 175, 55, 0.05);
}

.hero-planet::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from 241deg,
        transparent 0 35%,
        rgba(230, 193, 88, 0.4) 42%,
        rgba(255, 244, 214, 1) 48%,
        rgba(212, 175, 55, 0.5) 55%,
        transparent 62% 100%);
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(circle, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
    filter: blur(0.3px);
}

.hero-planet::after {
    content: "";
    position: absolute;
    inset: -5%;
    border-radius: 50%;
    background: conic-gradient(from 241deg,
        transparent 0 38%,
        rgba(212, 175, 55, 0.22) 48%,
        transparent 58% 100%);
    filter: blur(16px);
}

/* Kept as faint ambient only — at full strength it washed the sphere out into
   a diffuse haze and the 3D read was lost. */
.hero-glow {
    position: absolute;
    inset: 0% -25% 0% 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 80% 28%, rgba(212, 175, 55, 0.08) 0%, transparent 55%);
    filter: blur(20px);
}

.hero-orbit {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 50%;
}

.hero-orbit.o2 { inset: 13%; border-color: rgba(212, 175, 55, 0.12); }
.hero-orbit.o3 { inset: 27%; border-color: rgba(212, 175, 55, 0.09); }

.orb-node {
    position: absolute;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: rgba(10, 10, 10, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.38);
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.18), inset 0 0 18px rgba(212, 175, 55, 0.05);
    color: var(--text-light);
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.2;
}

.orb-node svg { width: 1.15rem; height: 1.15rem; stroke: var(--primary-light); fill: none; stroke-width: 1.6; }

/* ── Orbits ──────────────────────────────────────────────────────────────
   Each node sits on its own full-size track layer that rotates about the
   sphere centre; the node itself rotates the opposite way at the same rate so
   the icon and label never tilt. Two radii (the o2 and o3 rings), two nodes
   per radius placed 180 deg apart — same speed on a radius means they can
   never meet, and the radii are far enough apart (38% vs 20%, node half-size
   8.2%) that inner and outer nodes never overlap either. The planet is 52%
   radius, offset 4% left of the box centre, so 38% + 8.2% + 4% stays inside
   it in every phase (checked over 36 phases). Inner track is faster,
   planetary-style; one full turn takes 70s / 110s — motion at the edge of
   noticing. Only transform animates. */
.orb-track {
    position: absolute;
    inset: 0;
    transform: rotate(var(--a));
    pointer-events: none;
}

.orb-track .orb-node {
    top: calc(50% - var(--r));
    left: 50%;
    translate: -50% -50%;
    transform: rotate(calc(-1 * var(--a)));
    pointer-events: auto;
}

.orb-track-opportunity { --r: 20%; --a:   5deg; --t: 70s; }
.orb-track-expertise   { --r: 20%; --a: 185deg; --t: 70s; }
.orb-track-people      { --r: 38%; --a: -100deg; --t: 110s; }
.orb-track-growth      { --r: 38%; --a:   80deg; --t: 110s; }

/* Desktop only, and only for people who have not asked for reduced motion. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .orb-track            { animation: orb-spin   var(--t) linear infinite; will-change: transform; }
    .orb-track .orb-node  { animation: orb-unspin var(--t) linear infinite; will-change: transform; }
}

@keyframes orb-spin   { to { transform: rotate(calc(var(--a) + 360deg)); } }
@keyframes orb-unspin { to { transform: rotate(calc(-1 * var(--a) - 360deg)); } }

/* Four-line tagline (the words that used to sit on the divider). Real text,
   so it lives outside the aria-hidden sphere, in the sphere's grid cell.
   Horizontal, right-aligned, no rotation. Position: bottom-right corner of
   the sphere box, outside the planet circle (variant B, pending the owner's
   choice of placement). */
.hero-tagline {
    grid-column: 2;
    grid-row: 1;
    /* Anchored to the sphere box, not the row: the row grows with the 4-line
       RU headline, the sphere (34rem, pinned to the row top) does not. Four
       lines x 24px = 96px tall, 1.2rem above the box's bottom edge. */
    align-self: start;
    justify-self: end;
    margin: calc(34rem - 96px - 1.2rem) 0 0 0;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
    color: var(--text-muted);
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
}

.hero-tagline span { display: block; }


/* ── Bottom strip (no third-party logos — those would be claims we can't make) */

.hero-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* 3.2rem put the divider (and the scroll cue on it) at 808px+ — below a
       1366×768 fold. 0.6rem brings the cue to ~765px for the 3-line EN/ES H1. */
    margin-top: 0.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.hero-stars {
    display: flex;
    gap: 1.7rem;
    color: var(--primary);
    opacity: 0.45;
    font-size: 1rem;
    letter-spacing: 0;
}

/* Scroll cue: label + chevron on the divider, between the stars and the note.
   Absolutely positioned so the strip row keeps its own height — in flow the
   stacked label/arrow (~33px) would add ~14px to the first screen. Reuses the
   steps_title translation so it can never drift from the section heading. */
.hero-strip { position: relative; }

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    top: 1.5rem;                /* = .hero-strip padding-top: sits on the stars row */
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible { opacity: 1; }

.hero-scroll-cue svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Slow, 4px bob; opt-in only when the user hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .hero-scroll-cue svg { animation: cue-bob 2.6s ease-in-out infinite; }
}

@keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* ── Sections below the hero ─────────────────────────────────────────────── */

.welcome-screen .lp-section {
    text-align: left;
    max-width: 62rem;
    margin: 5rem auto 0;
}

.welcome-screen .lp-title {
    /* Section headings are serif at every level; only step titles below stay
       sans, since they read as labels rather than headings. */
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 1.8rem;
}

.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Wide enough for the chevron that sits between two cards. */
    gap: 3.5rem;
}

/* Cards: thin low-alpha gold frame on a slightly lifted ground, generous
   padding; number and title on one line, icon in the top-right corner. */
.lp-step {
    position: relative;
    padding: 2rem 2.2rem 2.2rem;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
}

.lp-step-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lp-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    flex: 1 1 auto;
}

.lp-step-icon {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.7rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    stroke: var(--primary-light);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Gold chevron between neighbouring cards, centred on the gap. */
.lp-step + .lp-step::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1.75rem - 6px);
    width: 11px;
    height: 11px;
    border-top: 1.5px solid var(--primary);
    border-right: 1.5px solid var(--primary);
    transform: translateY(-50%) rotate(45deg);
}

/* These explain the product in more detail than the hero subtitle, so they
   should not be set smaller than it. Indented to the title's left edge. */
.lp-step p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 1rem 0 0 calc(2.4rem + 1rem);
}

.lp-step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.6);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--primary);
}

.welcome-screen .lp-note {
    margin: 2.6rem 0 0;
    padding: 1.15rem 1.4rem;
    border-left: 2px solid var(--border);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.welcome-screen .lp-note strong { color: var(--text-light); font-weight: 600; margin-right: 0.4rem; }

.welcome-screen .lp-vision p,
.welcome-screen .lp-network p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 46rem;
    margin: 0 0 1rem;
}

.welcome-screen .lp-network { margin-bottom: 4rem; }

/* Footer links are styled in the inline <style> block in index.html, which
   comes after this file and therefore wins — keeping one source of truth
   there instead of duplicating the rule here. */

@media (max-width: 900px) {
    .lp-steps { grid-template-columns: 1fr; gap: 1.8rem; }
    .lp-step + .lp-step::before { display: none; }
    .lp-step p { margin-left: 0; }
    .hero-copy, .hero-slogan, .hero-visual, .hero-tagline { grid-column: 1; grid-row: auto; }
    .hero-slogan { transform: none; justify-self: center; margin-top: 0.5rem; }
    .hero-tagline { margin: 0.5rem 0 0; justify-self: center; text-align: center; }
    .welcome-screen .lp-section { margin-top: 3.5rem; text-align: left; }
}

@media (max-width: 900px) {
    /* Same left-aligned reading edge as the desktop hero: the stacked layout
       used to centre everything, which broke the vertical the sections below
       already stand on. */
    .welcome-screen .hero { grid-template-columns: 1fr; gap: 2.2rem; text-align: left; }
    .welcome-screen .hero-sub { margin-inline: 0; }
    /* align-items overrides .welcome-buttons{align-items:center} from styles.css:1249;
       the buttons stay content-width, they just start on the text edge. */
    .welcome-screen .hero-cta { justify-content: flex-start; align-items: flex-start; }
    .hero-visual { max-width: 22rem; }
    .hero-tagline { display: none; }
    .hero-strip { justify-content: center; }
    .hero-scroll-cue { display: none; }

    /* One gutter for the whole stacked range, so the copy edge is
       1rem (.container) + 1.5rem (.welcome-screen) = 40px at every width here. */
    .container { padding: 0 1rem; }

    /* The header turns into a column at 1024px and the base align-items:center
       was centring the logo. Flex-start puts it on that same 40px vertical;
       padding-right is left alone so the auth buttons keep their room. */
    .header { align-items: flex-start; padding-left: 2.5rem; }
}

@media (max-width: 560px) {
    .hero-visual, .hero-slogan { display: none; }
    .orb-node { width: 4.6rem; height: 4.6rem; font-size: 0.62rem; }
}

/* ── Header, logged-out ──────────────────────────────────────────────────
   One primary action. Two gold buttons side by side competed with each
   other: Login becomes a plain white link, Register a thin white outline
   with no fill, the language select a dark pill. Scoped to #authButtons so
   .btn-primary / .btn-outline elsewhere (hero CTA, cabinet) are untouched. */
#authButtons .btn.btn-outline {
    background: none;
    border: none;
    box-shadow: none;
    color: #fff;
    font-weight: 500;
    padding-inline: 0.6rem;
}

#authButtons .btn.btn-outline:hover:not(:disabled) {
    background: none;
    box-shadow: none;
    transform: none;
    color: var(--primary-light);
}

#authButtons .btn.btn-primary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

#authButtons .btn.btn-primary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    border-color: #fff;
    box-shadow: none;
    transform: none;
}

.header .language-selector select {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;
    color: #fff;
}