/* ===== IGDA Moldova — design tokens & global styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root{
  /* accent (overridable by tweaks) */
  --primary: #6539e0;
  --primary-600: #5a30d4;
  --primary-700: #4c27b8;
  --primary-50: #f0ecfd;
  --primary-100: #e6e0fb;
  --primary-tint: #f4f1fe;

  /* warm secondary from the logo swirl */
  --warm: #f2643c;
  --warm-2: #f5a623;

  /* neutrals — cool, slightly lavender */
  --ink: #15131f;
  --ink-2: #3a3747;
  --muted: #6b6878;
  --faint: #9794a3;
  --line: #ece9f2;
  --line-2: #e3e0ec;

  --bg: #f6f5fb;
  --bg-grad-1: #f3f1fb;
  --bg-grad-2: #faf9fe;
  --surface: #ffffff;
  --surface-2: #faf9fe;

  --footer-bg: #14122a;
  --footer-bg-2: #0e0d1f;
  --footer-ink: #cfccdd;
  --footer-faint: #8b87a3;

  /* shape */
  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,18,42,.05), 0 1px 1px rgba(20,18,42,.04);
  --shadow: 0 6px 22px -8px rgba(34,24,80,.14), 0 2px 6px -2px rgba(34,24,80,.06);
  --shadow-lg: 0 24px 60px -18px rgba(34,24,80,.28), 0 8px 22px -10px rgba(34,24,80,.14);

  --container: 1340px;
  --header-h: 76px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- dark theme (toggle in the header; persisted as igda_theme) ---------- */
[data-theme="dark"]{
  --ink:#f1edfc; --ink-2:#cfc8ea; --muted:#a39bc8; --faint:#736b9b;
  --line:#2e2750; --line-2:#383061;
  --bg:#120e24; --bg-grad-1:#171231; --bg-grad-2:#130f27;
  --surface:#1c1638; --surface-2:#251d49;
  --footer-bg:#0e0b1e; --footer-bg-2:#0a0816;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.3);
  --shadow: 0 6px 22px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7), 0 8px 22px -10px rgba(0,0,0,.45);
}
[data-theme="dark"] .chip-warm{ color:#ffb59a; background:rgba(242,100,60,.16); }
[data-theme="dark"] .chip-green{ color:#7fe0b0; background:rgba(22,181,155,.16); }
[data-theme="dark"] .btn-dark{ background:var(--primary); }
[data-theme="dark"] .btn-dark:hover{ background:var(--primary-600); }
/* skyline at dusk — CSS overrides win over SVG presentation attributes */
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [stroke="#b9aee6"]{ stroke:#5a4f9e; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [stroke="#cdc4ec"]{ stroke:#5a4f9e; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [fill="#ffffff"]{ fill:#221b45; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [fill="#efeafb"]{ fill:#2c2456; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [fill="#cfc6ee"]{ fill:#352c61; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [fill="#e6e0f7"]{ fill:#3a3166; }
[data-theme="dark"] :is(.home-hero-art, .page-hero) svg [fill="#b9aee6"]{ fill:#5a4f9e; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--primary-tint), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2) 40%, var(--bg));
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.55;
}
#root{ min-height:100vh; display:flex; flex-direction:column; }

h1,h2,h3,h4,h5{ font-family:'Space Grotesk', system-ui, sans-serif; margin:0; line-height:1.08; letter-spacing:-.015em; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--primary-100); }

/* layout */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding-block:64px; }
.section-sm{ padding-block:40px; }
.eyebrow{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); }
.lede{ color:var(--muted); font-size:17px; max-width:60ch; text-wrap:pretty; }
.muted{ color:var(--muted); }
.center{ text-align:center; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:var(--radius-pill); transition:.2s var(--ease);
  border:1px solid transparent; white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px -8px color-mix(in oklab, var(--primary) 70%, transparent); }
.btn-primary:hover{ background:var(--primary-600); transform:translateY(-1px); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-1px); }
.btn-lg{ padding:14px 26px; font-size:16px; }
.btn-block{ width:100%; justify-content:center; }
/* white button used ONLY on permanently-dark bands — fixed colors, theme-proof */
.btn-on-dark{ background:#fff; color:#241a52; }
.btn-on-dark:hover{ background:#e9e3fa; transform:translateY(-1px); }

/* generic card */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:22px; }

/* chips / badges */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 11px; border-radius:var(--radius-pill); border:1px solid var(--line-2);
  color:var(--ink-2); background:var(--surface); white-space:nowrap; }
.chip-soft{ background:var(--surface-2); }
.chip-primary{ color:var(--primary-700); background:var(--primary-50); border-color:transparent; }
.chip-warm{ color:#b0421f; background:#fdeee8; border-color:transparent; }
.chip-green{ color:#1c7a4f; background:#e8f6ee; border-color:transparent; }

/* form fields */
.field{ display:flex; flex-direction:column; gap:7px; }
/* spam honeypot — visually gone but present for bots that fill every input */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.field label{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.field .req{ color:var(--warm); }
.input, .select, .textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:12px 14px; width:100%; transition:.18s var(--ease); }
.input::placeholder, .textarea::placeholder{ color:var(--faint); }
.input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50); }
.textarea{ resize:vertical; min-height:128px; }
.select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6878' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:38px; }

.input-wrap{ position:relative; }
.input-wrap .ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--faint); width:18px; height:18px; pointer-events:none; }
.input-wrap .input{ padding-left:42px; }

/* divider */
.hr{ height:1px; background:var(--line); border:none; margin:0; }

/* utility grid helpers */
.grid{ display:grid; gap:20px; }

/* hover lift */
.lift{ transition:.22s var(--ease); }
.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }

/* page enter animation — never hides content (offscreen iframes can freeze anims) */
@keyframes pageIn{ from{ opacity:.4; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.page{ animation:pageIn .4s var(--ease) both; }

@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* density (tweakable) */
[data-density="compact"]{ --pad-y: 48px; }
[data-density="comfy"]{ --pad-y: 80px; }

/* responsive helpers */
@media (max-width: 980px){
  .section{ padding-block:48px; }
}