/* ==========================================================================
   FGL SOLUTIONS — Homepage Design Proof
   Design tokens
   ========================================================================== */

@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  /* ---- Colour: FGL palette, derived from the logo mark ---- */
  --ink:        #0A0D12;   /* primary dark ground */
  --ink-2:      #12161F;   /* elevated dark panel */
  --ink-3:      #1B212E;   /* lightest dark-mode surface */
  --paper:      #FFFFFF;   /* clean white ground (light sections) */
  --paper-2:    #F4F5F6;   /* very light neutral grey — used sparingly for separation */
  --line-dark:  rgba(246,242,234,0.14);
  --line-light: rgba(10,13,18,0.11);

  --cyan:       #22D3EE;
  --cyan-soft:  #7FE6F4;
  --blue:       #1440E5;
  --blue-deep:  #0B1F86;
  --copper:     #C97A3D;
  --copper-soft:#E3A667;
  --copper-ink: #95521C; /* AA-safe copper for text on white/grey backgrounds */
  --focus:      #B35F1F; /* single focus-ring colour that stays >=3:1 on both dark and light surfaces */

  --text-on-dark:      #F6F2EA;
  --text-on-dark-mute: rgba(246,242,234,0.66);
  --text-on-dark-faint:rgba(246,242,234,0.40);
  --text-on-light:      #14181F;
  --text-on-light-mute: rgba(20,24,31,0.66);
  --text-on-light-faint:rgba(20,24,31,0.44);

  --grad-mark: linear-gradient(155deg, var(--cyan) 0%, var(--blue) 78%);
  --grad-panel: radial-gradient(120% 140% at 78% 8%, rgba(34,211,238,0.16) 0%, rgba(20,64,229,0.10) 32%, rgba(10,13,18,0) 68%);

  /* ---- Type ---- */
  --f-display: "Space Grotesk", "Inter", sans-serif;
  --f-body: "Inter", -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --gutter: clamp(24px, 5vw, 64px);
  --maxw: 1280px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .35s;
  --dur-med: .6s;
  --dur-slow: 1s;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-on-light);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
svg{ display:block; }

::selection{ background:var(--blue); color:var(--text-on-dark); }

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(179,95,31,0.22);
}

.no-scroll{ overflow:hidden; height:100%; }

/* ==========================================================================
   Utility
   ========================================================================== */
.section{ position:relative; padding:clamp(52px, 7.5vw, 108px) 0; }
.section--dark{ background:var(--ink); color:var(--text-on-dark); }
.section--light{ background:var(--paper); color:var(--text-on-light); }
.section--alt{ background:var(--paper-2); color:var(--text-on-light); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--copper-soft);
  margin-bottom:18px;
}
.section--light .eyebrow, .section--alt .eyebrow{ color:var(--copper-ink); }
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  opacity:.6;
}

h2.h-lg{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(30px, 4vw, 50px);
  line-height:1.1;
  letter-spacing:-0.01em;
  max-width:18ch;
}
.accent{ color:var(--copper); }
.section--dark .accent{ color:var(--cyan-soft); }

.lede{
  font-size:clamp(17.5px, 1.5vw, 21px);
  line-height:1.6;
  max-width:56ch;
  margin-top:20px;
  color:var(--text-on-light-mute);
}
.section--dark .lede{ color:var(--text-on-dark-mute); }

.head-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:56px;
}
.head-row .lede{ margin-top:12px; }

.split-layout{ display:grid; gap:36px; }
@media (min-width:900px){
  .split-layout{ grid-template-columns:.85fr 1.7fr; gap:56px; align-items:start; }
  .split-intro{ position:sticky; top:110px; }
}
.split-intro .h-lg{ max-width:14ch; }
.split-intro .lede{ max-width:32ch; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  border-radius:100px;
  font-family:var(--f-body);
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-primary{
  background:linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
  color:#080B10;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(20,64,229,0.55); }
.btn-ghost-dark{
  border:1px solid var(--line-dark);
  color:var(--text-on-dark);
}
.btn-ghost-dark:hover{ border-color:rgba(246,242,234,0.4); background:rgba(246,242,234,0.05); }
.btn-ghost-light{
  border:1px solid var(--line-light);
  color:var(--text-on-light);
}
.btn-ghost-light:hover{ border-color:rgba(20,24,31,0.32); background:rgba(20,24,31,0.04); }
.btn-sm{ padding:11px 20px; font-size:13.5px; }
.btn svg{ width:15px; height:15px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(10,13,18,0.30);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(246,242,234,0.08);
  color:var(--text-on-dark);
  transform:translateY(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1), background .35s var(--ease), padding .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(10,13,18,0.86);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(246,242,234,0.12);
  box-shadow:0 12px 30px -18px rgba(0,0,0,0.55);
  padding-top:13px; padding-bottom:13px;
}
.site-header.header-hidden{
  transform:translateY(-100%);
}
.brand{ display:flex; align-items:center; gap:11px; }
.logo-lockup{ height:58px; width:auto; display:block; }
.site-header .logo-lockup{ height:auto; width:160px; }

/* Light "plate" that holds the true-colour FGL lockup wherever it sits
   on a dark background — keeps the logo's original approved colours
   completely untouched; contrast comes from the plate, not a recolour. */
.brand-plate{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:100px; flex-shrink:0;
  background:radial-gradient(140% 160% at 30% 20%, #ffffff 0%, #eef1f4 70%, #e2e6eb 100%);
  box-shadow:0 2px 10px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.7);
}
.brand-plate .logo-lockup{ height:34px; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn-primary{ display:none; }
@media (min-width:900px){
  .header-actions .btn-primary{ display:inline-flex; }
}

.menu-toggle{
  display:flex; align-items:center; gap:10px;
  padding:10px 8px 10px 16px;
  color:var(--text-on-dark);
}
.menu-toggle .word{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.burger{ width:26px; height:18px; position:relative; }
.burger span{
  position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.nav-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }

/* Full-screen menu overlay */
.nav-overlay{
  position:fixed; inset:0; z-index:90;
  background:var(--ink);
  visibility:hidden; opacity:0;
  transition:opacity var(--dur-med) var(--ease), visibility 0s linear var(--dur-med);
  display:flex; flex-direction:column;
}
.nav-open .nav-overlay{
  visibility:visible; opacity:1;
  transition:opacity var(--dur-med) var(--ease);
}
.nav-overlay::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 88% 12%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(50% 50% at 8% 92%, rgba(201,122,61,0.10), transparent 60%);
  pointer-events:none;
}
.nav-overlay-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
}
.nav-close{
  display:flex; align-items:center; gap:10px; color:var(--text-on-dark);
  padding:10px;
}
.nav-close svg{ width:20px; height:20px; }

.nav-body{
  flex:1; display:flex; align-items:center;
  padding:0 var(--gutter);
  position:relative;
}
.nav-list{
  display:flex; flex-direction:column; gap:2px;
}
.nav-list li{ overflow:hidden; }
.nav-list a{
  display:inline-flex; align-items:baseline; gap:18px;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(32px, 6.4vw, 68px);
  line-height:1.28;
  color:var(--text-on-dark-mute);
  transform:translateY(110%);
  transition:color var(--dur-fast) var(--ease);
}
.nav-open .nav-list a{ animation:navIn var(--dur-med) var(--ease) forwards; }
.nav-list li:nth-child(1) a{ animation-delay:.05s; }
.nav-list li:nth-child(2) a{ animation-delay:.10s; }
.nav-list li:nth-child(3) a{ animation-delay:.15s; }
.nav-list li:nth-child(4) a{ animation-delay:.20s; }
.nav-list li:nth-child(5) a{ animation-delay:.25s; }
.nav-list li:nth-child(6) a{ animation-delay:.30s; }
.nav-list li:nth-child(7) a{ animation-delay:.35s; }
.nav-list li:nth-child(8) a{ animation-delay:.40s; }
@keyframes navIn{ to{ transform:translateY(0); } }
.nav-list a .n{ font-family:var(--f-mono); font-size:13px; color:var(--text-on-dark-mute); }
.nav-list a:hover, .nav-list a:focus-visible{ color:var(--text-on-dark); }
.nav-list a:hover .n{ color:var(--cyan-soft); }

.nav-side{
  display:none;
}
@media (min-width:860px){
  .nav-side{
    display:flex; flex-direction:column; gap:28px;
    position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
    width:280px;
  }
}
.nav-side .tag{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-on-dark-mute); margin-bottom:10px;
}
.nav-side .detail{ color:var(--text-on-dark-mute); font-size:15.5px; margin-bottom:7px; }
.nav-side .detail a:hover{ color:var(--cyan-soft); }

.nav-overlay-bottom{
  padding:22px var(--gutter) 28px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--line-dark);
  flex-wrap:wrap; gap:14px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--text-on-dark);
  padding-top:calc(148px);
  padding-bottom:96px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:var(--grad-panel);
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(60% 60% at 68% 30%, black, transparent 75%);
  mask-image:radial-gradient(60% 60% at 68% 30%, black, transparent 75%);
  opacity:.5;
}
.cursor-glow{
  position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(420px 420px at var(--mx,70%) var(--my,30%), rgba(34,211,238,0.10), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:72px; align-items:center;
}
@media (max-width:979px){
  .hero-copy{ order:2; }
  .hero-visual{ order:1; }
}
@media (min-width:980px){
  .hero-grid{ grid-template-columns:.95fr 1.15fr; gap:48px; }
}
.hero-copy .eyebrow{ color:var(--copper-soft); }
.hero h1{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(36px, 5.2vw, 66px);
  line-height:1.06;
  letter-spacing:-0.015em;
  max-width:14ch;
}
.hero h1 .accent{ color:var(--cyan-soft); }
.hero .lede{ color:var(--text-on-dark-mute); max-width:46ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.hero-trust{
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:26px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--text-on-dark-mute);
}
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust span::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,0.18);
}

/* Signature hero graphic — Focus Ring */
.hero-visual{
  position:relative;
  aspect-ratio:760/700;
  max-width:760px;
  margin:0 auto;
  width:100%;
}
@media (max-width:979px){
  .hero-visual{ margin-top:12px; max-width:520px; }
}
.hero-visual svg{ width:100%; height:100%; overflow:visible; }
.ring{ transform-origin:380px 350px; fill:none; }
.ring-a{ animation:spin 46s linear infinite; }
.ring-b{ animation:spin 34s linear infinite reverse; }
.ring-c{ animation:spin 60s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.particle{ animation:particleFade 4.4s var(--ease) infinite; transform-origin:center; }
@keyframes particleFade{
  0%,100%{ opacity:.25; }
  50%{ opacity:.85; }
}
.hero-visual .mark-core{
  animation:coreFloat 7s var(--ease) infinite;
  transform-origin:380px 350px;
}
@keyframes coreFloat{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}

/* six connected-function spokes around the FGL mark */
.spoke-line{ stroke:rgba(246,242,234,0.14); stroke-width:1.3; }
.spoke-pulse{
  fill:none; stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:16 420;
  animation:spokePulse 4.4s linear infinite;
}
@keyframes spokePulse{
  0%{ stroke-dashoffset:0; opacity:0; }
  8%{ opacity:.95; }
  85%{ opacity:.95; }
  100%{ stroke-dashoffset:-330; opacity:0; }
}
.hero-node{ fill:var(--ink); stroke:var(--cyan-soft); stroke-width:2.2; animation:heroNodePulse 3.4s var(--ease) infinite; transform-origin:center; }
@keyframes heroNodePulse{
  0%,100%{ opacity:.7; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.18); }
}
.hero-node-label{
  font-family:var(--f-mono); font-size:14px; letter-spacing:.03em;
  fill:var(--text-on-dark);
}

/* Watermark word */
.hero-watermark{
  position:absolute; left:var(--gutter); bottom:-6px;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(70px, 13vw, 190px);
  color:transparent;
  -webkit-text-stroke:1px rgba(246,242,234,0.08);
  letter-spacing:-0.02em;
  z-index:-1;
  user-select:none;
  pointer-events:none;
}

/* ==========================================================================
   Services band — continuous moving strip of what FGL does
   ========================================================================== */
.services-band{
  background:var(--ink-2);
  padding:34px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
}
.band-track{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.band-row{
  display:flex; align-items:center; width:max-content;
  animation:scrollX 42s linear infinite;
}
.services-band:hover .band-row{ animation-play-state:paused; }
.band-row span{
  font-family:var(--f-display); font-weight:600; font-size:20px;
  color:var(--text-on-dark); white-space:nowrap; letter-spacing:.01em;
  padding:0 34px;
}
.band-row .band-tag{ color:var(--cyan-soft); }
.band-dot{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);
  box-shadow:0 0 0 5px rgba(34,211,238,0.14), 0 0 14px rgba(34,211,238,0.35);
}
@keyframes scrollX{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .band-row{ animation:none; }
  .band-track{ overflow-x:auto; }
}
@media (max-width:640px){
  .band-row span{ font-size:16.5px; padding:0 22px; }
  .band-dot{ width:9px; height:9px; }
}

/* ==========================================================================
   What FGL does
   ========================================================================== */
.about-grid{ display:grid; gap:48px; }
@media (min-width:900px){ .about-grid{ grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; } }
.about-points{ display:grid; gap:22px; margin-top:8px; }
.about-point{ display:flex; gap:16px; }
.about-point .num{
  font-family:var(--f-mono); font-size:13px; color:var(--copper-ink);
  padding-top:3px; flex-shrink:0; width:26px;
}
.about-point p{ font-size:17.5px; line-height:1.58; color:var(--text-on-light-mute); }
.about-point strong{ display:block; color:var(--text-on-light); font-family:var(--f-display); font-weight:600; font-size:16.5px; margin-bottom:4px; }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid{ display:grid; gap:22px; }
@media (min-width:760px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
.svc-card{
  background:var(--paper); padding:40px 36px; position:relative;
  border:1.5px solid var(--line-light);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(10,13,18,0.04);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.svc-card:hover{
  border-color:var(--blue);
  box-shadow:0 22px 44px -20px rgba(20,64,229,0.28);
  transform:translateY(-3px);
}
.svc-icon{
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--ink) 0%, var(--ink-3) 100%);
  color:var(--cyan-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  margin-bottom:24px;
}
.svc-icon svg{ width:25px; height:25px; }
.svc-card .n{ font-family:var(--f-mono); font-size:12.5px; color:var(--text-on-light-mute); position:absolute; top:38px; right:36px; }
.svc-card h3{ font-family:var(--f-display); font-weight:600; font-size:23px; margin-bottom:12px; }
.svc-card p{ font-size:17px; line-height:1.58; color:var(--text-on-light-mute); max-width:40ch; }
.svc-learn{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--blue); position:relative;
}
.svc-learn svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.svc-card:hover .svc-learn svg{ transform:translateX(4px); }
.svc-tip{
  position:absolute; left:36px; bottom:18px;
  font-family:var(--f-mono); font-size:11.5px; color:var(--text-on-light-mute);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.svc-tip.show{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   AI Automation feature
   ========================================================================== */
.ai-feature{ background:var(--ink); color:var(--text-on-dark); }
.ai-grid{ display:grid; gap:56px; align-items:center; }
@media (min-width:980px){ .ai-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.ai-list{ display:grid; gap:16px; margin-top:30px; }
.ai-list li{ display:flex; gap:14px; align-items:flex-start; font-size:17.5px; color:var(--text-on-dark); }
.ai-list svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--cyan); }

.systems-viz{ position:relative; aspect-ratio:710/530; }
.systems-viz svg{ width:100%; height:100%; overflow:visible; }
.sys-line{ stroke:rgba(246,242,234,0.18); stroke-width:1.9; }
.sys-hub{ fill:var(--ink-3); stroke:rgba(34,211,238,0.5); stroke-width:2.1; }
.sys-hub-label{ font-family:var(--f-display); font-weight:600; font-size:22px; fill:var(--text-on-dark); }
.sys-hub-label--sub{ font-family:var(--f-mono); font-weight:400; font-size:14.5px; fill:var(--text-on-dark-mute); letter-spacing:.02em; }
.sys-node-dot{ fill:var(--ink); stroke:var(--cyan-soft); stroke-width:2.8; }
.sys-label{ font-family:var(--f-mono); font-size:17px; font-weight:500; fill:var(--text-on-dark); }
.sys-pulse{
  fill:none; stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:16 400;
  animation:sysPulse 4s linear infinite;
}
@keyframes sysPulse{
  0%{ stroke-dashoffset:0; opacity:0; }
  8%{ opacity:1; }
  88%{ opacity:1; }
  100%{ stroke-dashoffset:-210; opacity:0; }
}

/* ==========================================================================
   Why FGL
   ========================================================================== */
.why-grid{ display:grid; gap:18px; margin-top:8px; }
@media (min-width:720px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
.why-card{
  background:var(--paper); padding:30px 28px;
  border:1.5px solid var(--line-light); border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(10,13,18,0.04);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.why-card:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 16px 32px -18px rgba(20,64,229,0.24); }
.why-card svg{ width:24px; height:24px; color:var(--blue); margin-bottom:16px; }
.why-card h4{ font-family:var(--f-display); font-weight:600; font-size:18px; margin-bottom:9px; }
.why-card p{ font-size:16.5px; line-height:1.55; color:var(--text-on-light-mute); }

/* ==========================================================================
   Process
   ========================================================================== */
.process-list{ display:grid; grid-template-columns:1fr; gap:38px; margin-top:16px; }
@media (min-width:860px){ .process-list{ grid-template-columns:repeat(4,1fr); gap:28px; } }
.process-item{ position:relative; }
.process-marker{ display:flex; align-items:center; margin-bottom:24px; }
.pn-circle{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:14.5px; color:var(--copper-ink);
  border:1.5px solid var(--line-light); background:var(--paper);
  position:relative; z-index:1;
  transition:border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.process-item.in-view .pn-circle{ border-color:var(--blue); color:var(--blue); }
.pn-line{
  height:2px; flex:1; background:var(--line-light);
  margin-left:-1px; position:relative; overflow:hidden;
}
.process-item:last-child .pn-line{ display:none; }
@media (max-width:859px){ .pn-line{ display:none; } }
.pn-line::after{
  content:""; position:absolute; inset:0 100% 0 0;
  background:var(--blue); transition:right 1s var(--ease);
}
.process-item.in-view .pn-line::after{ right:0%; }
.process-item h4{ font-family:var(--f-display); font-weight:600; font-size:22px; margin-bottom:8px; }
.process-item p{ color:var(--text-on-light-mute); font-size:17px; line-height:1.58; max-width:34ch; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.rev-grid{ display:grid; gap:22px; margin-top:8px; }
@media (min-width:700px){ .rev-grid{ grid-template-columns:repeat(2,1fr); } }
.rev-card{
  background:var(--paper); border:1.5px solid var(--line-light);
  border-radius:var(--radius-md); padding:30px 28px;
  display:flex; flex-direction:column; gap:20px; min-height:230px;
  box-shadow:0 1px 2px rgba(10,13,18,0.04);
}
.rev-quote{ font-family:var(--f-body); font-size:17.5px; line-height:1.62; color:var(--text-on-light); flex:1; }
.rev-meta{ display:flex; align-items:center; gap:13px; }
.rev-avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, var(--ink) 0%, var(--ink-3) 100%);
  color:var(--cyan-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:600; font-size:13px;
}
.rev-meta > div{ display:flex; flex-direction:column; gap:2px; }
.rev-name{ font-family:var(--f-display); font-weight:600; font-size:15px; color:var(--text-on-light); }
.rev-role{ font-family:var(--f-mono); font-size:12px; color:var(--text-on-light-mute); }

/* ==========================================================================
   About
   ========================================================================== */
.about-cta-band{
  background:var(--ink); color:var(--text-on-dark);
}
.aboutus-grid{ display:grid; gap:48px; }
@media (min-width:960px){ .aboutus-grid{ grid-template-columns:1fr 1fr; gap:72px; align-items:center; } }
.aboutus-figure{
  aspect-ratio:5/4; border-radius:var(--radius-lg);
  background:var(--ink-2); border:1px solid var(--line-dark);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.aboutus-figure svg{ width:64%; overflow:visible; }
.about-tri-line{ stroke:rgba(246,242,234,0.16); stroke-width:1.3; }
.about-tri-line--spoke{ stroke:rgba(34,211,238,0.14); }
.about-node{ fill:var(--ink); stroke:var(--cyan-soft); stroke-width:2; animation:aboutPulse 3.6s var(--ease) infinite; transform-origin:center; }
.about-node.an1{ animation-delay:0s; }
.about-node.an2{ animation-delay:.9s; }
.about-node.an3{ animation-delay:1.8s; }
@keyframes aboutPulse{
  0%,100%{ opacity:.65; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.25); }
}
.about-node-label{ font-family:var(--f-mono); font-size:12px; fill:var(--text-on-dark-mute); }
.aboutus-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:34px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--radius-md); overflow:hidden; }
.aboutus-stats div{ background:var(--ink); padding:20px 22px; }
.aboutus-stats .k{ font-family:var(--f-display); font-weight:600; font-size:22px; color:var(--cyan-soft); }
.aboutus-stats .k.k-infinity{ font-size:34px; line-height:1; }
.aboutus-stats .l{ font-family:var(--f-mono); font-size:11.5px; color:var(--text-on-dark-mute); margin-top:4px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; gap:48px; }
@media (min-width:980px){ .contact-grid{ grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; } }
.contact-detail-list{ display:grid; gap:18px; margin-top:34px; }
.contact-detail{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px; border:1px solid var(--line-light); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.contact-detail:hover{ border-color:var(--blue); background:var(--paper-2); }
.contact-detail svg{ width:20px; height:20px; color:var(--blue); flex-shrink:0; }
.contact-detail .lab{ font-family:var(--f-mono); font-size:11px; color:var(--text-on-light-mute); text-transform:uppercase; letter-spacing:.06em; }
.contact-detail .val{ font-family:var(--f-display); font-weight:600; font-size:18px; margin-top:3px; }
.contact-panel{
  background:var(--ink); color:var(--text-on-dark);
  border-radius:var(--radius-lg); padding:44px 38px;
  position:relative; overflow:hidden;
}
.contact-panel::before{ content:""; position:absolute; inset:0; background:var(--grad-panel); }
.contact-panel > *{ position:relative; }
.contact-panel h3{ font-family:var(--f-display); font-weight:600; font-size:26px; max-width:16ch; }
.contact-panel p{ color:var(--text-on-dark-mute); margin-top:12px; font-size:15.5px; line-height:1.55; }
.contact-panel .btn{ margin-top:26px; width:100%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--text-on-dark); padding:64px 0 28px; border-top:1px solid var(--line-dark); }
.footer-top{ display:grid; gap:44px; padding-bottom:48px; border-bottom:1px solid var(--line-dark); }
@media (min-width:860px){ .footer-top{ grid-template-columns:1.3fr .9fr .9fr 1fr; gap:32px; } }
.footer-brand .tag{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--text-on-dark-mute); text-transform:uppercase; margin-bottom:16px; }
.footer-brand p{ margin-top:16px; color:var(--text-on-dark-mute); font-size:16px; line-height:1.55; max-width:34ch; }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-dark); color:var(--text-on-dark-mute);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.footer-social a:hover{ color:var(--cyan-soft); border-color:var(--cyan-soft); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h5{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-dark-mute); margin-bottom:16px; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ font-size:16.5px; color:var(--text-on-dark-mute); transition:color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color:var(--cyan-soft); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:26px; font-size:15px; color:var(--text-on-dark-mute); }
.footer-bottom a:hover{ color:var(--text-on-dark); }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a{ margin-right:20px; }
.footer-bottom .legal-links a:last-child{ margin-right:0; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.23s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.30s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.37s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1; transform:none; }
}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,10,14,0.72);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.modal-open .modal-overlay{ opacity:1; visibility:visible; transition:opacity var(--dur-fast) var(--ease); }
.modal-card{
  background:var(--paper); color:var(--text-on-light);
  width:100%; max-width:560px; max-height:88vh; overflow:auto;
  border-radius:var(--radius-lg);
  padding:38px 36px;
  transform:translateY(18px) scale(.98); opacity:0;
  transition:transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.modal-open .modal-card{ transform:translateY(0) scale(1); opacity:1; }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:6px; }
.modal-head h3{ font-family:var(--f-display); font-weight:600; font-size:24px; max-width:20ch; }
.modal-close{ padding:8px; margin:-8px -8px 0 0; color:var(--text-on-light-mute); }
.modal-close svg{ width:20px; height:20px; }
.modal-sub{ color:var(--text-on-light-mute); font-size:14.5px; margin-top:8px; margin-bottom:26px; }
.field{ display:grid; gap:7px; margin-bottom:16px; }
.field label{ font-family:var(--f-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-on-light-mute); }
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-size:15px; color:var(--text-on-light);
  background:var(--paper-2); border:1px solid var(--line-light); border-radius:10px;
  padding:13px 14px; width:100%;
  transition:border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); outline:none; }
.field-row{ display:grid; gap:16px; }
@media (min-width:480px){ .field-row{ grid-template-columns:1fr 1fr; } }

/* Required-field marker, inline validation, honeypot, consent, status */
.req{ color:var(--focus); }
.field-error{
  display:none; font-family:var(--f-mono); font-size:12px; color:var(--focus);
  margin-top:2px;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:var(--focus);
}
.field.has-error .field-error{ display:block; }
.honeypot{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}
.checkbox-field{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px;
  margin:18px 0 4px;
}
.checkbox-field input{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--blue); }
.checkbox-field label{ font-size:13.5px; line-height:1.5; color:var(--text-on-light-mute); }
.checkbox-field label a{ color:var(--blue); text-decoration:underline; }
.checkbox-field .field-error{ display:none; flex-basis:100%; margin-left:26px; }
.checkbox-field.has-error .field-error{ display:block; }
.checkbox-field.has-error input{ outline:2px solid var(--focus); outline-offset:2px; }
.form-status{
  font-family:var(--f-mono); font-size:13px; margin-top:14px; min-height:18px;
}
.form-status.is-success{ color:#1a7a3e; }
.form-status.is-error{ color:var(--focus); }
.modal-submit{ width:100%; margin-top:8px; }
.modal-submit[disabled]{ opacity:.7; cursor:not-allowed; }
.modal-success{
  display:none; text-align:center; padding:30px 6px 8px;
}
.modal-success.show{ display:block; }
.modal-success svg{ width:44px; height:44px; color:var(--blue); margin:0 auto 18px; }
.modal-success h4{ font-family:var(--f-display); font-weight:600; font-size:20px; margin-bottom:10px; }
.modal-success p{ color:var(--text-on-light-mute); font-size:14.5px; max-width:38ch; margin:0 auto; }
.modal-form.hide{ display:none; }

/* ==========================================================================
   Misc
   ========================================================================== */
.industries{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.pill{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.02em;
  padding:9px 16px; border-radius:100px; border:1px solid var(--line-light);
  color:var(--text-on-light-mute);
}

/* ==========================================================================
   Legal / simple content pages (Privacy Policy, Terms, 404)
   ========================================================================== */
.page-hero{
  background:var(--ink); color:var(--text-on-dark);
  padding:calc(120px + 40px) 0 56px;
}
.page-hero .breadcrumb{
  font-family:var(--f-mono); font-size:13px; color:var(--text-on-dark-mute);
  margin-top:18px;
}
.page-hero .breadcrumb a{ color:var(--text-on-dark-mute); }
.page-hero .breadcrumb a:hover{ color:var(--cyan-soft); }
.legal-content{ max-width:72ch; }
.legal-content .updated{
  font-family:var(--f-mono); font-size:13px; color:var(--text-on-light-mute);
  margin-bottom:8px;
}
.legal-content > p:first-of-type{ font-size:16.5px; color:var(--text-on-light-mute); margin-bottom:36px; }
.legal-content h2{
  font-family:var(--f-display); font-weight:600; font-size:23px;
  margin-top:44px; margin-bottom:14px; color:var(--text-on-light);
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content p{ font-size:16px; line-height:1.65; color:var(--text-on-light-mute); margin-bottom:14px; }
.legal-content ul{ margin:0 0 14px; padding-left:22px; list-style:disc; }
.legal-content li{ font-size:16px; line-height:1.65; color:var(--text-on-light-mute); margin-bottom:6px; }
.legal-content a{ color:var(--blue); text-decoration:underline; }

.notfound-section{ min-height:56vh; display:flex; align-items:center; }
.notfound-code{
  font-family:var(--f-mono); font-size:15px; letter-spacing:.1em; color:var(--copper-ink);
  margin-bottom:18px;
}
.notfound-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

@media (max-width:640px){
  .hero{ padding-top:120px; }
  .site-header{ padding:14px 20px; }
  .logo-lockup{ height:44px; }
  .site-header .logo-lockup{ height:auto; width:122px; }
  .industries{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,auto);
    grid-auto-flow:column; justify-items:start; gap:10px;
  }
}