/* ==========================================================================
   Desby — shared design system
   --------------------------------------------------------------------------
   Every public page loads this file. Page files may only add rules for
   components that page alone owns.

   BRAND NAVY SOURCE
   The navy values below are not approximations. They are copied from the
   Flutter dashboard theme:
     lib/theme/colors.dart      AppColors.darkNavy   = 0xFF0A1921
                               AppColors.deepBlue   = 0xFF102A35
                               AppColors.secondaryDark = 0xFF051016
     lib/theme/app_theme.dart   AppTheme._trueDarkNavy = 0xFF0A1921
   The website and the dashboard therefore render the same navy.

   ACCENT SOURCE
   The gold is the approved homepage accent. The paper, ink and muted values
   are the approved homepage values.
   ========================================================================== */

:root{
  /* Brand navy (dashboard) */
  --navy:#0A1921;
  --navy-deep:#051016;
  --navy-glow:#102A35;

  /* Accent */
  --gold:#ffbe1a;
  --gold-hover:#e2a812;
  --gold-shadow:rgba(255,190,26,.22);

  /* On-navy */
  --muted:#a3b8b5;

  /* On-paper */
  --paper:#f7f7f5;
  --card:#ffffff;
  --ink:#0A1921;
  --ink-strong:#3A4B54;
  --ink-soft:#5e6e6a;
  --line:#E8E6DF;

  /* Geometry */
  --radius-bottom:32px;
  --radius:22px;
  --maxw:1400px;
  --pad:48px;

  /* Elevation — restrained, no glows */
  --shadow-sm:0 1px 3px rgba(10,25,33,.06);
  --shadow-md:0 14px 38px rgba(10,25,33,.10);
  --shadow-lg:0 30px 80px rgba(10,25,33,.24);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Semantic success — checkmarks and live-status dots only. Never brand chrome. */
  --green:#0F9D76;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--navy);
  color:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
section{scroll-margin-top:80px}
::selection{background:var(--gold);color:var(--navy)}

/* --------------------------------------------------------------------------
   Theme
   --------------------------------------------------------------------------
   Two themes, one system. The homepage is navy end to end (the default above).
   The six inner pages carry a dark navy hero and a rich navy footer as
   chrome, but their reading surface is paper — which is how those pages were
   designed and approved. Forcing them to a navy body put dark navy headings on
   a navy background (contrast ratio 1.00) and made the whole reading column
   unreadable, so the light theme restores the intended surface.
   Applied by the build: <body class="is-light">.
   -------------------------------------------------------------------------- */
body.is-light{background:var(--paper);color:var(--ink);--paper:#F7F6F2;--muted:#5B6B74}
/* The footer is navy on every page, including light ones — keep the on-navy
   muted there so the columns stay readable. */
body.is-light .site-footer{--muted:#a3b8b5}

/* Inner pages keep their paper body, so the header stays sticky and re-scopes
   the on-navy muted. The navy background itself is no longer supplied here —
   it comes from the single sitewide .site-header rule below, so every page
   paints the exact same header band. */
body.is-light .site-header{
  position:sticky;top:0;
  --muted:#a3b8b5;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:110px 0}
.section--paper{background:var(--paper);color:var(--ink)}
.section--white{background:var(--card);color:var(--ink)}
.section--navy{background:var(--navy);color:#fff}

/* Narrow reading column inside a wide wrap — the homepage's own pattern. */
.prose{max-width:760px}

/* --------------------------------------------------------------------------
   Typography — homepage scale
   -------------------------------------------------------------------------- */
.eyebrow{
  display:block;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);line-height:1.9;
}
.section--paper .eyebrow,.section--white .eyebrow{color:var(--ink-soft)}

.eyebrow-rule{display:flex;align-items:center;gap:14px}
.eyebrow-rule i{display:block;width:24px;height:4px;border-radius:999px;background:var(--gold);flex-shrink:0}

h1,h2,h3{font-weight:800;letter-spacing:-.025em;overflow-wrap:break-word}
.h-display{font-size:56px;line-height:1.12}
.h-section{font-size:40px;line-height:1.25;color:#fff}
.section--paper .h-section,.section--white .h-section{color:var(--ink)}
.h-card{font-size:19px;line-height:1.35;letter-spacing:-.02em;font-weight:700}

.lede{font-size:16px;line-height:1.75;color:var(--muted);max-width:560px}
.section--paper .lede,.section--white .lede{color:var(--ink-soft)}
.body-text{font-size:16px;line-height:1.75;color:var(--muted)}
.section--paper .body-text,.section--white .body-text{color:var(--ink-soft)}

.hairline{height:1px;border:0;background:var(--line)}
.section--navy .hairline,.hero-card .hairline{background:rgba(255,255,255,.10)}

/* Pull quote / emphasised line — used on Ecosystem, kept quiet. */
.pull{
  font-size:clamp(18px,2.2vw,22px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);border-left:4px solid var(--gold);padding-left:22px;line-height:1.5;
}
.section--navy .pull,.hero-card .pull{color:#fff}

/* --------------------------------------------------------------------------
   Buttons — homepage .cta, generalised
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-weight:800;font-size:16px;line-height:1;
  padding:17px 34px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .2s,background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 10px 30px var(--gold-shadow)}
.btn-gold:hover{background:var(--gold-hover);transform:translateY(-2px)}

.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-glow);transform:translateY(-2px)}

.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}

.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.30)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}

.btn-sm{font-size:14px;padding:12px 24px}

/* --------------------------------------------------------------------------
   Header — the approved homepage header, used by every page
   -------------------------------------------------------------------------- */
/* One header band sitewide: every page paints the header strip with the same
   brand navy, so the header reads identically everywhere — same colour, same
   height, no per-page seam. The homepage's hero-card gradient starts below
   the header (on .hero), so the glow no longer bleeds up behind the nav. */
.site-header{position:relative;z-index:100;background:var(--navy)}

/* Three-column grid: wordmark | centred Home | nav actions. The centre cell
   is `auto` and the sides share the rest equally, so the Home button sits on
   the header's true centre line and can never collide with the nav links. */
.nav{
  position:relative;z-index:5;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:26px var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
}
.logo{display:flex;align-items:center;gap:12px;min-width:0;position:relative;z-index:70;grid-column:1}
.logo img{width:40px;height:40px;border-radius:12px}
.logo span{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff}

.nav-right{display:flex;align-items:center;gap:32px;justify-self:end;position:relative;z-index:60;grid-column:3}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  position:relative;font-size:15px;font-weight:500;color:var(--muted);
  transition:color .2s;padding-bottom:6px;white-space:nowrap;
}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--gold);font-weight:600}
.nav-links a.active::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:24px;height:3px;border-radius:2px;background:var(--gold);
}

/* Auth context. site.js swaps the label in place — "Sign in" when there is no
   session, "Dashboard" when there is — so there is exactly one auth slot and no
   page needs to know who is reading it. It is a gold pill so the single slot
   carries the weight the previous two-slot header did. */
.nav-links .nav-auth{
  font-size:14px;font-weight:800;padding:12px 26px;border-radius:999px;
  color:var(--navy);background:var(--gold);
}
.nav-links .nav-auth:hover{background:var(--gold-hover);color:var(--navy)}

/* The hamburger exists for narrow viewports only. At desktop width the four
   links and the auth action are always visible, so the button has no job. */
.burger{
  background:none;border:0;cursor:pointer;flex-shrink:0;
  width:34px;height:34px;padding:0;
  display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  position:relative;z-index:10;
}
.burger span{display:block;height:2.5px;background:#fff;border-radius:2px;transition:width .25s,transform .3s var(--ease),opacity .2s}
/* Open state: the burger becomes an X that sits above the fullscreen menu. */
.burger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger span:nth-child(1){width:28px}
.burger span:nth-child(2){width:22px}
.burger span:nth-child(3){width:28px}

/* Centre Home affordance — on every page EXCEPT the homepage (the build
   strips it there). Sized and styled exactly like the other header menu items
   (same 15px/500 type, muted colour) and centred against .nav at every
   viewport, so it sits on the header's true centre line on desktop and mobile
   while the wordmark and the burger never shift. */
.home-mini{
  display:inline-flex;grid-column:2;justify-self:center;
  align-items:center;gap:8px;
  padding-bottom:6px;
  font-size:15px;font-weight:500;line-height:1;color:var(--muted);
  white-space:nowrap;
  transition:color .2s;
  position:relative;z-index:70;
}
.home-mini svg{width:15px;height:15px;flex-shrink:0}
.home-mini:hover{color:#fff}
.home-mini:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
@media (max-width:700px){
  .home-mini{font-size:14px;padding-bottom:4px;gap:7px}
}

/* Fullscreen mobile menu — not a popup. Fixed over the whole viewport, deep
   navy with a slow gold glow, large staggered links, and the burger morphing
   into an X above it (z-index ladder: .nav context → .nav-right 60 →
   .burger 10 > .mobmenu 1; .logo/.home-mini sit at 70 so the wordmark and the
   centre Home link stay visible over the overlay). */
.mobmenu{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(90% 60% at 85% -5%, rgba(255,190,26,.10) 0%, rgba(255,190,26,0) 55%),
    radial-gradient(120% 80% at 10% 100%, var(--navy-glow) 0%, var(--navy-deep) 62%);
  padding:104px 26px 44px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease),visibility .32s;
}
.mobmenu.open{opacity:1;visibility:visible;pointer-events:auto}
.mobmenu a{
  display:block;padding:15px 4px;border-radius:0;
  font-size:27px;font-weight:700;letter-spacing:-.02em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;
}
.mobmenu.open a{opacity:1;transform:none}
.mobmenu.open a:nth-child(1){transition-delay:.06s}
.mobmenu.open a:nth-child(2){transition-delay:.12s}
.mobmenu.open a:nth-child(3){transition-delay:.18s}
.mobmenu.open a:nth-child(4){transition-delay:.24s}
.mobmenu a:hover,.mobmenu a:focus-visible{color:var(--gold);background:none}
.mobmenu a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mobmenu .mob-cta{
  margin-top:30px;padding-top:0;border-top:0;display:grid;gap:12px;
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease) .3s,transform .5s var(--ease) .3s;
}
.mobmenu.open .mob-cta{opacity:1;transform:none}
.mobmenu .mob-cta a{
  text-align:center;background:var(--gold);color:var(--navy);font-weight:800;
  border-radius:999px;padding:16px 14px;font-size:16px;letter-spacing:0;
  border-bottom:0;opacity:1;transform:none;transition:background .2s;
}
.mobmenu .mob-cta a:hover{background:var(--gold-hover);color:var(--navy)}
/* The menu is always navy regardless of page theme. */
body.is-light .mobmenu{--muted:#a3b8b5}
html.menu-open,html.menu-open body{overflow:hidden}

/* --------------------------------------------------------------------------
   Footer — the standard site footer
   (The homepage keeps its own minimal footer and does not use this block.)
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy-deep);color:var(--muted);padding:70px 0 34px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:52px}
.foot-brand p{margin:18px 0 0;max-width:280px;color:#7E93A0}
.site-footer h4{color:#fff;font-size:13.5px;font-weight:800;margin-bottom:20px;letter-spacing:.06em}
.foot-col a{display:block;margin-bottom:13px;width:fit-content;color:var(--muted);transition:color .2s,transform .2s}
.foot-col a:hover{color:var(--gold);transform:translateX(4px)}
.foot-base{
  border-top:1px solid rgba(255,255,255,.09);padding-top:28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;color:#7E93A0;font-size:13px;
}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{
  width:40px;height:40px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;color:#CFE0E8;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.socials a:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}

/* --------------------------------------------------------------------------
   Reveal — a single quiet fade-up, no blur/tilt/zoom variants
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in-view{opacity:1;transform:none}
/* Image trails the text by a beat inside the text+photograph features. */
.sec-feature .sec-figure{transition-delay:.1s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   Responsive — homepage breakpoints
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  :root{--pad:28px}
  .h-display{font-size:44px}
  .h-section{font-size:32px}
  .section{padding:84px 0}
  .nav{padding:22px var(--pad)}
}
@media (max-width:700px){
  :root{--pad:16px}
  .nav{padding:18px var(--pad);gap:8px}
  .logo img{width:30px;height:30px;border-radius:9px}
  .logo span{font-size:17px}
  .nav-right{gap:10px}
  .nav-links{display:none}
  .burger{display:flex;width:26px;gap:4px}
  .burger span{height:2px}
  .burger span:nth-child(1){width:20px}
  .burger span:nth-child(2){width:15px}
  .burger span:nth-child(3){width:20px}
  .h-display{font-size:32px}
  .h-section{font-size:26px}
  .section{padding:56px 0}
  .btn{font-size:14px;padding:14px 26px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-base{flex-direction:column;text-align:center;gap:8px}
  .site-footer{padding:48px 0 28px}
}