:root {
  --bg: #090a0c;
  --surface: #111215;
  --surface-2: #17171a;
  --paper: #f6f1e7;
  --muted: #aaa69e;
  --gold: #d9b86c;
  --line: rgba(246, 241, 231, 0.13);
  --wrap: 1180px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--paper); background: var(--bg); font-family: var(--sans); line-height: 1.6; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }
.skip { position: fixed; top: -5rem; left: 1rem; z-index: 50; padding: .7rem 1rem; color: #090a0c; background: var(--paper); }
.skip:focus { top: 1rem; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid var(--line); background: linear-gradient(#090a0ce8, transparent); }
.nav { min-height: 84px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; font: 600 1.75rem/1 var(--serif); text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.nav nav { display: flex; gap: 1.7rem; margin-left: auto; }
.nav nav a { color: #d7d2c9; font-size: .9rem; text-decoration: none; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--gold); }
.studio-link { padding-left: 1.6rem; border-left: 1px solid var(--line); color: var(--gold) !important; }

.hero { position: relative; min-height: 780px; display: grid; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.47); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #090a0c 3%, #090a0cdf 38%, transparent 72%), linear-gradient(0deg, #090a0c 0%, transparent 36%); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 4rem; padding-top: 96px; }
.hero-copy { padding: 5rem 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -.025em; }
h1 { max-width: 720px; margin: 0 0 1.4rem; font-size: clamp(4rem, 7vw, 7rem); }
.lead { max-width: 590px; margin: 0; color: #d2cec6; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .75rem 1.25rem; border: 1px solid var(--gold); border-radius: 12px; background: var(--gold); color: #17130a; font-weight: 700; text-decoration: none; transition: 180ms ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(217,184,108,.18); }
.button.secondary { background: rgba(9,10,12,.55); color: var(--paper); border-color: var(--line); backdrop-filter: blur(16px); }
.device { position: relative; justify-self: end; width: min(360px, 85%); padding: 12px; border: 1px solid #9b9182; border-radius: 54px; background: #080808; box-shadow: 0 36px 100px #000; transform: rotate(2deg); }
.device::before { content: ""; position: absolute; z-index: 2; top: 20px; left: 50%; width: 33%; height: 27px; transform: translateX(-50%); border-radius: 20px; background: #050505; }
.device-screen { overflow: hidden; min-height: 650px; border-radius: 43px; background: #0b0c0e; }
.device-screen img { width: 100%; height: 410px; object-fit: cover; }
.player { padding: 1.25rem; }
.player strong { display: block; margin-bottom: .35rem; font: 500 1.65rem var(--serif); }
.player p { margin: 0; color: var(--muted); font-size: .82rem; }
.timeline { height: 3px; margin: 1.5rem 0; background: #343434; }
.timeline span { display: block; width: 44%; height: 100%; background: var(--gold); }
.thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.thumbs img { height: 72px; border-radius: 8px; }

.section { padding: 9rem 0; }
.story { display: grid; grid-template-columns: .75fr 1.25fr; gap: 6rem; align-items: center; }
.section h2 { margin: 0 0 1.25rem; font-size: clamp(3rem, 5vw, 5.5rem); }
.section-copy { max-width: 490px; }
.section-copy p { color: var(--muted); font-size: 1.05rem; }
.gold-link { display: inline-flex; gap: .55rem; margin-top: 1rem; color: var(--gold); font-weight: 650; text-decoration: none; }
.photo-composition { position: relative; min-height: 530px; }
.photo-composition img { position: absolute; object-fit: cover; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 28px 70px #000; }
.photo-composition img:nth-child(1) { top: 0; right: 3%; width: 67%; height: 82%; }
.photo-composition img:nth-child(2) { bottom: 0; left: 0; width: 42%; height: 47%; }
.photo-composition img:nth-child(3) { right: 0; bottom: -2%; width: 32%; height: 38%; }

.frame-mode { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: #0d0d0e; }
.frame-inner { min-height: 700px; display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 4rem; }
.frame-copy h2 em { display: block; color: var(--gold); font-style: normal; }
.ipad { padding: 14px; border: 1px solid #a49c91; border-radius: 34px; background: #080808; box-shadow: 0 45px 110px #000; }
.ipad img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 22px; }
.feature-strip { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }
.feature { padding: 3.2rem 2rem; border-right: 1px solid var(--line); }
.feature:last-child { border: 0; }
.feature b { color: var(--gold); font-size: 1.4rem; }
.feature h3 { margin: 1.2rem 0 .5rem; font-size: 1.65rem; }
.feature p { margin: 0; color: var(--muted); font-size: .9rem; }

.cta { padding: 8rem 0; text-align: center; }
.cta img { width: 92px; margin: 0 auto 1.5rem; border-radius: 24px; box-shadow: 0 18px 50px rgba(217,184,108,.16); }
.cta h2 { max-width: 780px; margin-inline: auto; }
.cta p { max-width: 600px; margin: 0 auto; color: var(--muted); }
.footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 150px; display: flex; align-items: center; gap: 2rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
.footer a, .footer small { color: var(--muted); text-decoration: none; }

.subpage .site-header { position: relative; background: #090a0c; }
.sub-hero { position: relative; overflow: hidden; padding: 7rem 0 5rem; border-bottom: 1px solid var(--line); }
.sub-hero::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; background: var(--hero-image) center/cover; opacity: .25; mask-image: linear-gradient(90deg,transparent,#000); }
.sub-hero .wrap { position: relative; z-index: 2; }
.sub-hero h1 { font-size: clamp(3.7rem,7vw,6.5rem); }
.support-grid { display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid var(--line); }
.support-grid article { padding: 3.5rem 1.7rem; border-right: 1px solid var(--line); }
.support-grid article:last-child { border: 0; }
.support-grid span { color: var(--gold); font-size: 1.5rem; }
.support-grid h2 { margin: 1rem 0 .7rem; font-size: 1.45rem; }
.support-grid p { color: var(--muted); font-size: .9rem; }
.contact-band { margin-block: 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3.2rem; border: 1px solid rgba(217,184,108,.45); background: #0e0f11; }
.contact-band h2 { margin: 0 0 .5rem; font-size: 2.7rem; }
.contact-band p { color: var(--muted); }
.contact-band a { color: var(--gold); font-size: clamp(1.25rem,2.4vw,2rem); text-decoration: none; }

.legal { display: grid; grid-template-columns: 240px minmax(0,760px); gap: 6rem; padding-block: 6rem 9rem; }
.toc { position: sticky; top: 2rem; align-self: start; }
.toc h2 { font-size: 1.35rem; }
.toc a { display: block; padding: .35rem 0; color: var(--muted); font-size: .86rem; text-decoration: none; }
.toc a:hover { color: var(--gold); }
.legal-content h1 { font-size: clamp(3.4rem,6vw,5.5rem); }
.legal-meta { color: var(--gold); font-size: .85rem; }
.legal-content section { padding: 2.2rem 0; border-top: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 1rem; color: var(--gold); font: 500 1.75rem/1.2 var(--sans); letter-spacing: -.02em; }
.legal-content h3 { margin-top: 1.7rem; font: 600 1.1rem var(--sans); }
.legal-content p, .legal-content li { color: #c2beb6; }
.legal-content a { color: var(--gold); }
.notice { padding: 1.2rem 1.4rem; border-left: 2px solid var(--gold); background: #111215; color: #d7d2c9; }

@media (max-width: 850px) {
  .wrap { width: min(100% - 2rem, var(--wrap)); }
  .nav { min-height: 72px; }
  .nav nav a:not([aria-current="page"]) { display: none; }
  .studio-link { display: none !important; }
  .hero { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 110px; }
  .hero-copy { padding: 4rem 0 1rem; }
  h1 { font-size: clamp(3.5rem,16vw,5.2rem); }
  .device { justify-self: center; width: min(330px,88%); margin-bottom: 5rem; }
  .story, .frame-inner { grid-template-columns: 1fr; gap: 3rem; }
  .section { padding: 6rem 0; }
  .photo-composition { min-height: 430px; }
  .frame-inner { padding-block: 6rem; }
  .feature-strip, .support-grid { grid-template-columns: 1fr 1fr; }
  .feature, .support-grid article { border-bottom: 1px solid var(--line); }
  .contact-band { grid-template-columns: 1fr; padding: 2rem; }
  .legal { grid-template-columns: 1fr; gap: 2rem; }
  .toc { position: relative; top: auto; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
  .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 2.5rem; }
  .footer-inner nav { margin-left: 0; }
}

@media (max-width: 520px) {
  .brand { font-size: 1.45rem; }
  .nav nav { gap: 1rem; }
  .hero-copy { padding-top: 2rem; }
  .device-screen { min-height: 580px; }
  .feature-strip, .support-grid { grid-template-columns: 1fr; }
  .feature, .support-grid article { border-right: 0; }
  .photo-composition { min-height: 360px; }
  .sub-hero { padding: 5rem 0 4rem; }
}

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