/* === Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* Colors */
  --slate-900:#0f172a; --slate-800:#1e293b; --slate-700:#334155;
  --text:#1e293b; --text-2:#64748b;
  --bg:#fafaf9; --bg-soft:#f1f5f9; --panel:#ffffff; --border:#e2e8f0;
  --blue:#3b82f6; --blue-700:#2563eb;
  --cyan:#06b6d4; --amber:#f59e0b; --green:#10b981;

  /* Typo / spacing */
  --font-heading:'Space Grotesk',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --r:12px; --r-lg:16px; --max:1120px;
  --pad:64px; --pad-hero:96px;
  --shadow:0 10px 28px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}

/* Container */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Header (unchanged structure; new look) */
header{position:sticky;top:0;z-index:30;background:rgba(250,250,249,.86);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:86px;padding:0 8px}
.brand{display:flex;align-items:center;gap:14px}
.brand img {
  height: 80px; /* previously 70px */
  width: auto;
  display: block;
  object-fit: contain;
  transform: translateY(2px);
}

.tag{font-size:.82rem;color:var(--text-2)}
.links{display:flex;align-items:center;gap:28px}
.links a{font-weight:600;color:#1f2937;text-decoration:none}
.links a[aria-current="page"]{border-bottom:2px solid var(--text);padding-bottom:4px}
@media (max-width:900px){ .links a:not(.primary){display:none} }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-family:var(--font-heading);font-weight:600;cursor:pointer}
.btn.primary{background:var(--blue);color:#fff;border:none;padding:.875rem 1.75rem;transition:.25s ease;
  box-shadow:0 8px 24px rgba(59,130,246,.22)}
.btn.primary:hover{background:var(--blue-700);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:2px solid var(--border);color:var(--text);padding:.75rem 1.25rem}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(6,182,212,.06)}

/* Dark hero */
.hero{position:relative;padding:var(--pad-hero) 0;color:#fff;background:linear-gradient(135deg,var(--slate-800),var(--slate-700))}
.hero .grid-overlay{
  position:absolute; inset:0; background-image:
  linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:40px 40px; pointer-events:none;
}
.hero h1{font-family:var(--font-heading);font-weight:700;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em;margin:0 0 12px}
.hero p{color:#cbd5e1;max-width:760px;margin:0 auto 22px;font-size:1.1rem}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Fix for ghost button on dark hero sections */
.hero .btn.ghost {
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  font-weight: 600;
}

.hero .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #06b6d4; /* Cyan accent hover */
  color: #06b6d4;
  transition: all 0.3s ease;
}


/* Section + cards */
section{padding:var(--pad) 0}
.eyebrow{font-family:var(--font-heading);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#334155;text-align:center;margin:0 0 10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:980px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .grid-3{grid-template-columns:1fr} }

.card{background:var(--panel);border:1px solid:var(--border);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);position:relative}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--cyan),var(--blue));border-radius:var(--r-lg) 0 0 var(--r-lg)}
.card h3{margin:2px 0 6px;font-family:var(--font-heading);font-weight:600;font-size:1.12rem}
.card p{margin:0;color:var(--text-2)}
.card .more{display:inline-block;margin-top:12px;font-weight:700;color:var(--cyan)}

/* Alternate section bg */
.section-soft{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* Subscribe note */
.note{background:linear-gradient(180deg,#eef6ff,#fff);border:1px solid var(--border);
  border-radius:16px;padding:28px;text-align:center;max-width:880px;margin:0 auto}
.note h3{margin:0 0 8px;font-family:var(--font-heading)}
.note p{margin:0 0 12px;color:var(--text-2)}
.field{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
input[type="email"]{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fff;min-width:300px}
.success{margin-top:10px;color:var(--green);display:none}

/* Footer */
footer{background:var(--slate-900);color:#cbd5e1;padding:28px 0;border-top:1px solid #1e293b}
footer a{color:#cbd5e1}
.footer-tagline{font-family:var(--font-heading);color:var(--cyan);margin-bottom:6px}
.small{color:#94a3b8}
/* Header fixes */
.brand, .brand:link, .brand:visited { color: var(--text); text-decoration: none; }
.brand * { text-decoration: none; }
.brand strong { font-weight: 700; }
.links a { text-decoration: none; color: #1f2937; }
.links a:hover { color: var(--slate-800); }
.tag { color: var(--text-2); }

/* Tighter alignment for nav button */
.links .btn.primary { margin-left: 6px; }
/* Button slightly smaller and more refined */
.btn.primary {
  padding: 8px 16px; /* slightly reduced */
  font-size: 0.95rem;
  border-radius: 8px;
  background: #3b82f6; /* Architect Blue */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.btn.primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
}
/* Remove underline + purple link color on brand */
.brand, .brand:link, .brand:visited, .brand:hover, .brand:active {
  color: var(--text);
  text-decoration: none;
}
.brand * { text-decoration: none; }

/* Nav links (keep clean, no underline) */
.links a { text-decoration: none; color: #1f2937; }
.links a:hover { color: var(--slate-800); }


.btn:hover {
  color: #06b6d4;
  border-color: #06b6d4;
}
.card:hover {
  border-left: 2px solid #06b6d4;
}