:root {
  --studio-navy: #0c2130;
  --studio-gold: #edae28;
  --studio-cream: #fbfaf6;
  --ink: #11181d;
  --muted: #647078;
  --line: rgba(12, 33, 48, .14);
  --page: #fff;
  --max: 1180px;
  --sans: "Avenir Next", Avenir, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(calc(100% - 44px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; background: #fff; color: #000; }
.skip-link:focus { top: 16px; }

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(16px);
}
.site-header.sticky { position: sticky; top: 0; }
.site-nav { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.studio-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.studio-brand img { width: 54px; height: 54px; border-radius: 50%; }
.studio-name { color: var(--studio-navy); font-size: clamp(17px, 2vw, 25px); font-weight: 600; letter-spacing: .15em; white-space: nowrap; }
.studio-name .amp { color: var(--studio-gold); }
.primary-nav { display: flex; align-items: center; gap: clamp(17px, 2.5vw, 32px); }
.primary-nav a { color: inherit; text-decoration: none; font-size: 13px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.primary-nav a:hover { opacity: .6; }
a:focus-visible { outline: 3px solid var(--focus, var(--studio-gold)); outline-offset: 5px; border-radius: 4px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 13px;
  background: #090b0d;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 750;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .13);
  transition: transform .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.button .apple { margin-right: 9px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; line-height: 1; }
.text-link { font-weight: 750; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.phone { position: relative; overflow: hidden; border: 8px solid #151719; border-radius: 48px; background: #111; box-shadow: 0 30px 55px rgba(4, 10, 16, .22); }
.phone img { width: 100%; height: auto; }
.phone::after { content: ""; position: absolute; inset: 0; border-radius: 39px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); pointer-events: none; }

.site-footer { border-top: 1px solid var(--line); padding: 38px 0; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 42px; height: 42px; border-radius: 50%; }
.footer-brand strong { color: var(--studio-navy); letter-spacing: .08em; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.footer-links a { text-underline-offset: 4px; }

/* Studio home */
.home { --page: var(--studio-cream); }
.home-hero { min-height: 560px; display: grid; align-content: center; padding: 100px 0 88px; }
.home-hero h1 { max-width: 820px; margin: 0; color: var(--studio-navy); font-size: clamp(62px, 9.4vw, 126px); line-height: .88; letter-spacing: -.065em; }
.home-hero p { max-width: 660px; margin: 34px 0 0; color: var(--muted); font-size: clamp(19px, 2.2vw, 26px); }
.product-band { min-height: 660px; display: grid; align-items: center; border-top: 1px solid var(--line); overflow: hidden; }
.product-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(48px, 8vw, 110px); padding: 78px 0; }
.product-band:nth-of-type(even) .product-layout { grid-template-columns: 1.1fr .9fr; }
.product-band:nth-of-type(even) .product-copy { order: 2; }
.product-brandline { display: flex; align-items: center; gap: 22px; }
.product-icon { width: 116px; height: 116px; border-radius: 25%; box-shadow: 0 20px 40px rgba(12, 33, 48, .15); }
.product-copy h2 { margin: 26px 0 12px; font-size: clamp(50px, 6vw, 82px); line-height: .94; letter-spacing: -.055em; }
.product-copy p { max-width: 500px; margin: 0 0 28px; color: var(--muted); font-size: clamp(19px, 2vw, 24px); }
.product-media { min-height: 500px; position: relative; display: grid; place-items: center; }
.product-media .phone { width: min(330px, 78vw); }
.chuzr-band { background: radial-gradient(circle at 72% 47%, rgba(255, 75, 145, .17), transparent 28%), radial-gradient(circle at 62% 45%, rgba(255, 187, 24, .16), transparent 40%); }
.proofline-band { color: #f5f8fb; background: #03101c; }
.proofline-band .product-copy p { color: rgba(255,255,255,.64); }
.proofline-band .product-icon { box-shadow: 0 18px 48px rgba(0, 207, 242, .14); }
.proofline-band .phone { border-color: #27313a; box-shadow: 0 32px 70px rgba(0,0,0,.52), 0 0 70px rgba(0,204,239,.08); }
.queens-band { min-height: 570px; background: radial-gradient(circle at 75% 50%, rgba(31, 87, 202, .23), transparent 35%), var(--studio-cream); }
.queens-band .product-media { min-height: 430px; }
.queens-orb { position: absolute; width: min(520px, 80vw); aspect-ratio: 1; border-radius: 50%; background: url("queens-3d/teaser-color.webp") center / cover; filter: saturate(.9); box-shadow: 0 40px 85px rgba(12,33,48,.18); }
.queens-slab { position: relative; width: min(270px, 54vw); aspect-ratio: .55; border-radius: 45px; transform: rotate(11deg) translateX(34px); background: linear-gradient(145deg, #0d1830, #02040a 70%); box-shadow: -14px 20px 0 rgba(238,79,109,.14), 0 50px 90px rgba(1,7,19,.45); }
.status { color: #9a741f; font-size: 17px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.about-studio { padding: 100px 0; border-top: 1px solid var(--line); }
.about-studio h2 { margin: 0 0 24px; color: var(--studio-navy); font-size: clamp(38px, 5vw, 64px); letter-spacing: -.045em; }
.about-studio p { max-width: 760px; color: var(--muted); font-size: 20px; }
.legal { padding: 86px 0; color: #eaf0f4; background: var(--studio-navy); }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); }
.legal article { max-width: 560px; }
.legal h2 { margin: 0 0 20px; font-size: 34px; }
.legal h3 { margin-bottom: 6px; color: #f5c550; font-size: 16px; }
.legal p { color: rgba(255,255,255,.7); }

/* Product pages */
.product-page h1 { margin: 0; font-size: clamp(55px, 8vw, 105px); line-height: .92; letter-spacing: -.06em; }
.product-hero { min-height: 760px; padding: 80px 0 100px; }
.product-hero-inner { min-height: 580px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 70px; }
.product-hero .lead { max-width: 530px; margin: 26px 0 32px; color: var(--muted); font-size: clamp(20px, 2.2vw, 27px); }
.hero-lockup { width: min(370px, 78vw); margin-bottom: 40px; }
.hero-app-icon { width: 116px; border-radius: 25%; margin-bottom: 28px; box-shadow: 0 20px 48px rgba(0,0,0,.15); }
.hero-phones { position: relative; min-height: 650px; }
.hero-phones .phone { position: absolute; width: min(310px, 62%); }
.hero-phones .phone:nth-child(1) { left: 0; top: 70px; transform: rotate(-5deg); }
.hero-phones .phone:nth-child(2) { left: 33%; top: 0; z-index: 2; }
.hero-phones .phone:nth-child(3) { right: 0; top: 105px; transform: rotate(5deg); }
.steps { padding: 110px 0; background: #f5f6f9; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px; }
.step { text-align: center; }
.step-number { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; color: #fff; background: #151719; font-weight: 800; }
.step h2 { margin: 0 0 10px; font-size: 28px; }
.step p { margin: 0; color: var(--muted); }
.gallery { padding: 110px 0; }
.gallery-title { max-width: 760px; margin: 0 auto 66px; text-align: center; }
.gallery-title h2, .privacy-callout h2, .support h2 { margin: 0 0 18px; font-size: clamp(38px, 5.5vw, 66px); line-height: 1; letter-spacing: -.045em; }
.gallery-title p, .privacy-callout p { color: var(--muted); font-size: 20px; }
.phone-row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(20px, 4vw, 48px); }
.phone-row .phone:nth-child(2) { margin-top: 72px; }
.privacy-callout { padding: 100px 0; background: #f5f6f9; }
.privacy-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; }
.cta-band { padding: 105px 0; text-align: center; }
.cta-band h2 { margin: 0 0 30px; font-size: clamp(42px, 6vw, 76px); line-height: 1; letter-spacing: -.05em; }

/* Chuzr */
.chuzr { --focus: #1f9cf0; }
.chuzr .product-hero { background: radial-gradient(circle at 76% 45%, rgba(255,78,147,.14), transparent 29%), radial-gradient(circle at 65% 40%, rgba(255,190,10,.16), transparent 38%); }
.chuzr .step-number { background: linear-gradient(135deg, #ffad16, #f23890 55%, #5847ff); }

/* Proofline */
.proofline { --page: #030c17; --ink: rgba(255,255,255,.96); --muted: rgba(255,255,255,.62); --line: rgba(255,255,255,.16); --focus: #00ccef; color-scheme: dark; }
.proofline .site-header { background: rgba(3,12,23,.9); }
.proofline .studio-name, .proofline .footer-brand strong { color: #fff; }
.proofline .studio-brand img, .proofline .footer-brand img { background: #fbfaf6; }
.proofline .button { color: #020912; background: #00ccef; box-shadow: 0 13px 32px rgba(0,204,239,.18); }
.proofline .product-hero { border-bottom: 1px solid var(--line); }
.proofline .product-hero-inner { grid-template-columns: 1fr 1fr; }
.proofline .product-hero h1 { font-weight: 500; }
.proofline .hero-app-icon { box-shadow: 0 0 70px rgba(0,204,239,.14); }
.proofline .hero-phones .phone { border-color: #28333d; }
.proofline .gallery { background: #07121e; }
.proofline .gallery-title p { color: var(--muted); }
.proofline .proof-points { padding: 95px 0; border-top: 1px solid var(--line); }
.proof-point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.proof-point { padding-top: 26px; border-top: 2px solid #00ccef; }
.proof-point h2 { margin: 0 0 12px; font-size: 28px; }
.proof-point p { color: var(--muted); }
.proofline .support { padding: 95px 0; border-top: 1px solid var(--line); }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; margin-top: 45px; }
.support-item { padding: 25px 0; border-top: 1px solid var(--line); }
.support-item h3 { margin: 0 0 8px; font-size: 19px; }
.support-item p { margin: 0; color: var(--muted); }

/* Queens teaser */
.queens { --page: #fbf7ef; --ink: #0b285d; --muted: #62708a; --line: rgba(11,40,93,.15); --focus: #edae28; min-height: 100vh; }
.queens .studio-name, .queens .footer-brand strong { color: #0b285d; }
.queens-main { min-height: calc(100vh - 83px); display: grid; place-items: center; overflow: hidden; position: relative; padding: 80px 0 100px; }
.queens-main::before { content: ""; position: absolute; inset: 54% 0 0; background: url("queens-3d/angled-phone-teaser.webp") center top / cover no-repeat; }
.queens-hero { position: relative; z-index: 1; width: min(calc(100% - 44px), 940px); text-align: center; }
.queens-icon { width: min(330px, 58vw); margin: 0 auto 38px; border-radius: 24%; box-shadow: 0 38px 75px rgba(31,54,91,.22); }
.queens h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(70px, 11vw, 145px); letter-spacing: -.055em; }
.queens-tagline { margin: 20px 0 16px; color: var(--muted); font: clamp(23px, 3vw, 35px)/1.3 Georgia, serif; }
.queens-status { color: #ad7b16; font-size: 19px; letter-spacing: .1em; text-transform: uppercase; }
.queens-whisper { margin-top: 155px; color: rgba(255,255,255,.85); font: 25px Georgia, serif; }
.queens .site-footer { color: rgba(255,255,255,.78); background: #103d9e; border-color: rgba(255,255,255,.18); }
.queens .footer-brand strong, .queens .footer-links { color: #fff; }

@media (max-width: 850px) {
  .site-nav { min-height: 74px; }
  .studio-brand img { width: 46px; height: 46px; }
  .studio-name { letter-spacing: .1em; }
  .primary-nav a:not(.keep-mobile) { display: none; }
  .home-hero { min-height: 470px; padding: 75px 0; }
  .product-band { min-height: auto; }
  .product-layout, .product-band:nth-of-type(even) .product-layout { grid-template-columns: 1fr; gap: 36px; padding: 70px 0; }
  .product-band:nth-of-type(even) .product-copy { order: 0; }
  .product-media { min-height: 520px; }
  .legal-grid { grid-template-columns: 1fr; }
  .product-hero { min-height: 0; overflow: hidden; padding: 70px 0; }
  .product-hero-inner, .proofline .product-hero-inner { min-height: 0; grid-template-columns: 1fr; gap: 55px; }
  .hero-phones { min-height: 560px; }
  .step-grid, .proof-point-grid { grid-template-columns: 1fr; }
  .step { text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; }
  .step-number { grid-row: 1 / span 2; }
  .phone-row { gap: 12px; }
  .phone-row .phone { border-width: 5px; border-radius: 30px; }
  .phone-row .phone:nth-child(2) { margin-top: 42px; }
  .privacy-inner, .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .shell { width: min(calc(100% - 30px), var(--max)); }
  .studio-name { font-size: 15px; }
  .primary-nav { gap: 12px; }
  .primary-nav a { font-size: 11px; }
  .home-hero h1 { font-size: clamp(53px, 17vw, 78px); }
  .product-brandline { align-items: flex-start; }
  .product-icon { width: 88px; height: 88px; }
  .product-copy h2 { font-size: 52px; }
  .product-media { min-height: 430px; }
  .queens-band .product-media { min-height: 330px; }
  .hero-phones { min-height: 455px; }
  .hero-phones .phone { border-width: 5px; border-radius: 31px; }
  .steps, .gallery, .privacy-callout, .cta-band { padding: 78px 0; }
  .gallery-title { text-align: left; margin-bottom: 42px; }
  .phone-row { margin-inline: -5px; }
  .phone-row .phone { border-width: 3px; border-radius: 20px; }
  .queens-whisper { margin-top: 120px; }
}

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