: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}
}


/* V0.5 refinements */
.logo span{
  font-size:26px;
  font-weight:900;
  letter-spacing:.045em;
  color:var(--navy);
}
.nav-links a.btn-primary,
.btn-primary,
a.btn-primary,
button.btn-primary{
  color:#FFFFFF !important;
}
.download-item.download-link{
  display:block;
  color:var(--ink);
  text-decoration:none;
}
.download-item.download-link:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(8,27,51,.08);
  border-color:#BFD6EA;
  text-decoration:none;
}
.download-action{
  display:inline-block;
  margin-top:10px;
  font-weight:800;
  color:var(--ksu-blue);
}
.compatibility-card{
  grid-column:1 / -1;
}
.compatibility-brands{
  margin-top:10px;
  font-size:17px;
  line-height:1.7;
  color:#334155;
}
.gallery-card{
  position:relative;
}
.gallery-main{
  width:100%;
  border-radius:32px;
  display:block;
  filter:drop-shadow(0 30px 38px rgba(8,27,51,.15));
}
.hero-image.gallery-card:before{
  display:none;
}
.gallery-thumbs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}
.gallery-thumb{
  width:86px;
  height:58px;
  border:1px solid #D8E6F2;
  border-radius:14px;
  background:#fff;
  padding:4px;
  cursor:pointer;
  opacity:.72;
  transition:.18s ease;
}
.gallery-thumb:hover,
.gallery-thumb.active{
  opacity:1;
  border-color:var(--ksu-blue);
  box-shadow:0 10px 22px rgba(0,91,170,.14);
}
.gallery-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.service-card{
  background:linear-gradient(135deg,#FFFFFF 0%,#F3F8FC 100%);
}
@media (max-width:860px){
  .logo span{font-size:20px}
  .gallery-thumb{width:72px;height:52px}
}


/* ===== V1.1 Professional Responsive Edition ===== */
:root{
  --mobile-gutter:20px;
}
body{
  overflow-x:hidden;
}
.header{
  transition:box-shadow .2s ease, background .2s ease;
}
.header.scrolled{
  box-shadow:0 8px 28px rgba(8,27,51,.08);
}
.nav{
  position:relative;
}
.logo{
  min-width:0;
  flex-shrink:1;
}
.logo img{
  flex:0 0 auto;
}
.logo span{
  white-space:nowrap;
  line-height:1;
}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #D8E6F2;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  width:21px;
  height:2px;
  background:var(--navy);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.gallery-wrap{
  position:relative;
}
.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #D8E6F2;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-size:25px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(8,27,51,.10);
}
.gallery-arrow.prev{left:10px}
.gallery-arrow.next{right:10px}
.gallery-main{
  transition:opacity .18s ease, transform .18s ease;
}
.gallery-main.changing{
  opacity:.35;
  transform:scale(.985);
}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.revealed{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
  .reveal{opacity:1; transform:none}
}

/* Tablet and mobile */
@media (max-width:900px){
  .container{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
  .header{position:sticky;top:0}
  .nav{
    min-height:70px;
    height:auto;
    padding:12px 0;
    align-items:center;
  }
  .logo{
    gap:10px;
    max-width:calc(100% - 58px);
  }
  .logo img{
    height:35px;
    width:auto;
  }
  .logo span{
    font-size:clamp(14px,4.2vw,19px);
    letter-spacing:.015em;
  }
  .nav-toggle{
    display:flex;
    margin-left:auto;
    flex:0 0 44px;
  }
  .nav-links{
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:0 0 20px 20px;
    padding:10px 14px 16px;
    box-shadow:0 18px 40px rgba(8,27,51,.14);
  }
  .nav-links.open{display:flex}
  .nav-links a{
    padding:13px 14px;
    border-bottom:1px solid #EEF2F6;
    font-size:16px;
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links .btn{
    margin-top:10px;
    width:100%;
    padding:13px 18px;
    border-radius:14px;
  }
  body.menu-open{overflow:hidden}

  .hero,
  .product-hero{
    padding:42px 0 54px;
    background:
      radial-gradient(circle at 90% 2%, rgba(11,117,201,.12), transparent 28%),
      linear-gradient(180deg,#F7FBFE 0,#fff 100%);
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .hero-grid > div:first-child{
    order:2;
  }
  .hero-grid > .hero-image{
    order:1;
  }
  .hero h1,
  .product-hero h1{
    font-size:clamp(34px,10vw,48px);
    line-height:1.06;
    letter-spacing:-.045em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .hero .lead,
  .product-hero .lead{
    font-size:18px;
    line-height:1.55;
  }
  .hero-image{
    max-width:460px;
    margin:0 auto;
    width:100%;
  }
  .hero-image img,
  .gallery-main{
    max-height:340px;
    object-fit:contain;
  }
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .hero-actions .btn{
    width:100%;
    min-height:48px;
    border-radius:14px;
  }
  .tags{
    gap:8px;
  }
  .tag{
    font-size:13px;
    padding:7px 10px;
  }
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid-3,.grid-2,.footer-grid{
    grid-template-columns:1fr;
  }
  .section{padding:58px 0}
  .section-head{margin-bottom:26px}
  h2{font-size:clamp(28px,7.8vw,36px)}
  .downloads{grid-template-columns:1fr}
  .image-card img{
    max-height:none;
  }
  .gallery-thumbs{
    overflow-x:auto;
    justify-content:flex-start;
    padding:4px 2px 8px;
    scrollbar-width:none;
  }
  .gallery-thumbs::-webkit-scrollbar{display:none}
  .gallery-thumb{
    flex:0 0 76px;
    width:76px;
    height:54px;
  }
  .qr-box{
    align-items:flex-start;
  }
  .table-wrap{
    border-radius:18px;
  }
  td,th{
    padding:13px 14px;
  }
}

/* Narrow phones */
@media (max-width:520px){
  :root{--mobile-gutter:16px}
  .nav{min-height:64px}
  .logo img{height:31px}
  .logo span{font-size:14px}
  .nav-toggle{width:40px;height:40px;flex-basis:40px}
  .hero,
  .product-hero{padding:30px 0 44px}
  .eyebrow{
    font-size:10px;
    letter-spacing:.14em;
  }
  .hero h1,
  .product-hero h1{
    font-size:clamp(32px,10.2vw,42px);
  }
  .lead{font-size:17px}
  .grid-4{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .grid-4 .card{
    padding:20px 16px;
    border-radius:20px;
  }
  .grid-4 .card h3{
    font-size:17px;
  }
  .grid-4 .card p{
    font-size:14px;
  }
  .spec-pill{
    width:calc(50% - 8px);
    justify-content:center;
    text-align:center;
    margin:0 4px 8px 0;
  }
  .gallery-arrow{
    width:36px;
    height:36px;
    font-size:22px;
  }
  .card{
    padding:22px;
    border-radius:20px;
  }
  .footer{
    padding:38px 0;
  }
}

/* Very narrow phones */
@media (max-width:370px){
  .logo span{font-size:12.5px}
  .logo img{height:28px}
  .hero h1,.product-hero h1{font-size:31px}
  .grid-4{grid-template-columns:1fr}
}