:root {
  --bg: #f5f8fc;
  --surface: rgba(255,255,255,.88);
  --surface-solid: #ffffff;
  --text: #10213d;
  --muted: #5d6d89;
  --line: rgba(16, 33, 61, 0.08);
  --blue: #0078ff;
  --cyan: #29c6ff;
  --gold: #ffb302;
  --orange: #ff8a00;
  --green: #12b981;
  --purple: #7c3aed;
  --shadow: 0 20px 50px rgba(15, 32, 67, 0.10);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(41,198,255,0.10), transparent 28%),
    radial-gradient(circle at top right, rgba(255,179,2,0.12), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.section { padding: 88px 0; }
.section-sm { padding: 64px 0; }
.section-title { font-size: clamp(28px, 4vw, 48px); margin: 0 0 14px; line-height: 1.08; }
.section-subtitle { margin: 0 0 24px; color: var(--muted); max-width: 760px; font-size: 17px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,0.75); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.6); box-shadow:var(--shadow); color:var(--blue); font-weight:700; margin-bottom:20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; padding:14px 24px; font-weight:700; cursor:pointer; transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow:0 18px 30px rgba(0,120,255,0.22); }
.btn-secondary { background:linear-gradient(135deg, #fff3d1, #ffe3aa); color:#7b5400; box-shadow:0 18px 30px rgba(255,179,2,0.18); }
.main-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(22px); background:rgba(248,251,255,0.82); border-bottom:1px solid rgba(16,33,61,0.06); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:92px; position:relative; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { height:60px; width:auto; }
.brand-copy { display:flex; flex-direction:column; }
.brand-copy strong { font-size:18px; }
.brand-copy span { font-size:12px; color:var(--muted); }
.main-nav { display:flex; align-items:center; gap:10px; }
.main-nav > a, .mega-trigger { padding:12px 16px; border-radius:14px; color:var(--muted); font-weight:600; background:transparent; border:0; font:inherit; cursor:pointer; }
.main-nav > a.active, .main-nav > a:hover, .nav-item.active .mega-trigger, .mega-trigger:hover { color:var(--text); background:rgba(255,255,255,.76); }
.nav-item { position:relative; }
.mega-menu { position:absolute; top:calc(100% + 16px); left:0; min-width:700px; display:none; grid-template-columns:1fr 1fr; gap:18px; padding:22px; border-radius:24px; background:rgba(255,255,255,.98); box-shadow:var(--shadow); border:1px solid var(--line); }
.nav-item:hover .mega-menu { display:grid; }
.mega-col { display:grid; gap:12px; }
.mega-title { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.mega-col a { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:18px; background:#f8fbff; }
.mega-col small { display:block; color:var(--muted); margin-top:4px; }
.nav-cta { margin-left:10px; }
.menu-toggle { display:none; border:0; background:white; border-radius:16px; padding:12px 14px; box-shadow:var(--shadow); }
.hero { padding:50px 0 24px; }
.hero-slider { position:relative; min-height:620px; border-radius:34px; overflow:hidden; box-shadow:0 32px 60px rgba(10,34,70,.16); }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease; background-size:cover; background-position:center; }
.hero-slide.active { opacity:1; visibility:visible; }
.hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(110deg, rgba(9,23,47,.86), rgba(9,23,47,.42) 55%, rgba(9,23,47,.15)); }
.hero-slide-inner { position:relative; z-index:1; min-height:620px; display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:center; padding:46px; }
.hero-copy-light h1 { font-size:clamp(42px, 6vw, 72px); color:white; line-height:.96; margin:0 0 18px; letter-spacing:-.04em; }
.hero-copy-light p { font-size:18px; color:rgba(255,255,255,.86); margin:0 0 28px; max-width:700px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero-floating-card { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow); backdrop-filter:blur(18px); border-radius:30px; padding:24px; align-self:end; }
.hero-floating-card .meta-row { color:#dce8ff; }
.hero-slider-dots { position:absolute; left:46px; bottom:30px; display:flex; gap:10px; z-index:2; }
.slider-dot { width:14px; height:14px; border-radius:50%; border:0; background:rgba(255,255,255,.4); cursor:pointer; }
.slider-dot.active { background:white; }
.hero-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.mini-stat, .stat-card, .info-card, .article-card, .tool-card, .admin-card, .contact-card, .service-card, .timeline-card { background:rgba(255,255,255,.94); border-radius:22px; box-shadow:var(--shadow); border:1px solid var(--line); }
.mini-stat { padding:18px; }
.mini-stat strong { display:block; font-size:28px; }
.muted { color:var(--muted); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.stat-card { padding:24px; position:relative; overflow:hidden; }
.stat-card::before { content:''; position:absolute; inset:auto -30px -30px auto; width:120px; height:120px; border-radius:50%; background:rgba(41,198,255,.12); }
.stat-card h3 { margin:10px 0 4px; font-size:38px; }
.stat-card i, .info-card i, .service-card i, .tool-card i { font-size:22px; }
.info-card, .tool-card, .service-card, .contact-card, .timeline-card { padding:28px; }
.news-ticker { display:flex; align-items:center; gap:18px; padding:16px 18px; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:var(--shadow); overflow:hidden; }
.ticker-label { white-space:nowrap; font-weight:800; color:var(--blue); }
.ticker-track { display:flex; gap:18px; animation:ticker 28s linear infinite; min-width:max-content; }
.ticker-item { display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:18px; background:#f8fbff; }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.article-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { overflow:hidden; }
.article-card img { width:100%; height:240px; object-fit:cover; }
.article-content { padding:24px; }
.badge { display:inline-flex; padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700; background:linear-gradient(135deg, rgba(0,120,255,.12), rgba(41,198,255,.12)); color:var(--blue); }
.article-content h3 { font-size:22px; margin:16px 0 10px; line-height:1.2; }
.article-content p { color:var(--muted); margin:0 0 18px; }
.meta-row { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:14px; }
.article-carousel { position:relative; }
.article-carousel-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px, 380px); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.article-card-wide { scroll-snap-align:start; }
.carousel-arrow { position:absolute; top:40%; transform:translateY(-50%); z-index:2; width:48px; height:48px; border-radius:50%; border:0; box-shadow:var(--shadow); background:white; cursor:pointer; }
.carousel-arrow.prev { left:-12px; }
.carousel-arrow.next { right:-12px; }
.managed-section { padding:34px; border-radius:30px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.section-dark .managed-section { background:linear-gradient(135deg, #10213d, #0f6de8); color:white; }
.section-dark .managed-section .section-subtitle, .section-dark .managed-section .managed-section-body { color:rgba(255,255,255,.85); }
.highlight-banner { padding:34px; border-radius:30px; background:linear-gradient(135deg, #13284b, #0f6de8 60%, #27c4ff); color:white; box-shadow:0 24px 48px rgba(0,80,160,.22); }
.highlight-banner p { color:rgba(255,255,255,.88); }
.pricing-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.kpi-box { padding:22px; border-radius:24px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); }
.kpi-box strong { font-size:34px; display:block; }
.page-hero { padding:64px 0 26px; }
.glass-card { background:var(--surface); border:1px solid rgba(255,255,255,.8); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(18px); padding:34px; }
.filters { display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 32px; }
.filters input, .filters select, .form-control, textarea { width:100%; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.9); font:inherit; color:var(--text); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
textarea { min-height:180px; resize:vertical; }
.data-dashboard { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; align-items:stretch; }
.chart-card { padding:26px; border-radius:28px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); border:1px solid var(--line); }
.table-card { padding:0; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th, td { padding:16px 18px; text-align:left; border-bottom:1px solid rgba(16,33,61,0.06); }
th { background:rgba(15,109,232,.05); color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.callout { padding:28px; border-radius:24px; background:linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,255,255,.62)); border:1px solid rgba(255,255,255,.8); box-shadow:var(--shadow); }
.article-hero { display:grid; grid-template-columns:1fr .95fr; gap:24px; align-items:center; }
.article-featured-image { border-radius:28px; overflow:hidden; box-shadow:var(--shadow); }
.article-detail { background:rgba(255,255,255,.92); padding:34px; border-radius:28px; box-shadow:var(--shadow); }
.article-body { line-height:1.8; color:#31415e; font-size:17px; }
.file-box { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-radius:18px; background:rgba(15,109,232,.06); }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; }
.main-footer { margin-top:54px; padding:56px 0 26px; background:#0f1f3e; color:rgba(255,255,255,.9); }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr .9fr; gap:22px; }
.footer-grid ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.footer-grid h4 { margin:0 0 16px; }
.footer-logo { max-height:64px; margin-bottom:16px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.hero-bullets, .check-list { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.hero-bullets li, .check-list li { display:flex; gap:12px; align-items:flex-start; }
.hero-bullets i, .check-list i { margin-top:3px; color:var(--gold); }
.admin-layout { min-height:100vh; display:grid; grid-template-columns:320px 1fr; background:linear-gradient(180deg,#f6fbff,#eef5fb); }
.admin-sidebar { background:linear-gradient(180deg, #0d1931, #10213d); color:white; padding:28px; }
.admin-sidebar img { max-width:180px; }
.admin-brand-wrap { display:grid; gap:12px; }
.admin-brand-wrap p { margin:0; color:rgba(255,255,255,.72); }
.admin-sidebar nav { display:grid; gap:10px; margin-top:26px; }
.admin-sidebar nav a { padding:14px 16px; border-radius:16px; color:rgba(255,255,255,.8); }
.admin-sidebar nav a.active, .admin-sidebar nav a:hover { background:rgba(255,255,255,.12); color:white; }
.admin-main { padding:28px; }
.admin-topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.admin-top-actions { display:flex; gap:12px; flex-wrap:wrap; }
.admin-card { padding:24px; }
.kpi-premium { background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(242,248,255,.95)); }
.dashboard-shortcuts .shortcut-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.shortcut-card { display:flex; gap:12px; align-items:center; padding:18px; border-radius:20px; color:white; font-weight:700; }
.color-blue { background:linear-gradient(135deg, #0f6de8, #27c4ff); }
.color-gold { background:linear-gradient(135deg, #ffb302, #ff8a00); }
.color-green { background:linear-gradient(135deg, #10b981, #34d399); }
.color-purple { background:linear-gradient(135deg, #7c3aed, #a78bfa); }
.flash { padding:16px 18px; border-radius:16px; margin-bottom:18px; font-weight:600; }
.flash-success { background:rgba(52,199,89,.12); color:#0f8a3c; }
.flash-error { background:rgba(255,59,48,.12); color:#bd1f18; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(500px,100%); padding:34px; border-radius:30px; background:rgba(255,255,255,.95); box-shadow:var(--shadow); border:1px solid var(--line); }
.premium-login { background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,248,255,.95)); }
.action-stack { display:flex; gap:8px; flex-wrap:wrap; }
.action-link { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; font-weight:700; font-size:13px; }
.action-edit { background:rgba(0,120,255,.12); color:var(--blue); }
.action-delete { background:rgba(255,59,48,.12); color:#c62828; }
.editor-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.editor-toolbar button { border:0; padding:10px 14px; border-radius:999px; background:#edf5ff; color:var(--blue); cursor:pointer; font-weight:700; }
.editor-preview { margin-top:12px; padding:18px; border-radius:18px; background:#f8fbff; border:1px dashed rgba(0,120,255,.2); color:#31415e; }
.editor-preview h4 { margin:0 0 8px; }
@media (max-width: 1100px) {
  .hero-slide-inner, .data-dashboard, .article-hero, .contact-grid, .grid-4, .grid-3, .grid-2, .article-grid, .footer-grid, .pricing-strip, .admin-layout, .form-grid { grid-template-columns:1fr 1fr; }
  .admin-layout { grid-template-columns:1fr; }
  .mega-menu { min-width:580px; }
}
@media (max-width: 860px) {
  .menu-toggle { display:block; }
  .main-nav { position:absolute; left:16px; right:16px; top:88px; display:none; flex-direction:column; align-items:stretch; background:rgba(255,255,255,.96); border-radius:24px; box-shadow:var(--shadow); padding:16px; }
  .main-nav.open { display:flex; }
  .nav-item:hover .mega-menu { display:none; }
  .mega-menu { position:static; min-width:unset; display:grid; }
  .hero-slide-inner, .data-dashboard, .article-hero, .contact-grid, .grid-4, .grid-3, .grid-2, .article-grid, .footer-grid, .pricing-strip, .form-grid, .hero-mini-stats, .dashboard-shortcuts .shortcut-grid { grid-template-columns:1fr; }
  .hero-slider { min-height:700px; }
  .hero-slide-inner { min-height:700px; padding:28px; }
  .section { padding:70px 0; }
  .carousel-arrow { display:none; }
}

.stack-list { display:grid; gap:14px; }

.brand-logo-only img { height: 64px; }
.media-block { margin-top: 20px; }
.video-embed { position: relative; padding-top: 56.25%; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: #0f1f3e; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.local-video { width: 100%; border-radius: 24px; box-shadow: var(--shadow); background: #000; }
.gallery-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.gallery-item { display:block; border-radius:22px; overflow:hidden; box-shadow: var(--shadow); }
.gallery-item img { width:100%; height:220px; object-fit:cover; transition:transform .35s ease; }
.gallery-item:hover img { transform:scale(1.04); }
.application-form label { display:block; margin-bottom:8px; font-weight:700; }
.stack-list .file-box strong + p { max-width: 420px; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns:1fr; }
}


.doc-preview-stack { gap: 22px; }
.doc-preview-card { padding: 20px; border-radius: 26px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); border: 1px solid rgba(15,109,232,.08); }
.doc-preview-frame { margin-top: 16px; min-height: 420px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(15,109,232,.10); background: #f7fbff; }
.doc-preview-frame iframe { width: 100%; min-height: 420px; border: 0; }
.doc-preview-frame img { width: 100%; height: 420px; object-fit: cover; display: block; }
.doc-preview-fallback { margin-top: 16px; min-height: 220px; border-radius: 22px; border: 1px dashed rgba(15,109,232,.24); padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(135deg, rgba(15,109,232,.05), rgba(39,196,255,.08)); }
.image-preview-frame { background: #fff; }
.training-hero-card { position: relative; overflow: hidden; }
.training-hero-card::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(39,196,255,.18), transparent 70%); top: -60px; right: -40px; pointer-events: none; }
.premium-mini-card { min-height: 160px; }
.admin-section-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.resource-hub-card { position:relative; overflow:hidden; min-height:260px; }
.resource-hub-card::after { content:''; position:absolute; inset:auto -40px -40px auto; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(39,196,255,.16), transparent 70%); }
.resource-hub-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.resource-hub-total { position:absolute; right:24px; bottom:20px; font-size:44px; color:rgba(15,109,232,.18); }
@media (max-width: 860px) {
  .doc-preview-fallback, .admin-section-header { flex-direction: column; align-items: flex-start; }
  .doc-preview-frame, .doc-preview-frame iframe, .doc-preview-frame img { min-height: 280px; height: 280px; }
}