/* Everpure client-portal brand system
   Source: Everpure Brand Guidelines (Color, Typography, Logo, Layout & Mesh) */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Primary */
  --orange: #ff7023;

  /* Neutrals */
  --cream: #fff5e3;
  --stone: #d0c8ba;
  --ash: #2d2a27;
  --everglade: #123123;

  /* Secondary (used sparingly, mesh + accents only) */
  --moss: #8fa596;
  --basil: #5a6359;
  --mint: #c5e4cc;

  --radius-cut: 14px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ash);
  font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono{
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

a{ color: inherit; }

/* ---------- Hero ---------- */

.hero{
  position: relative;
  background: var(--everglade);
  color: var(--cream);
  overflow: hidden;
  padding: 56px 32px 120px;
}

.hero-mesh{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
}

.hero-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}

.wordmark{
  height: 28px;
  width: auto;
  display: block;
  margin-bottom: 64px;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 22px;
}

.eyebrow::before{
  content: '';
  width: 8px;
  height: 8px;
  background: var(--orange);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

h1.title{
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  max-width: 15ch;
}

.subtitle{
  font-size: 18px;
  color: var(--stone);
  max-width: 52ch;
  margin: 0;
}

/* ---------- Links section ---------- */

.links{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px 96px;
  position: relative;
  z-index: 2;
}

.links-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: -64px;
}

.doc-card{
  background: var(--cream);
  border: 1px solid rgba(45,42,39,0.12);
  border-radius: var(--radius-cut);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  padding: 32px 28px 28px;
  text-decoration: none;
  color: var(--ash);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 2px rgba(23,19,15,0.05);
}

.doc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(23,19,15,0.12);
}

.doc-card.disabled{
  opacity: 0.55;
  pointer-events: none;
}

.doc-kicker{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--basil);
}

.doc-name{
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.doc-desc{
  font-size: 14px;
  color: #6b615a;
  margin: 0;
  flex: 1;
}

.doc-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
}

.doc-cta svg{ width: 14px; height: 14px; }

/* ---------- Footer ---------- */

.site-footer{
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 32px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(45,42,39,0.12);
  font-size: 12px;
  color: #6b615a;
}

.site-footer .hex{
  width: 16px;
  height: auto;
  opacity: 0.6;
}

@media (max-width: 600px){
  .hero{ padding: 40px 20px 88px; }
  .links{ padding: 0 20px 72px; }
  .site-footer{ flex-direction: column; align-items: flex-start; }
}