/* =========================================================
   Calido Consulting — Design tokens
   Display: Fraunces (characterful serif, used with restraint)
   Body:    Manrope
   Data:    IBM Plex Mono (stats, figures, tickers)
========================================================= */
:root{
  --navy-900:#081524;
  --navy-800:#0e2038;
  --navy-700:#16304f;
  --navy-600:#1e3a5f;
  --gold-300:#e9cc8f;
  --gold-500:#cb9a44;
  --gold-700:#8c6a33;
  --emerald-300:#6fe3b9;
  --emerald-500:#17a673;
  --paper:#f6f3ea;
  --ink-900:#0b1220;
  --ink-600:#4a5568;
  --line:rgba(233,204,143,0.16);
  --radius:12px;
  --radius-sm:8px;
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,0.55);
  --shadow-sm:0 8px 24px -12px rgba(0,0,0,0.35);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",Arial,Helvetica,sans-serif;
  background:var(--navy-900);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;margin:0 0 .4em;letter-spacing:-0.01em}
.mono{font-family:"IBM Plex Mono",Menlo,monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 6vw}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-300);margin-bottom:14px;display:inline-block}
.gold{color:var(--gold-300)}
.emerald{color:var(--emerald-300)}
:focus-visible{outline:2px solid var(--emerald-300);outline-offset:2px}

@media(prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

/* ---------- Header ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:rgba(6,17,32,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top-inner{max-width:var(--maxw);margin:0 auto;padding:16px 6vw;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:46px;background:#fff;border-radius:8px;padding:4px}
.logo b{font-family:"Fraunces",serif;font-size:19px;letter-spacing:0.01em}
.nav{display:flex;gap:28px;align-items:center;font-size:14.5px}
.nav a{opacity:.86;transition:opacity .15s}
.nav a:hover{opacity:1;color:var(--gold-300)}
.top-actions{display:flex;gap:10px;align-items:center}

/* ticker */
.ticker-bar{background:var(--navy-800);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;position:relative}
.ticker-track{display:inline-flex;gap:48px;padding:9px 0;animation:ticker 32s linear infinite;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--emerald-300)}
.ticker-track span{color:var(--paper);opacity:.65;margin-right:8px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  color:var(--navy-900);border:0;padding:13px 24px;border-radius:var(--radius-sm);
  font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-emerald{background:linear-gradient(90deg,var(--emerald-500),var(--emerald-300));color:var(--navy-900)}
.btn-outline{background:transparent;border:1px solid var(--gold-500);color:var(--gold-300);padding:12px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px}
.btn-outline:hover{background:rgba(203,154,68,0.1)}
.btn-block{width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:88px 6vw 70px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;margin:0 0 20px;color:var(--paper)}
.hero p.lead{font-size:17px;line-height:1.6;color:var(--paper);opacity:.82;max-width:46ch;margin:0 0 26px}
.hero-stats{display:flex;gap:28px;margin:28px 0 30px;flex-wrap:wrap}
.hero-stats div b{display:block;font-family:"Fraunces",serif;font-size:26px;color:var(--gold-300)}
.hero-stats div span{font-size:12.5px;opacity:.72;text-transform:uppercase;letter-spacing:.06em}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.searchbox{
  background:rgba(14,32,56,0.86);
  border:1px solid var(--gold-700);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow-lg);
}
.searchbox h2{font-size:20px;margin-bottom:4px}
.searchbox p.sub{font-size:13px;opacity:.65;margin:0 0 18px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.65;margin-bottom:6px}
.input,select,textarea{
  width:100%;padding:13px 14px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:var(--paper);
  font-family:"Manrope",sans-serif;font-size:14.5px;
}
.input::placeholder,textarea::placeholder{color:rgba(246,243,234,0.4)}
select option{color:#111}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.section-head h2{font-size:clamp(24px,2.6vw,34px)}
.section-head p{opacity:.7;max-width:52ch;font-size:15px}
.on-paper{background:var(--paper);color:var(--ink-900)}
.on-paper .eyebrow{color:var(--gold-700)}

/* category cards */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;transition:border-color .15s, transform .15s;
}
.cat:hover{border-color:var(--gold-500);transform:translateY(-3px)}
.cat .ic{font-size:22px;margin-bottom:10px;display:block}
.cat h3{font-size:16px;margin-bottom:4px}
.cat span{font-size:12.5px;color:var(--gold-300)}

/* listing cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;color:var(--ink-900);border-radius:var(--radius);
  padding:24px;position:relative;border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;
}
.badge{
  position:absolute;top:16px;right:16px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--navy-900);color:var(--gold-300);padding:5px 10px;border-radius:20px;
}
.badge.featured{background:linear-gradient(90deg,var(--gold-700),var(--gold-500));color:#fff}
.badge.premium{background:linear-gradient(90deg,var(--emerald-500),var(--emerald-300));color:var(--navy-900)}
.card h3{font-size:18.5px;margin-bottom:2px;padding-right:70px}
.card .cat-tag{font-size:12.5px;color:var(--gold-700);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.card .meta{font-size:13.5px;color:var(--ink-600);display:flex;gap:14px;margin:6px 0 4px;flex-wrap:wrap}
.card p.desc{font-size:14px;color:var(--ink-600);line-height:1.5;flex:1}
.card .btn{margin-top:10px;align-self:flex-start}

/* promo / cta banner block */
.promo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.promo-inner{position:relative;z-index:1;padding:56px 6vw;display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.promo h2{font-size:clamp(24px,3vw,36px);max-width:16ch}
.promo p{opacity:.82;max-width:42ch;margin-bottom:22px}

/* plans */
.plans-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{
  background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px;display:flex;flex-direction:column;gap:14px;
}
.plan.highlight{border-color:var(--gold-500);background:linear-gradient(180deg,var(--navy-700),var(--navy-800));position:relative}
.plan.highlight::before{content:"Most Popular";position:absolute;top:-13px;left:26px;background:var(--gold-500);color:var(--navy-900);font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;letter-spacing:.04em}
.plan h3{font-size:19px}
.plan .price{font-family:"Fraunces",serif;font-size:34px;color:var(--gold-300)}
.plan .price span{font-family:"Manrope",sans-serif;font-size:13px;color:var(--paper);opacity:.6}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;opacity:.9}
.plan ul li::before{content:"✓ ";color:var(--emerald-300);font-weight:700}

/* testimonials / stats strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
.strip div{text-align:center}
.strip b{font-family:"Fraunces",serif;font-size:32px;color:var(--gold-300);display:block}
.strip span{font-size:12.5px;opacity:.7;text-transform:uppercase;letter-spacing:.05em}

.quote-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:26px;font-size:14.5px;line-height:1.6}
.quote .who{margin-top:14px;font-size:13px;color:var(--gold-300);font-weight:700}

/* forms / panels */
.panel{background:var(--paper);color:var(--ink-900);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
.panel .input, .panel select, .panel textarea{background:#fff;border:1px solid rgba(0,0,0,0.14);color:var(--ink-900)}
.panel .input::placeholder{color:rgba(11,18,32,0.4)}
.alert{background:#e9f9f1;color:#0d6b47;padding:13px 16px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:14px;border:1px solid #bfe9d5}

/* tables */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.08)}
.table{width:100%;border-collapse:collapse;background:#fff;color:var(--ink-900);font-size:14px}
.table th{background:var(--paper);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-600)}
.table th,.table td{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,0.06)}
.status{font-size:11.5px;padding:3px 9px;border-radius:20px;font-weight:700;text-transform:uppercase}
.status.approved{background:#e9f9f1;color:#0d6b47}
.status.pending{background:#fdf2e0;color:#916b0f}

/* stat panels (admin) */
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.stat-panel{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.stat-panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;opacity:.65;margin-bottom:6px}
.stat-panel .n{font-family:"Fraunces",serif;font-size:38px;color:var(--gold-300)}

/* footer */
.footer{background:#050d18;border-top:1px solid var(--line);padding:52px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.footer h4{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-300);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;opacity:.8}
.footer ul a:hover{color:var(--gold-300)}
.footer-bottom{border-top:1px solid var(--line);padding-top:20px;font-size:12.5px;opacity:.55;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* responsive */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr 1fr}
  .plans-row{grid-template-columns:1fr}
  .quote-row{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .promo-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media(max-width:600px){
  .cats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}