/* ── reset ── */
.fx-row { width:100%!important; min-width:0!important; display:block!important; padding:0!important; box-sizing:border-box; }

/* ── staggered reveal ── */
.fx-sr { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.fx-sr.fx-vis { opacity:1; transform:none; }

/* ── tokens ── */
:root {
  --ink:  #1c1917;
  --ink2: #44403c;
  --ink3: #a8a29e;
  --bg:   #ffffff;
  --off:  #fafaf9;
  --rule: #e7e5e4;
  --red:  #cd0e00;
  --rg:   linear-gradient(135deg,#cd0e00 0%,#FF6600 70%,#FF4500 100%);
  --r:    16px;
}

/* ── hide master-page footer CTA on this page ── */
#footer-cta { display:none!important; }

/* ── buttons ── */
.fx-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fx-btn { display:inline-flex; align-items:center; gap:7px; font-size:.95rem; font-weight:700; padding:13px 26px; border-radius:10px; text-decoration:none!important; transition:all .18s ease; }
.fx-btn-solid { background:var(--ink); color:#fff!important; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.fx-btn-solid:hover { background:#292524; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.2); }
.fx-btn-ghost { background:transparent; border:1.5px solid var(--rule); color:var(--ink2)!important; }
.fx-btn-ghost:hover { border-color:var(--ink3); color:var(--ink)!important; }
.fx-btn-red { background:var(--rg); color:#fff!important; box-shadow:0 4px 18px rgba(205,14,0,.26); }
.fx-btn-red:hover { box-shadow:0 8px 28px rgba(205,14,0,.4); transform:translateY(-1px); }

/* ── shared: inner-container centering ── */
.fx-hero-in, .fx-stmt-in, .fx-outcomes-in,
.fx-showcase-in, .fx-quote-in, .fx-fin-in,
.fx-cap-desc { margin:0 auto; }

/* ── shared: section paragraph text ── */
.fx-hero p, .fx-outcomes-hd p, .fx-stmt p, .fx-3col-item p, .fx-fin p {
  line-height:1.7!important; color:var(--ink2)!important;
  max-width:none!important; margin:0!important; text-wrap:pretty;
}

/* ── shared: section h2 typography ── */
.fx-stmt h2, .fx-outcomes-hd h2, .fx-showcase-hd h2 {
  font-size:clamp(1.6rem,2.8vw,2.2rem)!important;
  font-weight:800!important; line-height:1.1!important;
  letter-spacing:-.03em!important; color:var(--ink)!important;
  background:none!important; -webkit-text-fill-color:var(--ink)!important;
  text-align:center!important;
}
.fx-stmt h2 { margin:0 0 1rem!important; }

/* ── shared: gradient italic em in headings ── */
.fx-hero h1 em, .fx-stmt h2 em, .fx-fin h2 em {
  font-style:italic; background:var(--rg);
  background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent!important;
  padding-right:0.08em; padding-bottom:0.1em;
}

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
.fx-hero { background:var(--bg); padding:124px 32px 96px; text-align:center; }
.fx-hero-in { max-width:900px; }

.fx-hero h1 {
  font-size:clamp(2.8rem,6.5vw,5.2rem)!important;
  font-weight:800!important; line-height:.98!important;
  letter-spacing:-.04em!important; color:var(--ink)!important;
  margin:0 0 0.6rem!important; text-align:center!important; text-wrap:pretty;
  background:none!important; -webkit-text-fill-color:var(--ink)!important;
}

.fx-hero > .fx-hero-in > p {
  max-width:560px!important;
  margin:1.4rem auto 0!important;
  padding:1.4rem 0 0!important;
  text-wrap:balance!important;
}

.fx-itabs-row { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:3.5rem; margin-bottom:3.2rem; }
.fx-itabs-lbl { margin:0!important; padding:0!important; white-space:nowrap; }
.fx-itabs { display:flex; gap:4px; margin:0; background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 50%,#cbd5e1 100%); border-radius:12px; padding:4px; width:fit-content; }
[data-itab] { font-size:.78rem; font-weight:500; color:var(--ink3); background:transparent; border:1.5px solid var(--rule); padding:6px 15px; border-radius:7px; cursor:pointer; transition:all .18s; user-select:none; }
[data-itab].on,[data-itab]:hover { background:var(--ink); border-color:var(--ink); color:#fff; }

/* tab pill labels — shared style for hero + capabilities */
.fx-itabs label,
.fx-showcase .fx-tab-nav label { font-size:1rem; font-weight:500; color:var(--ink2); background:none; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; transition:all .18s; user-select:none; display:block; font-family:inherit; }
.fx-itabs label:hover,
.fx-showcase .fx-tab-nav label:hover { color:var(--ink); }
#ht-field:checked ~ .fx-itabs-row .fx-itabs label[for="ht-field"],
#ht-office:checked ~ .fx-itabs-row .fx-itabs label[for="ht-office"],
#ht-remote:checked ~ .fx-itabs-row .fx-itabs label[for="ht-remote"] { background:#fff; color:var(--ink); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.ht-log { display:none; }
#ht-field:checked ~ .fx-win .ht-log-field,
#ht-office:checked ~ .fx-win .ht-log-office,
#ht-remote:checked ~ .fx-win .ht-log-remote { display:block; }
.ht-img { display:none; width:100%; }
#ht-field:checked ~ .fx-win .ht-img-field { display:flex; }
#ht-office:checked ~ .fx-win .ht-img-office,
#ht-remote:checked ~ .fx-win .ht-img-remote { display:block; }
.ht-img-phones { gap:64px; justify-content:center; align-items:flex-start; padding:24px; }
.ht-img-phones .ff-phone { border-radius:24px; overflow:hidden; background:#000; box-shadow:0 0 0 3px #0b1220,0 15px 30px -5px rgba(15,23,42,.55),0 8px 15px -4px rgba(15,23,42,.35); }
.ht-img-phones img { width:auto; max-height:500px; display:block; }

/* panel titles — mobile only */
.ht-log-title { display:none; font-size:.75rem; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.07em; margin:0!important; padding:0 0 1.25rem!important; }

/* product window */
.fx-win { background:var(--bg); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; max-width:820px; margin:0 auto; box-shadow:0 1px 3px rgba(0,0,0,.04),0 16px 48px rgba(0,0,0,.09),0 48px 80px rgba(0,0,0,.06); }
.fx-winbar { background:var(--bg); padding:11px 18px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--rule); }
.fx-wdot { width:11px; height:11px; border-radius:50%; }
.fx-wdot:nth-child(1){background:#ff5f57} .fx-wdot:nth-child(2){background:#febc2e} .fx-wdot:nth-child(3){background:#28c840}
.fx-wintitle { flex:1; text-align:center; font-size:.72rem; color:var(--ink3); font-weight:500; font-family:'SF Mono',Consolas,monospace; }
.fx-win>img:not(.ht-img) { width:100%; display:block; }
.fx-log { padding:16px 24px; }
.fx-logrow { padding:5px 0; font-size:1rem; line-height:1.6; }
.fx-dot2 { display:none; }
.fx-logtxt { color:#1e293b; }
.fx-logtxt.done { color:#6b7280; }
.fx-logtxt-dim { color:#6b7280; }
.fx-logtime { display:none; }
.fx-tw { display:none; } .fx-tw.on { display:inline; color:var(--red); }
.fx-cur { display:inline-block; width:7px; height:12px; background:var(--ink3); border-radius:2px; vertical-align:middle; margin-left:1px; animation:fxblink 1s step-end infinite; }
@keyframes fxpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}
@keyframes fxblink{0%,100%{opacity:1}50%{opacity:0}}

/* panel CTA — "Learn more →" */
.ht-log-cta { display:inline-flex; align-items:center; gap:.45rem; margin:1.25rem 0 .25rem; padding:.55rem 1.1rem; font-size:.875rem; font-weight:600; line-height:1; color:var(--ink)!important; background:#fff; border:1px solid var(--rule); border-radius:999px; text-decoration:none!important; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ht-log-cta:hover { color:#fff!important; background:var(--red); border-color:var(--red); box-shadow:0 6px 16px rgba(205,14,0,.28); transform:translateY(-1px); }

/* ══════════════════════════════════════
   LOGOS
   ══════════════════════════════════════ */
.fx-logos { padding:40px 32px; text-align:center; }
.fx-logos img { max-width:60%!important; width:60%!important; filter:grayscale(100%) opacity(.65); mix-blend-mode:multiply; }

/* ══════════════════════════════════════
   STATEMENT
   ══════════════════════════════════════ */
.fx-stmt { padding:128px 32px 96px!important; text-align:center; }
.fx-stmt-in { max-width:800px; }

/* ══════════════════════════════════════
   OUTCOME CARDS
   ══════════════════════════════════════ */
.fx-outcomes { background:var(--bg); padding:80px 32px; }
.fx-outcomes-in { max-width:1080px; }
.fx-outcomes-hd { margin-bottom:3rem; text-align:center; }
#fx-outcomes-title { text-align:center!important; margin-left:0!important; margin-right:0!important; }

/* 2x2 grid */
.fx-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
/* 3-column variant */
.fx-card-grid-3 { grid-template-columns:repeat(3,1fr); }

/* open 3-column feature layout (no card boxes) */
.fx-3col { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.fx-3col-item { padding:0 1.5rem; }
.fx-3col-item:first-child { padding-left:0; }
.fx-3col-item:last-child { padding-right:0; }
.fx-3col-item + .fx-3col-item { border-left:1px solid var(--rule,#e0e0e0); }
.fx-3col-item svg { display:block; width:48px; height:48px; margin-bottom:1rem; color:var(--red,#cd0e00); }
.fx-3col-item h3 { display:block!important; font-size:1.05rem!important; font-weight:800!important; line-height:1.2!important; letter-spacing:-.015em!important; margin:0 0 .6rem!important; padding:0!important; text-align:left!important; }
.fx-3col-item p { padding:0; text-wrap:balance; }

/* inline testimonial inside outcomes section */
.fx-inline-quote { border-top:1px solid var(--rule); margin-top:3.5rem; padding-top:3rem; max-width:820px; margin-left:auto; margin-right:auto; text-align:center; }
.fx-iq-mark { font-size:3.5rem; line-height:.8; color:var(--red); font-family:Georgia,serif; display:block; margin-bottom:-.6rem; user-select:none; }
.fx-iq-text { font-size:1.05rem!important; font-weight:500!important; line-height:1.6!important; color:var(--ink2)!important; margin:0 0 1.2rem!important; padding:0!important; border:none!important; font-style:italic!important; background:none!important; }
.fx-iq-cite { display:block; font-size:.8rem; font-style:normal; color:var(--ink2); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }

/* glass card */
.fx-card {
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:var(--r); padding:2rem 1.9rem;
  position:relative; overflow:hidden;
  transition:box-shadow .22s, transform .22s;
}
.fx-card::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(145deg,rgba(255,255,255,.5) 0%,transparent 55%); }
.fx-card:hover { box-shadow:0 10px 36px rgba(0,0,0,.09); transform:translateY(-2px); }

/* card number — large, decorative */
.fx-card-n {
  font-size:4.5rem; font-weight:900; line-height:1;
  letter-spacing:-.06em; color:var(--rule);
  font-variant-numeric:tabular-nums;
  margin-bottom:.5rem; user-select:none; display:block;
}
.fx-card h3 {
  font-size:1.15rem!important; font-weight:800!important; line-height:1.18!important;
  letter-spacing:-.018em!important; color:var(--ink)!important;
  margin:0 0 .6rem!important; background:none!important; -webkit-text-fill-color:var(--ink)!important;
}

/* accent red card */
.fx-card-red { background:linear-gradient(135deg,#cd0e00,#e03500); border-color:transparent; }
.fx-card-red::before { background:linear-gradient(145deg,rgba(255,255,255,.12) 0%,transparent 55%); }
.fx-card-red .fx-card-n { color:rgba(255,255,255,.18); }
.fx-card-red h3 { color:#fff!important; -webkit-text-fill-color:#fff!important; }

/* ══════════════════════════════════════
   SHOWCASE + TABS
   ══════════════════════════════════════ */
.fx-showcase { background:var(--bg); padding:96px 32px; }
.fx-showcase-in { max-width:1140px; }
.fx-showcase-hd { text-align:center; margin-bottom:2.8rem; }

/* tab nav */
.fx-tab-nav {
  display:flex; gap:4px; justify-content:center; flex-wrap:wrap;
  background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 50%,#cbd5e1 100%); border:none;
  border-radius:12px; padding:4px;
  width:fit-content; margin:0 auto 2.4rem;
}
[data-cap] { background:none; border:none; font-size:1rem; font-weight:500; color:var(--ink3); padding:8px 18px; border-radius:8px; cursor:pointer; transition:all .18s; font-family:inherit; }
[data-cap].on { background:#fff; color:var(--ink); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.1); }
[data-cap]:hover:not(.on) { color:var(--ink2); }

/* screenshot display */
.fx-cap-pane { display:none; }
.fx-cap-pane.on { display:block; }
.fx-cap-screen {
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 20px 56px rgba(0,0,0,.1),0 48px 80px rgba(0,0,0,.06);
  margin-bottom:1.6rem;
}
.fx-cap-screen img { width:100%; display:block; }
.fx-cap-desc { max-width:680px; text-align:center; }
.fx-cap-desc h3 { font-size:1.12rem!important; font-weight:700!important; color:var(--ink)!important; margin:0 0 .4rem!important; background:none!important; -webkit-text-fill-color:var(--ink)!important; letter-spacing:-.01em!important; }

/* ══════════════════════════════════════
   QUOTE
   ══════════════════════════════════════ */
.fx-quote { padding:112px 32px; background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 50%,#cbd5e1 100%); }
.fx-quote-in { max-width:820px; text-align:center; }
.fx-quote-mark { font-size:clamp(5rem,12vw,9rem); line-height:.8; color:var(--red); font-family:Georgia,serif; display:block; margin-bottom:-1.2rem; user-select:none; }
.fx-quote blockquote { font-size:clamp(1.1rem,2vw,1.5rem)!important; font-weight:600!important; line-height:1.48!important; letter-spacing:-.012em!important; color:var(--ink)!important; margin:0 0 1.4rem!important; padding:0!important; border:none!important; font-style:normal!important; background:none!important; }
.fx-quote cite { display:block!important; font-size:.85rem!important; font-style:normal!important; color:var(--ink2)!important; font-weight:600!important; letter-spacing:.06em!important; text-transform:uppercase; }

/* ══════════════════════════════════════
   CTA
   ══════════════════════════════════════ */
.fx-fin { background:var(--bg); padding:120px 32px; text-align:center; }
.fx-fin-in { max-width:780px; }
.fx-fin h2 { font-size:clamp(2rem,4.5vw,3.6rem)!important; font-weight:800!important; line-height:.98!important; letter-spacing:-.04em!important; color:var(--ink)!important; margin:0 0 .9rem!important; background:none!important; -webkit-text-fill-color:var(--ink)!important; text-wrap:balance; }

/* ── capability tabs (radio-based, no JS) ── */
.fx-cap-radio { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.fx-cap-row { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; margin-bottom:2.4rem; }
.fx-cap-row h3 { margin:0!important; padding:0!important; max-width:none!important; }
.fx-showcase .fx-tab-nav { margin:0; }
#fx-cap-build:checked   ~ .fx-cap-row .fx-tab-nav label[for="fx-cap-build"],
#fx-cap-integrate:checked ~ .fx-cap-row .fx-tab-nav label[for="fx-cap-integrate"],
#fx-cap-automate:checked  ~ .fx-cap-row .fx-tab-nav label[for="fx-cap-automate"],
#fx-cap-deploy:checked   ~ .fx-cap-row .fx-tab-nav label[for="fx-cap-deploy"] {
  background:#fff; color:var(--ink); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.fx-cap-panel { display:none; }
#fx-cap-build:checked   ~ .fx-panel-build,
#fx-cap-integrate:checked ~ .fx-panel-integrate,
#fx-cap-automate:checked  ~ .fx-panel-automate,
#fx-cap-deploy:checked   ~ .fx-panel-deploy { display:block; }

/* ── AI statement — 2-col with image ── */
.fx-stmt-2col { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; max-width:1060px; margin:0 auto; text-align:left; }
.fx-stmt-2col h2,.fx-stmt-2col p { text-align:left!important; }
.fx-ai-img img { display:block!important; width:100%!important; height:auto!important; margin:0!important; float:none!important; border-radius:var(--r)!important; border-top:1.5px solid #cd0e00!important; border-right:1.5px solid #FF6600!important; border-bottom:1.5px solid #FF4500!important; border-left:1.5px solid #cd0e00!important; }

/* ── responsive ── */
@media(max-width:760px){
  .fx-card-grid,.fx-card-grid-3,.fx-3col { grid-template-columns:1fr; }
  .fx-3col-item,.fx-3col-item:first-child,.fx-3col-item:last-child { padding:1.5rem 0; border-left:none; border-top:1px solid var(--rule,#e0e0e0); }
  .fx-3col-item:first-child { border-top:none; }
  .fx-3col-item + .fx-3col-item { border-left:none; }
  .fx-tab-nav { width:100%; }
  .fx-itabs { width:100%; flex-direction:column; }
  .fx-itabs label { text-align:center; }
  .fx-stmt-2col { grid-template-columns:1fr; gap:2rem; }
  .fx-stmt-2col h2 { text-align:center!important; }
  .fx-ai-img { order:2; }
  /* hero tabs: hide nav, expand all text panels, hide images */
  .fx-itabs-row { display:none; }
  .fx-win { margin-top:1.75rem; }
  .ht-log { display:block; }
  .ht-log { padding-top:1.5rem; }
  .ht-log + .ht-log { border-top:1px solid var(--rule); }
  .ht-img { display:none!important; }
  .ht-log-title { display:block; }
  /* capability tabs: hide nav, expand all panels */
  .fx-cap-row { display:none; }
  .fx-cap-panel { display:block; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--rule); }
  .fx-cap-panel:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
  /* reduce heavy vertical padding at tablet */
  .fx-stmt    { padding:72px 32px 56px!important; }
  .fx-quote   { padding:72px 32px; }
  .fx-showcase{ padding:64px 32px; }
  .fx-fin     { padding:72px 32px; }
  .fx-outcomes{ padding:56px 32px; }
}
@media(max-width:540px){
  .fx-hero    { padding:64px 20px 56px; }
  .fx-hero h1 { padding:0!important; font-size:clamp(2.4rem,7.5vw,2.8rem)!important; }
  .fx-logos   { padding:32px 20px; }
  .fx-stmt    { padding:56px 20px 44px!important; }
  .fx-outcomes{ padding:48px 20px; }
  .fx-showcase{ padding:48px 20px; }
  .fx-quote   { padding:56px 20px; }
  .fx-fin     { padding:56px 20px; }
  /* hero pill row */
  .fx-itabs-row { gap:.5rem; }
  .fx-itabs-lbl { width:100%; text-align:center; white-space:normal; }
  .fx-itabs label,
  .fx-showcase .fx-tab-nav label { font-size:1rem; padding:6px 12px; }
  /* logos strip */
  .fx-logos img { max-width:90%!important; width:90%!important; }
  /* product window */
  .fx-log { padding:1.5rem 16px 12px; }
  .fx-logrow { font-size:.9375rem; }
  /* capability tab row */
  .fx-cap-row { flex-direction:column; gap:.5rem; }
  .fx-cap-row > h3 { text-align:center; font-size:.9rem!important; color:var(--ink3); }
}