/* ==========================================================================
   Hanura Next — shared site chassis
   Design tokens, base typography, nav, buttons, forms, FAQ, legal, footer.
   Page-specific rules stay in each page's inline <style> block, which is
   loaded after this file and therefore wins on conflicts.
   ========================================================================== */

/* ── TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --white: #ffffff;
  --bg: #ffffff;
  --bg-subtle: #F6F8FC;
  --canvas: #F7F9FD;          /* flat page tint, replaces the old gradient wash */
  --surface-2: #EFF4FB;

  /* ink */
  --dark: #0B1220;
  --text: #3B4657;
  --muted: #697586;

  /* brand */
  --accent: #2563EB;
  --accent-dark: #1D4ED8;
  --accent-light: rgba(37,99,235,0.07);

  /* lines */
  --border: #E3E9F2;
  --border-strong: #CFD9E8;

  /* shape */
  --radius-lg: 22px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* elevation — layered, brand-tinted */
  --shadow-xs: 0 1px 2px rgba(11,18,32,0.05);
  --shadow-sm: 0 1px 2px rgba(11,18,32,0.05), 0 2px 8px -2px rgba(11,18,32,0.06);
  --shadow-md: 0 2px 4px rgba(11,18,32,0.04), 0 12px 28px -10px rgba(11,18,32,0.14);
  --shadow-lg: 0 4px 8px rgba(11,18,32,0.04), 0 28px 60px -18px rgba(11,18,32,0.22);
  --shadow-accent: 0 1px 2px rgba(11,18,32,0.08), 0 10px 24px -8px rgba(37,99,235,0.45);
  --shadow-accent-hover: 0 2px 4px rgba(11,18,32,0.10), 0 18px 38px -10px rgba(37,99,235,0.52);

  /* layout */
  --container: 1560px;
  --gutter: clamp(1.25rem, 3.6vw, 4rem);
  --nav-h: 84px;

  /* type */
  --fs-h: clamp(2rem, 3.05vw, 2.85rem);
  --fs-body: 1.0625rem;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── RESET & BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* This site ships one hand-built light theme.

   `only light` asks browsers not to auto-darken it. Chrome Android honours
   this (measured: plain `light` was ignored and left the page dark at 3.0:1
   contrast; `only light` keeps it light at 4.5:1). Samsung Internet does NOT
   honour it — its dark mode treats the user's preference as outranking the
   site's, and there is no opt-out to hand it.

   So the page must also survive being darkened against its will. That is why
   no text on this site is painted with a gradient: these engines invert
   foreground COLOURS but deliberately leave background images and gradients
   alone, so gradient-clipped text kept a blue chosen for a white backdrop
   while the backdrop turned near-black. See the note on .grad-text.

   Also keeps form controls rendering light. If a real dark theme is ever
   added, drop `only` and add a prefers-color-scheme block. */
:root { color-scheme: only light; }

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  color: var(--text);
  /* shared page canvas — a single flat tint. Cards use --white so they still
     read as raised against it. */
  background-color: var(--canvas);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img, svg { max-width: 100%; }

::selection { background: rgba(37,99,235,0.16); color: var(--dark); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── PAGE TRANSITIONS ─────────────────────────────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: hn-fade-out 0.26s cubic-bezier(0.32,0.72,0,1) both; }
::view-transition-new(root) { animation: hn-fade-in 0.34s cubic-bezier(0.32,0.72,0,1) both; }
@keyframes hn-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes hn-fade-in { from { opacity: 0; transform: translateY(8px); } }

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
h1 {
  font-size: var(--fs-h);
  font-weight: 800;
  line-height: 1.08;
  color: var(--dark);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
h2, h3 { color: var(--dark); letter-spacing: -0.018em; text-wrap: balance; }
p { text-wrap: pretty; }

/* accent word inside a heading */
/* Solid colour, not a gradient clipped to the glyphs.

   Android dark-mode engines (Samsung Internet especially) treat a gradient as
   a background IMAGE and leave it at full light-mode brightness, while
   darkening everything around it. Two consequences, both fixed by using flat
   colour instead:

     - gradient-filled TEXT kept a blue picked for a white backdrop and became
       unreadable (3.0:1). A real `color` is lightened along with the rest of
       the text, so it survives inversion (5.4:1 measured).
     - gradient-filled BUTTONS (.btn, .nav-cta) glared against the darkened
       page and banded blue-to-violet across their width. A flat
       background-color sits correctly in it.

   Do not reintroduce background-clip: text, or gradient button fills. */
.grad-text { color: var(--accent); }

/* eyebrow label above a heading */
/* flex (not inline-flex) so the eyebrow always claims its own line, even when
   it follows a status badge; width:fit-content keeps the rule hairline short */
.label, .section-label {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.label::before, .section-label::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.page-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* The gutter sits OUTSIDE the max-width, so the content edge lands in the same
   place as .flow-main-inner, .hero-inner and .footer-top — all of which are
   capped at --container inside a parent that already pads by --gutter. */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.flow-main { flex: 1 1 auto; display: flex; padding: clamp(1.75rem, 4vh, 3.25rem) var(--gutter); }
/* auto margins centre the block but collapse to 0 when content is taller than
   the viewport, so nothing is ever clipped above the scroll origin */
.flow-main-inner { max-width: var(--container); margin: auto; width: 100%; }

/* ── NAV ──────────────────────────────────────────────────────────────── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav-inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4375rem;
  font-weight: 800;
  color: var(--dark);
  text-decoration: none;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-logo-img { height: 38px; width: auto; display: block; }
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; flex: 1; }
.nav-links a {
  position: relative;
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  transition: color 0.18s, background 0.18s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--dark); background: var(--surface-2); }
.nav-links a.active { color: var(--accent-dark); font-weight: 650; background: var(--accent-light); }
.nav-cta {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  padding: 0.65rem 1.35rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-accent);
  transition: transform 0.18s cubic-bezier(0.32,0.72,0,1), box-shadow 0.18s, filter 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-accent-hover); filter: saturate(1.08); }
.nav-cta:active { transform: translateY(0); }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.nav-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); }
.nav-toggle .icon-close { display: none; }
.site-nav.menu-open .nav-toggle .icon-hamburger { display: none; }
.site-nav.menu-open .nav-toggle .icon-close { display: block; }

/* the nav gains a hairline + shadow once the page scrolls (progressive
   enhancement — browsers without scroll-driven animations keep the hairline) */
@supports (animation-timeline: scroll()) {
  nav.site-nav {
    animation: hn-nav-lift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90px;
  }
  @keyframes hn-nav-lift {
    to {
      background: rgba(255,255,255,0.88);
      border-bottom-color: #E3E9F2;
      box-shadow: 0 10px 30px -18px rgba(11,18,32,0.4);
    }
  }
}
@supports not (animation-timeline: scroll()) {
  nav.site-nav { border-bottom-color: var(--border); }
}

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  text-align: center;
  padding: 0.875rem 1.75rem;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-accent);
  transition: transform 0.2s cubic-bezier(0.32,0.72,0,1), box-shadow 0.2s, filter 0.2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-accent-hover); filter: saturate(1.08); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-accent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-outline {
  display: inline-block;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(255,255,255,0.7);
  text-decoration: none;
  text-align: center;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s cubic-bezier(0.32,0.72,0,1), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.btn-outline:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn-outline:active { transform: translateY(0); }

.hero-ctas { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.cta-note { font-size: 0.9375rem; color: var(--muted); margin-top: 0.9rem; }

/* ── STATUS BADGE ─────────────────────────────────────────────────────── */
.full-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A15C07;
  background: rgba(245,158,11,0.11);
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.1rem;
}
.full-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
  animation: hn-pulse 2.4s cubic-bezier(0.32,0.72,0,1) infinite;
}
@keyframes hn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* ── FORMS ────────────────────────────────────────────────────────────── */
.form-row { display: flex; gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.form-field label { font-weight: 600; color: var(--dark); font-size: 1rem; }
.form-field .optional, .optional { font-weight: 500; color: var(--muted); }
.form-field .hint, .hint { font-size: 0.9375rem; color: var(--muted); font-weight: 400; }

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--dark);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  resize: vertical;
  width: 100%;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.16s;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9AA5B4; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--border-strong); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--white);
  box-shadow: 0 0 0 4px var(--accent-light);
}

.consent a { color: var(--accent); font-weight: 600; text-decoration: none; }
.consent a:hover { color: var(--accent-dark); }
.consent input { accent-color: var(--accent); }

/* honeypot — visually hidden, never focusable */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; font-weight: 600; font-size: 1rem; }
.form-status.success { color: #15803D; }
.form-status.error { color: #DC2626; }
.form-status.error a { color: inherit; }

.form-alt { color: var(--muted); font-size: 1rem; }
.form-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.form-alt a:hover { color: var(--accent-dark); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  gap: 1rem;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background 0.16s, padding-inline 0.2s cubic-bezier(0.32,0.72,0,1);
}
.faq-q:hover { background: var(--bg-subtle); padding-inline: 0.85rem; }
.faq-q-text { font-size: 1.1875rem; font-weight: 600; color: var(--dark); flex: 1; line-height: 1.5; }
.faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 50%;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1), background 0.2s, color 0.2s;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq-a { display: none; padding: 0 0.25rem 1.5rem; max-width: 92ch; font-size: 1.0625rem; color: var(--muted); line-height: 1.75; }
.faq-a a { color: var(--accent); font-weight: 600; text-decoration: none; }
.faq-a a:hover { color: var(--accent-dark); }
.faq-item.open .faq-a { display: block; animation: hn-fade-in 0.3s cubic-bezier(0.32,0.72,0,1) both; }

/* ── LEGAL PAGES ──────────────────────────────────────────────────────── */
.legal-main { flex: 1 1 auto; padding-block: clamp(2rem, 5vh, 3.5rem) 4rem; }
/* .legal-wrap is also .container, so it supplies the gutter and the centring —
   its left edge therefore lines up with the nav and footer. The readable
   measure goes on the children instead of the wrapper, which is what used to
   pin the whole block to the far left of the viewport. */
.legal-wrap > * { max-width: 74ch; }
.legal-label {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.legal-label::before { content: ''; width: 1.75rem; height: 2px; border-radius: 2px; background: var(--accent); }
.legal-wrap h1 { margin-bottom: 0.5rem; }
.legal-date { color: var(--muted); font-size: 1rem; margin-bottom: 2.5rem; display: block; }
.legal-wrap h2 { font-size: 1.5rem; font-weight: 700; color: var(--dark); margin: 2.25rem 0 0.75rem; }
.legal-wrap p { margin-bottom: 1rem; line-height: 1.75; }
.legal-wrap ul { margin: 0.5rem 0 1rem 1.5rem; }
.legal-wrap ul li { margin-bottom: 0.5rem; line-height: 1.75; }
.legal-wrap ul li::marker { color: var(--accent); }
.legal-wrap a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-wrap a:hover { color: var(--accent-dark); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
footer {
  position: relative;
  background: var(--dark);
  padding: 1.35rem var(--gutter) 1.1rem;
  flex-shrink: 0;
}
footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(109,91,245,0.45);
}
.footer-top {
  max-width: var(--container);
  margin: 0 auto 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.03em;
}
.footer-logo-img { height: 28px; width: auto; display: block; }
.footer-logo span { color: #9DBEFF; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.footer-links a {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.16s;
}
.footer-links a:hover { color: #fff; }
.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-bottom p { font-size: 0.875rem; color: rgba(255,255,255,0.34); }
.footer-bottom a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.16s;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.75); }

/* ── SCROLL REVEAL (progressive enhancement) ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: hn-reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
  @keyframes hn-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta-mobile { display: block; }
  .nav-cta-mobile a { color: var(--accent); font-weight: 700; }
  .nav-cta { display: none; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid var(--border);
    padding: 0.6rem var(--gutter) 1.1rem;
    box-shadow: var(--shadow-md);
  }
  .nav-links a { border-radius: var(--radius-sm); }
  .site-nav.menu-open .nav-links { display: flex; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 0.5rem 1.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .form-row { flex-direction: column; }
}

/* Short desktop viewports: shrink the fixed chrome (nav + footer) so the
   content pages keep as much of one screen as possible. */
@media (min-width: 901px) and (max-height: 900px) {
  :root { --nav-h: 70px; }
  .nav-logo { font-size: 1.3125rem; }
  .nav-logo-img { height: 32px; }
  footer { padding: 1rem var(--gutter) 0.85rem; }
  .footer-top { margin-bottom: 0.7rem; }
  .footer-bottom { padding-top: 0.65rem; }
}
@media (min-width: 901px) and (max-height: 780px) {
  :root { --nav-h: 62px; }
  .nav-logo { font-size: 1.1875rem; }
  .nav-logo-img { height: 28px; }
  .nav-links a { font-size: 1rem; padding: 0.4rem 0.75rem; }
  .nav-cta { font-size: 1rem; padding: 0.5rem 1.1rem; }
  footer { padding: 0.8rem var(--gutter) 0.7rem; }
  .footer-top { margin-bottom: 0.55rem; }
  .footer-bottom { padding-top: 0.5rem; }
  .footer-links a, .footer-bottom p, .footer-bottom a { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}