/* App theme: stage #0c0810, stage2 #2a1f33, surface #201727,
   ink #f8f3f8, muted #b5a8ba, gold #e1b967, goldBright #ffe3a5. */
:root {
  --bg:#0c0810; --panel:#201727; --text:#f8f3f8; --muted:#b5a8ba;
  --gold:#e1b967; --gold-bright:#ffe3a5; --rule:transparent;
}
body {
  background:#0c0810;
  background-image:radial-gradient(ellipse at 96% 4%,#2a1f3340,transparent 38%);
}
main { overflow:clip; }
.navigation { border:0; height:112px; }
.brand { font-weight:500; }
.brand img { box-shadow:0 5px 24px #0008,0 0 24px #d6aa6a12; }
.nav-link { color:#d6cadc; }
.language svg { color:#d6cadc; }
.hero {
  overflow:visible;
  min-height:720px;
  height:calc(100svh - 112px);
  max-height:1000px;
  grid-template-columns:1.1fr 1fr;
}
/* Reuse the App's original atmosphere, feathered into the page. */
.hero::before {
  inset:-100px calc((100vw - 100%)/-2) -130px;
  background:
    linear-gradient(90deg,#0c0810 1%,#0c0810a6 30%,#0c081000 65%),
    url("/assets/atmosphere-hero.webp") 72% 52% / cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 15%,#000 68%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent);
  mask-image:linear-gradient(transparent,#000 15%,#000 68%,transparent),linear-gradient(90deg,transparent,#000 14%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  opacity:.93;
}
.hero::after {
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:5% -2% 5% 26%;
  background:
    radial-gradient(ellipse at 76% 63%,#e1b96716,transparent 45%),
    radial-gradient(ellipse at var(--light-x,58%) var(--light-y,42%),#9b57b426,transparent 62%);
  filter:blur(32px);
}
.hero-copy { padding-bottom:25px; }
h1 { font-weight:450; line-height:1.24; margin-bottom:44px; letter-spacing:-.055em; }
h1>span, .privacy-section h2 {
  color:var(--text);
  background:linear-gradient(155deg,#fff 8%,#f8f3f8 40%,#cfbcd8 79%,#b5a8ba);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
h1 em,h2 em,.space-result,.trial-number {
  color:var(--gold-bright);
  background:linear-gradient(165deg,#fffaf0 5%,#ffe3a5 35%,#e1b967 68%,#b48849 98%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
h1 em { margin-top:15px; padding-bottom:.12em; filter:drop-shadow(0 7px 28px #e1b96728); }
.button {
  border:0; border-radius:14px; min-height:58px;
  padding:18px 27px;
  transition:transform .5s var(--ease),box-shadow .5s,filter .5s;
}
.primary {
  color:#271a0c;
  background:linear-gradient(120deg,#ffebbf 0%,#f4d68e 38%,#e1b967 75%,#e9c885);
  box-shadow:0 4px 10px #0003,0 12px 34px #e1b96720,inset 0 2px 6px #fff5;
}
.primary:hover {
  background:linear-gradient(120deg,#fff1d4,#f4d68e 48%,#e1b967);
  box-shadow:0 7px 18px #0004,0 18px 48px #e1b96738,inset 0 2px 6px #fff6;
}
.micro { margin-top:22px; color:#b5a8ba; font-size:14px; }
.hero-visual { height:570px; perspective:1400px; }
.photo-stack {
  width:300px; height:394px;
  transform:rotate(-6deg) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
  transform-style:preserve-3d;
}
.photo {
  border:0; padding:0; border-radius:20px; background:#201727;
  box-shadow:0 60px 80px -35px #000e,0 20px 35px -15px #000b,16px 7px 65px -35px #e1b967a6;
}
.photo img { width:100%; height:100%; border-radius:inherit; filter:saturate(.78) contrast(1.04); }
.photo::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    linear-gradient(155deg,#fff7 0%,#fff0 22%,#ffe3a510 45%,transparent 65%),
    linear-gradient(0deg,#180c2b50,transparent 28%);
  box-shadow:inset 2px 3px 9px #fff3,inset -2px -3px 12px #0c081040;
}
.photo-back { transform:translate(60px,-44px) rotate(18deg); filter:brightness(.62) saturate(.75); }
.photo-middle { transform:translate(-58px,12px) rotate(-15deg); filter:brightness(.82); }
.photo-front { transform:translate(5px,35px) rotate(3deg); }
.keep-seal {
  border:0; background:linear-gradient(145deg,#483447d9,#201727ed);
  box-shadow:0 12px 28px #0006,0 0 32px #e1b96722,inset 0 2px 8px #ffe3a529;
  color:var(--gold-bright);
}
.demo-control { bottom:0; gap:19px; }
.demo-label { font-size:12px; color:var(--muted); }
.demo-control button {
  border:0; padding:10px 16px; border-radius:12px; color:var(--gold-bright);
  background:linear-gradient(135deg,#ffe3a513,#ffe3a506);
  box-shadow:0 8px 20px #0002;
}
.space-section {
  border:0; padding:150px 0 130px; background:transparent;
}
.space-section::before {
  background:
    radial-gradient(ellipse at 72% 45%,#5b34584d,transparent 44%),
    radial-gradient(ellipse at 90% 20%,#e1b9670f,transparent 35%),
    url("/assets/atmosphere-quiet.webp") center / cover;
  opacity:.75;
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);
}
.space-layout { gap:110px; }
h2 { font-weight:400; line-height:1.4; }
.feature-list { gap:26px; margin-top:32px; }
.feature-list span { border:0; padding:0; color:#c7b8ce; }
.space-instrument { border:0; padding:0; }
.space-result { margin-top:0; filter:drop-shadow(0 7px 30px #e1b96725); }
.space-result output { font-family:Georgia,"Times New Roman",serif; font-size:clamp(100px,10vw,150px); letter-spacing:-.065em; }
.space-result>span { font-family:Georgia,serif; font-size:30px; }
.capacity-track { height:5px; background:#7a578629; }
.capacity-track>div { background:linear-gradient(90deg,#a875c5,#f4ca7d,#ffedcc); box-shadow:0 0 18px #e1b96766; border-radius:inherit; }
input[type=range] { appearance:none; -webkit-appearance:none; height:36px; background:none; margin-bottom:16px; }
input[type=range]::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(90deg,#ae84bf77,#9d7b9d33); }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; margin-top:-6px; width:15px; height:15px; border-radius:50%; background:linear-gradient(135deg,#fff5dd,#e1b967); box-shadow:0 0 16px #e1b96744,0 3px 6px #0006; }
input[type=range]::-moz-range-track { height:3px; background:#9d7b9d55; }
input[type=range]::-moz-range-thumb { width:15px; height:15px; border:0; border-radius:50%; background:#ffe3a5; box-shadow:0 0 16px #e1b96744; }
.range-heading { color:#c7b8ce; }
.privacy-section { border:0; padding-block:100px; position:relative; }
.privacy-section::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center,#54345b30,transparent 65%);
  filter:blur(25px);
}
.privacy-section h2 { font-weight:350; }
.privacy-points { gap:36px; }
.privacy-points span+span::before { content:none; }
.plans-section { padding-block:90px 60px; }
.plans-heading { margin-bottom:60px; }
.plans-grid { gap:36px; max-width:1080px; }
.plan {
  position:relative; isolation:isolate; border:0; border-radius:28px;
  padding:44px; background:linear-gradient(150deg,#30223b66,#20172722 75%);
  box-shadow:0 30px 70px -35px #0008;
}
.plus-plan {
  margin:0; border:0;
  background:
    radial-gradient(ellipse at 90% 0%,#e1b96720,transparent 65%),
    linear-gradient(135deg,#39273fd9,#23172caa 55%,#17101e88);
  box-shadow:0 30px 70px -30px #000a,0 -15px 75px -45px #e1b96777;
}
.plan-top { color:#d6c6df; }
.plan h3 { font-weight:400; }
.plan .trial-number { font-family:Georgia,serif; font-size:55px; }
.plan p { font-size:16px; }
.secondary { border:0; background:linear-gradient(135deg,#6c517849,#382b4344); box-shadow:0 6px 16px #0003; }
.secondary:hover { background:linear-gradient(135deg,#6c51786b,#382b4366); }
.availability { border:0; margin-top:45px; }
.availability img { box-shadow:0 10px 28px #0005; }
footer { padding-bottom:38px; }
.footer-bottom { border:0; margin-top:0; }
.back-top { border:0; background:#38263f38; }
.legal-nav,.legal-footer { border:0; }
.legal { max-width:860px; overflow:visible; }
.legal h1 { margin-bottom:28px; }
.legal-date { font-size:13px!important; color:var(--muted); }
.legal-status { background:#e1b96714; color:var(--gold-bright)!important; border-radius:14px; padding:18px 22px; font-size:14px!important; }
.legal-status[hidden] { display:none; }
.legal-contents { display:grid; grid-template-columns:1fr 1fr; gap:9px 26px; margin:32px 0 55px; }
.legal-contents a { display:block; color:#d4c2df; font-size:14px; line-height:1.6; padding:6px 0; }
.legal a:hover { color:var(--gold-bright); }
.legal section { scroll-margin-top:35px; margin-bottom:35px; }
.legal section h2 { line-height:1.6; font-size:22px; }
.legal section p { line-height:1.95; overflow-wrap:anywhere; }
.legal-resources { margin-top:55px; }
.legal-resources a { color:var(--gold-bright); display:block; font-size:14px; padding:10px 0; overflow-wrap:anywhere; }
@media(max-width:600px) { .legal-contents { grid-template-columns:1fr; gap:3px; } .legal h1 { font-size:34px; } }
@media(min-width:1100px) {
  .hero-copy h1 { font-size:clamp(64px,6.2vw,88px); }
  html[lang=en] .hero-copy h1,html[lang=es] .hero-copy h1 { font-size:clamp(58px,5vw,76px); }
}
@media(max-width:1100px) {
  .hero::before { background-size:auto,cover; background-position:center,72% 50%; }
  .photo-stack { width:265px; height:355px; }
  .space-layout { gap:60px; }
  .plans-grid { gap:24px; }
  .plan { padding:34px; }
}
@media(max-width:760px) {
  .navigation { height:82px; }
  .hero { height:auto; min-height:0; grid-template-columns:1fr; padding-top:48px; padding-bottom:35px; overflow:clip; }
  .hero::before { inset:0 -20px -80px; background:linear-gradient(#0c0810 2%,transparent 30%,#0c081020 70%,#0c0810),url("/assets/atmosphere-hero.webp") 50% 70% / 100% auto no-repeat; opacity:1; }
  .hero::after { inset:28% -20px 0; filter:blur(20px); }
  .hero-copy { padding:0; }
  h1 { margin-bottom:30px; }
  .hero-copy h1 { margin-bottom:28px; font-size:clamp(44px,11.8vw,70px); }
  h1 em { margin-top:8px; }
  .micro { margin-top:18px; font-size:13px; }
  .hero-visual { height:470px; margin-top:26px; }
  .photo-stack { width:220px; height:292px; }
  .photo { border-radius:16px; padding:0; }
  .photo img { height:100%; }
  .photo-back { transform:translate(42px,-25px) rotate(18deg); }
  .photo-middle { transform:translate(-37px,8px) rotate(-13deg); }
  .photo-front { transform:translate(4px,24px) rotate(3deg); }
  .demo-control { bottom:6px; gap:12px; }
  .space-section { padding:74px 0 60px; }
  .space-layout { gap:45px; }
  .feature-list { gap:22px; margin-top:26px; }
  .space-result output { font-size:112px; }
  .privacy-section { padding-block:65px; }
  .privacy-points { gap:22px; }
  .plans-section { padding-block:55px 28px; }
  .plans-heading { margin-bottom:32px; }
  .plans-grid { gap:20px; }
  .plan { padding:30px; border-radius:24px; }
  .plan p { font-size:15px; }
  .availability { margin-top:24px; }
  .footer-bottom { font-size:12px; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .photo-stack { transform:rotate(-6deg); }
  .hero-visual.is-clean .photo-stack { transform:none; }
}