/* Typography & base */
:root{
  --bg: #0b1220;               /* deep space blue (header accents) */
  --ink: #0a2540;              /* trust: deep blue for text on light */
  --muted: #5b7083;
  --surface: #f7fafc;          /* off-white background */
  --card: #ffffff;
  --line: #e6edf5;

  --primary: #0a66c2;          /* trustworthy blue */
  --accent: #14b8a6;           /* innovative teal */
  --accent-2: #06b6d4;         /* cyan */
  --focus: #7dd3fc;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(10,37,64,.1);
  --grad: linear-gradient(135deg, var(--primary) 0%, var(--accent) 60%, var(--accent-2) 100%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin-inline:auto;padding:0 20px}
.section{padding:72px 0}
.section--alt{background:#eef5ff}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:10px;z-index:999}


.material-icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 28px;      /* your size */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}



/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.brand__logo{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background: var(--grad); color:#fff; font-size:14px; box-shadow: var(--shadow);
}
.brand__name{letter-spacing:.2px}

.nav__menu ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav__menu a{color:var(--ink);font-weight:500}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__toggle{display:none;background:none;border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:14px;font-weight:600;border:1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  text-decoration:none;
}
.btn--primary{background: var(--grad); color:#fff; box-shadow: var(--shadow)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:#fff}
.w-100{width:100%}

/* Mobile menu */
.mobile-menu{border-top:1px solid var(--line);background:#fff}
.mobile-menu ul{list-style:none;margin:0;padding:12px}
.mobile-menu li{margin:8px 0}
.mobile-menu .divider{height:1px;background:var(--line);margin:8px 0}

/* Hero */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 400px at 85% -20%, rgba(20,184,166,.15), transparent 60%),
    radial-gradient(800px 300px at 10% -10%, rgba(6,182,212,.2), transparent 50%);
}
.hero__inner{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero__title{font-size:clamp(32px, 6vw, 56px);line-height:1.05;margin:0 0 12px}
.hero__subtitle{font-size:clamp(16px, 2.5vw, 20px);color:var(--muted);max-width:60ch;margin:0 0 18px}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 10px}
.hero__trust{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:18px 0 0;padding:0;color:#334155}
.hero__trust li{display:flex;gap:8px;align-items:center}
.hero__media{display:grid;place-items:center}
.hero__card{
  width:min(440px, 100%);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px; box-shadow: var(--shadow);
}
.chip{display:inline-flex;align-items:center;gap:8px;background:#eef5ff;color:#0a3d8f;border:1px solid #d7e6ff;padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px}
.meter{height:10px;background:#f1f5f9;border-radius:999px;margin:14px 0}
.meter__bar{height:100%;background: var(--grad);border-radius:999px}
.hero__stat{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px dashed #e5eaf1}
.hero__stat strong{font-size:18px}

/* Section header */
.section__head{text-align:center;margin-bottom:28px}
.section__title{margin:0 0 6px;font-size:clamp(22px,4vw,32px)}
.section__subtitle{margin:0;color:var(--muted)}

/* Cards */
.grid.cards{
  display:grid;gap:18px;
  grid-template-columns:repeat(4,1fr);
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#cfe1f7}
.card__icon{font-size:22px}
.card__title{margin:8px 0 6px;font-size:18px}
.card__text{margin:0 0 12px;color:#425466}
.card__link{font-weight:600}

/* Motto */
.motto{display:grid;place-items:center;text-align:center;padding:8px 0}
.motto__quote{font-size:clamp(20px,3.2vw,28px);font-weight:700;margin:0}
.motto__mark{color:var(--accent)}
.motto__tag{color:var(--muted);margin:.5rem 0 0}

/* Footer */
.site-footer{margin-top:60px;border-top:1px solid var(--line);background:#fff}
.footer__grid{
  display:grid;gap:28px;grid-template-columns:2fr repeat(3,1fr);padding:36px 0;
}
.footer__links h4{margin:0 0 10px}
.footer__links ul{list-style:none;margin:0;padding:0}
.footer__links li{margin:8px 0}
.footer__tag{color:var(--muted);margin:.5rem 0 0}
.footer__bottom{
  border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  gap:18px;padding:14px 0 26px;color:#5c6b7a
}
.footer__bottom .legal{display:flex;gap:16px;list-style:none;margin:0;padding:0}

/* Responsive */
@media (max-width: 1024px){
  .grid.cards{grid-template-columns:repeat(2,1fr)}
  .hero__inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .nav__menu{display:none}
  .nav__toggle{display:inline-flex}
  .footer__grid{grid-template-columns:1fr 1fr}
  .grid.cards{grid-template-columns:1fr}
}

/* Accessibility focus */
:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Utility */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}