:root{
  --copper:#1f4b99;
  --blue:#0b2a4a;
  --bg:#f6f8fb;
  --accent:#2b6cb0;
  --text:#10202f;
  --muted:#5a6a7a;
  --card:#ffffff;
  --border: rgba(16,32,47,0.10);
  --shadow: 0 10px 30px rgba(11,42,74,0.10);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;color:var(--text);background:linear-gradient(180deg, rgba(31,75,153,0.08), rgba(11,42,74,0.06) 55%, rgba(246,248,251,1))}
a{color:inherit;text-decoration:none}
.container{width:min(1150px, 92%); margin:0 auto}
.topbar{background:rgba(255,255,255,0.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:40px;height:40px;border-radius:12px; background: radial-gradient(circle at 30% 30%, rgba(31,75,153,1), rgba(11,42,74,1)); box-shadow: 0 10px 25px rgba(11,42,74,0.18)}
.brand h1{font-size:16px; margin:0; letter-spacing:0.3px}
.brand small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.menu{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.menu a{padding:10px 12px;border-radius:12px; color:var(--blue); font-weight:700; font-size:13px}
.menu a.active, .menu a:hover{background:rgba(11,42,74,0.08)}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg, rgba(31,75,153,1), rgba(11,42,74,1)); color:white; font-weight:800; border:0; cursor:pointer; box-shadow: 0 14px 26px rgba(11,42,74,0.18)}
.hero{padding:44px 0 22px}
.hero-grid{display:grid; grid-template-columns: 1.3fr 0.7fr; gap:24px; align-items:stretch}
@media (max-width: 900px){ .hero-grid{grid-template-columns:1fr} }
.kicker{display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(31,75,153,0.14); border:1px solid rgba(31,75,153,0.25); font-weight:800; color:var(--blue); font-size:12px}
.kicker span{width:9px;height:9px;border-radius:99px;background:var(--copper)}
.hero h2{font-size:38px; line-height:1.12; margin:14px 0 10px; color:var(--blue)}
.hero p{margin:0 0 18px; color:var(--muted); font-size:15.5px; line-height:1.65}
.hero-cards{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px}
@media (max-width: 560px){ .hero-cards{grid-template-columns:1fr} }
.card{background:rgba(255,255,255,0.92); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow)}
.card.pad{padding:18px}
.card h3{margin:0 0 6px; font-size:15px; color:var(--blue)}
.card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.55}
.stat{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-radius: var(--radius); background:rgba(11,42,74,0.06); border:1px solid rgba(11,42,74,0.10)}
.stat strong{font-size:14px; color:var(--blue)}
.stat span{font-size:12px; color:var(--muted)}
.section{padding:18px 0 48px}
.section h2{margin:0 0 14px; font-size:22px; color:var(--blue)}
.grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .grid{grid-template-columns:1fr} }
.product-card{padding:18px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(11,42,74,0.08); border:1px solid rgba(11,42,74,0.12); color:var(--blue); font-size:12px; font-weight:800}
.badge i{width:8px;height:8px;border-radius:99px;background:var(--copper); display:inline-block}
.product-card h3{margin:10px 0 8px; font-size:16px}
.product-card p{margin:0 0 12px}
.product-card .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.product-card .link{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:14px; border:1px solid rgba(11,42,74,0.16); font-weight:800; color:var(--blue); background:rgba(255,255,255,0.65)}
.product-card .link:hover{background:rgba(11,42,74,0.06)}
.searchbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 18px}
.searchbar input{flex:1; min-width:220px; padding:12px 14px; border-radius:14px; border:1px solid rgba(11,42,74,0.18); background:rgba(255,255,255,0.8); outline:none}
.tablewrap{overflow:auto; border-radius: var(--radius); border:1px solid var(--border); background:rgba(255,255,255,0.9)}
table{border-collapse:collapse; width:100%; min-width:720px}
th, td{padding:10px 12px; border-bottom:1px solid rgba(16,32,47,0.08); font-size:13px; vertical-align:top}
th{position:sticky; top:0; background:rgba(246,248,251,0.96); color:var(--blue); text-align:left}
tr:hover td{background:rgba(31,75,153,0.06)}
.footer{margin-top:195px; padding:26px 0 34px; border-top:1px solid var(--border); background:rgba(255,255,255,0.75); backdrop-filter: blur(10px)}
.footer-grid{display:grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap:18px}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }
.footer h4{margin:0 0 10px; color:var(--blue)}
.footer p, .footer a, .footer li{color:var(--muted); font-size:13.5px; line-height:1.6}
.footer ul{margin:0; padding-left:16px}
.tiny{font-size:12px; color:var(--muted)}
.hr{height:1px; background:rgba(16,32,47,0.10); margin:14px 0}
.form{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
@media (max-width: 720px){ .form{grid-template-columns:1fr} }
label{font-size:12px; font-weight:800; color:var(--blue)}
input, textarea{padding:12px 14px; border-radius:14px; border:1px solid rgba(11,42,74,0.18); background:rgba(255,255,255,0.82); outline:none}
textarea{min-height:120px; resize:vertical}
.checkbox{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid rgba(11,42,74,0.18); background:rgba(255,255,255,0.82)}
.notice{padding:12px 14px; border-radius:14px; background:rgba(31,75,153,0.12); border:1px solid rgba(31,75,153,0.22); color:var(--blue); font-weight:700}


/* Premium hover effect for hero cards */
.hero-cards a .card,
.hero-cards a.card,
.hero-cards a > .card{
  transition: all 0.35s ease;
}

.hero-cards a:hover .card,
.hero-cards a:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11,42,74,0.25),
              0 0 0 2px rgba(31,75,153,0.35),
              0 0 25px rgba(31,75,153,0.35);
  border-color: rgba(31,75,153,0.6);
}

/* Make hero cards clickable without breaking the hero grid */
.hero-cards a.hero-cardlink{
  display:block;
  text-decoration:none;
  color:inherit;
}
.hero-cards a.hero-cardlink:focus{
  outline: 2px solid rgba(31,75,153,0.45);
  outline-offset: 3px;
  border-radius: 18px;
}


/* Reinforce hero layout: hero cards 2x2 + quick links on right */
.hero-grid{ display:grid; grid-template-columns: 1.3fr 0.7fr; gap:24px; align-items:stretch; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-cards{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
@media (max-width: 560px){ .hero-cards{ grid-template-columns:1fr; } }


/* Fix right hero card height */
.hero-grid {
  align-items: start !important;
}

.hero-grid .card {
  height: auto !important;
}


/* Align right hero card to start with left hero-cards (same top level) */
.hero-aside{
  margin-top: 195px; /* pushes down to align with the hero cards on the left */
}
@media (max-width: 900px){
  .hero-aside{ margin-top: 0; }
}



/* Blue & White Theme Overrides (content unchanged) */
:root{
  --accent: #1f4b99;
  --accent-2: #2d6cdf;
  --bg: #ffffff;
  --bg-soft: #f5f9ff;
  --card: #ffffff;
  --text: #0b2a4a;
  --muted: #5a6b84;
  --border: rgba(11,42,74,0.12);
}
/* Make primary buttons and highlights blue */
.btn, .btn-primary, .cta, .pill, .badge i{
  background: var(--accent) !important;
}
a.link{ color: var(--accent) !important; }
.hero, body{
  background: linear-gradient(180deg, var(--bg-soft), var(--bg)) !important;
}



/* Ensure header logo shows the white 'R' image */
.logo{ background: none !important; overflow: hidden; }
.logo-img{ display:block; width:42px; height:42px; border-radius:12px; }