:root{
  --ksu-blue:#005BAA;
  --ksu-blue-2:#0B75C9;
  --ink:#111827;
  --navy:#081B33;
  --slate:#53606B;
  --muted:#6B7280;
  --line:#E2E8F0;
  --soft:#F5F8FB;
  --soft-blue:#EAF4FB;
  --card:#FFFFFF;
  --gold:#B78A42;
  --success:#0F766E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ksu-blue); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1180px; margin:0 auto; padding:0 26px}
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(226,232,240,.82);
}
.nav{height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px}
.logo{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.02em; color:var(--navy)}
.logo img{height:42px; width:auto; display:block}
.nav-links{display:flex; align-items:center; gap:25px; font-size:15px; color:var(--slate)}
.nav-links a{color:var(--slate); font-weight:600}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:12px 21px;
  font-weight:760; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:.18s ease;
  box-shadow:none;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--ksu-blue),var(--ksu-blue-2)); color:#fff; box-shadow:0 14px 30px rgba(0,91,170,.22)}
.btn-primary:hover{filter:saturate(1.05) brightness(.98)}
.btn-outline{border-color:#BFD6EA; color:var(--ksu-blue); background:rgba(255,255,255,.78)}
.btn-soft{background:#EAF4FB; color:var(--navy)}
.hero{
  padding:88px 0 82px;
  background:
    radial-gradient(circle at 84% 20%, rgba(11,117,201,.16), transparent 30%),
    linear-gradient(135deg,#fff 0%,#fff 46%,#F3F8FC 46%,#F3F8FC 100%);
  overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:58px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.18em; color:var(--ksu-blue);
  font-weight:820; text-transform:uppercase;
}
.eyebrow:before{
  content:""; display:inline-block; width:34px; height:2px;
  background:linear-gradient(90deg,var(--ksu-blue),transparent);
}
h1{font-size:62px; line-height:1.04; margin:18px 0 24px; letter-spacing:-.052em; color:var(--navy)}
h1 .highlight{color:var(--ksu-blue)}
h2{font-size:40px; line-height:1.18; margin:0 0 18px; letter-spacing:-.03em; color:var(--navy)}
h3{font-size:21px; line-height:1.3; margin:0 0 10px; color:var(--navy)}
.lead{font-size:20px; color:#334155; margin:0 0 16px}
.muted{color:var(--muted)}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:32px 0 24px}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.tag{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(191,214,234,.9);
  border-radius:999px; padding:8px 13px;
  color:#334155; font-size:14px; font-weight:620;
}
.hero-image{position:relative}
.hero-image:before{
  content:""; position:absolute; inset:8% 4% 5% 12%;
  background:linear-gradient(135deg,rgba(0,91,170,.10),rgba(255,255,255,.5));
  border:1px solid rgba(191,214,234,.65);
  border-radius:44px; transform:rotate(-3deg);
}
.hero-image img{
  position:relative; z-index:1;
  width:100%; border-radius:32px; display:block;
  filter:drop-shadow(0 30px 38px rgba(8,27,51,.15));
}
.section{padding:82px 0}
.section-alt{background:linear-gradient(180deg,#F7FAFD 0,#F2F6FA 100%)}
.section-head{max-width:760px; margin-bottom:34px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:30px}
.card{
  background:var(--card); border:1px solid rgba(226,232,240,.95);
  border-radius:26px; padding:30px;
  box-shadow:0 18px 42px rgba(8,27,51,.06);
}
.card-icon{
  width:46px; height:46px; border-radius:16px;
  background:linear-gradient(135deg,#E7F2FB,#fff);
  color:var(--ksu-blue); display:flex; align-items:center; justify-content:center;
  font-weight:900; margin-bottom:18px; border:1px solid #D8EAF8;
}
.product-hero{
  padding:74px 0 48px;
  background:
    radial-gradient(circle at 76% 10%, rgba(11,117,201,.14), transparent 28%),
    linear-gradient(180deg,#F6FAFE 0,#FFFFFF 100%);
}
.product-title{max-width:860px}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 16px 34px rgba(8,27,51,.04)}
table{border-collapse:collapse; width:100%; min-width:640px}
td, th{padding:16px 19px; border-bottom:1px solid var(--line); text-align:left}
th{background:#F1F7FC; color:#24313b; font-weight:800}
tr:last-child td{border-bottom:0}
.notice{
  border:1px solid #EBCB80; background:linear-gradient(180deg,#FFF9EA,#FFFDF7);
  border-radius:24px; padding:27px 30px;
}
.notice strong{color:#664600}
.list{padding-left:1.2em; margin:10px 0 0}
.list li{margin:8px 0}
.image-card img{width:100%; border-radius:22px; border:1px solid var(--line); background:#fff; box-shadow:0 18px 42px rgba(8,27,51,.05)}
.downloads{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.download-item{
  padding:20px; border:1px solid var(--line); border-radius:20px;
  background:#fff; box-shadow:0 12px 26px rgba(8,27,51,.04)
}
.footer{background:#07182C; color:#DCE8EF; padding:52px 0; font-size:14px}
.footer a{color:#DCE8EF}
.footer-grid{display:grid; grid-template-columns:1.4fr .8fr; gap:32px}
.small{font-size:13px}
.lang-note{border-left:4px solid var(--ksu-blue); padding-left:17px; color:#46525E}
.qr-box{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.qr-box img{width:162px; height:162px; border:1px solid var(--line); border-radius:18px; padding:8px; background:#fff}
.spec-pill{
  display:inline-flex; align-items:center; border-radius:999px;
  padding:9px 14px; margin:0 8px 8px 0; border:1px solid #D6E8F7;
  background:#fff; color:#244A64; font-weight:700; font-size:14px;
}
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav{height:auto; padding:16px 0; align-items:flex-start}
  .nav-links{gap:14px; flex-wrap:wrap; justify-content:flex-end}
  .hero{padding:56px 0; background:#fff}
  .hero-grid,.grid-2,.grid-3,.footer-grid{grid-template-columns:1fr}
  h1{font-size:42px}
  h2{font-size:31px}
  .lead{font-size:18px}
  .downloads{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .container{padding:0 20px}
  h1{font-size:37px}
}