/*
Theme Name: Esin Platform
Theme URI: https://esin.club/
Author: Esin.Club
Description: Public product and school theme for the Esin platform.
Version: 1.0.0
Text Domain: esin-platform
*/

:root {
  --esin-navy: #071b35;
  --esin-navy-2: #0b2748;
  --esin-blue: #1769aa;
  --esin-blue-2: #0f79c5;
  --esin-sky: #e8f3fb;
  --esin-paper: #f5f7fa;
  --esin-white: #fff;
  --esin-ink: #172638;
  --esin-muted: #5b6b7f;
  --esin-line: #d6dee8;
  --esin-green: #178354;
  --esin-amber: #e5a82d;
  --esin-radius: 4px;
  --esin-shadow: 0 18px 48px rgba(7, 27, 53, .10);
  --esin-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--esin-paper);
  color: var(--esin-ink);
  font: 15px/1.58 "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.admin-bar .site-header { top: 32px; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
img { max-width: 100%; height: auto; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(7, 27, 53, .97);
  color: var(--esin-white);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(10px);
}
.header-inner,
.wrap {
  width: min(var(--esin-width), calc(100% - 48px));
  margin-inline: auto;
}
.header-inner {
  display: flex;
  align-items: center;
  min-height: 72px;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  color: var(--esin-white);
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--esin-blue-2);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 800;
}
.brand span span { color: #7bc4ed; }
.main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.main-nav a {
  color: #dce9f5;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s ease;
}
.main-nav a:hover, .main-nav a:focus-visible { color: #fff; }
.main-nav .nav-login {
  min-height: 38px;
  padding: 8px 15px;
  color: #fff;
  border: 1px solid #5da9d8;
  border-radius: var(--esin-radius);
}
.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  background: transparent;
  color: #fff;
  border: 0;
}
.nav-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: currentColor; }

.site-main { overflow: hidden; }
.hero {
  position: relative;
  min-height: 650px;
  color: var(--esin-white);
  background:
    radial-gradient(circle at 86% 24%, rgba(23, 121, 197, .32), transparent 28%),
    linear-gradient(124deg, var(--esin-navy) 0%, #09203d 62%, #0b2d51 100%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(123, 196, 237, .22);
  transform: rotate(18deg);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  gap: 72px;
  align-items: center;
  min-height: 650px;
  padding: 82px 0;
}
.eyebrow {
  margin: 0 0 13px;
  color: var(--esin-blue-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero .eyebrow { color: #7bc4ed; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 860px;
  margin-bottom: 23px;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.01;
  letter-spacing: -.047em;
}
h2 {
  margin-bottom: 26px;
  font-size: clamp(29px, 3.3vw, 44px);
  line-height: 1.1;
  letter-spacing: -.035em;
}
h3 { line-height: 1.22; letter-spacing: -.018em; }
.hero-lead {
  max-width: 760px;
  margin-bottom: 0;
  color: #c7d6e5;
  font-size: clamp(17px, 1.7vw, 20px);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 21px;
  font-weight: 750;
  text-decoration: none;
  border: 1px solid var(--esin-blue-2);
  border-radius: var(--esin-radius);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-1px); }
.button-primary { background: var(--esin-blue-2); color: #fff; }
.button-primary:hover { background: #1185d4; }
.button-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.button-light { background: #fff; color: var(--esin-navy); border-color: #fff; }
.button-outline { color: var(--esin-blue); background: transparent; }
.hero-note { margin: 15px 0 0; color: #91a7bb; font-size: 12px; }

.system-card {
  position: relative;
  padding: 29px;
  color: var(--esin-ink);
  background: #fff;
  box-shadow: 22px 22px 0 rgba(23, 105, 170, .32);
}
.system-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--esin-blue-2);
}
.system-label { color: var(--esin-muted); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.system-card h3 { margin: 8px 0 22px; font-size: 23px; }
.system-flow { display: grid; gap: 0; }
.system-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--esin-line); }
.system-step:last-child { border-bottom: 1px solid var(--esin-line); }
.system-step b { display: grid; place-items: center; width: 28px; height: 28px; color: var(--esin-blue); background: var(--esin-sky); border-radius: 50%; }
.system-step strong { display: block; }
.system-step small { color: var(--esin-muted); }

.section { padding: 88px 0; }
.section-white { background: var(--esin-white); }
.section-sky { background: var(--esin-sky); }
.section-dark { background: var(--esin-navy); color: #fff; }
.section-dark .eyebrow { color: #7bc4ed; }
.section-intro { max-width: 790px; margin-bottom: 42px; }
.section-intro > p:not(.eyebrow) { color: var(--esin-muted); font-size: 17px; }
.section-dark .section-intro > p:not(.eyebrow) { color: #b9c9da; }
.text-on-dark { color: #b9c9da; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -46px;
  position: relative;
  z-index: 3;
  background: #fff;
  box-shadow: var(--esin-shadow);
}
.metric { min-height: 126px; padding: 25px; border-right: 1px solid var(--esin-line); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; margin-bottom: 4px; color: var(--esin-navy); font-size: 19px; }
.metric span { color: var(--esin-muted); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--esin-line); border: 1px solid var(--esin-line); }
.feature-card { min-height: 230px; padding: 29px; background: #fff; }
.feature-index { color: var(--esin-blue); font-size: 12px; font-weight: 850; }
.feature-card h3 { margin: 35px 0 10px; font-size: 21px; }
.feature-card p { margin-bottom: 0; color: var(--esin-muted); }

.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 78px; align-items: start; }
.process-list { margin: 0; padding: 0; list-style: none; counter-reset: process; }
.process-list li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--esin-line); counter-increment: process; }
.process-list li:last-child { border-bottom: 1px solid var(--esin-line); }
.process-list li::before { content: counter(process, decimal-leading-zero); color: var(--esin-blue); font-weight: 850; }
.process-list strong { display: block; font-size: 17px; }
.process-list p { margin: 4px 0 0; color: var(--esin-muted); }
.section-dark .process-list li { border-color: rgba(255,255,255,.16); }
.section-dark .process-list p { color: #b9c9da; }
.section-dark .process-list li::before { color: #7bc4ed; }

.level-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--esin-line); border-left: 1px solid var(--esin-line); }
.level-card { display: flex; flex-direction: column; min-height: 405px; padding: 27px; background: #fff; border-right: 1px solid var(--esin-line); border-bottom: 1px solid var(--esin-line); }
.level-card.is-featured { color: #fff; background: var(--esin-navy); }
.level-no { color: var(--esin-blue); font-size: 12px; font-weight: 850; }
.is-featured .level-no { color: #7bc4ed; }
.level-card h3 { margin: 31px 0 7px; font-size: 23px; }
.level-price { margin-bottom: 24px; font-size: 25px; font-weight: 800; }
.level-price small { color: var(--esin-muted); font-size: 12px; font-weight: 550; }
.level-card p { color: var(--esin-muted); }
.is-featured p, .is-featured .level-price small { color: #b9c9da; }
.level-result { margin-top: auto; padding-top: 22px; color: var(--esin-green); font-size: 13px; font-weight: 750; border-top: 1px solid var(--esin-line); }
.is-featured .level-result { color: #7bc4ed; border-color: rgba(255,255,255,.16); }

.track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.track-card { padding: 31px; background: #fff; border: 1px solid var(--esin-line); }
.track-age { display: inline-block; padding: 4px 8px; color: var(--esin-blue); background: var(--esin-sky); font-size: 12px; font-weight: 800; }
.track-card h3 { margin: 24px 0 6px; font-size: 24px; }
.track-hours { color: var(--esin-navy); font-size: 18px; font-weight: 750; }
.track-card p { margin: 16px 0 0; color: var(--esin-muted); }

.stage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--esin-line); border: 1px solid var(--esin-line); }
.stage { display: grid; grid-template-columns: 48px 1fr; gap: 18px; min-height: 150px; padding: 25px; background: #fff; }
.stage > b { color: var(--esin-blue); font-size: 13px; }
.stage h3 { margin: 0 0 7px; font-size: 19px; }
.stage p { margin: 0; color: var(--esin-muted); }

.comparison { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--esin-line); }
.comparison th, .comparison td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--esin-line); }
.comparison th { color: var(--esin-navy); background: var(--esin-sky); font-size: 13px; }
.comparison td:first-child { font-weight: 750; }
.comparison tr:last-child td { border-bottom: 0; }

.callout { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 46px; background: var(--esin-blue); color: #fff; }
.callout h2 { margin-bottom: 8px; }
.callout p { margin: 0; color: #d8ecf8; font-size: 17px; }
.callout .actions { margin: 0; }

.truth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.truth-card { padding: 28px; border: 1px solid rgba(255,255,255,.18); }
.truth-card b { color: #7bc4ed; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.truth-card h3 { margin: 20px 0 9px; }
.truth-card p { margin: 0; color: #b9c9da; }

.prose { max-width: 860px; padding: 74px 0; }
.prose h1 { color: var(--esin-navy); font-size: clamp(36px, 5vw, 58px); }
.prose h2 { margin-top: 48px; font-size: 31px; }
.prose p, .prose li { color: #394b5f; }
.prose a { color: var(--esin-blue); }

.site-footer { padding: 54px 0 30px; background: #06172d; color: #b8c8d8; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 60px; padding-bottom: 42px; }
.footer-brand { color: #fff; }
.footer-copy { max-width: 520px; margin-top: 16px; }
.footer-title { display: block; margin-bottom: 13px; color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.footer-links { display: grid; gap: 9px; }
.footer-links a { color: #b8c8d8; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-bottom { padding-top: 22px; color: #8297aa; font-size: 12px; border-top: 1px solid rgba(255,255,255,.12); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .system-card { max-width: 560px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--esin-line); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .level-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 35px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body.admin-bar .site-header { top: 46px; }
  .header-inner, .wrap { width: min(var(--esin-width), calc(100% - 30px)); }
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    align-items: stretch;
    padding: 18px 15px 24px;
    background: var(--esin-navy);
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .main-nav.is-open { display: grid; gap: 0; }
  .main-nav a { padding: 11px 8px; }
  .main-nav .nav-login { margin-top: 8px; text-align: center; }
  .hero, .hero-grid { min-height: auto; }
  .hero-grid { gap: 48px; padding: 64px 0 82px; }
  .hero::after { display: none; }
  .section { padding: 68px 0; }
  .feature-grid, .track-grid, .truth-grid, .stage-grid { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; padding: 34px; }
  .callout .actions { justify-content: flex-start; }
  .comparison-wrap { overflow-x: auto; }
}

@media (max-width: 540px) {
  h1 { font-size: 40px; }
  .actions .button { width: 100%; }
  .system-card { padding: 23px; box-shadow: 12px 12px 0 rgba(23,105,170,.32); }
  .metric-strip, .feature-grid, .level-grid { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--esin-line); }
  .metric:last-child { border-bottom: 0; }
  .level-card { min-height: 350px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid > div:first-child { grid-column: auto; }
}