/* ============================================================
   inexogy design tokens  (extracted from inexogy.com / hg.css)
   Dark mode is the default; light mode overrides under
   :root[data-theme="light"]. Brand colors are shared.
   This is the shared base: the token set is the union of all
   pages so the theme toggle behaves identically everywhere.
   ============================================================ */
:root {
  --inexogy-green:     #85BE00;   /* primary accent / CTA            */
  --inexogy-darkgreen: #007838;   /* gradient end on hover           */
  --inexogy-grey:      #989797;   /* brand grey                      */
  --inexogy-bg:        #1C1E22;   /* brand dark surface              */

  /* --- DARK surfaces (default) --- */
  --page:        #131517;         /* page background                 */
  --surface:     #212327;         /* raised card background          */
  --field:       #111316;         /* input background                */
  --border-card: #2E3137;         /* card border                     */
  --border-field:#34383F;         /* input border                    */
  --border-divider:#2E3137;       /* group dividers (darker of the two) */
  --text:        #FFFFFF;         /* primary text                    */
  --text-muted:  #9A9DA3;         /* secondary text                  */
  --placeholder: #6E7177;         /* input placeholder               */
  --required:    #E5484D;         /* required asterisk               */

  /* --- theme-switching component accents --- */
  --accent:      var(--inexogy-green);  /* CTA / link hover          */
  --mako-bg:     #191B1E;               /* mako panel background     */
  --card-shadow: none;                  /* card elevation            */
  --scheme:      dark;                  /* native control color-scheme */
  --hint-icon:   var(--text);           /* hint card icon            */
  --footer-text: var(--inexogy-grey);   /* footer copy + links       */
  --footer-hover:var(--inexogy-green);  /* footer link hover         */

  --ghost-hover-border: var(--text-muted);        /* ghost button hover */
  --ghost-hover-bg:     rgba(255, 255, 255, .04);
  --ghost-hover-color:  var(--text);

  --font: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1280px;
}

/* ============================================================
   LIGHT MODE overrides
   ============================================================ */
:root[data-theme="light"] {
  --page:        #F4F6F8;         /* page background — light grey    */
  --surface:     #FFFFFF;         /* raised card background — white  */
  --field:       #FFFFFF;         /* input background — white        */
  --border-card: #E3E7EC;         /* card border                     */
  --border-field:#CBD2DA;         /* input border                    */
  --border-divider:#CBD2DA;       /* group dividers (darker of the two) */
  --text:        #1C1E22;         /* primary text — brand dark       */
  --text-muted:  #5B636E;         /* secondary text                  */
  --placeholder: #9AA1AB;         /* input placeholder               */
  --required:    #D72C30;         /* required asterisk               */

  --accent:      var(--inexogy-darkgreen);
  --mako-bg:     #FAFBFC;         /* subtle off-white panel          */
  --card-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.06);
  --scheme:      light;
  --hint-icon:   var(--inexogy-darkgreen);
  --footer-text: var(--text-muted);
  --footer-hover:var(--inexogy-darkgreen);

  --ghost-hover-border: var(--inexogy-darkgreen);
  --ghost-hover-bg:     rgba(0, 120, 56, .05);
  --ghost-hover-color:  var(--inexogy-darkgreen);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: background-color .2s ease, color .2s ease;
}

a { color: inherit; }

/* ============================================================
   Header  (sticky, black, logo left / nav right – inexogy style)
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #000;
  border-bottom: 1px solid #161616;
}
.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 65px; width: auto; display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav-item {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-item:hover { color: var(--inexogy-green); }
.nav-item.active {
  color: var(--inexogy-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ============================================================
   Page body
   ============================================================ */
.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px 40px 96px;
}

.page-head { margin-bottom: 40px; }
.page-head h1 {
  font-weight: 900;
  font-size: 35px;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 14px;
}
.page-head .lead {
  font-size: 19px;
  color: var(--text-muted);
  margin: 0;
}

/* layout: main card + hint sidebar (shared by form + confirmation) */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 36px;
  box-shadow: var(--card-shadow);
}

/* ---------- hint card (shared by form + confirmation) ---------- */
.hint-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 20px;
}
.hint-title svg { width: 24px; height: 24px; flex: none; color: var(--hint-icon); }
.hint-card p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 18px;
}
.hint-card p:last-child { margin-bottom: 0; }

/* ============================================================
   Footer  (faithful inexogy footer – dark, columns, legal bar)
   ============================================================ */
.site-footer {
  flex-shrink: 0;
  background: transparent;
  color: var(--text);
  padding: 28px 40px;
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 26px;
  border-top: 1px solid var(--border-card);
}
.footer-copy {
  color: var(--footer-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.footer-right { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-legal a {
  color: var(--footer-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--footer-hover); }

/* ----- Dark / light mode toggle (footer) ----- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--footer-text);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* default (dark) shows the sun → click to go light; light shows the moon */
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }

/* ============================================================
   Responsive (shared layout breakpoints)
   ============================================================ */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 32px; }
}
@media (max-width: 640px) {
  .header-inner { padding: 18px 20px; }
  .main-nav { gap: 22px; }
  .nav-item { font-size: 12px; letter-spacing: 1px; }
  .page { padding: 36px 20px 64px; }
  .card { padding: 24px; }
  .site-footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}