/* Design System – Krok 4 */
:root {
  --color-bg:#FFFFFF; --color-surface:#F5F7FB; --color-surface-2:#EEF2F9;
  --color-text:#0B1220; --color-text-muted:#4A5568;

  --primary-950:#070E22; --primary-900:#0A1634; --primary-800:#0D2250;
  --primary-700:#0F2E72; --primary-600:#123A90; --primary-500:#1B49B1; --primary-400:#2C63D6;

  --color-success:#0F9D58; --color-warning:#E39D18; --color-danger:#D64545;
  --focus-ring:rgba(44,99,214,.45);

  --font-display:"Sora", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --font-sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";

  --fs-xs:clamp(.78rem,.18vw + .72rem,.84rem);
  --fs-sm:clamp(.90rem,.22vw + .82rem,.98rem);
  --fs-md:clamp(1.00rem,.25vw + .92rem,1.10rem);
  --fs-lg:clamp(1.10rem,.35vw + .98rem,1.25rem);
  --fs-h4:clamp(1.25rem,.80vw + 1.00rem,1.60rem);
  --fs-h3:clamp(1.45rem,1.20vw + 1.05rem,2.00rem);
  --fs-h2:clamp(1.75rem,1.80vw + 1.10rem,2.50rem);
  --fs-h1:clamp(2.00rem,2.50vw + 1.20rem,3.20rem);

  --lh-tight:1.2; --lh-snug:1.35; --lh-normal:1.55;

  --container-max:1200px; --gutter:1.25rem;
  --section-y:clamp(3.0rem,4vw,5.0rem); --tile-gap:clamp(.8rem,1.2vw,1.4rem); --tile-pad:clamp(1.0rem,1.6vw,1.8rem);

  --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --shadow-sm:0 2px 10px rgba(10,22,52,.06);
  --shadow-md:0 8px 30px rgba(10,22,52,.10);
  --shadow-lg:0 16px 50px rgba(10,22,52,.14);

  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

  --easing:cubic-bezier(.2,.7,.2,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-slow:420ms;

  --min-contrast-text:4.5; --min-contrast-cta:7.0;
}
html[data-theme="B"]{ --primary-700:#1436A3; --primary-600:#1B49B1; --color-surface:#F2F6FF; --shadow-md:0 10px 34px rgba(10,22,52,.12); }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; color:var(--color-text); background:var(--color-bg); font-family:var(--font-sans); font-size:var(--fs-md); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

img{ display:block; max-width:100%; height:auto; }
img[width][height]{ height:auto; }
.ratio-16x9{ aspect-ratio:16/9; } .ratio-4x3{ aspect-ratio:4/3; } .ratio-1x1{ aspect-ratio:1/1; }

a{ color:var(--primary-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.skip-to-content{ position:absolute; left:-9999px; top:auto; }
.skip-to-content:focus{ left:1rem; top:1rem; background:#fff; padding:.5rem .75rem; border-radius:8px; border:1px solid #e5e8ee; }

h1,h2,h3,h4{ font-family:var(--font-display); line-height:var(--lh-tight); margin:0 0 .6em; }
h1{ font-size:var(--fs-h1); letter-spacing:-.02em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
p{ margin:0 0 1em; }
.muted{ color:var(--color-text-muted); }

.container{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:var(--section-y) 0; }
.grid{ display:grid; gap:var(--tile-gap); }
.grid.auto-fit{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }

.card{ background:var(--color-surface); border-radius:var(--radius-lg); padding:var(--tile-pad); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--easing), box-shadow var(--dur-base) var(--easing); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.1rem; border-radius:12px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition: background var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing); }
.btn-primary{ background:var(--primary-700); color:#fff; border-color:var(--primary-700); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-outline{ background:transparent; color:var(--primary-700); border-color:var(--primary-700); }
.btn-outline:hover{ background:var(--color-surface-2); }

.cta-full{ background:linear-gradient(180deg, var(--primary-700) 0%, var(--primary-600) 100%); color:#fff; padding:calc(var(--section-y)*.9) 0; }
.cta-full .btn{ background:#fff; color:var(--primary-700); border-color:#fff; }
.cta-full .btn:hover{ background:#eef2ff; }

.site-header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e8ee; z-index:50; }
.site-header .brand{ display:flex; gap:.5rem; align-items:baseline; padding:.75rem 0; }
.site-header .slogan{ font-size:.9rem; color:#4A5568; }
.main-nav .menu.root{ display:flex; gap:1rem; align-items:center; list-style:none; margin:0; padding:0; }
.main-nav .has-sub{ position:relative; }
.main-nav .submenu{ position:absolute; left:0; top:100%; min-width:240px; background:#fff; border:1px solid #e5e8ee; border-radius:10px; padding:.5rem; list-style:none; display:none; box-shadow:var(--shadow-md); }
.main-nav .has-sub:hover>.submenu{ display:block; }
.nav-toggle{ display:none; background:none; border:1px solid #e5e8ee; padding:.5rem .75rem; border-radius:8px; }
.mobile-menu{ background:#fff; border-top:1px solid #e5e8ee; padding:1rem; }
@media (max-width:768px){ .main-nav .menu.root{ display:none; } .nav-toggle{ display:block; } }

.page-header{ padding:2.8rem 0 1.2rem; }
.page-body{ padding:1.5rem 0 3rem; }

.site-footer{ background:#F5F7FB; padding:2rem 0; border-top:1px solid #e5e8ee; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:1rem; }
@media (max-width:768px){ .footer-grid{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:no-preference){
  [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-base) var(--easing), transform var(--dur-base) var(--easing); }
  [data-reveal].is-visible{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }