@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Nunito:wght@400;600;700&display=swap');
:root{
  --bg:#0b1220;
  --bg-accent:#0e1729;
  --surface:#0f172a;
  --card:#111827;
  --muted:#cbd5e1;
  --text:#e5e7eb;
  --brand:#22d3ee;
  --brand-strong:#06b6d4;
  --brand-contrast:#081018;
  --ring:rgba(34,211,238,.35);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f7fb;
    --bg-accent:#eef2f7;
    --surface:#ffffff;
    --card:#ffffff;
    --muted:#475569;
    --text:#0f172a;
    --brand:#0891b2;
    --brand-strong:#0e7490;
    --brand-contrast:#ffffff;
    --ring:rgba(8,145,178,.25);
    --shadow:0 10px 24px rgba(2,6,23,.08);
    color-scheme: light;
  }
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter','Nunito',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(34,211,238,.08), transparent 60%),
    linear-gradient(to bottom right, var(--bg), var(--bg-accent));
}

/* Background grid accent */
.grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.12) 1px, transparent 1px);
  background-size:56px 56px,56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 70%);
}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 24px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(to bottom, rgba(2,6,23,.65), rgba(2,6,23,.35) 40%, transparent);
  border-bottom:1px solid rgba(148,163,184,.12);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand-logo{
  width:28px; height:28px; border-radius:6px;
  background: conic-gradient(from 180deg at 50% 50%, var(--brand), var(--brand-strong), var(--brand));
  box-shadow: 0 6px 18px var(--ring), inset 0 0 0 1px rgba(255,255,255,.08);
}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; margin-left:18px}
.nav a:hover{color:var(--text)}

/* Hero */
.hero{padding:72px 0 36px}
.hero .eyebrow{color:var(--brand); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
.hero h1{margin:10px 0 8px; font-size:40px; line-height:1.15; letter-spacing:.2px}
.hero p{margin:0; color:var(--muted); font-size:16px}

/* Buttons */
.cta{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none; transition:all .2s ease; border:1px solid transparent}
.btn-primary{background:linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%); color:var(--brand-contrast); box-shadow: var(--shadow)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 14px 34px rgba(34,211,238,.25)}
.btn-outline{background:transparent; color:var(--text); border-color:rgba(148,163,184,.25)}
.btn-outline:hover{border-color:var(--brand); box-shadow: 0 0 0 3px var(--ring)}

/* Cards */
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin-top:28px}
@media(min-width:820px){.cards{grid-template-columns:1fr 1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(148,163,184,.16); border-radius:14px; box-shadow: var(--shadow)}
@media (prefers-color-scheme: light){ .card{background:#ffffff}}
.card-inner{padding:22px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0 0 14px; color:var(--muted); font-size:14px}

/* Media blocks */
.media{display:flex; align-items:flex-start; gap:16px}
.icon{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(34,211,238,.12); color:var(--brand); border:1px solid rgba(34,211,238,.25)
}

/* Links group */
.links{display:flex; flex-wrap:wrap; gap:10px}
.muted{color:var(--muted)}

/* Footer */
footer{margin-top:40px; text-align:center}
footer .flex{justify-content:center}

/* Accessibility */
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
/* Link palette variables */
:root { --link:#22d3ee; --link-hover:#67e8f9; }
@media (prefers-color-scheme: light){
  :root { --link:#0e7490; --link-hover:#0891b2; }
}

/* Link visibility and contrast */
a:not(.btn){
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:not(.btn):hover{ color: var(--link-hover); }
a:not(.btn):visited{ color: var(--link); }
a:not(.btn):focus-visible{
  outline: 2px solid var(--link-hover);
  outline-offset: 2px;
}

/* Ensure links inside muted/footer also use high-contrast colors */
.muted a:not(.btn), footer a:not(.btn){ color: var(--link); }

/* Ensure buttons keep their intended contrast even inside muted/links containers */
.muted a.btn, .muted .btn,
.card .btn-primary, .card a.btn-primary {
  color: var(--brand-contrast);
  text-decoration: none;
}
.muted a.btn:hover, .muted .btn:hover,
.card .btn-primary:hover, .card a.btn-primary:hover {
  color: var(--brand-contrast);
}
@media (prefers-color-scheme: dark){
  /* Covered-call pages: increase text contrast in dark mode */
  #opening-page .muted,
  #closing-page .muted,
  #rolling-page .muted {
    color: var(--text);
  }
  #opening-page .card p,
  #closing-page .card p,
  #rolling-page .card p {
    color: var(--text);
  }
  #opening-page .hero p,
  #closing-page .hero p,
  #rolling-page .hero p {
    color: var(--text);
  }
}
/* Form controls: improve contrast in dark mode, including native dropdown popups */
select, input, textarea {
  color: var(--text);
}

/* Ensure OS/UA form controls render dark-themed popups and text */
@media (prefers-color-scheme: dark){
  select, input, textarea {
    color: var(--text);
    -webkit-text-fill-color: var(--text); /* Safari */
  }
  /* Many browsers honor option styling; improves dropdown menu readability */
  select option {
    color: var(--text);
    background-color: var(--surface);
  }
  /* In muted containers, keep selects fully readable */
  .muted select {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
  }
}
/* Whales page: widen content on small screens by reducing side paddings */
@media (max-width: 600px){
  /* Section uses class "container" and id "whales-page" */
  #whales-page.container { padding-left:8px; padding-right:8px; }
  #whales-page .card-inner { padding-left:12px; padding-right:12px; }
  #whales-page .media { gap:12px; }
}
/* Whales trades: slightly smaller font on mobile to reduce wrapping */
@media (max-width: 600px){
  #whales-page .whale-trades{
    font-size: 13px;
    line-height: 1.35;
  }
}
/* Whales trades: prevent wrapping on mobile while allowing horizontal scroll if needed */
@media (max-width: 600px){
  #whales-page .whale-trades{
    white-space: nowrap;      /* keep each trade on one line */
    overflow-x: auto;         /* enable horizontal scroll if still too long */
    display: block;           /* ensure overflow works on the container */
    -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
  }
}
/* Whales intro: align the "Stream..." text flush with the card's left edge */
#whales-page .whales-intro{
  margin-left:2px;   /* match .card-inner default padding */
  display:block;
  text-align:left;
}
@media (max-width: 600px){
  #whales-page .whales-intro{
    margin-left:-2px; /* match tightened mobile padding we applied earlier */
  }
}