/* ==================================
   Excellyte — Global Dark Theme
   ================================== */

/* Color tokens */
:root{
  --bg:#0f172a;             /* page background */
  --card:#111827;           /* base card surface */
  --card-contrast:#0b1223;  /* deeper card (e.g., Founder) */
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#22d3ee;
  --brand-2:#34d399;
  --accent:#f97316;         /* orange CTA */
  --ok:#10b981;
  --err:#ef4444;
  --line:rgba(148,163,184,.18);

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Base / reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(80vw 80vh at 10% -10%, rgba(34,211,238,.18), transparent 50%),
    radial-gradient(60vw 60vh at 110% 10%, rgba(52,211,153,.18), transparent 50%),
    var(--bg);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin-inline:auto;padding:20px}

/* ==================================
   Header (rounded floating card)
   Use: <header><div class="wrap nav">...</div></header>
   ================================== */
header{
  display:grid;
  grid-template-columns: auto 1fr;  /* brand | buttons */
  align-items:center;
  gap:18px;

  max-width:1120px;
  margin:20px auto;
  padding:16px 20px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.98));
  border:1px solid var(--line);
  box-shadow:var(--shadow);

  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
}

/* let children of .wrap.nav participate in header grid */
.nav{display:contents}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .logo{width:56px;height:auto;border-radius:12px;box-shadow:var(--shadow)}
.brand-title{font-weight:800;letter-spacing:-.2px;font-size:22px}
.brand-tag{color:var(--muted);font-size:14px;margin-top:2px}

/* ---------- Buttons (fixed colors + sizes) ---------- */
.cta-row{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

.btn{
  appearance:none;border:0;border-radius:999px;cursor:pointer;
  padding:12px 18px;font-weight:800;letter-spacing:.2px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:120px;white-space:nowrap;box-shadow:var(--shadow);
  background:#fff;color:#06131b;            /* default: white button, dark text */
  transition:transform .02s ease-in, filter .15s ease;
  font-size:15px; line-height:1.1;
}
.btn:active{transform:translateY(1px)}

/* Solid color buttons: always white text */
.btn.orange{background:var(--accent);color:#fff}
.btn.blue,.btn-blue{background:#1E3A8A;color:#fff}
.btn.blue:hover,.btn-blue:hover{filter:brightness(.95)}

/* Outline/secondary on dark bg: readable */
.btn-outline{
  background:transparent;border:1px solid var(--line);
  color:#dbeafe;
}
.btn-outline:hover{filter:brightness(1.1)}

.btn.secondary{
  background:transparent;border:1px solid var(--line);
  color:var(--text);
}

/* Smaller Gratitude button text without changing HTML */
.cta-row a.btn.orange{font-size:14px; padding:11px 16px}

/* Optional global size utility if you ever want it:
.btn--sm{font-size:13.5px;padding:10px 14px}
*/

/* Mobile: stack with spacing */
@media (max-width:720px){
  header{grid-template-columns:1fr}
  .cta-row{justify-content:stretch;gap:10px}
  .btn{flex:1 1 48%}
}

/* ==================================
   Sections / Cards / Hero
   ================================== */
.hero{padding:56px 0;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.2;margin:8px 0 14px}
.muted{color:var(--muted)}
.kicker{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(34,211,238,.12);color:#8be9ff;border:1px solid rgba(34,211,238,.3);
  font-weight:700;font-size:12px;letter-spacing:.3px
}

section{padding:48px 0}

.card{
  background:linear-gradient(180deg, rgba(17,24,39,.70), rgba(17,24,39,.88));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
}

.eyebrow{color:var(--muted);margin:0 0 6px;font-weight:600}
.title{
  font-size:clamp(28px,4vw,48px);line-height:1.05;margin:0 0 10px;font-weight:800;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{color:var(--muted);margin:0 0 18px}
.list{list-style:none;margin:0 0 18px;padding:0}
.list li{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  margin-top:7px;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(34,211,238,.12), 0 0 24px rgba(52,211,153,.25);
}

/* Steps & panels */
.steps{display:grid;gap:12px}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:linear-gradient(180deg, rgba(17,24,39,.6), rgba(17,24,39,.8));border:1px solid var(--line);border-radius:12px;padding:16px}
.step strong{display:block;margin-bottom:4px}
.panel{border:1px solid var(--line);border-radius:16px;padding:22px;background:linear-gradient(180deg, rgba(17,24,39,.6), rgba(17,24,39,.85));box-shadow:var(--shadow)}

/* ==================================
   Forms
   ================================== */
form{display:grid;gap:12px}
label{font-size:14px;color:var(--muted)}
.input{
  width:100%;padding:14px;border-radius:12px;border:1px solid rgba(229,231,235,.12);
  background:var(--card-contrast);color:var(--text);outline:none;
}
.input::placeholder{color:#94a3b8}
.input:focus{border-color:rgba(34,211,238,.5);box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.honeypot{position:absolute;left:-9999px;top:-9999px}
.submit{
  margin-top:2px;padding:14px 18px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#04101a;font-weight:900;letter-spacing:.25px;box-shadow:var(--shadow);
}
.note{font-size:12px;color:var(--muted)}

/* ==================================
   Founder section — higher contrast
   ================================== */
/* Add 'story-card' to your Founder section: <section class="card story story-card"> */
.story-card{
  background:
    linear-gradient(180deg, rgba(2,6,23,.88), rgba(2,6,23,.94)),
    var(--card-contrast);
  border:1px solid rgba(148,163,184,.28); /* brighter edge */
}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;margin-top:24px}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}}
.story h3{margin:0 0 10px;font-size:clamp(22px,3vw,28px);font-weight:800}
.story p{margin:0 0 12px;color:var(--text)}
.story .pull{font-weight:700;color:#d1fae5}
.story .quote{border-left:4px solid var(--brand);padding-left:14px;margin:10px 0;color:#dbeafe}

/* ==================================
   FAQ — clickable cards with chevrons
   ================================== */
.faq-kicker{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:rgba(34,211,238,.12);color:#8be9ff;border:1px solid rgba(34,211,238,.3);
  font-weight:700;font-size:12px;letter-spacing:.3px;margin-bottom:8px;
}
details{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(17,24,39,.72);
  transition:border-color .2s, background .2s;
  margin:10px 0;
}
summary{
  list-style:none;cursor:pointer;font-weight:800;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"▾";font-size:18px;line-height:1;transform:rotate(0deg);
  transition:transform .2s ease;opacity:.9;
}
details[open] summary::after{transform:rotate(-180deg)}
details:hover{background:rgba(17,24,39,.82)}
summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}
details>p,details>div{padding:0 16px 14px;color:var(--muted)}

/* ==================================
   Mockup image size (site-wide)
   ================================== */
.mock{
  width:100%;
  max-width:320px;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  object-fit:contain;
  display:block;
}
@media (min-width:1100px){ .mock{max-width:360px} }

/* ==================================
   Footer
   ================================== */
.footer{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:14px}

/* ==================================
   Utilities
   ================================== */
.mt-16{margin-top:16px}
.mt-14{margin-top:14px}
.h3-tight{margin:14px 0 6px;font-weight:800}
.max-820{max-width:820px}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ============================
   Button text & body CTA fixes
   (Place at end of styles.css)
   ============================ */

/* Universal button typography + sizing */
.btn{
  font-size: 15px;        /* consistent size */
  line-height: 1.3;       /* prevent clipping */
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: none;   /* no forced ALL CAPS */
  padding: 12px 18px;     /* balanced hit target */
  border-radius: 12px;    /* matches site rounding */
}

/* Solid buttons: always white text on dark bg */
.btn.orange{ background: var(--accent); color: #fff !important; }
.btn.blue, .btn-blue{ background:#1E3A8A; color:#fff !important; }
.btn.blue:hover, .btn-blue:hover,
.btn.orange:hover{ filter: brightness(.95); }

/* Outline/secondary: readable on dark cards */
.btn-outline{
  background: transparent;
  border: 1px solid var(--line);
  color: #dbeafe;               /* light blue text */
}
.btn-outline:hover{ filter: brightness(1.1); }

.btn.secondary{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

/* Body CTAs (use in page content when needed) */
.btn.body-cta{
  font-size: 16px;              /* slightly larger in body */
  padding: 14px 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 6px 8px;              /* little breathing room between buttons */
}

/* Keep the Gratitude button slightly smaller in the header only */
header .cta-row a.btn.orange{
  font-size: 14px;
  padding: 11px 16px;
}

/* Optional: center .row CTAs inside cards/site sections */
.card .row{ justify-content: center; }