/* Mobile theme: lib/screens/bottle_up.dart. Accent colors follow the app icon. */
:root{color-scheme:dark;--navy:#001022;--slate:#25253d;--cream:#faf0dc;--orange:#ff7900;--muted:#b8bfcd;--line:#ffffff20;font-family:Arial,Helvetica,sans-serif;background:var(--navy);color:var(--cream)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}a:hover{color:var(--orange)}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.skip-link{position:absolute;top:-100px;left:20px;z-index:10;background:var(--cream);color:var(--navy);padding:16px}.skip-link:focus{top:12px}.site-header{display:flex;justify-content:space-between;align-items:center;padding-block:25px;border-bottom:1px solid var(--line);gap:24px}.brand{display:inline-flex;align-items:center;font-weight:750;font-size:26px;letter-spacing:-1px}.brand span{color:var(--orange)}.brand img{border-radius:12px;margin-right:10px}nav{display:flex;align-items:center;gap:36px;font-size:14px}.nav-cta{border:1px solid #ffffff40;padding:12px 20px;border-radius:30px}.nav-cta span{margin-left:12px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:660px;padding-block:66px;gap:28px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--orange);margin:0 0 25px}h1{font-size:clamp(58px,6.6vw,92px);line-height:1.02;letter-spacing:-5px;margin:0 0 28px;font-weight:750}h1 em{font-style:normal;color:var(--orange)}.intro{max-width:420px;font-size:18px;line-height:1.75;color:var(--muted);margin:0 0 32px}.button{display:inline-flex;align-items:center;gap:35px;background:var(--orange);color:var(--navy);padding:17px 25px;border-radius:32px;font-weight:700;font-size:16px}.button:hover{background:var(--cream);color:var(--navy)}.release-note{color:var(--muted);font-size:12px;line-height:1.6;margin-top:20px}.hero-art{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1}.hero-logo{width:88%;height:auto;position:relative;border-radius:50%;mix-blend-mode:lighten}.orbit{position:absolute;border:1px solid #ffffff15;border-radius:50%;width:98%;height:98%;transform:rotate(-25deg)}.orbit-two{width:78%;height:108%;transform:rotate(35deg)}.art-label{position:absolute;border:1px solid #ffffff30;background:var(--slate);padding:14px 18px;border-radius:30px;font-size:11px;letter-spacing:1.3px;box-shadow:0 10px 30px #0003}.label-top{top:10%;right:0;transform:rotate(7deg)}.label-bottom{bottom:9%;left:0;transform:rotate(-7deg)}.label-bottom span{color:var(--orange);margin-left:18px}.experience{background:var(--slate);padding:70px 0 65px;scroll-margin-top:0}.section-heading{display:flex;align-items:start;justify-content:space-between;gap:35px;margin-bottom:50px}.section-heading .eyebrow{margin-top:10px}h2{font-size:clamp(30px,3.5vw,44px);line-height:1.15;letter-spacing:-1.5px;margin:0}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.features article{border-top:1px solid #ffffff30;padding-top:24px}.feature-number{color:var(--muted);font-size:12px;letter-spacing:1.5px}h3{font-size:21px;line-height:1.4;margin:26px 0 12px;letter-spacing:-.5px}.features p,.app-section p{font-size:16px;line-height:1.75;color:var(--muted);margin:0}.app-section{padding-block:85px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.app-section .eyebrow{color:var(--orange);font-size:12px;margin-bottom:22px}.app-section h2{margin-bottom:22px}.availability>div{display:flex;justify-content:space-between;gap:18px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}.platform{font-size:25px;font-weight:700}.status{border:1px solid #ffffff30;border-radius:20px;padding:8px 14px;font-size:13px;color:var(--muted)}.availability p{font-size:13px;margin-top:20px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:26px;border-top:1px solid var(--line)}footer p,footer>a:last-child{font-size:13px;color:var(--muted)}.footer-brand{font-size:22px}
@media(min-width:1500px){.hero{min-height:720px}}
@media(max-width:850px){.wrap{width:calc(100% - 48px)}.hero{min-height:570px;gap:0}h1{font-size:62px;letter-spacing:-3px}.intro{font-size:16px}.art-label{font-size:9px;padding:12px}.features{gap:24px}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:22px}.app-section{gap:40px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.site-header{padding-block:18px}.brand{font-size:24px}.brand img{width:35px;height:35px}nav{gap:0}nav>a:first-child{display:none}.nav-cta{padding:10px 15px}.hero{grid-template-columns:1fr;padding-block:48px 30px;gap:22px}h1{font-size:clamp(52px,13vw,72px);letter-spacing:-3px}.intro{max-width:100%}.hero-art{width:min(100%,370px);margin:auto}.art-label{font-size:10px}.experience{padding-block:48px}.features{grid-template-columns:1fr;gap:28px}.section-heading{margin-bottom:32px}h3{margin-top:16px}.app-section{grid-template-columns:1fr;padding-block:50px;gap:20px}footer{flex-wrap:wrap}footer p{display:none}}
/* One-shot entrance on document load, including reloads at section anchors.
   Animate only opacity/transform so the layout and scroll position stay stable. */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(75px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Contain the travel without changing either column's final layout. */
.hero { overflow: visible; }
/* Let slides cross the page gutters; contain them only at viewport edges. */
html { overflow-x: hidden; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
/* Clip moving hero children at the full-width main, not its narrow wrapper.
   The header dropdown and fixed footer remain outside this clipping context. */
main { width: 100%; min-width: 0; overflow: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  main { overflow: clip; }
}
@keyframes hero-from-right {
  from { opacity: 1; transform: translateX(100vw); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hero-from-left {
  from { opacity: 1; transform: translateX(-100vw); }
  to { opacity: 1; transform: translateX(0); }
}
/* The explicitly requested hero motion runs in both OS preference modes. */
.entering .hero-copy { animation: hero-from-right 3000ms cubic-bezier(.45,0,.2,1) 150ms both; }
.entering .hero-art { animation: hero-from-left 3000ms cubic-bezier(.45,0,.2,1) 150ms both; }
@media(prefers-reduced-motion:no-preference) {
  .entering .site-header,
  .entering .experience .section-heading,
  .entering .features article,
  .entering .app-section > * {
    animation: enter-up 2200ms cubic-bezier(.25,.1,.25,1) both;
  }
  .entering .features article:nth-child(1) { animation-delay: 150ms; }
  .entering .features article:nth-child(2) { animation-delay: 400ms; }
  .entering .features article:nth-child(3) { animation-delay: 650ms; }
  .entering .app-section > :nth-child(2) { animation-delay: 350ms; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Reserve the measured footer height so the last section stays accessible. */
body { padding-bottom: var(--footer-height, 100px); }
footer.wrap {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  width: 100%;
  padding: 20px max(24px, calc((100vw - 1180px) / 2));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--navy);
  border-top: 0;
  box-shadow: none;
  flex-wrap: nowrap;
}
/* Fade passing section colors into the fixed footer instead of a hard strip. */
footer.wrap::before {
  content: "";
  position: absolute;
  inset: -48px 0 100%;
  background: linear-gradient(to bottom, transparent, var(--navy));
  pointer-events: none;
}
.back-to-top { white-space: nowrap; }
.back-to-top[hidden] { display: none; }
#language { font: inherit; color: var(--cream); background: var(--navy); border: 1px solid #ffffff40; border-radius: 24px; padding: 11px 12px; max-width: 140px; }
.site-header .nav-cta,
.site-header #language {
  width: 160px;
  max-width: none;
  height: 46px;
  border: 1px solid #ffffff40;
  border-radius: 24px;
  padding: 0 18px;
  font: inherit;
  line-height: 1.2;
}
.site-header .nav-cta { display: inline-flex; align-items: center; justify-content: space-between; }
.site-header #language { cursor: pointer; }
#language:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
html:not([lang="en"]) h1 { font-size: clamp(36px, 4.4vw, 62px); letter-spacing: -1px; overflow-wrap: anywhere; }
.hero-copy { min-width: 0; }
@media(max-width:700px) {
  .site-header { flex-wrap: wrap; gap: 16px; }
  .site-header nav { flex-wrap: wrap; gap: 12px; }
  html:not([lang="en"]) h1 { font-size: clamp(34px, 8vw, 54px); letter-spacing: -1px; }
}

/* Responsive finish: generous desktop rhythm, compact touch-friendly mobile. */
:root { font-family: "Segoe UI", Arial, sans-serif; }
h1, h2, h3 { text-wrap: balance; }
.site-header { padding-block: 22px; }
.site-header nav { gap: 16px; }
.site-header nav > a:first-child { margin-right: 12px; }
.site-header .nav-cta { background: #ffffff06; }
.site-header .nav-cta:hover { border-color: var(--orange); background: #ff790012; }
.hero { padding-block: 80px; }
.intro { max-width: 460px; }
.button { min-height: 52px; box-shadow: 0 8px 30px #ff79001c; }
.hero-art { background: radial-gradient(ellipse, #16365b40, transparent 68%); }
.art-label { font-size: 12px; line-height: 1.5; max-width: 85%; }
.experience {
  background: linear-gradient(180deg, var(--navy), var(--slate) 22%, var(--slate) 78%, var(--navy));
  padding-block: 88px;
}
.section-heading { gap: 48px; }
.section-heading .eyebrow { max-width: 320px; line-height: 1.7; }
.features { gap: 20px; }
.features article {
  border: 1px solid #ffffff16;
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(145deg, #ffffff06, #00102240);
}
.feature-number { color: var(--orange); line-height: 1.6; }
.features h3 { margin-top: 24px; }
.app-section { padding-block: 80px 64px; }
.availability { padding: 12px 28px 24px; border: 1px solid var(--line); border-radius: 24px; background: #ffffff04; }
.availability > div { padding-block: 22px; flex-wrap: wrap; }
.availability > div:last-of-type { border-bottom: 0; }
.availability > p { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 0; }
.status { background: #ffffff05; }
footer.wrap { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
footer.wrap::before { top: -28px; }
footer a { min-height: 44px; display: inline-flex; align-items: center; }
footer .back-to-top { font-size: 14px; }

@media(max-width:1000px) and (min-width:701px) {
  .site-header nav > a:first-child { display: none; }
  .features { gap: 14px; }
  .features article { padding: 22px; }
  .hero { padding-block: 56px; }
}
@media(max-width:700px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { display: grid; grid-template-columns: 1fr; gap: 18px; padding-block: 18px; }
  .site-header > .brand { justify-self: center; }
  .site-header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
  .site-header nav > a:first-child { display: none; }
  .site-header .nav-cta, .site-header #language { width: 100%; min-width: 0; height: 48px; font-size: 14px; padding-inline: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-block: 42px 28px; gap: 30px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { font-size: 12px; line-height: 1.7; letter-spacing: 1.5px; margin-bottom: 20px; }
  h1 { font-size: clamp(46px, 11vw, 70px); letter-spacing: -2px; line-height: 1.08; margin-bottom: 22px; }
  html:not([lang="en"]) h1 { font-size: clamp(34px, 8.5vw, 54px); line-height: 1.14; }
  .intro { margin-inline: auto; font-size: 16px; line-height: 1.7; margin-bottom: 24px; max-width: 440px; }
  .hero-copy .button { justify-content: space-between; width: min(100%, 320px); padding-inline: 24px; }
  .release-note { max-width: 320px; margin: 16px auto 0; font-size: 13px; }
  .hero-art { width: min(100%, 360px); margin: 8px auto 0; }
  .art-label { font-size: 12px; letter-spacing: .6px; padding: 10px 14px; }
  .label-top { right: 3%; top: 8%; }
  .label-bottom { left: 3%; bottom: 8%; }
  .experience { padding-block: 52px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading .eyebrow { margin: 0 0 18px; }
  h2 { font-size: clamp(28px, 7vw, 38px); letter-spacing: -.8px; line-height: 1.2; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .features article { padding: 24px; border-radius: 18px; }
  .features h3 { margin-top: 14px; font-size: 21px; }
  .features p { line-height: 1.65; }
  .app-section { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 44px 36px; }
  .availability { padding: 8px 22px 22px; border-radius: 20px; }
  .platform { font-size: 22px; }
  .status { font-size: 14px; }
  footer.wrap { padding-inline: 20px; gap: 12px; }
  footer p { display: none; }
  footer .footer-brand { font-size: 21px; }
}
@media(prefers-reduced-motion:no-preference) {
  .button, .nav-cta { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
}
.site-header { position: relative; z-index: 30; }
.language-picker { position: relative; width: 160px; min-width: 0; }
.language-trigger { width: 100%; min-height: 46px; padding: 0 18px; border: 1px solid #ffffff40; border-radius: 24px; background: var(--navy); color: var(--cream); font: inherit; text-align: left; cursor: pointer; }
.language-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.language-trigger::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); flex-shrink: 0; }
.language-trigger[aria-expanded="true"] { border-color: #ffffff40; border-bottom-color: transparent; border-radius: 24px 24px 0 0; background: var(--navy); }
.language-trigger[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.language-options { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; padding: 4px 6px 8px; border: 1px solid #ffffff40; border-top: 0; border-radius: 0 0 24px 24px; background: var(--navy); box-shadow: 0 18px 28px #0005; max-height: min(400px, 60dvh); overflow-y: auto; }
.language-options button { display: block; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 14px; color: var(--cream); background: transparent; text-align: left; font: inherit; cursor: pointer; }
.language-options button:hover, .language-options button:focus-visible { background: var(--slate); }
.language-options button[aria-pressed="true"] { background: #ff79001c; color: var(--orange); }
.language-picker button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media(max-width:700px) { .language-picker { width: 100%; } .language-trigger { min-height: 48px; } }
/* Mobile footer keeps the tagline visible and lets translated links wrap. */
@media(max-width:700px) {
  footer.wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
  }
  footer .footer-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  footer.wrap > p {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  footer.wrap .back-to-top {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
    line-height: 1.4;
  }
}
/* Wide screens use proportional gutters instead of the old 1180px cap. */
@media(min-width:1001px) {
  .wrap { width: 88%; }
  .hero { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 4vw, 100px); }
  .hero-art { width: 100%; max-width: 740px; justify-self: center; }
  h1 { font-size: clamp(72px, 5.8vw, 132px); }
  html:not([lang="en"]) h1 { font-size: clamp(48px, 4.3vw, 96px); }
  .intro { max-width: 36rem; font-size: clamp(18px, 1.1vw, 23px); }
  .hero { min-height: min(880px, 82svh); padding-block: clamp(56px, 5vw, 100px); }
  footer.wrap { width: 100%; padding-inline: 6%; }
}
/* Fixed footer follows the viewport insets, never overflowing document content. */
footer.wrap { left: 0; right: 0; width: auto; max-width: 100%; margin-inline: 0; }
.hero-copy, .features article, .app-section > div, .availability > div { min-width: 0; }
@media(max-width:700px) {
  .site-header .nav-cta, .language-trigger, .language-options button { overflow-wrap: anywhere; }
  .language-trigger { gap: 8px; padding-inline: 12px; }
  .art-label { overflow-wrap: anywhere; }
  footer.wrap > * { min-width: 0; max-width: 100%; }
}