/* base.css: structure shared by every generated site.
   Override the tokens in styles.css. Put the app-specific look there, not here. */

:root {
  --bg: #111;
  --surface: #1c1c1c;
  --text: #fff;
  --muted: rgb(255 255 255 / .68);
  --line: rgb(255 255 255 / .1);
  --primary: #6b5bff;
  --accent: #ffcc33;
  --accent-ink: #111;
  --radius: 20px;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
main { flex: 1; }

/* layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* a11y */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* site header */
.site-header { padding-block: 18px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }

/* language switcher (plain links) */
.lang-switch { display: inline-flex; gap: 4px; font-size: 14px; }
.lang-switch a { padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--muted); }
.lang-switch a[aria-current="true"] { color: var(--text); background: var(--line); }

/* legal / support pages */
.prose { max-width: 68ch; margin-inline: auto; padding: clamp(24px, 6vw, 64px) var(--gutter) 64px; }
.prose h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.prose .meta { color: var(--muted); font-size: .95em; margin-bottom: 2em; }
.prose h2 { font-size: 1.3rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.08rem; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: .95em; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; white-space: nowrap; }
.prose details { border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; margin-bottom: 10px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.prose summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.prose details[open] summary { margin-bottom: 4px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 1.5em 0 2em; background: color-mix(in srgb, var(--surface) 75%, transparent); }

/* footer */
.site-footer { padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

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

/* ===== Rosa Baby look: soft blush, one raspberry accent, Nunito, generous rounding (mirrors the app design system) ===== */
@font-face{font-family:"Nunito";font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-weight:200 1000;font-display:swap;src:url(fonts/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito Sans";font-weight:200 1000;font-display:swap;src:url(fonts/nunito-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-weight:200 1000;font-display:swap;src:url(fonts/nunito-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light dark;
  --bg:#fff8fa; --bg-blush:#ffe9f0; --surface:#ffffff; --text:#3d2235; --muted:#7b5a73;
  --line:rgb(120 50 80 / .12); --primary:#f48fb1; --accent:#c2376a; --accent-ink:#ffffff;
  --coral:#ffa08f; --peach:#fff1e8; --lilac:#f4eefb; --mint:#e6f5ee;
  --radius:24px;
  --shadow-2:0 2px 6px rgb(120 50 80 / 8%),0 14px 32px rgb(120 50 80 / 10%);
  --shadow-3:0 8px 20px rgb(120 50 80 / 10%),0 24px 56px rgb(120 50 80 / 14%);
  --font-display:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --font-body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#1b1017;--bg-blush:#2a1a24;--surface:#27181f;--text:#f8eaf0;--muted:#d9bccb;--line:rgb(255 255 255 / .1);
    --primary:#ffa6c2;--accent:#ffb3cc;--accent-ink:#3d2235;--peach:#3a2630;--lilac:#2f2442;--mint:#1f3329;
    --shadow-2:0 2px 6px rgb(0 0 0 / 32%),0 12px 32px rgb(0 0 0 / 30%);--shadow-3:0 8px 20px rgb(0 0 0 / 36%),0 24px 60px rgb(0 0 0 / 36%)}
}
html{scroll-behavior:smooth}
body{background:var(--bg);font-size:17px;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 60% at 85% -5%,color-mix(in srgb,var(--primary) 32%,transparent),transparent 70%),
             radial-gradient(70% 50% at 0% 30%,color-mix(in srgb,#cbb4ee 22%,transparent),transparent 70%)}
h1,h2,h3{font-weight:800;letter-spacing:-.015em}
.brand{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:10px;box-shadow:var(--shadow-2)}
.lang-switch a{font-weight:700}
.lang-switch a:hover{color:var(--text)}

/* hero */
.hero{padding-block:clamp(16px,4vw,48px) clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;position:relative}
.status{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:700;
  background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-2)}
.status i{width:9px;height:9px;border-radius:50%;background:#e9a23b;box-shadow:0 0 0 4px rgb(233 162 59 / .22)}
.status.is-live i{background:#2fae6b;box-shadow:0 0 0 4px rgb(47 174 107 / .22)}
.hero h1{font-size:clamp(2.9rem,7.5vw,5.2rem);font-weight:900;letter-spacing:-.035em;margin:.35em 0 .15em;line-height:1}
.hero h1 span{background:linear-gradient(135deg,#e55f95 0%,#ff8f7a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(1.15rem,2.2vw,1.45rem);font-family:var(--font-display);font-weight:700;line-height:1.35;max-width:26ch;margin-bottom:.6em}
.hero p.sub{color:var(--muted);max-width:46ch}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.95rem;font-weight:600}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:18px;height:18px;color:var(--accent);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.store-buttons{margin-top:26px}
.store-btn{--btn-bg:#1d0f18;border-radius:16px}
.store-btn.is-soon .soon-tag{background:var(--accent);color:var(--accent-ink)}

/* phone frame */
.hero-visual{position:relative;display:grid;place-items:center;min-height:420px}
.phone{position:relative;width:min(300px,68vw);aspect-ratio:600/1304;border-radius:44px;padding:9px;background:#2a1a24;
  box-shadow:var(--shadow-3),0 0 0 1.5px rgb(255 255 255 / .12) inset;transform:rotate(2.5deg)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:36px;background:var(--bg-blush)}
.phone::after{content:"";position:absolute;top:16px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:99px;background:#120a0f}
.glow{position:absolute;width:min(440px,90%);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 55%,transparent),transparent 68%);filter:blur(10px)}
.float-icon{position:absolute;width:76px;height:76px;border-radius:22px;box-shadow:var(--shadow-3);left:-2%;bottom:10%;transform:rotate(-9deg)}

/* decorative curls */
.deco{position:absolute;pointer-events:none;color:var(--primary);opacity:.18}
.deco svg{width:100%;height:100%}
.d1{width:120px;height:120px;top:6%;left:3%;transform:rotate(-18deg)}
.d2{width:70px;height:70px;top:58%;left:44%;transform:rotate(24deg);opacity:.14;filter:blur(1px)}
.d3{width:180px;height:180px;bottom:-40px;right:-30px;transform:rotate(140deg);opacity:.12;filter:blur(2px)}
.d4{width:54px;height:54px;top:12%;right:46%;transform:rotate(10deg);opacity:.16}

/* sections */
section{padding-block:clamp(36px,6vw,72px)}
.section-head{max-width:640px;margin-bottom:28px}
.section-head h2{font-size:clamp(1.7rem,4vw,2.4rem)}
.section-head p{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow-2);backdrop-filter:blur(14px) saturate(1.2);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3)}
.card h3{font-size:1.2rem;margin:14px 0 6px}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.icon-tile{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:var(--accent);background:var(--tint,var(--bg-blush))}
.icon-tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card:nth-child(1){--tint:var(--bg-blush)} .card:nth-child(2){--tint:var(--peach)} .card:nth-child(3){--tint:var(--mint)} .card:nth-child(4){--tint:var(--lilac)}

.shots{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gutter) 28px;margin-inline:calc(var(--gutter) * -1);scrollbar-width:thin}
.shots figure{margin:0;flex:0 0 auto;width:min(250px,64vw);scroll-snap-align:center}
.shots .phone{width:100%;transform:none;border-radius:38px;padding:8px}
.shots .phone img{border-radius:31px}
.shots .phone::after{top:14px;width:70px;height:18px;margin-left:-35px}
.shots figcaption{margin-top:14px;text-align:center;font-weight:700;font-family:var(--font-display);font-size:.98rem;padding-inline:6px}
@media(min-width:1000px){.shots{justify-content:center;overflow:visible}}

.notice{margin-top:8px;padding:16px 20px;border-radius:18px;background:color-mix(in srgb,var(--lilac) 80%,transparent);border:1px solid var(--line);color:var(--muted);font-size:.95rem;max-width:760px}
.notice strong{color:var(--text)}

/* legal pages */
.prose h1{font-weight:900}
.prose h2{font-size:1.4rem;margin-top:2.4em;scroll-margin-top:16px}
.prose a{font-weight:700}
.prose table{background:color-mix(in srgb,var(--surface) 55%,transparent);border-radius:14px}
.prose th{background:color-mix(in srgb,var(--bg-blush) 70%,transparent)}
.prose details{border-radius:18px}
.prose .toc{background:color-mix(in srgb,var(--bg-blush) 55%,transparent);border-radius:18px;padding:14px 22px;margin:0 0 1.5em}
.prose .toc ul{margin:.4em 0;columns:2;column-gap:28px}
.prose .toc li{break-inside:avoid;margin-bottom:.25em}
@media(max-width:560px){.prose .toc ul{columns:1}}
.callout{background:var(--bg-blush);border-radius:18px;padding:16px 20px;margin:1.2em 0}
.callout p:last-child{margin:0}
.contact-card{border-radius:var(--radius);box-shadow:var(--shadow-2)}
.contact-card a.mail{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--accent);text-decoration:none}

@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{order:-1;min-height:0;margin-bottom:8px}
  .phone{width:min(240px,62vw)}
  .float-icon{width:60px;height:60px}
}
@media(prefers-reduced-motion:no-preference){
  @keyframes rise{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
  @keyframes drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 4deg))}}
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}.hero-copy>*:nth-child(3){animation-delay:.12s}.hero-copy>*:nth-child(4){animation-delay:.18s}.hero-copy>*:nth-child(5){animation-delay:.24s}
  .deco{animation:drift 9s ease-in-out infinite}.d1{--r:-18deg}.d2{--r:24deg;animation-delay:-3s}.d3{--r:140deg;animation-delay:-5s;animation-duration:12s}.d4{--r:10deg;animation-delay:-6s}
  .phone{animation:drift 10s ease-in-out infinite;--r:2.5deg}.shots .phone{animation:none}
  .float-icon{animation:drift 8s ease-in-out infinite;--r:-9deg;animation-delay:-2s}
}

/* store buttons */
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  --btn-bg: #000; --btn-fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-width: 168px; height: 56px; padding: 0 18px 0 14px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid rgb(255 255 255 / .18); border-radius: 14px;
  text-decoration: none; line-height: 1.1;
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn .store-top { display: block; font-size: 11px; opacity: .85; letter-spacing: .01em; }
.store-btn .store-bottom { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
a.store-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .35); }
a.store-btn:focus-visible { outline: 3px solid var(--accent, #fff); outline-offset: 3px; }

/* Coming soon: same shape, visibly not clickable */
.store-btn.is-soon { cursor: default; opacity: .72; filter: saturate(.6); box-shadow: none; }
.store-btn.is-soon .soon-tag {
  position: absolute; top: -9px; right: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent, #f5c542); color: var(--accent-ink, #1a1030);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .store-btn { transition: none; } }