/*
  Ylem Studio — Meta-inspired styles
  Clean left-aligned hero, bold blue, rounded cards, thin separators, pill buttons
*/

:root{
  --bg:#fff;
  --ink:#0b0f19;
  --muted:#667085;
  --line:#e6e8ec;
  --blue:#0866ff;
  --blue-ink:#fff;
  --surface:#f7f8fa;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(16,24,40,.06);
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#0a0b0f;
    --ink:#f2f4f7;
    --muted:#98a2b3;
    --line:#1f2937;
    --blue:#1b74ff;
    --blue-ink:#e6f0ff;
    --surface:#0f1117;
    --card:#0c0f14;
    --shadow:0 10px 28px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "SF Pro Display", Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 22px}

/* Nav */
.nav{
  position:sticky;top:0;z-index:40;
  /* Use a solid black header background per design request */
  background:#000;
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .glyph{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:var(--blue);color:var(--blue-ink);font-weight:800;
  letter-spacing:.2px;box-shadow:var(--shadow)
}
.brand-text{letter-spacing:.2px}
.brand .brand-logo{
  width:auto;
  height: 56px;
  display:block;
  border-radius:6px;
}

/* Decorative background slot next to the brand logo. Change the inline style URL or override with CSS */
.brand .brand-bg{
  width:44px;
  height:44px;
  display:inline-block;
  border-radius:8px;
  background-size:cover;
  background-position:center;
  margin-right:10px;
}
.menu{display:flex;gap:16px}
.menu a{color:var(--muted);font-size:15px;padding:8px 10px;border-radius:10px}
.menu a:hover{color:var(--ink);background:color-mix(in srgb, var(--line) 35%, transparent)}

/* Ensure nav text is readable on the solid black background */
.nav .brand-text{color:#ffffff}
.nav .menu a{color:rgba(255,255,255,0.9)}
.nav .menu a:hover{color:#ffffff;background:rgba(255,255,255,0.04)}

/* Hero */
.meta-hero{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--surface)) 0%, var(--bg) 40%);
  border-bottom:1px solid var(--line);
  background-size: cover;
  background-position: center;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;
  padding: clamp(56px, 12vw, 120px) 0;
}
.hero-copy h1{color:white;font-size: clamp(36px, 6vw, 64px);line-height:1.05;margin:0 0 10px;letter-spacing:-.01em}
.lead{color:var(--muted);font-size: clamp(18px, 2.2vw, 20px);max-width:620px}
.cta-row{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 16px;border-radius:999px;font-weight:600;border:1px solid transparent;
  transition:transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease
}
.btn:focus{outline: none; box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 30%, transparent)}
.btn-solid{background:var(--blue);color:var(--blue-ink)}
.btn-solid:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{background:color-mix(in srgb, var(--line) 30%, transparent)}
.hero-art{display:grid;place-items:center;position:relative}
.hero-art .brand-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  height: 10%;
  background-size: cover;
  background-position: center;
  z-index: -1; /* Place it behind the orb */
}
.orb{
  width:min(56vw,520px);aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(closest-side at 35% 35%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 65%),
    radial-gradient(closest-side at 70% 60%, color-mix(in srgb, var(--blue) 25%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, var(--surface)), var(--bg));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* Sections */
.section{padding: clamp(36px, 8vw, 96px) 0}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{
  grid-column: span 12;
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:var(--shadow);display:grid;gap:10px
}
.card-top{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.card h3{margin:4px 0 0;font-size: clamp(20px, 2.4vw, 28px)}
.muted{color:var(--muted)}
.thumb{
  aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 60%),
    radial-gradient(400px 180px at 20% 20%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 60%);
}
.card-actions{display:flex;gap:8px;align-items:center}
.btn-ghost-sm{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent}
.btn-ghost-sm:hover{background:color-mix(in srgb, var(--line) 30%, transparent)}
.btn-link{height:auto;padding:0;border:none;color:var(--blue);font-weight:600}
.btn-link:hover{text-decoration:underline}

.trailer-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* Hustle gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-top:16px}
.shot{grid-column:span 6;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
@media(max-width:1024px){.shot{grid-column:span 12}}

/* Split features */
.split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.mock{
  aspect-ratio:16/10;border-radius:18px;border:1px solid var(--line);
  background:
    radial-gradient(70% 60% at 70% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), transparent 60%);
}

/* Footer */
.footer{border-top:1px solid var(--line)}
.foot{padding:28px 0 56px;font-size:14px}
.foot-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.foot-h{margin:0 0 10px}
.copyright{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Responsive */
@media(max-width:1024px){
  .hero-grid,.split-grid{grid-template-columns:1fr}
}

/* Right-side dot navigation */
.right-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.right-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.right-nav li {
  margin: 15px 0;
}

.right-nav .dot {
  display: block;
  width: 12px;
  height: 12px;
  background-color: var(--muted);
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.right-nav .dot:hover,
.right-nav .dot.active {
  background-color: var(--blue);
}

/* Support Section */
.support-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.support-option {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.orb-image {
  width: min(56vw,520px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: none; /* Hidden by default */
}