:root {
  --ink:#172026;
  --muted:#5d6b76;
  --paper:#f7f8f5;
  --surface:#ffffff;
  --line:#dce3df;
  --main:#2454a6;
  --accent:#24785f;
  --soft:#edf4ff;
  --shadow:0 18px 48px rgba(23,32,38,.10);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:linear-gradient(180deg,#fff 0%,var(--paper) 58%,#fff 100%);
  font-family:"Segoe UI", Arial, sans-serif;
}
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; }
button { cursor:pointer; }

.page { width:min(1120px,100%); margin:0 auto; padding:16px; }
.topbar {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  font-weight:950;
}
.logo, .mini-logo {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:var(--main);
  color:#fff;
  font-weight:950;
}
.logo { width:42px; height:42px; border-radius:10px; }
.mini-logo { width:34px; height:34px; border-radius:8px; font-size:12px; }
.nav { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.btn, .nav a, .nav button {
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  font-weight:850;
}
.btn.primary, .nav button {
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}
.btn:hover, .nav a:hover, .nav button:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(23,32,38,.10); }

.hero {
  min-height:calc(100vh - 112px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.76fr);
  gap:32px;
  align-items:center;
  padding:56px 0 36px;
}
.hero.single {
  grid-template-columns:1fr;
  min-height:auto;
  padding:46px 0 26px;
  text-align:center;
  justify-items:center;
}
.compact-home {
  min-height:calc(100vh - 96px);
  align-content:center;
  padding:34px 0;
}
.compact-home h1 {
  max-width:620px;
  font-size:clamp(36px,6vw,58px);
}
.compact-home .product-grid {
  max-width:940px;
  margin-top:34px;
}
.compact-home .product-card {
  min-height:158px;
  align-content:center;
  border-radius:8px;
}
.quiet-login {
  margin-top:22px;
  color:var(--muted);
  font-weight:850;
  text-decoration:underline;
  text-underline-offset:4px;
}
.eyebrow {
  color:var(--accent);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
h1 {
  max-width:820px;
  margin:10px 0 0;
  font-size:clamp(38px,6vw,74px);
  line-height:1;
  letter-spacing:0;
}
h2 {
  margin:8px 0 0;
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  letter-spacing:0;
}
.lead {
  max-width:660px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:19px;
  line-height:1.5;
}
.hero.single .lead { margin-left:auto; margin-right:auto; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.hero.single .actions { justify-content:center; }

.promise-card {
  position:relative;
  overflow:hidden;
  padding:20px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow);
}
.visual-card {
  min-height:390px;
  display:grid;
  align-content:end;
  border-color:color-mix(in srgb, var(--main) 24%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--soft) 72%, white), #fff 46%, color-mix(in srgb, var(--accent) 10%, white));
}
.visual-card::before {
  content:"";
  position:absolute;
  inset:18px 18px auto auto;
  width:44%;
  height:42%;
  border:1px solid color-mix(in srgb, var(--main) 32%, transparent);
  border-radius:8px;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--main) 12%, white) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.48));
}
.visual-card::after {
  content:"";
  position:absolute;
  left:22px;
  top:24px;
  width:38%;
  height:110px;
  border:1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius:8px;
  background:
    linear-gradient(90deg, var(--main) 0 34%, transparent 34%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--soft) 70%, white));
  box-shadow:0 18px 42px rgba(23,32,38,.10);
}
.visual-kicker {
  position:relative;
  z-index:1;
  width:max-content;
  max-width:100%;
  margin-bottom:14px;
  padding:9px 12px;
  border:1px solid color-mix(in srgb, var(--main) 25%, var(--line));
  border-radius:8px;
  background:#fff;
  color:var(--main);
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
}
.promise-card h3 { margin:0; font-size:22px; }
.promise-list { display:grid; gap:12px; margin-top:18px; }
.promise-item {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfd;
}
.mark {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--soft);
  color:var(--main);
  font-weight:950;
}
.promise-item strong, .product-card strong, .route-card strong { display:block; }
.promise-item p, .product-card p, .route-card p {
  margin:4px 0 0;
  color:var(--muted);
  line-height:1.42;
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin-top:26px;
}
.product-card, .route-card, .panel {
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 30px rgba(23,32,38,.06);
}
.product-card {
  min-height:190px;
  display:grid;
  align-content:space-between;
  gap:18px;
  padding:18px;
  text-align:left;
}
.product-card:hover, .route-card:hover { border-color:var(--main); transform:translateY(-2px); box-shadow:var(--shadow); }
.product-head { display:flex; align-items:center; gap:10px; }
.product-title { font-size:17px; font-weight:950; line-height:1.15; }
.product-card .btn { width:100%; margin-top:12px; }
.u25 { --main:#6542a6; --accent:#8a5d0f; --soft:#f1ebff; }
.e25 { --main:#b74338; --accent:#28666e; --soft:#fff1ed; }
.cambridge { --main:#0f766e; --accent:#3157d5; --soft:#e7fbf7; }
.diplomator { --main:#2454a6; --accent:#24785f; --soft:#edf4ff; }
.product-card.u25 { background:linear-gradient(145deg,#fff,#f6f0ff); }
.product-card.e25 { background:linear-gradient(145deg,#fff,#fff0ec); }
.product-card.cambridge { background:linear-gradient(145deg,#fff,#eafbf8); }
.product-card.diplomator { background:linear-gradient(145deg,#fff,#edf4ff); }

section { padding:30px 0; }
.route-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin-top:18px;
}
.route-card { padding:18px; min-height:145px; }
.route-card .step { color:var(--main); font-size:13px; font-weight:950; text-transform:uppercase; }

.preview {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  gap:18px;
  align-items:start;
  margin-top:18px;
}
.panel { padding:18px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tab {
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:13px;
  font-weight:900;
}
.tab.active { border-color:var(--main); background:var(--main); color:#fff; }
.screen {
  min-height:300px;
  display:grid;
  align-content:start;
  gap:12px;
  padding:18px;
  border:1px solid #cfd8dc;
  border-radius:8px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:var(--shadow);
}
.screen-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.screen-title h3 { margin:0; font-size:25px; }
.pill {
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--soft);
  color:var(--main);
  font-size:12px;
  font-weight:950;
}
.task-list { display:grid; gap:9px; }
.task {
  min-height:58px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.task strong, .task small { display:block; }
.task small { margin-top:3px; color:var(--muted); }
.flow-image {
  width:100%;
  display:block;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow);
}
.note {
  margin-top:14px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius:8px;
  background:color-mix(in srgb, var(--accent) 8%, white);
  color:var(--ink);
  font-weight:800;
}
footer {
  padding:26px 0 8px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.toast {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:20;
  max-width:min(380px,calc(100vw - 36px));
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow);
  font-weight:850;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:.18s ease;
}
.toast.show { opacity:1; transform:translateY(0); }

@media (max-width:920px) {
  .hero, .preview { grid-template-columns:1fr; min-height:auto; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .page { padding:12px; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .nav { justify-content:flex-start; }
  .product-grid { grid-template-columns:1fr; }
  h1 { font-size:38px; }
  .lead { font-size:17px; }
  .visual-card { min-height:340px; }
  .visual-card::before { width:56%; }
  .visual-card::after { width:46%; }
}