/* SkyDibia.com — Design System (v1)
   Principles: calm, structured, engineered, accessible, fast. */

/* 1) CSS Reset (light) */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;min-height:100vh}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* 2) Tokens */
:root{
  --navy:#0B1F3A;
  --navy-2:#0E2A52;
  --ink:#0b1220;
  --muted:#556274;
  --muted-2:#6b778a;
  --line:rgba(11,18,32,.12);
  --bg:#ffffff;
  --bg-2:#f6f8fb;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(11,18,32,.10);
  --radius:18px;
  --radius-2:12px;
  --pad:clamp(16px, 3vw, 28px);
  --max:1120px;
  --focus:#3b82f6; /* accessible focus */
  --good:#0f766e;
  --warn:#a16207;
  --bad:#b42318;

  /* Type */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --h1: clamp(34px, 4.2vw, 54px);
  --h2: clamp(26px, 3vw, 36px);
  --h3: clamp(18px, 2.2vw, 22px);
  --p: 16px;
  --lh: 1.55;
}

/* 3) Base */
body{
  font-family:var(--font);
  font-size:var(--p);
  line-height:var(--lh);
  color:var(--ink);
  background:var(--bg);
}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(46px, 6vw, 88px) 0}
.section--tight{padding:clamp(28px, 4.2vw, 54px) 0}
.eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--navy)}
.lead{font-size:18px;color:var(--muted);max-width:68ch}
hr.sep{border:none;border-top:1px solid var(--line);margin:24px 0}
.small{font-size:13px;color:var(--muted)}
.mono{font-family:var(--mono)}

/* 4) Layout */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 860px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* 5) Header */
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{left:16px;top:12px;width:auto;height:auto;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;z-index:9999}

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, var(--navy), var(--navy-2));
  box-shadow:0 8px 18px rgba(11,31,58,.18);
}
.brand .mark svg{width:22px;height:22px;color:#fff}
.brand .name{font-weight:700;letter-spacing:.02em}
.brand .tag{font-size:12px;color:var(--muted);margin-top:2px}

.nav-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;padding:10px 10px;border-radius:10px}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--bg-2)}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);
  text-decoration:none;font-weight:600;font-size:14px;
}
.btn--primary{background:var(--navy);border-color:transparent;color:#fff}
.btn--primary:hover{background:var(--navy-2)}
.btn--ghost:hover{background:var(--bg-2)}
.btn--small{padding:9px 12px;border-radius:10px}

.menu-btn{display:none}
@media (max-width: 860px){
  .menu-btn{display:inline-flex}
  .nav-links{display:none}
  .nav-links.is-open{display:flex;flex-direction:column;align-items:stretch;gap:6px;position:absolute;left:var(--pad);right:var(--pad);top:62px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow);max-height:70vh;overflow:auto}
  .nav-links a{padding:12px}
}

/* 6) Hero */
.hero{
  padding:clamp(36px, 5vw, 72px) 0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(11,31,58,.10), transparent 55%),
              radial-gradient(800px 420px at 90% 0%, rgba(14,42,82,.08), transparent 60%);
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero h1{font-size:var(--h1);line-height:1.08;margin:8px 0 12px;letter-spacing:-.02em}
.hero p{margin:0;color:var(--muted);font-size:18px;max-width:70ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.hero-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  padding:20px;
}
.kpis{display:grid;gap:12px}
.kpi{display:flex;gap:12px;align-items:flex-start}
.kpi .icon{width:36px;height:36px;border-radius:12px;background:var(--bg-2);display:grid;place-items:center;border:1px solid var(--line)}
.kpi strong{display:block}
.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr}
}

/* 7) Cards */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:0 8px 24px rgba(11,18,32,.06);
  padding:18px;
}
.card h3{margin:0 0 8px;font-size:var(--h3)}
.card p{margin:0;color:var(--muted)}
.card .meta{margin-top:12px;color:var(--muted-2);font-size:13px}

/* 8) Pricing */
.pricing{display:grid;gap:16px}
.price-card{padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:0 8px 24px rgba(11,18,32,.06)}
.price-card .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(11,31,58,.08);color:var(--navy);border:1px solid rgba(11,31,58,.18)}
.price{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px}
.price small{font-size:14px;font-weight:600;color:var(--muted)}
.ul{margin:0;padding-left:18px;color:var(--muted)}
.ul li{margin:8px 0}
.price-card .actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.price-card.highlight{border-color:rgba(11,31,58,.28);box-shadow:0 18px 42px rgba(11,31,58,.14)}

/* 9) Forms */
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.label{font-weight:650;font-size:13px}
.input, .select, .textarea{
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  padding:12px 12px;outline:none;
}
.textarea{min-height:120px;resize:vertical}
.help{font-size:12px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 860px){.form-row{grid-template-columns:1fr}}

/* 10) Footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:16px;padding:28px 0}
.footer-grid a{color:var(--muted);text-decoration:none;font-size:14px}
.footer-grid a:hover{color:var(--ink)}
.footer-bottom{border-top:1px solid var(--line);padding:14px 0;color:var(--muted);font-size:13px}
@media (max-width: 860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:14px}
}

/* 11) Utilities */
.pill{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.pill svg{width:16px;height:16px}
.note{border-left:4px solid rgba(11,31,58,.35);background:rgba(11,31,58,.06);padding:12px 14px;border-radius:12px;color:var(--muted)}
.callout{display:flex;gap:12px;align-items:flex-start}
.callout .icon{width:28px;height:28px;border-radius:10px;background:rgba(11,31,58,.10);display:grid;place-items:center}


/* Accessibility Enhancements */
:focus {
  outline: 3px solid #0B1F3A;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0B1F3A;
  color: #ffffff;
  padding: 8px 16px;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

/* Ensure consistent button contrast */
button, .btn {
  background-color: #0B1F3A;
  color: #ffffff;
}

button:hover, .btn:hover {
  opacity: 0.9;
}


/* ===== Header Alignment Fix ===== */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

header .logo {
  display: flex;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

nav a {
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    gap: 16px;
  }
}


/* ===== HEADER STRUCTURE FIX ===== */

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-header .brand .name {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.site-header .brand .tag {
  font-size: 12px;
  color: #475569;
  margin-top: 4px;
}

/* Ensure nav alignment remains clean */
.navbar {
  align-items: center;
}



/* ===== Header Decongestion + Institutional Layout ===== */

/* Keep nav tight and prevent awkward wrapping on desktop */
.nav-links{flex-wrap:nowrap;gap:10px}
.nav-links a{font-size:13px;padding:8px 8px}

/* Subscribe link inside the menu (hidden on desktop) */
.nav-links .nav-subscribe{display:none}

/* Slightly tighten header vertical rhythm */
.navbar{padding:12px 0}

/* Mobile: show only Menu in the CTA area; move Subscribe into dropdown */
@media (max-width: 860px){
  .nav-cta a.btn{display:none} /* hides Subscribe button in header */
  .nav-links{display:none}
  .nav-links.is-open{display:flex}
  .nav-links .nav-subscribe{
    display:inline-flex;
    justify-content:center;
    margin-top:6px;
    background:var(--navy);
    color:#fff;
    border-radius:12px;
    padding:12px 14px;
  }
  .nav-links .nav-subscribe:hover{background:var(--navy-2)}
}

/* Very small screens: reduce brand footprint */
@media (max-width: 420px){
  .brand{gap:10px}
  .brand .mark{width:34px;height:34px;border-radius:12px}
  .brand .tag{display:none} /* remove tagline to prevent 2-3 line congestion */
}

/* ===== Header tagline constraint ===== */
.brand .tag{
  max-width: 14ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}