:root{
  --bg:#f4efe4;
  --bg-2:#fbf8f1;
  --paper:#fffdf8;
  --ink:#1f2d3d;
  --ink-soft:#44566b;
  --blue:#1a3a5c;
  --gold:#c9a84c;
  --teal:#1a5c4a;
  --red:#8b1a1a;
  --line:#ddd2ba;
  --line-2:#ece2cd;
  --shadow:0 20px 60px rgba(23,32,48,.12);
  --radius-xl:34px;
  --radius-lg:24px;
  --max:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:"Segoe UI", Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(201,168,76,.14), transparent 23%),
    radial-gradient(circle at 85% 8%, rgba(26,92,74,.12), transparent 22%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:blur(14px);
  background:rgba(251,248,241,.84);
  border-bottom:1px solid rgba(26,58,92,.08);
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--blue);
  font-size:.92rem;
}
.brand span{ color:var(--gold); }
.nav{ display:flex; flex-wrap:wrap; gap:10px; }
.nav a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  font-size:.92rem;
  font-weight:700;
}
.page{ max-width:var(--max); margin:0 auto; padding:36px 24px 18px; }
.hero{
  min-height:84vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:center;
  padding-top:34px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(201,168,76,.35);
  color:var(--blue);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero h1{
  margin:18px 0 14px;
  font-size:clamp(3rem, 7vw, 6rem);
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
}
.blue{ color:var(--blue); }
.gold{ color:var(--gold); }
.teal{ color:var(--teal); }
.red{ color:var(--red); }
.hero-sub{
  font-size:clamp(1.1rem, 2.1vw, 1.9rem);
  color:var(--teal);
  font-weight:800;
  max-width:28ch;
}
.hero-lead{
  max-width:62ch;
  line-height:1.72;
  color:var(--ink-soft);
  font-size:1.05rem;
  margin:18px 0 22px;
}
.chip-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line-2);
  color:var(--blue);
  font-weight:800;
  font-size:.88rem;
  box-shadow:var(--shadow);
}
.hero-art{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.glow{
  position:absolute;
  inset:14% 6% auto 6%;
  height:360px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(26,58,92,.16), transparent 54%),
    radial-gradient(circle at 30% 35%, rgba(201,168,76,.2), transparent 40%),
    radial-gradient(circle at 70% 65%, rgba(26,92,74,.12), transparent 42%);
  filter:blur(16px);
}
.hero-orbit{
  position:absolute;
  inset:14% 6% auto 6%;
  height:360px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(26,58,92,.16), transparent 54%),
    radial-gradient(circle at 30% 35%, rgba(201,168,76,.2), transparent 40%),
    radial-gradient(circle at 70% 65%, rgba(26,92,74,.12), transparent 42%);
  filter:blur(16px);
}
.hero-panel{
  position:relative;
  z-index:2;
  width:min(100%, 600px);
  padding:20px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.56));
  border:1px solid rgba(26,58,92,.12);
  box-shadow:var(--shadow);
}
.hero-kpi{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-bottom:16px;
}
.kpi{
  border-radius:18px;
  padding:14px;
  background:#fff;
  border:1px solid var(--line-2);
  text-align:center;
}
.kpi .num{
  display:block;
  font-size:1.35rem;
  font-weight:900;
  color:var(--blue);
}
.kpi .txt{
  display:block;
  margin-top:4px;
  color:var(--ink-soft);
  font-size:.82rem;
  font-weight:700;
}
.hero-stage{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(145deg, #193959, #2a5e89 60%, #163248);
  padding:26px 24px 0;
  min-height:360px;
}
.hero-stage::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
}
.hero-stage img{
  position:relative;
  z-index:2;
  width:100%;
  max-width:360px;
  margin:0 auto;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.26));
}
.hero-badge{
  position:absolute;
  z-index:3;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 24px rgba(12,28,44,.18);
  font-size:.86rem;
  font-weight:800;
  color:var(--blue);
  max-width:210px;
}
.hero-badge.top{ top:22px; right:18px; }
.hero-badge.bottom{ left:18px; bottom:22px; }
.avatar-stage{
  position:relative;
  z-index:2;
  width:min(100%, 600px);
  padding:20px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.56));
  border:1px solid rgba(26,58,92,.12);
  box-shadow:var(--shadow);
}
.avatar-stage img{
  width:100%;
  max-width:360px;
  margin:0 auto;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.26));
}
.section{
  margin:28px auto 54px;
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.6));
  border:1px solid rgba(26,58,92,.08);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.section-header{
  padding:22px 24px 14px;
  border-bottom:1px solid rgba(201,168,76,.18);
  background:linear-gradient(90deg, rgba(26,58,92,.08), rgba(201,168,76,.18));
}
.section-number{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.78rem;
  font-weight:900;
  margin-bottom:8px;
}
.section-title{
  margin:0;
  font-size:clamp(1.8rem, 4vw, 3.1rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:-.04em;
}
.section-title .red{ color:var(--red); }
.section-title .teal{ color:var(--teal); }
.section-title .blue{ color:var(--blue); }
.section-title .gold{ color:var(--gold); }
.section-intro{
  margin:10px 0 0;
  max-width:68ch;
  color:var(--ink-soft);
  line-height:1.65;
  font-size:.98rem;
}
.section-body{ padding:24px; }
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:1.05fr .95fr; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.card, .phase, .price{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:22px;
}
.card{ padding:20px; }
.card h3, .price .model{
  margin:0 0 12px;
  color:var(--blue);
  font-size:1.12rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.card h4{
  margin:14px 0 10px;
  color:var(--teal);
  font-size:.98rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.card p{
  margin:.4rem 0 .8rem;
  line-height:1.6;
  color:var(--ink-soft);
}
ul.clean{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
ul.clean li{
  position:relative;
  padding-left:24px;
  line-height:1.55;
  color:#324255;
}
ul.clean li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--blue));
  transform:translateY(-50%);
}
.agenda-list li{ font-size:1.05rem; font-weight:700; }
.code{
  background:#1f1b17;
  color:#f8f2e6;
  border-radius:16px;
  padding:16px;
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;
  line-height:1.55;
}
.diagram{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fffdf8;
  box-shadow:var(--shadow);
}
.kicker{
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--teal);
  text-transform:uppercase;
  margin-bottom:6px;
}
.table-wrap{ overflow:auto; }
table.compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}
table.compare th, table.compare td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid #efe4cd;
  font-size:.98rem;
}
table.compare th{
  background:#faf3e4;
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.85rem;
}
table.compare tr:last-child td{ border-bottom:none; }
.phase{
  padding:20px;
}
.phase h3{
  margin:0 0 14px;
  font-size:1.12rem;
}
.phase.training h3{ color:var(--red); }
.phase.inference h3{ color:var(--teal); }
.phase-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--line-2);
  font-size:.94rem;
}
.phase-line:last-child{ border-bottom:none; }
.phase-line strong{ color:var(--blue); }
.price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.price{ padding:18px; }
.price .line{ margin-top:8px; color:var(--ink-soft); line-height:1.55; font-weight:700; }
.formula{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  font-size:clamp(1.04rem, 2.3vw, 1.45rem);
  font-weight:900;
  color:var(--blue);
}
.formula span{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:#fff;
}
.footer{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 34px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:#7a6e5e;
  font-size:.9rem;
  font-weight:700;
}
.sticky-rail{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:45;
}
.sticky-rail a{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  color:var(--red);
  font-weight:900;
}
@media (max-width:1080px){
  .hero, .grid-2, .grid-3, .price-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .topbar-inner, .page, .footer{ padding-left:18px; padding-right:18px; }
  .section-body, .section-header{ padding-left:18px; padding-right:18px; }
}