/*
 * Self-hosted fonts. Every file is under /fonts/, served from our own host — no CDN, per the
 * project's core constraint. unicode-range gates each download, so a visitor only fetches the
 * script(s) their language uses (a French reader never downloads Burmese glyphs). CJK (zh/ja/ko)
 * is intentionally NOT bundled: Noto CJK is 10 MB+ per language and CJK-capable devices ship
 * their own CJK fonts, so the font token falls back to system-ui for those.
 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; 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+2074, 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; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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; font-display: swap;
  src: url('/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Noto Sans Myanmar'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-myanmar.woff2') format('woff2');
  unicode-range: U+1000-109F, U+A9E0-A9FF, U+AA60-AA7F; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-thai.woff2') format('woff2');
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Khmer'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-khmer.woff2') format('woff2');
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Lao'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-lao.woff2') format('woff2');
  unicode-range: U+0E80-0EFF, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-bengali.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: 'Noto Sans Tamil'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-tamil.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }
@font-face { font-family: 'Noto Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/noto-hebrew.woff2') format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

/*
 * FlowStateAura marketing site. Mobile-first, no framework, no external assets.
 * Fonts are self-hosted (see Task 8); non-Latin scripts use the bundled Noto fonts above; CJK falls back to system fonts.
 */
:root {
  --brand-violet: #5B3FE0;
  --brand-blue: #2B7FEA;
  --brand-cyan: #22D3EE;
  --ink: #0B1A2E;
  --ink-soft: #45566E;
  --surface: #FFFFFF;
  --surface-alt: #F5F7FA;
  --border: #E2E8F0;
  --gradient: linear-gradient(100deg, var(--brand-violet), var(--brand-blue), var(--brand-cyan));
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20, 40, 80, .06);
  --pad: 20px;
  --maxw: 1120px;
  --font: 'Inter', 'Noto Sans Myanmar', 'Noto Sans Thai', 'Noto Sans Khmer', 'Noto Sans Lao', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Arabic', 'Noto Sans Hebrew', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--surface); line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-blue); }

/* ---------- header / footer ---------- */
.site-header, .site-footer { max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }
.site-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-nav { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 500; }
.site-footer { border-top: 1px solid var(--border); margin-top: 64px; color: var(--ink-soft); font-size: 14px; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 10px 18px; border-radius: var(--radius); text-decoration: none;
       font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--gradient); color: #fff; }
.btn-ghost { border-color: var(--border); color: var(--ink); background: var(--surface); }
.btn-lg { padding: 14px 26px; font-size: 17px; }

/* ---------- layout primitives ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad); }
.section-alt { background: var(--surface-alt); }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
        padding: 18px; box-shadow: var(--shadow); }
.card.muted { opacity: .55; }

/* ---------- hero ---------- */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 72px var(--pad) 48px; }
.hero h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.02em; }
.lede { font-size: clamp(17px, 2.4vw, 21px); color: var(--ink-soft); max-width: 60ch; margin: 0 0 28px; }

/* ---------- pricing ---------- */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: start; }
.price-table .featured { background: var(--surface-alt); font-weight: 600; }
.billing-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
.billing-toggle button { padding: 8px 18px; border: 0; background: var(--surface); cursor: pointer; font: inherit; }
.billing-toggle button[aria-pressed="true"] { background: var(--gradient); color: #fff; }
.price-amount { font-weight: 600; color: var(--ink); }

/* ---------- language picker ---------- */
.lang-picker { position: relative; }
.lang-picker select { font: inherit; padding: 8px 10px; border: 1px solid var(--border);
                      border-radius: 10px; background: var(--surface); color: var(--ink); max-width: 220px; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--ink);
}
.hp { position: absolute; inset-inline-start: -9999px; }  /* honeypot — never visible */
.form-msg { padding: 12px; border-radius: 10px; margin-top: 12px; }
.form-msg.ok { background: #ECFDF5; color: #065F46; }
.form-msg.err { background: #FEF2F2; color: #991B1B; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}