/* ============================================================
   Amista marketing site — shared styles
   Faithful to the app's design system and its Altiplano palette
   (app/lib/core/theme/*.dart, am_riso.dart, event_bits.dart).
   Light only, like the app: the roles are AmistaPalette.light's.
   ============================================================ */

/* ---- Fonts: served from this host, never from Google ----------------------
   Loading them from fonts.googleapis.com handed every visitor's IP address
   to Google (GDPR — LG München I, 20 Jan 2022, 3 O 17493/20). fonts/ holds
   the very files Google served for our css2 request (variable woff2, one per
   family and subset; latin + latin-ext cover SK, CZ and EN), licences
   (SIL OFL 1.1) alongside. Weight ranges = the weights that request named. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/space-grotesk-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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/space-grotesk-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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 {
  /* Altiplano, refined (2026-10-13) — mirrored from app/lib/core/theme/app_colors.dart
     and AmistaPalette.light (amista_palette.dart). Light only, like the app:
     a white / salt page, slate ink, lagoon teal for actions, hills violet
     for people. */

  /* coal — salt and slate: every surface and every letter */
  --coal900:   #12171D;   /* ink */
  --coal500:   #36414D;   /* body */
  --coal400:   #56616D;   /* meta, 4.8:1 on a chip */
  --coal300:   #9BA5B0;
  --coal100:   #C3CBD3;
  --coal75:    #DCE2E7;   /* chips, neutral fills */
  --coal50:    #ECF0F3;   /* bands */
  --coal25:    #F4F6F8;   /* salt — the app's page */
  --coal-sunken: #E4E8EC;

  /* ember — the lagoon teal: actions, links, the brand */
  --lagoon:      #2A7A94;  /* ember500 — the brand colour; white on it 4.9:1 */
  --lagoon-text: #1F6880;  /* ember600 — teal words, 4.5:1 on every light surface */
  --lagoon-deep: #1B5566;  /* ember700 — the icon's back card */
  --lagoon-ink:  #123A46;  /* ember800 */
  --lagoon-lift: #5FAEC4;  /* ember300 */
  --lagoon-tint: #9AD0DE;  /* ember100 */
  --lagoon-wash: #CFE6EC;  /* ember50 */

  /* gold — the hills' violet: people, "this one is yours" */
  --violet:       #4A4380; /* gold500 */
  --violet-light: #B4ADE6; /* gold300 */
  --violet-wash:  rgba(74,67,128,0.14);

  /* signal */
  --danger:      #BE2323;  /* signal600 */
  --danger-text: #8E1B1B;  /* signal700 — words on the wash */
  --danger-soft: rgba(220,38,38,0.08);
  --on-danger:   #FFFFFF;
  --people:      var(--violet);
  --people-wash: var(--violet-wash);

  /* Roles */
  --page:      #FFFFFF;
  --salt:      var(--coal25);             /* panels laid on the page */
  --card:      #FFFFFF;
  --well:      var(--coal-sunken);
  --ink:       var(--coal900);
  --body:      var(--coal500);
  --meta:      var(--coal400);
  --accent:      var(--lagoon);           /* filled actions */
  --accent-text: var(--lagoon-text);      /* eyebrows, links */
  --accent-wash: rgba(42,122,148,0.12);   /* emberWash */
  --on-accent:   #FFFFFF;
  --cta:         var(--lagoon);           /* the app's join / create colour */
  --field:       #FFFFFF;                 /* form inputs */
  --field-rule:  rgba(18,23,29,0.16);     /* ruleStrong */

  /* Riso inks (am_riso.dart) — type on a photograph keeps its own inks */
  --riso-ink:  #FDF3E7;
  --riso-warm: #FFD9A8;

  /* App surfaces — the phones in the mock-ups (AmistaPalette.light) */
  --app-surface: var(--coal25);
  --app-raised:  #FFFFFF;
  --app-sunken:  var(--coal-sunken);
  --app-ink:     var(--coal900);
  --app-body:    var(--coal500);
  --app-meta:    var(--coal400);
  --app-accent:  var(--lagoon);
  --app-deep:    var(--lagoon-text);
  --app-on-accent: #FFFFFF;
  --app-warm:    var(--violet);
  --app-signal:  #BE2323;
  --app-rule:    rgba(18,23,29,0.10);
  --app-rule-strong: rgba(18,23,29,0.16);

  /* Lines + elevation — alphas of the ink */
  --rule:       rgba(18,23,29,0.10);
  --rule-soft:  rgba(18,23,29,0.06);
  --shadow-sm:  0 1px 2px rgba(18,23,29,0.06), 0 2px 8px rgba(18,23,29,0.05);
  --shadow-md:  0 18px 40px -18px rgba(18,23,29,0.22);
  --shadow-lg:  0 40px 90px -36px rgba(18,23,29,0.32);

  --display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --sans:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --r-xl: 32px;   /* the big panels */
  --r-lg: 24px;   /* cards */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { color-scheme: light; background: var(--page); }
body {
  background: var(--page);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh; display: flex; flex-direction: column;
}
body > footer { margin-top: auto; }
::selection { background: var(--lagoon-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 3px; }

/* skip link: off screen until a keyboard reaches it */
.skip {
  position: fixed; left: 16px; top: -64px; z-index: 100; padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

/* Sub-page header (Guides / Support) */
.page-hero { padding: 64px 0 8px; }

.page-hero h1 {
  font-family: var(--display); color: var(--ink); font-weight: 500;
  font-size: clamp(36px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch;
}
.page-hero p { margin-top: 18px; font-size: 18px; color: var(--body); max-width: 52ch; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.display { font-family: var(--display); }

/* Headline emphasis: the second half of a heading in the brand colour */
.hl { color: var(--lagoon); }

/* ---- Wordmark ----
   The lowercase rounded "amista" (img/amista-wordmark.svg, the v4 brand
   masters; white twin for dark grounds). One mark everywhere on the site:
   <a class="wordmark" href="./"><img src="img/amista-wordmark.svg" alt="Amista" …></a> */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.wordmark img { display: block; height: 26px; width: auto; }

/* ---- Nav: a floating pill ---- */
.nav {
  position: sticky; top: 0; z-index: 40; padding: 12px 0 0;
}
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  height: 64px; padding: 0 10px 0 26px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid var(--rule-soft); border-radius: 999px;
  max-width: calc(var(--maxw) - 40px);
  transition: box-shadow .3s, border-color .3s;
}
.nav.scrolled .wrap { box-shadow: var(--shadow-md); border-color: var(--rule); }
.nav-left { display: flex; align-items: center; gap: 36px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14.5px; font-weight: 500; color: var(--body); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; transition: background .18s, color .18s;
}
.nav-links a:hover { background: var(--coal50); color: var(--ink); }

/* ---- Language menu (globe + roll-down) ----
   A dropdown, not a segmented toggle: it stays one size no matter how many
   locales ship, and the menu is generated from the translation dictionary. */
.lang { position: relative; }
.langbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--body);
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 0 12px; height: 40px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.langbtn:hover { color: var(--ink); border-color: var(--coal300); }
.langbtn .globe { width: 17px; height: 17px; flex: none; }
.langbtn .code { letter-spacing: .06em; }
.langbtn .caret { width: 11px; height: 11px; flex: none; opacity: .7; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.langbtn[aria-expanded="true"] { border-color: var(--lagoon); color: var(--ink); }
.langbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.langmenu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50;
  min-width: 186px; padding: 6px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transform-origin: top right;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.langmenu.open { opacity: 1; transform: none; pointer-events: auto; }
.langmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; color: var(--body);
  background: transparent; border: none; border-radius: 10px; cursor: pointer;
  padding: 10px 10px; text-align: left;
  transition: background .16s, color .16s;
}
.langmenu button:hover { background: var(--coal25); color: var(--ink); }
.langmenu button .lname { flex: 1; }
.langmenu button .lcode {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--meta);
}
.langmenu button .check { width: 16px; height: 16px; flex: none; opacity: 0; color: var(--accent-text); }
.langmenu button[aria-checked="true"] { color: var(--accent-text); font-weight: 600; }
.langmenu button[aria-checked="true"] .check { opacity: 1; }
.langmenu button[aria-checked="true"] .lcode { color: var(--accent-text); }

/* Sign-in to the account page (account.html); icon only on a phone */
.nav-account {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 6px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--body);
  text-decoration: none; transition: color .2s;
}
.nav-account svg { width: 19px; height: 19px; flex: none; }
.nav-account:hover, .nav-account[aria-current="page"] { color: var(--accent-text); }

/* Hairline between the utility cluster and the action */
.nav-sep { width: 1px; height: 22px; background: var(--rule); flex: none; }

/* ---- Buttons: pills, sentence case ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em; white-space: nowrap;
  height: 50px; padding: 0 26px; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, border-color .2s, color .2s;
}
.btn .arrow { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  color: var(--on-accent); background: var(--cta);
  box-shadow: 0 10px 24px -12px rgba(42,122,148,.7);
}
.btn-primary:hover { transform: translateY(-1px); background: var(--lagoon-text); box-shadow: 0 16px 32px -14px rgba(42,122,148,.75); }
.btn-ghost { color: var(--ink); background: transparent; border-color: var(--field-rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; }

/* ---- Sections ---- */
section { padding: 96px 0; }

/* ---- Cards ---- */
.grid { display: grid; gap: 20px; }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: 28px 26px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.card h3 {
  font-family: var(--display); color: var(--ink);
  font-weight: 600; font-size: 21px; line-height: 1.15; margin-bottom: 9px; letter-spacing: -0.015em;
}
.card p { font-size: 15px; color: var(--body); line-height: 1.55; }

/* ---- Footer ----
   The wordmark and the imprint on the left, the links on the right, on a
   salt band. */
footer { background: var(--salt); padding: 34px 0; margin-top: 40px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.foot-legal { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--meta); }
.foot-legal::before {
  content: ""; width: 88px; height: 23px; flex: none;
  background: url(img/amista-wordmark.svg) left center / contain no-repeat;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot-links a { font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; transition: color .18s; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--accent-text); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }

/* Print: the nav pill and the footer band stay off paper; the page is
   already light. */
@media print {
  .nav, footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
  * { scroll-behavior: auto; }
}

/* ============================================================
   Responsive — desktop › tablet › phone
   ============================================================ */

/* Small laptop / large tablet landscape: the section links leave the pill */
@media (max-width: 1080px) {
  .wrap { padding: 0 24px; }
  .nav-links { display: none; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  
  section { padding: 72px 0; }
  .page-hero { padding: 52px 0 4px; }
  .page-hero h1 { max-width: 22ch; }
}

/* Phone — single column, tighter rhythm */
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }

  /* wordmark, language, account and the button share a phone's width: the
     button never wraps (.btn), so everything around it runs a size tighter */
  .nav { padding: 10px 12px 0; }
  .nav .wrap { gap: 8px; height: 58px; padding: 0 7px 0 18px; }
  .nav-right { gap: 4px; }
  .nav-right .btn-sm { height: 42px; padding: 0 14px; font-size: 13px; }
  .wordmark img { height: 22px; }
  .nav-sep { display: none; }
  .nav-account { width: 34px; height: 42px; justify-content: center; padding: 0; }
  .nav-account svg { width: 22px; height: 22px; }
  .nav-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langbtn { height: 42px; padding: 0 8px; border-color: transparent; }
  .langbtn .caret { display: none; }
  /* the button sits near the left on a phone; hung from its right the menu ran off-screen */
  .langmenu { right: auto; left: 0; transform-origin: top left; }

  section { padding: 56px 0; }
  .grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 24px 22px; border-radius: 20px; }
  
  

  
  

  .page-hero { padding: 40px 0 0; }
  .page-hero h1 { font-size: clamp(32px, 9vw, 44px); max-width: 100%; }
  .page-hero p { font-size: 16.5px; }

  footer { padding: 26px 0 30px; }
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .foot-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The smallest phones: the language button keeps just its globe (the menu
   still names every language), and the rest of the bar runs a size down so
   the longest label ("Stiahnuť appku") fits */
@media (max-width: 380px) {
  .langbtn .code { display: none; }
  .wordmark img { height: 19px; }
  .nav .wrap { padding-left: 14px; }
  .nav-account { width: 30px; }
  .nav-right .btn-sm { padding: 0 12px; font-size: 12.5px; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .btn { padding: 0 20px; font-size: 14.5px; }
}

/* Touch devices: no hover lift (it sticks after a tap) */
@media (hover: none) {
  .card:hover, .btn-primary:hover { transform: none; }
  .card:hover { box-shadow: none; }
}