:root {
  --font: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ink: #101318;
  --muted: #68717d;
  --line: rgba(16, 19, 24, .12);
  --paper: #fff;
  --soft: #f6f7f8;
}

* { box-sizing: border-box; letter-spacing: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; font-family: var(--font); color: var(--ink); background: var(--paper); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin-top: 0; }
p { color: var(--muted); line-height: 1.75; }

.real-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 6.2vw;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.real-nav.dark { color: #fff; background: rgba(3, 9, 25, .72); border-bottom-color: rgba(255, 255, 255, .1); }
.real-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: var(--accent, #174b8f); font-weight: 900; }
.brand-mark.hex { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.brand-main { display: block; font-size: 20px; line-height: 1; }
.brand-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1; text-transform: uppercase; }
.dark .brand-sub { color: rgba(255, 255, 255, .62); }
.real-links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 700; }
.real-links a { opacity: .88; }
.real-links a:hover { opacity: 1; color: var(--accent, #174b8f); }
.real-nav.dark .real-links a:hover { color: var(--accent-2, #7c5cff); }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 24px; color: #fff; background: var(--accent, #174b8f); font-size: 14px; font-weight: 800; }
.nav-cta.dark { background: #080808; }

.hero-full {
  position: relative;
  min-height: calc(100svh - 76px);
  padding: 92px 8vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero) center / cover no-repeat;
}
.hero-full::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--shade, rgba(0,0,0,.55)), transparent 68%); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; color: var(--hero-text, #fff); }
.hero-copy .kicker { margin-bottom: 18px; color: var(--kicker, currentColor); font-size: 15px; font-weight: 800; text-transform: uppercase; opacity: .9; }
.hero-copy h1 { margin-bottom: 22px; font-size: 82px; line-height: .98; font-weight: 900; }
.hero-copy .serif { font-family: var(--serif); font-weight: 400; letter-spacing: .03em; }
.hero-copy .lead { max-width: 620px; color: var(--hero-muted, rgba(255,255,255,.86)); font-size: 22px; line-height: 1.6; overflow-wrap: break-word; }
.hero-copy > p:not(.lead):not(.kicker) { max-width: 620px; color: var(--hero-muted, rgba(255,255,255,.86)); }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.real-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 1px solid transparent; color: #fff; background: var(--accent, #174b8f); font-weight: 800; cursor: pointer; transition: transform .22s ease, opacity .22s ease; }
.real-btn:hover { transform: translateY(-2px); }
.real-btn.ghost { color: inherit; background: transparent; border-color: currentColor; }
.hero-points { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; color: var(--hero-muted, rgba(255,255,255,.84)); font-weight: 700; }

.section { padding: 82px 7vw; }
.section-tight { padding: 58px 7vw; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-title h2 { margin-bottom: 8px; font-size: 42px; line-height: 1.15; }
.section-title span { color: var(--accent, #174b8f); font-size: 13px; font-weight: 800; text-transform: uppercase; }

.image-grid { display: grid; gap: 18px; }
.cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { background: #fff; border: 1px solid var(--line); overflow: hidden; }
.tile-img { min-height: 210px; background: var(--img) center / cover no-repeat; }
.tile-body { padding: 18px 20px; }
.tile-body h3 { margin-bottom: 8px; font-size: 18px; }
.tile-body p { margin-bottom: 0; font-size: 14px; }

.split-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-row .photo { min-height: 430px; background: var(--img) center / cover no-repeat; }
.split-row .copy { display: flex; flex-direction: column; justify-content: center; padding: 70px 8vw; background: #fff; }
.split-row .copy h2 { font-size: 34px; }

.stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); color: #fff; background: var(--accent, #0a3f78); }
.stat { display: flex; gap: 16px; align-items: center; padding: 30px 28px; border-right: 1px solid rgba(255,255,255,.22); }
.stat strong { display: block; font-size: 32px; line-height: 1; }
.stat span { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: 12px; text-transform: uppercase; }
.stat .ico { width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.72); display: grid; place-items: center; font-weight: 900; }

.dark-page { color: #f7fbff; background: #040b1c; }
.dark-page p { color: #b8c3d8; }
.dark-page .section { background: #050d22; }
.dark-page .tile { background: linear-gradient(145deg, rgba(29,38,88,.8), rgba(10,19,50,.88)); border-color: rgba(129, 145, 255, .18); }
.dark-page .section-title span { color: #8c73ff; }

.dashboard { display: grid; grid-template-columns: .85fr 1.15fr; gap: 22px; padding: 28px; border: 1px solid rgba(129,145,255,.18); background: linear-gradient(145deg, rgba(17,27,66,.94), rgba(5,13,34,.96)); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.dash-card { min-height: 142px; padding: 18px; border: 1px solid rgba(129,145,255,.16); background: rgba(255,255,255,.035); }
.line-chart { height: 54px; margin-top: 20px; background: linear-gradient(135deg, transparent 45%, #316bff 46%, #26e0a8 52%, transparent 54%); border-bottom: 1px solid rgba(255,255,255,.14); }
.bar-chart { height: 70px; display: flex; align-items: end; gap: 8px; margin-top: 16px; }
.bar-chart i { flex: 1; background: linear-gradient(#7c5cff, #1b8cff); min-height: 20%; }
.donut { width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(#2de3a4 0 38%, #2f6bff 38% 72%, #7c5cff 72% 100%); margin-top: 12px; position: relative; }
.donut::after { content:""; position:absolute; inset:18px; border-radius:50%; background:#0b1534; }

.world-map { min-height: 260px; background: radial-gradient(circle at 25% 42%, #2478ff 0 5px, transparent 6px), radial-gradient(circle at 48% 35%, #2478ff 0 5px, transparent 6px), radial-gradient(circle at 67% 50%, #2478ff 0 5px, transparent 6px), radial-gradient(circle at 78% 38%, #2478ff 0 5px, transparent 6px), linear-gradient(135deg, #eef5ff, #fff); border: 1px solid #dbe7f5; position: relative; overflow: hidden; }
.world-map::before { content:""; position:absolute; inset:28px; background-image: radial-gradient(#9bb7d9 1px, transparent 1px); background-size: 12px 12px; opacity:.55; mask-image: radial-gradient(ellipse at center, #000 34%, transparent 70%); }

.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: center; }
.flow-step { text-align: center; padding: 24px 14px; border: 1px solid var(--line); background:#fff; }
.flow-step b { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 14px; border: 1px solid #b9cbe2; color: var(--accent); border-radius: 50%; font-size: 22px; }

.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.client-logo { min-height: 70px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; color: #173a66; font-size: 24px; font-weight: 900; }

.footer-real { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 44px; padding: 54px 7vw 34px; color: #cbd3dd; background: #08101b; }
.footer-real h3, .footer-real h4 { color: #fff; margin-bottom: 14px; }
.footer-real p, .footer-real a { color: #cbd3dd; font-size: 14px; line-height: 1.9; }
.footer-bottom { grid-column: 1 / -1; display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:#8f9aaa; font-size:13px; }

.fashion { --accent:#080808; --shade:rgba(0,0,0,.34); --hero:url("/assets/templates/images/real-fashion-hero.webp"); }
.fashion .real-nav { position:absolute; width:100%; background:transparent; border:0; color:#111; }
.fashion .brand-main { font-family:var(--serif); letter-spacing:.08em; }
.fashion .hero-copy h1 { font-family:var(--serif); font-size:112px; font-weight:400; letter-spacing:.06em; }
.fashion .collection-card .tile-img { min-height: 250px; background-position:center top; }

.trade { --accent:#0e4a89; --hero:url("/assets/templates/images/real-trade-hero.webp"); --shade:rgba(5,20,39,.72); }
.factory { --accent:#0756a6; --hero:url("/assets/templates/images/real-factory-hero.webp"); --shade:rgba(4,20,38,.72); }
.factory .hero-copy { max-width: 980px; }
.factory .hero-copy h1 { font-size: 66px; }
.tech { --accent:#6f58ff; --accent-2:#7c5cff; --hero:url("/assets/templates/images/real-tech-hero.webp"); --shade:rgba(2,7,22,.78); }
.tech .hero-copy h1 { font-size: 76px; }
.education { --accent:#2f8f42; --hero:url("/assets/templates/images/real-education-hero.webp"); --shade:rgba(255,255,255,.82); --hero-text:#1d252a; --hero-muted:#4e5b56; --kicker:#2f8f42; }
.education .real-btn { background:#2f8f42; }
.course-icon { width:54px; height:54px; margin:-46px 0 14px 16px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); box-shadow:0 12px 30px rgba(0,0,0,.14); position:relative; z-index:2; font-weight:900; }
.teacher-card .tile-img { min-height: 230px; background-position:center 26%; }

.reveal { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
.js-ready .reveal { opacity: 0; transform: translateY(18px); }
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1080px) {
  .real-links { display:none; }
  .hero-copy h1 { font-size:62px; }
  .fashion .hero-copy h1 { font-size:82px; }
  .factory .hero-copy h1, .tech .hero-copy h1 { font-size:58px; }
  .section-title h2 { font-size:36px; }
  .cards-5, .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .split-row, .dashboard { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .real-nav { min-height:64px; padding:0 20px; }
  .brand-mark { width:34px; height:34px; }
  .brand-main { font-size:17px; }
  .brand-sub { font-size:10px; }
  .nav-cta { display:none; }
  .hero-full { min-height: calc(100svh - 64px); padding: 78px 20px 46px; align-items:flex-start; background-position:center; }
  .hero-full::before { background: linear-gradient(180deg, var(--shade, rgba(0,0,0,.55)), rgba(0,0,0,.08) 88%); }
  .education.hero-full::before, .education .hero-full::before { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.52)); }
  .hero-copy h1 { font-size:42px; }
  .fashion .hero-copy h1 { font-size:52px; }
  .factory .hero-copy h1, .tech .hero-copy h1 { font-size:38px; }
  .hero-copy .lead { font-size:18px; }
  .education .hero-copy { max-width:330px; }
  .education .hero-copy .lead { max-width:315px; font-size:16px; }
  .hero-points { gap:12px; font-size:13px; }
  .section, .section-tight { padding:52px 20px; }
  .section-title { display:block; }
  .cards-5, .cards-4, .cards-3, .flow, .logo-row, .footer-real { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:1fr; }
  .stat { padding:20px; }
  .split-row .photo { min-height:260px; }
  .split-row .copy { padding:42px 20px; }
  .dash-grid { grid-template-columns:1fr; }
  .footer-bottom { display:block; }
}