:root{--navy:#0E1E3C;--teal:#1CB5E0;--bg:#F8FAFC;--card:#fff;--ink:#0b1320}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:16px}
.header{position:sticky;top:0;z-index:50;background:rgba(14,30,60,.9);backdrop-filter:saturate(160%) blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .logo{width:20px;height:20px;border-radius:4px;background:linear-gradient(135deg,var(--teal),#6ee7ff)}
.nav a{color:#DAE6FF;margin-left:16px;font-weight:600}
.cta{background:var(--teal);color:#001f2a;padding:9px 14px;border-radius:999px;font-weight:800}
.hero{background:linear-gradient(180deg,#0E1E3C 0%,#14284F 80%);color:#eaf4ff;border-bottom:1px solid rgba(255,255,255,.08)}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;padding:38px 16px}
.hero h1{font-size:clamp(28px,3.3vw,44px);line-height:1.15;margin:8px 0 10px}
.panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px}
.badge{display:inline-block;background:rgba(28,181,224,.15);color:#a7eaff;border:1px solid rgba(28,181,224,.35);padding:6px 10px;border-radius:999px;font-weight:700}
.section{padding:30px 16px;border-bottom:1px solid #e9eef6}
h2{font-size:1.6rem;margin:.2rem 0 .6rem}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid #e6eef6;border-radius:14px;padding:16px;box-shadow:0 3px 18px rgba(2,12,26,.04)}
.footer{background:#0E1E3C;color:#b8c6dd;padding:26px 16px}
.footer a{color:#9edaff}
.fab{position:fixed;bottom:16px;right:16px;background:var(--teal);color:#001f2a;font-weight:900;padding:14px 18px;border-radius:999px;box-shadow:0 18px 30px rgba(0,0,0,.18)}
.breadcrumb{font-size:.9rem;color:#475569;margin-bottom:8px}
@media(max-width:930px){.hero .wrap{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}

/* === Mobile/Tablet Optimization Enhancements === */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
body{ font-size:clamp(15px, 1.6vw, 17px) }
h1{ font-size:clamp(26px, 4.5vw, 40px); line-height:1.2 }
h2{ font-size:clamp(20px, 3.2vw, 28px); line-height:1.25 }
h3{ font-size:clamp(17px, 2.4vw, 22px); line-height:1.3 }

/* Increase tap targets */
a, button{ min-height:44px }
.cta{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; border-radius:14px }
.nav a{ padding:10px 8px; display:inline-block }

/* Nav wrapping on small screens */
.nav{ flex-wrap:wrap; gap:8px }
.nav > div:last-child{ display:flex; flex-wrap:wrap; gap:6px }

/* Responsive containers */
.container{ padding-left:18px; padding-right:18px }
.grid{ grid-template-columns:repeat(3,1fr) }
@media (max-width:1024px){
  .hero .wrap{ grid-template-columns:1fr }
  .grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr }
  .panel{ padding:16px }
  .card{ padding:16px }
}

/* Floating action button safe areas */
.fab{ bottom:calc(16px + env(safe-area-inset-bottom)); right:calc(16px + env(safe-area-inset-right)) }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important }
}

/* Better focus styles for accessibility */
:focus-visible{ outline:3px solid rgba(28,181,224,.6); outline-offset:2px; border-radius:8px }

/* Improve contrast on small screens */
@media (max-width:480px){
  .hero{ background:linear-gradient(180deg,#0E1E3C 0%, #0f2446 100%) }
  .nav a{ color:#eef5ff }
}

/* Prevent layout shifts by defining common media elements */
img{ max-width:100%; height:auto; display:block }
iframe{ max-width:100% }