/* Flowgear 2026 design system, AI-first redesign (Variant A).
   Additive: this file is opt-in. The existing globals.css (dark console theme)
   is untouched; new 2026 pages import THIS instead. Scoped under .fg26. */

.fg26{
  --teal:#29baab; --teal-deep:#0e7468; --teal-btn:#0e8073; --navy:#16243f; --pitch:#0b0e1d;
  --blue:#6a8bc7; --purple:#ab8ab6; --lilac:#ccb9d3; --yellow:#f2c23e;
  --ink:#101728; --soft:#5b6577; --faint:#6b7280;
  --line:#e7eaf0; --bg:#fff; --bg2:#f7f9fc;
  --r:14px;
  --max:1180px;

  color:var(--ink);
  background:var(--bg);
  font-family:var(--font-poppins);
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
.fg26 *{box-sizing:border-box;}
.fg26 h1,.fg26 h2,.fg26 h3{
  font-family:var(--font-poppins);
  line-height:1.12;font-weight:700;letter-spacing:-.03em;margin:0;
  text-wrap:balance;}
/* Premium craft: tighten tracking on display-scale headings only, large
   type reads as typeset, not just big. */
.fg26 .ph h1,.fg26 .hp-hero h1,.fg26 .pr-hero h1{letter-spacing:-.042em;}
.fg26 p{margin:0;}
.fg26 a{color:inherit;text-decoration:none;}
.fg26 .mono{font-family:var(--font-poppins);}
.fg26 .accent{color:var(--teal);}

.fg26 .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;}

/* motion, reveal animates only below-the-fold content. JS adds .reveal-hide
   to elements that start off-screen, then removes it as they scroll in. On-
   screen content is never hidden, so it can never flash blank on load; with
   no JS everything is simply visible. */
.fg26 .reveal{
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.fg26 .reveal.reveal-hide{opacity:0;transform:translateY(20px);transition:none;}
.fg26 .d1{transition-delay:.08s;}
.fg26 .d2{transition-delay:.16s;}
.fg26 .d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){
  .fg26 .reveal,.fg26 .reveal.reveal-hide{transition:none;opacity:1;transform:none;}}

/* eyebrow */
.fg26 .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-deep);margin-bottom:20px;}

/* buttons */
.fg26 .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;
  border-radius:9px;font-weight:600;font-size:14.5px;
  font-family:var(--font-poppins);
  transition:.18s cubic-bezier(.16,1,.3,1);cursor:pointer;border:none;}
/* primary CTA, a light 20% teal "tint" fill with a solid teal edge and a
   soft teal glow. The fill is translucent, so on light surfaces it reads
   as a soft teal button (dark text via --ink) and on the dark bands it
   reads as a deep teal-glass button, the always-dark bands below force
   light text in every theme. */
.fg26 .btn-primary{background:rgba(41,186,171,.2);color:var(--ink);
  border:1px solid var(--teal);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    0 0 26px -4px rgba(41,186,171,.4),
    0 6px 20px -8px rgba(16,23,40,.26);}
.fg26 .btn-primary:hover{transform:translateY(-2px);
  background:rgba(41,186,171,.3);border-color:var(--teal);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
    0 0 44px -4px rgba(41,186,171,.52),
    0 12px 30px -10px rgba(16,23,40,.3);}
/* always-dark bands, home + inner-page heroes and dark home bands,
   keep light button text regardless of the active theme */
.fg26 .hp-hero .btn-primary,
.fg26 .ph .btn-primary,
.fg26 .hp-ide .btn-primary,
.fg26 .hp-video .btn-primary{color:#fff;}
.fg26 .btn-secondary{background:#fff;color:var(--navy);border:1px solid var(--line);}
.fg26 .btn-secondary:hover{transform:translateY(-2px);border-color:var(--teal);
  box-shadow:0 12px 26px -12px rgba(16,23,40,.28),
    0 0 26px -8px rgba(41,186,171,.3);}
.fg26 .btn:active{transform:translateY(0) scale(.97);}
.fg26 .btn-ghost{color:var(--teal-deep);font-weight:600;font-size:14.5px;
  display:inline-flex;align-items:center;gap:6px;}
.fg26 .btn-ghost:hover{gap:10px;}
.fg26 .btn-ghost svg{transition:.18s;}
.fg26 .btn-ghost:hover svg{transform:translateX(3px);}

/* sections */
.fg26 section{position:relative;padding:112px 0;}
.fg26 .bg2{background:var(--bg2);}
.fg26 .sec-head{max-width:620px;margin:0 auto 56px;}
.fg26 .sec-head.left{margin-left:0;}
.fg26 .sec-head.center{text-align:center;}
.fg26 .sec-head.center .eyebrow{display:flex;width:fit-content;margin-left:auto;
  margin-right:auto;justify-content:center;text-align:center;}
.fg26 .sec-head.left .eyebrow{margin-left:0;margin-right:0;justify-content:flex-start;
  text-align:left;}
.fg26 .sec-head h2{font-size:38px;margin-bottom:13px;letter-spacing:-.035em;}
.fg26 .sec-head p{font-size:17.5px;color:var(--soft);line-height:1.6;}
.fg26 .split{display:grid;grid-template-columns:1fr 1.08fr;gap:64px;
  align-items:center;}
.fg26 .split.rev{grid-template-columns:1.08fr 1fr;}

/* ticks */
.fg26 .ticks{margin-top:24px;display:flex;flex-direction:column;gap:13px;}
.fg26 .tick{display:flex;gap:11px;font-size:14.5px;color:var(--ink);}
.fg26 .tick svg{flex:none;margin-top:0;}

/* AI-agent compatibility lockup, shared by the home page and the
   builder-mcp platform page (bits.tsx AgentLockup). Official brand marks,
   single-colour, sized small so they read as a fact, not a logo wall. */
.fg26 .agent-lockup{margin-top:26px;}
.fg26 .agent-lockup-k{font-family:var(--font-poppins);font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);}
.fg26 .agent-lockup-marks{display:flex;align-items:center;gap:26px;
  margin-top:12px;flex-wrap:wrap;}
.fg26 .agent-chip{display:flex;align-items:center;gap:9px;
  font-family:var(--font-poppins);font-size:15px;font-weight:600;
  color:var(--ink);}
.fg26 .agent-chip svg{width:21px;height:21px;display:block;}
.fg26 .agent-lockup-cap{font-size:13px;color:var(--faint);margin-top:13px;}
/* dark-surface variant, marks and labels go light */
.fg26 .agent-lockup--dark .agent-lockup-k{color:rgba(255,255,255,.55);}
.fg26 .agent-lockup--dark .agent-chip{color:#fff;}
.fg26 .agent-lockup--dark .agent-lockup-cap{color:rgba(255,255,255,.62);}

/* ============================================================
   COLOUR-RHYTHM SYSTEM
   Rhythm comes from lightness steps; hue is the once-per-page
   exclamation mark. Surfaces: white (default) / bg2 (off-white) /
   pitch (dark) / band-brand (contained dark CTA). surf-ai adds a
   lilac wash that quietly marks AI-feature sections. Accent words:
   .accent = teal (any surface); .acc-yellow = yellow (dark only).
   ============================================================ */

/* dark CTA moment, reserved for page endings and high-confidence actions. */
.fg26 .band-brand{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(ellipse 68% 72% at 72% -12%,rgba(171,138,182,.14),
      transparent 70%),
    linear-gradient(180deg,#10182d 0%,var(--pitch) 82%);}
/* Soft edge blooms give the dark band depth without returning to a teal fill. */
.fg26 .band-brand::before{content:"";position:absolute;inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(ellipse 48% 70% at 8% 2%,rgba(41,186,171,.08),
      transparent 72%),
    radial-gradient(ellipse 52% 62% at 88% 0%,rgba(171,138,182,.16),
      transparent 70%);}
.fg26 .band-brand .wrap{position:relative;z-index:1;width:calc(100% - 64px);
  max-width:var(--max);padding:clamp(34px,5vw,54px);overflow:hidden;
  border:2px solid rgba(41,186,171,.24);border-radius:20px;
  background:
    radial-gradient(ellipse 42% 62% at 92% 0%,rgba(171,138,182,.22),
      transparent 68%),
    radial-gradient(ellipse 90% 70% at 12% 0%,rgba(41,186,171,.08),
      transparent 58%),
    rgba(13,20,39,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 60px rgba(0,0,0,.28);}
.fg26 .band-brand .wrap > *{position:relative;z-index:1;}
.fg26 .band-brand h2,.fg26 .band-brand h3{color:#fff;}
.fg26 .band-brand p{color:rgba(255,255,255,.82);}
.fg26 .band-brand .eyebrow{color:rgba(255,255,255,.72);}
.fg26 .band-brand .btn-primary{background:rgba(41,186,171,.12);
  color:#fff;border:1px solid rgba(41,186,171,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 0 24px -10px rgba(41,186,171,.72);}
.fg26 .band-brand .btn-primary:hover{background:rgba(41,186,171,.18);
  transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
    0 16px 30px -18px rgba(0,0,0,.8),
    0 0 30px -10px rgba(41,186,171,.78);}
.fg26 .band-brand .btn-secondary{background:rgba(204,185,211,.10);
  color:#fff;border-color:rgba(204,185,211,.42);}
.fg26 .band-brand .btn-secondary:hover{background:rgba(204,185,211,.16);
  border-color:rgba(204,185,211,.62);}

/* lilac AI-feature wash, a directional tint, never a saturated fill */
.fg26 .surf-ai{background:linear-gradient(180deg,
  rgba(204,185,211,.22),rgba(204,185,211,.06));}

/* yellow accent word, reserved for dark surfaces only */
.fg26 .acc-yellow{color:var(--yellow);}

/* ---- HERO BASE FADE ----
   Top banners blend into the next surface with a soft tonal fade. No
   literal divider line: section changes should feel layered, not sliced. */
.fg26 .ph::after,
.fg26 .hp-hero::after,
.fg26 .pr-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:76px;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 70% 90% at 50% 100%,rgba(41,186,171,.10),
      transparent 70%),
    linear-gradient(180deg,transparent,rgba(11,14,29,.30));}

/* Section surfaces rely on spacing and background shifts, not hard divider
   lines. */
.fg26 .cs,.fg26 .bg2{border-top:0;}

/* ---- NAV ---- */
/* light theme, a solid white bar so dark content scrolling behind it
   never tints the nav grey; the dark theme below keeps its translucent
   glass treatment (consistently dark, so no tinting shows there) */
.fg26-nav{position:sticky;top:0;z-index:50;background:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;transition:border-color .2s;}
.fg26-nav.scrolled{border-color:var(--line);}
.fg26-nav .navin{max-width:1360px;margin:0 auto;padding:0 32px;height:64px;
  display:flex;align-items:center;justify-content:space-between;}
.fg26-nav .logo{height:40px;width:auto;display:block;}
/* inline-SVG logo, the wordmark stays full-contrast (theme-aware via
   --ink); the clip mark rests at a calm teal and brightens to vivid
   brand teal on hover/focus. Dark theme tunes the resting clip below. */
.fg26-nav .logo-word{fill:var(--ink);transition:fill .3s ease;}
.fg26-nav .logo-clip{fill:#29BAAB;transition:fill .3s ease;}
.fg26-logo:hover .logo-clip,
.fg26-logo:focus-visible .logo-clip{fill:#29BAAB;}
.fg26-nav .links{display:flex;align-items:center;gap:clamp(12px,1.35vw,24px);font-size:13px;
  color:var(--soft);font-weight:500;}
.fg26-nav .links a,
.fg26-nav .fg26-navtrigger,
.fg26-nav .btn-primary{white-space:nowrap;flex-shrink:0;}
.fg26-nav .links a:hover{color:var(--ink);}
.fg26-nav .links a.active{color:var(--ink);font-weight:600;}
.fg26-nav .ctas{display:flex;gap:10px;align-items:center;flex-shrink:0;}
/* nav CTA, sized to sit comfortably inside the 64px bar so the button
   no longer makes the banner read taller than it is. */
.fg26-nav .btn-primary{padding:9px 16px;font-size:13px;border-radius:8px;}

/* ---- CLIENT PORTAL split sign-in, direct Console link + options caret ---- */
.fg26-portal{position:relative;}
.fg26-portal-control{display:inline-flex;align-items:stretch;}
.fg26-portal-main,
.fg26-portal-toggle{display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--font-poppins);
  color:var(--soft);background:none;border:0;border-radius:8px;
  transition:color .18s,background .18s;}
.fg26-portal-main{padding:8px 3px 8px 10px;font-size:13px;font-weight:500;}
.fg26-portal-toggle{width:20px;cursor:pointer;}
.fg26-portal-main:hover,
.fg26-portal-toggle:hover,
.fg26-portal-toggle[aria-expanded="true"]{color:var(--ink);background:var(--bg2);}
.fg26-portal-toggle .fg26-chev{transition:transform .18s;}
.fg26-portal-toggle[aria-expanded="true"] .fg26-chev{transform:rotate(180deg);}
.fg26-portal-panel{position:absolute;top:calc(100% + 8px);right:0;
  min-width:240px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;
  box-shadow:0 18px 40px -16px rgba(16,23,40,.28);z-index:60;}
.fg26-portal-item{display:flex;flex-direction:column;gap:2px;
  padding:10px 12px;border-radius:8px;transition:background .15s;}
.fg26-portal-item:hover{background:var(--bg2);}
.fg26-portal-item-label{font-size:14px;font-weight:600;color:var(--ink);}
.fg26-portal-item-desc{font-size:12px;color:var(--faint);}

/* ---- MEGA-MENUS, Platform / Solutions / Services ---- */
.fg26-navitem{position:relative;display:flex;align-items:center;height:64px;}
.fg26-navtrigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.fg26-chev{transition:transform .2s;}
.fg26-navitem:hover .fg26-chev{transform:rotate(180deg);}

.fg26-mega{position:absolute;top:100%;left:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(16,23,40,.3);padding:22px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:60;}
.fg26-navitem:hover .fg26-mega,
.fg26-navitem:focus-within .fg26-mega{
  opacity:1;visibility:visible;transform:translateY(0);}
.fg26-mega--narrow{min-width:300px;}

.fg26-mega-cols{display:flex;gap:30px;}
.fg26-mega-col{display:flex;flex-direction:column;min-width:232px;}
.fg26-mega-head{font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px;}
.fg26-mega-link{display:flex;flex-direction:column;gap:2px;padding:9px 12px;
  border-radius:9px;transition:background .14s;}
.fg26-mega-link:hover{background:var(--bg2);}
.fg26-mega-label{font-size:14px;font-weight:600;color:var(--ink);}
.fg26-mega-desc{font-size:12px;color:var(--faint);line-height:1.45;}
.fg26-mega-rule{border:0;border-top:1px solid var(--line);margin:8px 12px;}
.fg26-mega-index{display:flex;flex-direction:column;}
.fg26-mega-idx{font-size:13.5px;color:var(--soft);padding:6px 12px;
  border-radius:8px;transition:background .14s,color .14s;}
.fg26-mega-idx:hover{background:var(--bg2);color:var(--ink);}
.fg26-mega-all{display:block;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);font-size:13px;font-weight:600;
  color:var(--teal-deep);}
.fg26-mega-all:hover{color:var(--teal);}

/* ---- MOBILE MENU, burger + accordion panel (shown below 1024px) ---- */
.fg26-burger{display:none;flex-direction:column;justify-content:center;
  gap:5px;width:40px;height:40px;padding:9px;background:none;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;}
.fg26-burger span{display:block;width:100%;height:2px;background:var(--ink);
  border-radius:1px;transition:transform .2s,opacity .15s;}
.fg26-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.fg26-burger.open span:nth-child(2){opacity:0;}
.fg26-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.fg26-mobile{position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 26px 44px -22px rgba(16,23,40,.32);
  padding:8px 24px 22px;max-height:calc(100svh - 64px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.fg26-mobile-row{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:15px 4px;font-size:16px;font-weight:600;color:var(--ink);
  font-family:inherit;background:none;border:0;
  border-bottom:1px solid var(--line);cursor:pointer;text-align:left;}
.fg26-mobile-row .fg26-chev{transition:transform .2s;color:var(--faint);}
.fg26-mobile-row.open .fg26-chev{transform:rotate(180deg);}
.fg26-mobile-sub{padding:2px 4px 14px 12px;}
.fg26-mobile-subhead{display:block;font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  margin:12px 0 2px;}
.fg26-mobile-link{display:block;padding:9px 8px;font-size:14.5px;
  color:var(--soft);border-radius:7px;}
.fg26-mobile-link:hover{background:var(--bg2);color:var(--ink);}
.fg26-mobile-rule{border:0;border-top:1px solid var(--line);margin:8px 8px;}
.fg26-mobile-all{color:var(--teal-deep);font-weight:600;}
.fg26-mobile-portal{border-bottom:1px solid var(--line);padding-bottom:10px;}
.fg26-mobile-cta{display:flex;justify-content:center;width:100%;margin-top:18px;}

/* ---- THEME TOGGLE + dual logo ---- */
/* the dark-surface logo is hidden in light mode; the dark theme swaps them */
.fg26 .logo-dark{display:none;}
.fg26-theme{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;background:none;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;
  color:var(--soft);transition:color .18s,border-color .18s;}
.fg26-theme:hover{color:var(--ink);border-color:var(--navy);}
.fg26-theme-sun{display:none;}
.fg26-mobile-theme{display:flex;align-items:center;
  justify-content:space-between;padding-top:6px;}

/* ---- FOOTER ---- */
.fg26-footer{background:var(--pitch);color:#fff;
  padding:64px 0 30px;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0),
    radial-gradient(ellipse 70% 100% at 50% 0%,rgba(41,186,171,.07),transparent);
  background-size:26px 26px,100% 100%;}
.fg26-footer .fcols{display:grid;grid-template-columns:1.5fr repeat(5,1fr);
  gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
.fg26-footer .fbrand .logo{height:34px;margin-bottom:16px;}
.fg26-footer .fbrand p{font-size:13.5px;max-width:280px;line-height:1.6;}
.fg26-footer .fsocials{display:flex;align-items:center;gap:12px;margin-top:18px;}
.fg26-footer .fsocials a{width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s,filter .16s;}
.fg26-footer .fsocials a:hover{transform:translateY(-2px);
  filter:drop-shadow(0 0 12px rgba(41,186,171,.74));}
.fg26-footer .fsocials img{width:22px;height:22px;display:block;
  object-fit:contain;}
.fg26-footer h4{font-family:var(--font-poppins);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;}
.fg26-footer .fcol a{display:block;width:max-content;max-width:100%;
  font-size:14px;color:#fff;margin-bottom:10px;
  transition:color .16s,text-shadow .16s,transform .16s;}
.fg26-footer .fcol a:hover,.fg26-footer .fcol a:focus-visible{
  color:var(--teal);text-shadow:0 0 18px rgba(41,186,171,.46);
  transform:translateX(3px);}
.fg26-footer .fcol a:focus-visible{outline:2px solid rgba(41,186,171,.65);
  outline-offset:4px;border-radius:4px;}
.fg26-footer .fbase{margin-top:24px;padding-top:24px;display:flex;
  justify-content:center;text-align:center;font-size:13px;color:#fff;
  flex-wrap:wrap;gap:12px;}

/* responsive */
/* nav links hide at 1024px, with 6 primary links the row no longer fits
   the tablet band; below this width the burger + accordion panel take over
   and the in-bar Client Portal moves into that panel. */
@media(max-width:1024px){
  .fg26-nav .links{display:none;}
  .fg26-burger{display:flex;}
  .fg26-portal{display:none;}
  .fg26-nav .ctas > .fg26-theme{display:none;}
  /* the six-column footer no longer fits the tablet band, the brand block
     spans the full width above a three-column link grid */
  .fg26-footer .fcols{grid-template-columns:repeat(3,1fr);}
  .fg26-footer .fbrand{grid-column:1 / -1;}
}
@media(max-width:880px){
  .fg26 section{padding:72px 0;}
  .fg26 .band-brand{padding:24px 0;}
  .fg26 .band-brand .wrap{width:calc(100% - 32px);padding:30px 22px;
    border-radius:18px;}
  .fg26 .sec-head{margin-bottom:40px;}
  .fg26 .sec-head h2{font-size:28px;}
  .fg26 .split,.fg26 .split.rev{grid-template-columns:1fr;gap:34px;}
  .fg26-footer .fcols{grid-template-columns:1fr 1fr;gap:32px;}
  .fg26-footer .fbase{flex-direction:column;gap:8px;}
}
@media(max-width:560px){
  .fg26-footer .fcols{grid-template-columns:1fr;}
  .fg26-footer .fbrand p{max-width:none;}
}