/* ==========================================================================
   Framworq — Design System
   Source of truth: DESIGN.md. Square by default, one blue, hairlines,
   tight big type, quiet motion. Import this on every page.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root{
  /* accent */
  --accent:#1028E0; --accent-light:#5A82FF; --accent-hi:#8FA2FF;
  /* ink / text */
  --ink:#0B0B0C; --text-2:#45474C; --text-3:#5B6573; --muted:#8C93A6;
  /* surfaces */
  --surface:#FFFFFF; --surface-2:#FAFAF9; --surface-tint:#F3F3F1;
  /* lines */
  --line:#ECECEC; --line-2:#E4E4E1; --line-warm:#E7E7E4;
  /* dark */
  --dark:#0A0B0D; --dark-deep:#07080A; --dark-card:#121317;
  --on-dark:#FFFFFF; --on-dark-72:rgba(255,255,255,.72);
  --on-dark-66:rgba(255,255,255,.66); --on-dark-50:rgba(255,255,255,.5);
  --on-dark-line:rgba(255,255,255,.16);

  /* layout */
  --container:1280px; --container-read:1180px;
  --gutter:56px; --gutter-mobile:26px;
  --section-y:76px; --section-y-dark:88px;

  /* motion */
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.16,1,.3,1);
}

/* ---- Reset: everything square ------------------------------------------- */
*{ box-sizing:border-box; border-radius:0 !important; }
*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:var(--ink); background:var(--surface);
  font-size:16px; line-height:1.6;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
/* round opt-ins */
.dot,.avatar,.is-round{ border-radius:999px !important; }

/* ---- Layout ------------------------------------------------------------- */
.fq-container{ max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.fq-container--read{ max-width:var(--container-read); }
.fq-section{ padding-block:var(--section-y); }
.fq-section--tint{ background:var(--surface-2); }
.fq-section--dark{ background:var(--dark); color:var(--on-dark); padding-block:var(--section-y-dark); }
.fq-divider{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---- Typography --------------------------------------------------------- */
.fq-display{ font-size:clamp(34px,6vw,54px); font-weight:400; line-height:1.06; letter-spacing:-1.9px; margin:0; }
.fq-h2{ font-size:clamp(28px,4vw,38px); font-weight:400; line-height:1.02; letter-spacing:-1px; margin:0; }
.fq-h2--immersive{ font-size:clamp(30px,4.6vw,46px); line-height:1.07; letter-spacing:-1.3px; }
.fq-h3{ font-size:22px; font-weight:400; line-height:1.12; letter-spacing:-.4px; margin:0; }
.fq-lead{ font-size:clamp(17px,2vw,20px); font-weight:400; line-height:1.62; color:var(--text-2); margin:0; max-width:60ch; }
.fq-body{ font-size:16.5px; line-height:1.75; color:var(--text-2); }
.fq-body-sm{ font-size:15px; line-height:1.6; color:var(--text-3); }
.fq-meta{ font-size:13px; line-height:1.4; color:var(--muted); }
.fq-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-3);
}
.fq-eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); flex:0 0 auto; }
.fq-eyebrow--bare::before{ display:none; }
.fq-hi{ color:var(--accent); }
[data-theme="dark"] .fq-hi{ color:var(--accent-hi); }
.fq-section--dark .fq-eyebrow{ color:var(--on-dark-66); }
.fq-section--dark .fq-lead{ color:var(--on-dark-72); }
.fq-section--dark .fq-body{ color:var(--on-dark-72); }

/* ---- Buttons ------------------------------------------------------------ */
.fq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 22px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--ink);
  transition:transform .18s var(--ease-std), opacity .18s var(--ease-std), background .18s var(--ease-std);
}
.fq-btn:hover{ transform:translateY(-1px); }
.fq-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.fq-btn--ghost:hover{ border-color:var(--ink); }
[data-theme="dark"] .fq-btn{ background:#fff; color:var(--ink); border-color:#fff; }
[data-theme="dark"] .fq-btn--ghost{ background:transparent; color:#fff; border-color:var(--on-dark-line); }
[data-theme="dark"] .fq-btn--ghost:hover{ border-color:#fff; }

/* ---- Chips -------------------------------------------------------------- */
.fq-chip{
  font-size:13px; font-weight:500; color:var(--text-2); background:#fff;
  border:1px solid var(--line-2); padding:8px 14px; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s;
}
.fq-chip:hover{ border-color:var(--ink); color:var(--ink); }
.fq-chip.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.fq-filter{ display:flex; flex-wrap:wrap; gap:8px; }

/* ---- Cards & bordered grid ---------------------------------------------- */
.fq-grid{ display:grid; gap:1px; background:transparent; }
.fq-grid--2{ grid-template-columns:repeat(2,1fr); }
.fq-grid--3{ grid-template-columns:repeat(3,1fr); }
.fq-grid--4{ grid-template-columns:repeat(4,1fr); }
.fq-card{
  background:#fff; box-shadow:0 0 0 1px var(--line); padding:28px;
  transition:background .2s var(--ease-std);
}
.fq-card:hover{ background:var(--surface-2); }
.fq-card__eyebrow{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); }
.fq-card__title{ font-size:20px; font-weight:600; letter-spacing:-.3px; margin:14px 0 8px; transition:color .2s; }
.fq-card:hover .fq-card__title{ color:var(--accent); }
.fq-card__meta{ font-size:13px; color:var(--muted); }

/* ---- Dark band: grid texture + glow ------------------------------------- */
.fq-band{ position:relative; overflow:hidden; background:var(--dark); color:var(--on-dark); }
.fq-band__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 120% at 80% -5%,#000 8%,transparent 66%);
          mask-image:radial-gradient(120% 120% at 80% -5%,#000 8%,transparent 66%);
}
.fq-band__glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%; pointer-events:none;
  background:radial-gradient(circle at center,rgba(56,86,255,.30),rgba(56,86,255,0) 62%);
  animation:fq-glow 18s ease-in-out infinite alternate;
}
.fq-band__content{ position:relative; z-index:1; }
@keyframes fq-glow{ from{ transform:translate3d(-4%,0,0); } to{ transform:translate3d(6%,3%,0); } }

/* white, left-aligned hero (workspace landing). Clears the transparent header. */
.fq-hero-light{ background:var(--surface); border-bottom:1px solid var(--line); }
.fq-hero-light__inner{ padding-block:88px 84px; }
.fq-hero-light .fq-lead{ max-width:60ch; }
@media (max-width:820px){ .fq-hero-light__inner{ padding-block:60px 60px; } }

/* centered hero (case-studies style): dark, eyebrow → headline → lead → CTAs */
.fq-hero-center{ background:var(--dark-deep); color:var(--on-dark); }
.fq-hero-center__inner{ text-align:center; max-width:860px; margin:0 auto; padding-block:180px 120px; }
.fq-hero-center .fq-display{ letter-spacing:-2px; }
.fq-hero-center__lead{ margin-left:auto; margin-right:auto; max-width:64ch; color:var(--on-dark-72); }
.fq-hero-center__cta{ justify-content:center; }
.fq-eyebrow--center{ justify-content:center; }
@media (max-width:820px){ .fq-hero-center__inner{ padding-block:130px 84px; } }

/* matte gradient hero (no photo) */
.fq-hero-matte{
  background:
    radial-gradient(115% 130% at 88% -18%, rgba(72,104,240,.55), rgba(40,58,150,.20) 40%, transparent 68%),
    linear-gradient(150deg,#1B2137 0%,#10131F 46%,#0A0B12 74%,#08090C 100%);
  color:var(--on-dark);
}

/* ---- Reveal on scroll --------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-std), transform .7s var(--ease-std);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---- FAQ accordion ------------------------------------------------------ */
.fq-faq{ border-top:1px solid var(--line); }
.fq-faq__item{ border-bottom:1px solid var(--line); }
.fq-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%;
  padding:22px 0; background:none; border:0; cursor:pointer; text-align:left;
  font-size:18px; font-weight:400; letter-spacing:-.2px; color:var(--ink);
}
.fq-faq__q svg{ flex:0 0 auto; transition:transform .3s var(--ease-std); }
.fq-faq__item.is-open .fq-faq__q svg{ transform:rotate(45deg); }
.fq-faq__wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease-std); }
.fq-faq__item.is-open .fq-faq__wrap{ grid-template-rows:1fr; }
.fq-faq__inner{ overflow:hidden; min-height:0; }
.fq-faq__a{ padding:0 0 22px; color:var(--text-2); font-size:16px; line-height:1.7; max-width:70ch; }

/* ---- Prose / article ---------------------------------------------------- */
.fq-prose{ max-width:760px; font-size:16.5px; line-height:1.8; color:#2D3035; }
.fq-prose > .fq-lead{ font-size:20px; line-height:1.62; color:var(--text-2); padding-bottom:22px; border-bottom:1px solid var(--line); }
.fq-prose h2{ font-size:27px; font-weight:600; letter-spacing:-.6px; margin:44px 0 14px; color:var(--ink); }
.fq-prose h3{ font-size:18px; font-weight:600; margin:32px 0 10px; color:var(--ink); }
.fq-prose p{ margin:0 0 18px; }
.fq-prose a{ color:var(--accent); box-shadow:inset 0 -1px 0 rgba(16,40,224,.28); }
.fq-prose hr{ border:0; border-top:1px solid #E6E6E6; margin:34px 0; }
.fq-prose li::marker{ color:var(--muted); }
.fq-callout{ background:#F6F7F9; border-left:3px solid var(--accent); padding:18px 22px; margin:24px 0; }

/* ---- Utilities ---------------------------------------------------------- */
.fq-stack{ display:flex; flex-direction:column; }
.fq-stack--sm{ gap:12px; } .fq-stack--md{ gap:20px; } .fq-stack--lg{ gap:32px; }
.fq-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.fq-mt-s{ margin-top:16px; } .fq-mt-m{ margin-top:28px; } .fq-mt-l{ margin-top:44px; }
.fq-max-60{ max-width:60ch; }

/* ---- Header / footer ---------------------------------------------------- */
.fq-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);
}
.fq-header[data-theme="dark"]{ background:#0B0B0C; backdrop-filter:none; border-bottom-color:var(--on-dark-line); color:#fff; }
.fq-header__bar{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.fq-header__logo{ display:inline-flex; align-items:center; font-size:17px; font-weight:600; letter-spacing:-.3px; }
.fq-logo{ height:24px; width:auto; display:block; }
/* show the right lockup for the header's theme */
.fq-logo--on-dark{ display:none; }
.fq-header[data-theme="dark"] .fq-logo--on-light{ display:none; }
.fq-header[data-theme="dark"] .fq-logo--on-dark{ display:block; }

/* transparent overlay variant (sits on top of a hero) */
.fq-header--transparent{
  position:absolute; top:0; left:0; right:0;
  background:transparent; border-bottom:0; backdrop-filter:none;
}
.fq-nav{ display:flex; align-items:center; gap:28px; }
.fq-nav a{ font-size:14px; color:var(--text-2); transition:color .18s; }
.fq-header[data-theme="dark"] .fq-nav a{ color:var(--on-dark-72); }
.fq-nav a:hover{ color:var(--ink); }
.fq-header[data-theme="dark"] .fq-nav a:hover{ color:#fff; }
.fq-nav__toggle{ display:none; background:none; border:0; cursor:pointer; color:inherit; }

/* mobile drawer */
.fq-nav__drawer{
  position:fixed; inset:0 0 0 auto; width:min(320px,82vw); z-index:60;
  background:#fff; border-left:1px solid var(--line);
  box-shadow:-30px 0 70px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .45s var(--ease-in);
  padding:88px 32px 32px; visibility:hidden;
}
.fq-nav__drawer.is-open{ transform:translateX(0); visibility:visible; }
.fq-nav__drawer-inner{ display:flex; flex-direction:column; gap:20px; }
.fq-nav__drawer a{ font-size:18px; color:var(--ink); }

.fq-footer{ background:var(--dark); color:var(--on-dark); padding-block:56px; }
.fq-footer a{ color:var(--on-dark-72); font-size:14px; transition:color .18s; }
.fq-footer a:hover{ color:#fff; }
.fq-footer__grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.fq-footer__bottom{ margin-top:44px; padding-top:22px; border-top:1px solid var(--on-dark-line); font-size:13px; color:var(--on-dark-50); }

/* ---- Breakpoints -------------------------------------------------------- */
@media (max-width:900px){
  .fq-grid--3,.fq-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  :root{ --gutter:26px; --section-y:56px; --section-y-dark:64px; }
  .fq-nav{ gap:18px; }
  .fq-nav__links{ display:none; }
  .fq-nav__toggle{ display:inline-flex; }
}
@media (max-width:560px){
  .fq-grid--2,.fq-grid--3,.fq-grid--4{ grid-template-columns:1fr; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fq-band__glow,[data-parallax]{ animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  *{ scroll-behavior:auto !important; }
}