/* ========================================================================
   Portfolio Trader — Landing Page (en_3)

   Modern SaaS-style landing page, subtle dark tonal section rhythm.
   Key ideas:
     - Pure black hero/showcase/CTA, slightly lifted dark for Features/Watch
     - Sticky glass-blur nav with hairline border
     - Big bold hero with gradient headline accent
     - Feature cards with subtle-tint icons and hover lift
     - Neutral CTA card (no colour tint)

   Palette is driven entirely by the custom properties defined in :root
   below. Layout/typography are independent of colour.

   Companion variant: en_2 — same structure but uses stark dark/light
   section alternation (light Features/Showcase/CTA) instead of dark tones.
   ======================================================================== */


/* ------------------------------------------------------------------------
   Colour Palette — True black background, warm Apple-style greys, blue
   accent for CTAs / feature icons / eyebrows.
   ------------------------------------------------------------------------ */
:root {
    /* Backgrounds */
    --bg-base:          #000000;    /* Pure black — matches en's hero top */
    --bg-card:          rgba(255, 255, 255, 0.03);
    --bg-card-hover:    rgba(255, 255, 255, 0.06);

    /* Borders */
    --border:           rgba(255, 255, 255, 0.08);
    --border-hover:     rgba(255, 255, 255, 0.15);

    /* Text — warm Apple greys (match en) */
    --text-primary:     #f5f5f7;
    --text-secondary:   #a1a1a6;
    --text-muted:       #6e6e73;

    /* Accent colours — softer-blue → blue gradient */
    --accent-primary:   #60A5FA;
    --accent-secondary: #3B82F6;
    --accent-glow:      rgba(96, 165, 250, 0.40);
    --accent-glow-soft: rgba(96, 165, 250, 0.15);

    --gradient-accent:  linear-gradient(135deg, #60A5FA, #3B82F6);
    --gradient-glow:    radial-gradient(ellipse at 50% 0%,
                           rgba(96, 165, 250, 0.25),
                           transparent 60%);

    /* Spacing scale (consistent rhythm) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radii */
    --radius-md:  0.5rem;
    --radius-lg:  0.75rem;
    --radius-xl:  1rem;
    --radius-2xl: 1.5rem;

    /* Container width */
    --container: 1200px;
}


/* ------------------------------------------------------------------------
   Reset / base
   ------------------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    /* SF Pro (variable) on Apple platforms via -apple-system / BlinkMacSystemFont.
       Named "SF Pro Display" / "SF Pro Text" fallbacks cover older systems where
       the font is installed but not resolved through the system keyword. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ------------------------------------------------------------------------
   Navigation — sticky glass-blur bar at the top
   ------------------------------------------------------------------------ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(0, 0, 0, 0.70);                  /* Black-tinted for pure-black theme */
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    /* Padding matches 'en' — 14px vertical for a slightly tighter nav,
       40px horizontal so logo and CTA sit further inset from the edges. */
    padding: 14px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.nav-brand {
    display: flex;
    align-items: center;                /* align icon + text vertically */
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    white-space: nowrap;
}

/* Small app icon in the nav bar (variant C) */
.nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;                 /* Scaled iOS icon corner radius */
    flex-shrink: 0;
    margin-right: 0.625rem;
}

.nav-brand-main { color: var(--text-primary); }
.nav-brand-sub  { color: var(--text-muted); font-weight: 400; margin-left: 0.25rem; }

.nav-links {
    display: flex;
    gap: var(--space-8);
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--text-primary); }

.nav-cta {
    background: var(--accent-secondary);       /* Solid blue, no gradient */
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);            /* Rectangle with small rounding */
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.nav-cta:hover {
    background: #2563EB;                        /* Slightly deeper on hover */
}


/* ------------------------------------------------------------------------
   Hero — icon, big headline, subtitle, CTA, main screenshot
   ------------------------------------------------------------------------ */
.hero {
    position: relative;
    padding: 54px var(--space-6) var(--space-16);  /* Top reduced from 64px to compensate for transparent nav adding perceived space */
    text-align: center;
}

.hero-inner {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Variant C: no hero icon — icon lives in the nav bar instead.
   Keep the hero top padding generous so the headline has room. */

/* Hero typography mirrors the 'en' variant — fixed sizes (not clamp)
   for a tighter, calmer headline. Reduce at the 640px breakpoint below. */
.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 12px;
}

/* Gradient-filled accent line of the hero headline */
.hero-title-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    display: block;
}

.hero-subtitle {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 32px;
}

/* Prevent awkward mid-phrase line breaks (e.g. "Apple Watch") */
.nowrap { white-space: nowrap; }

.hero-cta {
    margin-bottom: var(--space-12);               /* Tighter transition to screenshot */
}

/* Shared App Store badge styles — used in hero, watch, cta */
.app-store-badge {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Badge sizes match the 'en' variant: 44px in hero, 48px in CTA.
   Apple's guidelines require ≥40px height and proportional scaling. */
.app-store-badge img { height: 44px; width: auto; }

.cta .app-store-badge img { height: 48px; }

.app-store-badge:hover { transform: scale(1.04); }

.hero-screenshot-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.hero-screenshot {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.50),
        0 0 0 1px var(--border);
}


/* ------------------------------------------------------------------------
   Description — single-sentence app summary between hero and features
   ------------------------------------------------------------------------ */
.description {
    padding: 40px 40px 16px;
    text-align: center;
    background-color: var(--bg-lifted);
}

.description-text {
    max-width: 720px;
    margin: 0 auto;
    font-size: 21px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ------------------------------------------------------------------------
   Generic section layout — reused by features / showcase / watch
   ------------------------------------------------------------------------ */
.section-inner {
    max-width: var(--container);
    margin: 0 auto;
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-16);
}

.features .section-header {
    text-align: left;
    max-width: none;
    margin-bottom: var(--space-8);
}

.section-eyebrow {
    color: var(--accent-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: var(--space-3);
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-6);
}

.section-lead {
    font-size: 1.125rem;
    color: var(--text-secondary);
}


/* ------------------------------------------------------------------------
   Features grid — cards with gradient icons and hover lift
   ------------------------------------------------------------------------ */
.features {
    padding: 40px var(--space-6);
    position: relative;
    z-index: 1;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-6);
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: var(--space-3);
    align-items: center;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
}

/* Feature icon — subtle tint background with accent-coloured icon.
   Sized to sit inline with the title text. */
.feature-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.15),
        rgba(59, 130, 246, 0.15));
    border: 1px solid rgba(96, 165, 250, 0.20);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon svg {
    width: 20px;
    height: 20px;
    color: var(--accent-primary);
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Description spans both columns */
.feature-card p {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}


/* ------------------------------------------------------------------------
   Showcase — second screenshot area (placeholder for now)
   ------------------------------------------------------------------------ */
.showcase {
    padding: 52px var(--space-6);
    position: relative;
    z-index: 1;
}

/* Showcase header matches the 'en' variant's calmer sizing — fixed 36px
   heading (vs the shared fluid 32–48px), tighter title→lead and
   header→image gaps. Mobile step-down lives in the 640px block below. */
.showcase .section-title {
    font-size: 36px;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.showcase .section-header {
    margin-bottom: 48px;
}

.showcase-image {
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.40);
}

/* Placeholder styling — used until a real second screenshot is provided */
.showcase-image.placeholder {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg,
            rgba(96, 165, 250, 0.08),
            rgba(59, 130, 246, 0.08));
    border: 1px dashed var(--border-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9375rem;
    padding: var(--space-8);
    text-align: center;
}


/* ------------------------------------------------------------------------
   Apple Watch — two-column layout (text left, image right)
   ------------------------------------------------------------------------ */
.watch {
    padding: var(--space-24) var(--space-6);
    position: relative;
    z-index: 1;
}

.watch-layout {
    display: grid;
    /* Columns size to content (not 50/50) and the pair is centered as a block
       in the section — prevents the smaller 220px watch drifting to the right
       with a wide empty gap next to the text. */
    grid-template-columns: auto auto;
    gap: var(--space-16);
    align-items: center;
    justify-content: center;
}

/* Constrain text width so the left "auto" column doesn't stretch too wide —
   keeps line length readable and keeps the pair compact. */
.watch-content {
    max-width: 480px;
}

/* Watch section eyebrow/title/lead — left-aligned override */
.watch-content .section-eyebrow,
.watch-content .section-title,
.watch-content .section-lead {
    text-align: left;
}

/* Watch title is reduced vs the shared .section-title used elsewhere —
   en's more modest ~36px heading reads better here than the fuller clamp. */
.watch-content .section-title {
    font-size: clamp(1.75rem, 2.75vw, 2.25rem);
    margin-bottom: var(--space-6);
}
.watch-content .section-lead  { margin-bottom: var(--space-8); }

.watch-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.watch-features li {
    color: var(--text-secondary);
    padding-left: 1.75rem;
    position: relative;
}

/* Gradient-filled dot bullet for each feature */
.watch-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 12px;
    height: 12px;
    background: var(--gradient-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
}

.watch-image-wrap {
    display: flex;
    justify-content: center;
}

.watch-image {
    max-width: 220px;           /* Matches en's watch image scale — less dominant */
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.60));
}


/* ------------------------------------------------------------------------
   Final CTA — minimal download section (no card wrapper, matches en_1)
   ------------------------------------------------------------------------ */
.cta {
    padding: 80px 40px;
}

.cta-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.cta-title {
    font-size: 2rem;                    /* 32px flat — matches en_1 */
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-3);      /* 12px */
}

.cta-lead {
    font-size: 1.125rem;                /* 18px */
    color: var(--text-secondary);
    margin-bottom: var(--space-8);      /* 32px */
}


/* ------------------------------------------------------------------------
   Footer — minimal, matches en_1
   ------------------------------------------------------------------------ */
.footer {
    padding: 24px 40px;
}

.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.8125rem;               /* 13px, matches en_1 */
    color: var(--text-secondary);
}

.footer-inner a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-inner a:hover { color: var(--text-primary); }


/* ------------------------------------------------------------------------
   Responsive — tablet and below
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .watch-layout {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .watch-content .section-eyebrow,
    .watch-content .section-title,
    .watch-content .section-lead {
        text-align: center;
    }

    .watch-features {
        max-width: 320px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .nav-links { display: none; }

    .nav-inner { padding: var(--space-3) var(--space-4); }

    .hero        { padding: 50px var(--space-4) 40px; }
    .description { padding: 40px var(--space-4) 16px; }
    .description-text { font-size: 18px; }
    .features,
    .showcase,
    .watch       { padding: 40px var(--space-4); }
    .cta         { padding: var(--space-16) var(--space-6); }

    /* Hero scales down on mobile — mirrors 'en' variant's 32px → 28px ladder */
    .hero-title    { font-size: 32px; }
    .hero-subtitle { font-size: 18px; }

    /* Showcase title also steps down on mobile to match 'en' */
    .showcase .section-title { font-size: 28px; }

    .feature-card { padding: var(--space-6); }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}


/* ========================================================================
   SECTION ALTERNATION (dark tonal steps, Apple product-page style)
   ------------------------------------------------------------------------
   Keep everything dark, but shift between two closely-related tones so
   sections still read as discrete chapters.

     Tone A (base black)   #000000   — Hero, Showcase, CTA, Footer
     Tone B (lifted dark)  #121417   — Features, Watch

   The step is small (~7% luminance) — intentional: enough to define
   section boundaries without losing the unified "premium dark" feel.

   This block is the only structural difference between en_3 and en_2 —
   en_2 instead uses stark dark/light section alternation.
   ======================================================================== */

:root {
    --bg-lifted: #121417;       /* lifted dark for alternating sections */
}

.features { background: var(--bg-lifted); }
.watch    { background: var(--bg-lifted); }

/* Showcase, CTA, Footer inherit the base black body bg — no override needed.
   Feature cards keep their translucent-white tint; it still reads correctly
   against the slightly lifted background. */