/* Mosara site — design system. Plain CSS, no build step (Cloudflare Pages). */
:root {
  --navy-900: #0a1730;
  --navy-800: #0e2140;
  --navy-700: #142c54;
  --ink: #131a26;
  --muted: #5d6878;
  --line: #e7ecf3;
  --bg: #ffffff;
  --bg-soft: #f5f8fc;
  --accent: #3b82f6;
  --accent-700: #2563eb;
  /* Brand. #8454F2 is the canonical Mosara purple (it matches the logo mark). It owns
     every primary/interactive surface: hero + contact CTAs, the header CTA, focus rings,
     the hero eyebrow, the closed-testing card, link hover and the hero glows. The blue
     --accent above is now only a legacy neutral for non-interactive trim on the legal
     pages; nothing a user clicks is blue any more. */
  --brand-primary: #8454F2;
  --brand-primary-hover: #7546E8;
  --brand-primary-active: #6F3FE2;
  --brand-soft: rgba(132, 84, 242, 0.14);
  --brand-border: rgba(181, 157, 255, 0.30);
  --brand-glow: rgba(132, 84, 242, 0.28);
  --green: #34c759;
  --red: #ff453a;
  --amber: #ff9f0a;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(16,32,64,.06), 0 2px 8px rgba(16,32,64,.05);
  --shadow-md: 0 8px 24px rgba(13,30,66,.12);
  --shadow-lg: 0 30px 70px rgba(7,18,42,.45);
  --maxw: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-700); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--brand-primary); }
/* One visible focus treatment for every keyboard-reachable control on the site. */
a:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 6px;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; color: var(--navy-800); font-size: 19px; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; display: block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(37,99,235,.35); }
.nav a { color: var(--muted); margin-left: 22px; font-size: 14.5px; font-weight: 600; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav .nav-cta { color: #fff; background: var(--brand-primary); padding: 8px 16px; border-radius: 10px; }
.nav .nav-cta:hover { background: var(--brand-primary-hover); color: #fff; }
.nav .nav-cta:active { background: var(--brand-primary-active); }
@media (max-width: 640px){
  .nav a:not(.nav-cta){ display:none; }
  /* The language control is now a compact 2-letter code, so brand + CTA + lang all
     fit on a single ~56px row. Keep the header on ONE line — never wrap. */
  .site-header .wrap { height: 58px; flex-wrap: nowrap; min-width: 0; gap: 8px; }
  .brand { min-width: 0; flex-shrink: 1; }
  .nav { display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; min-width: 0; flex-shrink: 0; }
  /* The contact CTA collapses to a compact mail icon on phones: the long
     localized label (uk «Зв'язатися з нами», de «Kontakt aufnehmen») can never
     crowd the brand on a single row. The label stays in the DOM (font-size:0)
     for accessibility; the white icon inherits the button's text color. */
  .nav .nav-cta { margin-left: 0; padding: 8px 12px; font-size: 0; line-height: 0; white-space: nowrap; }
  .nav .nav-cta::before {
    content: ""; display: inline-block; width: 18px; height: 18px; vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .lang-select { margin-left: 0; padding: 6px 7px; font-size: 13.5px; }
}
@media (max-width: 400px){
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand .logo { width: 28px; height: 28px; }
  .nav { gap: 6px; }
  /* Keep the icon-only CTA (do NOT reset font-size back to text here). */
  .nav .nav-cta { padding: 8px 11px; }
  .lang-select { padding: 6px 6px; font-size: 13px; }
}

/* Hero. The base stays dark navy — the brand pass tints the glows, it does not turn the
   page purple. The strong glow sits behind the copy (where the brand argument is made),
   a weaker indigo one behind the phone. Both are low-alpha so body text keeps contrast. */
.hero { position: relative; overflow: hidden; color: #eaf2ff;
  background:
    radial-gradient(900px 520px at 10% 16%, rgba(132,84,242,.30), transparent 62%),
    radial-gradient(1000px 460px at 80% -8%, rgba(112,86,220,.22), transparent 60%),
    radial-gradient(620px 380px at 92% 78%, rgba(103,221,189,.07), transparent 60%),
    linear-gradient(165deg, #0a1730 0%, #0e2140 55%, #14254a 100%);
}
.hero::after { /* subtle grid */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
}
/* .hero is a <section>, so it was ALSO taking `section { padding: 78px 0 }` on top of
   .wrap's own 76/88 — 320px of stacked vertical padding wrapping the same content twice.
   That, not the copy, was most of the "empty billboard". Padding is owned here, once. */
.hero { padding: 0; }
/* align-items:start pulls the copy to the top of the row instead of floating it in the
   middle of whichever column is taller (the phone, on EN — which is what produced the
   big empty fields above AND below). The phone re-centres itself so it never looks stuck. */
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 40px; align-items: start; padding: 48px 22px 56px; }
.hero .phone-wrap { align-self: center; }
.hero .eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#cdbcff; background:var(--brand-soft); border:1px solid var(--brand-border);
  padding:6px 12px; border-radius:999px; margin-bottom:11px; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; margin: 0 0 12px; }
/* Purple-dominant accent: it starts and turns over inside the #8454F2 family and only
   resolves to the mint end-accent, instead of the old blue→green ramp that read as a
   generic SaaS gradient with no relationship to the logo. */
.hero h1 .grad { background: linear-gradient(90deg,#BCA7FF 0%,#956CF7 48%,#67DDBD 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* line-height 1.5 instead of the body's 1.62: at 320-375 the lead runs 6-7 lines, where
   the looser leading alone cost ~15px of pure air and made the block read as scattered. */
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: #c4d4ec; max-width: 560px; margin: 0 0 20px; }
/* Hero CTA stack. The Play badge is deliberately NOT in this row: an official
   Google-branded asset cannot be ranked against our own button without one of the two
   losing — either the badge is diminished into "the secondary button", or it competes
   with the primary CTA for the same job. So the hierarchy is now vertical and each tier
   is a separate surface:
     1. .actions      — the primary CTA, alone, unopposed.
     2. .play-test-card — a distinct information surface answering "can I get it yet?".
     3. .hero-legal   — tertiary, plain-text register.
     4. .trust        — reassurance strip.
   */
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display: inline-flex; align-items:center; gap:8px; background: var(--brand-primary); color: #fff;
  padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size:15px; box-shadow: 0 8px 20px var(--brand-glow); }
.btn:hover { background: var(--brand-primary-hover); color:#fff; text-decoration: none; transform: translateY(-1px); transition:.15s; }
.btn:active { background: var(--brand-primary-active); transform: translateY(0); }
/* Double ring, because .btn is used on BOTH the navy hero and the white contact section:
   a white inner separator reads against the dark hero, the purple outer ring reads
   against white. Either background always leaves one of the two visible. */
.btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 8px 20px var(--brand-glow); }

/* Closed-testing access card.
   An information surface, NOT a call to action and NOT a frame that dresses the badge up
   as a button: faint fill, hairline border, no shadow, no hover/press affordance on the
   card itself, and no click handler — only the badge inside it is a link. Google's badge
   rules are therefore intact: the artwork is unmodified official PNG, it is never redrawn
   or recoloured, it keeps its full clear space (see below), nothing overlaps it, and no
   Mosara chrome is attached to it that could imply Google endorses or authored the card.

   Weight is deliberately low: it must answer "can I get it yet?" without bidding against
   the primary CTA. Hence its own dimmer fill/border rather than --brand-soft/--brand-border
   (those carry the eyebrow's weight, which is too much mass here), tight padding, and a
   width that hugs the badge instead of spanning the column. */
.play-test-card {
  --play-h: 48px;                          /* height of the badge's VISIBLE artwork */
  --play-clear: calc(var(--play-h) / 4);   /* clear space Google's guidelines require */
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: fit-content; max-width: 268px; margin-top: 14px;
  padding: 8px; border-radius: 9px;
  background: rgba(132,84,242,.06); border: 1px solid rgba(181,157,255,.15);
}
/* Google Play badge — official artwork, used as-is. The link is a positioning wrapper
   only: transparent spacing, never button chrome.

   All seven assets are 646x250, but they are NOT framed alike:
     en/uk           artwork 564x168, Google's clear space baked in (41px all round)
     de/es/fr/pt/ru  artwork 646x192, bled to the canvas edge — no baked clear space
   Sizing by canvas height would therefore render en/uk ~14% smaller than the other
   five, and leave those five with zero horizontal clear space. So we size from the
   visible artwork height instead and top the missing clear space back up as padding:
   every locale then renders an identical badge inside an identical clear space.
   (Follow-up: re-export the five from Google's badge generator so the clear space is
   baked in again and .btn-badge--flush can be dropped.) */
.btn-badge { display: inline-flex; align-items: center; line-height: 0; }
.btn-badge img { display: block; width: auto; height: calc(var(--play-h) * 250 / 168); }
.btn-badge--flush img { height: calc(var(--play-h) * 250 / 192); }
.btn-badge--flush { padding: calc(var(--play-clear) - var(--play-h) * 29 / 192) var(--play-clear); }
.btn-badge:hover { text-decoration: none; opacity: .85; }
.btn-badge:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 8px; }
/* Optically align the caption with the artwork, not with the badge's box: the box starts
   one clear-space unit before the artwork does, on every locale. */
.play-test-card .badge-note { margin: 0; padding-inline: var(--play-clear); color:#9aadcb; font-size:11.5px; line-height:1.4; }
/* Tertiary/legal: clearly present, but quieter than the CTA — a text link in the hero's
   muted register rather than a pill competing with it. */
.hero .hero-legal { margin: 12px 0 0; }
.hero .hero-legal a { color:#a9bbd8; font-size:13.5px; font-weight:600; text-decoration: underline;
  text-decoration-color: rgba(169,187,216,.4); text-underline-offset: 3px; }
.hero .hero-legal a:hover { color:#d9c9ff; text-decoration-color: currentColor; }
/* Own the gap so the trust strip never crowds the legal link — tightened, but kept
   clearly larger than the card>legal gap so the legal link stays grouped upward. */
.hero .trust { margin-top: 18px; display:flex; gap:16px; flex-wrap:wrap; color:#9fb6d6; font-size:13.5px; }
.hero .trust span { display:inline-flex; align-items:center; gap:7px; }
@media (max-width: 880px){
  /* Phones are where the looseness showed most: the stacked section+wrap padding, a 36px
     column gap and a 680px-tall phone pushed the trust row ~1.6 screens down. */
  .hero .wrap { grid-template-columns: 1fr; text-align:center; gap:20px; padding: 26px 22px 30px; }
  .hero p.lead{ margin-inline:auto; } .hero .actions, .hero .trust{ justify-content:center; }
  /* The desktop glows are sized in px against a ~1440px stage. Left alone on a phone they
     span the whole viewport and flood the hero violet — a purple section, not a glow.
     Re-aim them at the (now centred) copy, scale to the viewport, ease the alpha back. */
  .hero { background:
    radial-gradient(76vw 320px at 50% 10%, rgba(132,84,242,.22), transparent 63%),
    radial-gradient(64vw 300px at 50% 72%, rgba(112,86,220,.14), transparent 66%),
    linear-gradient(165deg, #0a1730 0%, #0e2140 55%, #14254a 100%); }
  /* One centred column: primary CTA → test card → legal → trust. The CTA may go full
     width but is capped so it never becomes a banner; the card is capped independently
     and stays a card. */
  .hero .actions .btn { width: 100%; max-width: 320px; justify-content: center; }
  /* A phone-width badge would read as a full-bleed button and swamp the primary CTA, so
     the artwork is only nudged up (54 -> 60px tall => ~202px wide, inside the 190-220
     target) and the card is centred rather than stretched. */
  .play-test-card { --play-h: 60px; margin-inline: auto; align-items: center;
    max-width: min(286px, 100%); }
  .play-test-card .badge-note { text-align: center; }
  /* The trust strip wraps to one item per line at 320; a tighter gap/leading keeps it a
     compact 2-line block instead of a third scattered island. */
  .hero .trust { gap: 8px 14px; line-height: 1.35; } }

/* Phone mockup — dark bezel (no notch); the light app screenshot fills the screen unobstructed */
.phone-wrap { display:flex; justify-content:center; }
/* 360 -> 320: the phone was the TALLEST thing in the hero row (717.8px vs the EN copy's
   630), so it — not the copy — was setting the hero's height and forcing the centred copy
   to float. Narrowing it lets the copy drive the row. Screenshot and its contents are
   untouched; only the frame it renders into is smaller. */
.phone { width: min(320px, calc(100vw - 48px)); border-radius: 48px; background:#050b16;
  padding: 13px; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
  position: relative; }
/* MUST live after the base .phone rule: same specificity, so source order decides.
   (Placed with the hero block it silently lost and the phone stayed 320 on phones.)
   On a single-column layout the mockup is pure reassurance and was pushing the trust
   row a full screen down, so it gets a tighter cap here. */
@media (max-width: 880px){ .phone { width: min(272px, calc(100vw - 84px)); } }
/* Inner screen box matches the real screenshot aspect ratio (560/1160) so object-fit:cover
   neither crops the right-aligned amounts nor distorts. The aspect-ratio drives the height. */
.screen { width:100%; aspect-ratio: 560 / 1160; border-radius: 34px; overflow:hidden; background:#0c1626; color:#e8eef8;
  display:flex; flex-direction:column; font-size:13px; }
/* Real app screenshots fill the device screen, inheriting its rounded corners */
.screen img { width:100%; height:100%; display:block; object-fit:cover; object-position:top center; border-radius:inherit; }
.s-status { display:flex; justify-content:space-between; align-items:center; padding:14px 18px 6px; font-size:11px; color:#aebbd0; }
.s-top { padding: 6px 18px 12px; display:flex; align-items:center; justify-content:space-between; }
.s-top b { font-size:16px; }
.s-chip { font-size:11px; color:#aebbd0; background:#16233b; border-radius:999px; padding:4px 10px; }
.s-balance { margin: 4px 16px 14px; border-radius:18px; padding:16px;
  background: linear-gradient(135deg,#2b6fff,#1746b8); box-shadow: 0 10px 24px rgba(23,70,184,.45); }
.s-balance .lbl { font-size:11px; color:#cfe0ff; }
.s-balance .amt { font-size:26px; font-weight:800; margin-top:2px; }
.s-balance .row { display:flex; gap:10px; margin-top:12px; }
.s-pill { flex:1; background:rgba(255,255,255,.14); border-radius:12px; padding:8px 10px; }
.s-pill .k { font-size:10px; color:#dce8ff; } .s-pill .v { font-weight:700; }
.s-sec { font-size:11px; color:#8195b3; letter-spacing:.05em; text-transform:uppercase; margin:4px 18px 8px; }
.tx { display:flex; align-items:center; gap:11px; padding:9px 16px; }
.tx .ico { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px; background:#17243c; }
.tx .nm { flex:1; } .tx .nm b{ font-weight:600; font-size:13px; } .tx .nm small{ color:#7f93b2; font-size:11px; }
.tx .val { font-weight:700; font-size:13px; } .tx .val.pos{ color:var(--green);} .tx .val.neg{ color:#ff6b61; }
.s-nav { margin-top:auto; display:flex; justify-content:space-around; padding:10px 8px 16px; border-top:1px solid #16233b; color:#6f84a6; font-size:18px; }
.s-nav .on { color:#5b9dff; }

/* Sections */
section { padding: 78px 0; }
section.soft { background: var(--bg-soft); }
.center { text-align:center; }
/* Section eyebrows sit directly above the purple CTAs; left blue they were the last
   bright-blue accent competing with the brand. (The privacy band overrides this inline
   with a light tint that reads on its dark ground — deliberately untouched.) */
.eyebrow2 { color: var(--brand-primary); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 8px 0 10px; color: var(--navy-800); }
.section-sub { color: var(--muted); margin: 0 auto 40px; max-width: 600px; font-size:16.5px; }

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); transition:.18s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 14px; }
.ic.b{background:rgba(59,130,246,.12);} .ic.g{background:rgba(52,199,89,.14);} .ic.a{background:rgba(255,159,10,.14);}
.ic.p{background:rgba(124,77,255,.14);} .ic.r{background:rgba(255,69,58,.12);} .ic.t{background:rgba(20,180,170,.14);}
.card h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Screenshots strip — smaller phone frames (same dark bezel), each showing a full light screen */
.shots { display:flex; gap:26px; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
.shot { width: 280px; max-width: 100%; border-radius: 40px; background:#050b16;
  padding: 11px; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06); }
.shot .screen { border-radius: 30px; }

/* Privacy band */
.band { background: linear-gradient(160deg,#0e2140,#16315f); color:#eaf2ff; border-radius:22px; padding:40px; box-shadow: var(--shadow-md); }
.band h2 { color:#fff; } .band p { color:#c4d4ec; }

/* CTA */
.cta .btn { font-size:16px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); font-size: 14px; }
.site-footer .wrap { padding: 30px 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--muted); }
.site-footer .links a { margin-right: 18px; }

/* Legal / article pages */
.legal { padding: 48px 0 76px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: 33px; color: var(--navy-800); margin: 0 0 4px; }
.legal .updated { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
.legal h2 { font-size: 22px; margin: 34px 0 8px; color: var(--navy-800); }
.legal h3 { font-size: 17px; margin: 22px 0 6px; color: var(--ink); }
.legal p, .legal li { color: #2c3647; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal .note { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; margin: 18px 0; font-size: 14.5px; }
.back { display: inline-block; margin-bottom: 20px; font-size: 14px; font-weight:600; }
@media (max-width: 560px){ section { padding: 56px 0; } }

/* Language switcher */
.lang-select { margin-left: 18px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; cursor: pointer; }
.lang-select:hover { color: var(--ink); border-color: var(--brand-primary); }