/* =================================================================
   GeneralATM — premium design system (enterprise-platform rebuild)
   Patterns modeled on Stripe / Samsara / ServiceTitan:
   oversized type, generous whitespace, logo marquee, big metrics,
   dark "why" pillars, outcome cards, trust signals, strong CTA.
   Forelytex (company) · GeneralATM (product) · two services:
   Field Service (teal #2189AD) + Cash Management (green #149a2b).
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&family=Fraunces:ital,opsz,wght@1,9..144,500;1,9..144,600&display=swap');

:root{
  --ink:#0b1418; --body:#3d484e; --muted:#889299; --line:#eaeeef; --line-2:#dce2e4;
  --bg:#ffffff; --soft:#f6f8f8; --dark:#081316; --dark-2:#0f1f25;
  --fs:#1d7991; --fs-dk:#155f74; --cm:#138f28; --cm-dk:#0d7320; --brand:#1d7991;
  --radius:12px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(11,20,24,.04);
  --shadow:0 6px 22px rgba(11,20,24,.07), 0 1px 3px rgba(11,20,24,.04);
  --shadow-lg:0 40px 80px -22px rgba(11,20,24,.22), 0 12px 28px -14px rgba(11,20,24,.13);
  --maxw:1180px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Hanken Grotesk",var(--font);
}
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ font-family:var(--font); color:var(--body); background:var(--bg); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img,svg{ display:block; max-width:100%; }
a{ color:var(--fs-dk); text-decoration:none; } a:hover{ color:var(--fs); }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.06; letter-spacing:-.032em; font-weight:800; text-wrap:balance; }
h1{ font-size:clamp(2.7rem,5.6vw,4.3rem); letter-spacing:-.04em; }
h2{ font-size:clamp(1.95rem,3.7vw,2.95rem); }
h3{ font-size:1.2rem; letter-spacing:-.02em; font-weight:700; }
p{ color:var(--body); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.container--wide{ max-width:1320px; }
.section{ padding-block:clamp(3.5rem,7.5vw,6.5rem); }
.section--soft{ background:var(--soft); }
.section--dark{ background:radial-gradient(1200px 500px at 70% -10%, #173039, var(--dark)); color:#aebbc1; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.section--tight{ padding-block:clamp(2.2rem,4vw,3.2rem); }
.center{ text-align:center; } .center .lead{ margin-inline:auto; }
.eyebrow{ font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; color:var(--brand); margin-bottom:.85rem; }
.section--dark .eyebrow{ color:#5cc7e6; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); color:var(--body); max-width:62ch; line-height:1.55; text-wrap:pretty; }
.section--dark .lead{ color:#aebbc1; }
.muted{ color:var(--muted); font-size:.92rem; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.02rem; padding:.8rem 1.4rem; border-radius:9px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(31,127,158,.28); }
.btn--primary:hover{ background:var(--fs-dk); color:#fff; box-shadow:0 10px 24px rgba(31,127,158,.32); }
.btn--outline{ background:#fff; border-color:var(--line-2); color:var(--ink); }
.btn--outline:hover{ border-color:var(--brand); color:var(--brand); }
.btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); color:#fff; }
.btn--ghost:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.12); }
.btn--lg{ padding:.95rem 1.7rem; font-size:1.08rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* header */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.88); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:70px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.brand:hover{ color:var(--ink); }
.brand__mark{ width:36px; height:36px; border-radius:11px; box-shadow:var(--shadow-sm); font-size:0; color:transparent; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%231d7991'/%3E%3Cstop offset='1' stop-color='%23138f28'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='40' rx='11' fill='url(%23g)'/%3E%3Ctext x='20' y='28.5' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='25' fill='white' text-anchor='middle'%3EG%3C/text%3E%3C/svg%3E") center/contain no-repeat; }
.brand i{ font-style:normal; color:var(--brand); }
.brand small{ display:block; font-size:.56rem; font-weight:600; color:var(--muted); letter-spacing:.17em; text-transform:uppercase; margin-top:2px; }
.brand>span{ display:block; line-height:1.04; }
.nav__links{ display:flex; align-items:center; gap:.15rem; list-style:none; padding:0; margin:0; }
.nav__links a{ color:var(--ink); font-weight:500; font-size:.96rem; padding:.45rem .8rem; border-radius:8px; }
.nav__links a:hover{ background:var(--soft); color:var(--ink); }
.nav__cta{ display:flex; align-items:center; gap:.5rem; }
.nav__toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav__toggle span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; }
.nav__toggle span+span{ margin-top:5px; }
@media (max-width:900px){
  .nav__links,.nav__cta .btn--outline{ display:none; }
  .nav__toggle{ display:block; }
  .site-header.open .nav__links{ display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--line); padding:.5rem 1.1rem 1rem; box-shadow:var(--shadow); }
  .site-header.open .nav__links a{ padding:.75rem .6rem; }
}

/* hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{ content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none; background:
  radial-gradient(680px 420px at 80% 18%, rgba(29,121,145,.11), transparent 60%),
  radial-gradient(560px 380px at 12% 28%, rgba(19,143,40,.07), transparent 55%);
  animation:heroDrift 17s ease-in-out infinite alternate; }
.hero>.container{ position:relative; z-index:1; }
@keyframes heroDrift{ to{ transform:translate3d(4%,-3%,0) scale(1.06); } }
.hero__grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:center; padding-block:clamp(3.4rem,7vw,5.8rem); }
.hero h1{ letter-spacing:-.035em; }
.hero p{ font-size:clamp(1.12rem,1.7vw,1.32rem); margin-top:1.2rem; max-width:46ch; line-height:1.55; }
.hero .btn-row{ margin-top:1.9rem; }
.hero__note{ margin-top:1.1rem; font-size:.86rem; color:var(--muted); }
@media (max-width:860px){ .hero__grid{ grid-template-columns:1fr; } }

/* logo marquee (integrations / ecosystem) */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3.2rem; width:max-content; animation:marquee 34s linear infinite; align-items:center; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-weight:700; font-size:1.18rem; color:#8a969b; white-space:nowrap; letter-spacing:-.01em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* big metrics */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
@media (max-width:680px){ .metrics{ grid-template-columns:1fr 1fr; } }
.metric{ text-align:center; }
.metric__n{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1; }
.section--dark .metric__n{ color:#fff; }
.metric__l{ font-size:.95rem; color:var(--muted); margin-top:.5rem; }
.section--dark .metric__l{ color:#9aa7ac; }

/* the two-services block */
.services{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:760px){ .services{ grid-template-columns:1fr; } }
.svc{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; background:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .2s ease, border-color .2s; }
.svc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent); }
.svc--fs{ --accent:var(--fs); } .svc--cm{ --accent:var(--cm); }
.svc__tag{ display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.svc h3{ font-size:1.6rem; letter-spacing:-.025em; }
.svc p{ margin-top:.55rem; font-size:1.02rem; }
.svc__list{ list-style:none; padding:0; margin:1.1rem 0 0; display:grid; gap:.55rem; }
.svc__list li{ position:relative; padding-left:1.7rem; font-size:.97rem; color:var(--body); }
.svc__list li::before{ content:""; position:absolute; left:0; top:.42em; width:.64rem; height:.64rem; border-radius:2px; background:var(--accent); }
.svc__foot{ margin-top:auto; padding-top:1.5rem; }

/* feature grid */
.grid{ display:grid; gap:1.3rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .grid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:#fff; transition:transform .18s ease, box-shadow .2s; }
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.card h3{ font-size:1.08rem; margin-bottom:.4rem; }
.card p{ font-size:.95rem; }
.icon{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(31,127,158,.1),rgba(20,154,43,.08)); color:var(--brand); margin-bottom:1rem; }
.icon svg{ width:21px; height:21px; }
.section--dark .card{ background:#13232c; border-color:#1d3540; }
.section--dark .card h3{ color:#fff; } .section--dark .card p{ color:#9aa7ac; }
.section--dark .icon{ background:rgba(92,199,230,.12); color:#5cc7e6; }

/* split feature row */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center; }
.split--rev .split__media{ order:-1; }
.split+.split{ margin-top:clamp(2.8rem,5vw,4.5rem); }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } .split--rev .split__media{ order:0; } }
.checklist{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; }
.checklist li{ position:relative; padding-left:1.75rem; color:var(--body); }
.checklist li::before{ content:""; position:absolute; left:0; top:.2rem; width:1.15rem; height:1.15rem; border-radius:50%; background:var(--accent,var(--brand)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* stats (compact) */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat{ text-align:center; padding:1rem; }
.stat__n{ font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.stat__l{ font-size:.9rem; color:var(--muted); margin-top:.3rem; }

/* outcome / case-study cards */
.outcomes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
@media (max-width:820px){ .outcomes{ grid-template-columns:1fr; } }
.outcome{ border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; background:#fff; }
.outcome__n{ font-size:2.1rem; font-weight:800; letter-spacing:-.03em; color:var(--accent,var(--brand)); }
.outcome h3{ font-size:1.05rem; margin:.4rem 0 .3rem; }
.outcome p{ font-size:.93rem; }

/* testimonial / quote */
.quote{ max-width:860px; margin-inline:auto; text-align:center; }
.quote__mark{ font-size:3rem; line-height:0; color:var(--line-2); }
.quote__mark{ font-family:"Fraunces",Georgia,serif; }
.quote p{ font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto; font-style:italic; font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:500; color:var(--ink); letter-spacing:-.01em; line-height:1.32; margin-top:.5rem; }
.quote__by{ margin-top:1.4rem; font-size:.95rem; color:var(--muted); }

/* trust / security badges */
.badges{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.badge{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); background:#fff; border-radius:999px; padding:.5rem 1rem; font-size:.9rem; font-weight:600; color:var(--ink); }
.badge svg{ width:16px; height:16px; color:var(--brand); }

/* CTA band */
.cta{ position:relative; overflow:hidden; background:radial-gradient(900px 400px at 80% -20%, #1a3744, var(--dark)); border-radius:var(--radius-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; color:#fff; }
.cta h2{ color:#fff; } .cta p{ color:#aebbc1; margin:.8rem auto 0; max-width:54ch; }
.cta .btn-row{ justify-content:center; margin-top:1.7rem; }
.cta__note{ margin-top:1rem; font-size:.85rem; color:#7e8b91; }

/* FAQ */
.faq{ max-width:800px; margin-inline:auto; }
.faq details{ border:1px solid var(--line); border-radius:10px; padding:.2rem 1.2rem; margin-bottom:.7rem; background:#fff; }
.faq summary{ cursor:pointer; font-weight:600; color:var(--ink); padding:1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--brand); font-size:1.35rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding-bottom:1rem; }

/* footer */
.site-footer{ background:#0a1316; color:#8d999e; padding-block:clamp(2.8rem,5vw,4rem); font-size:.93rem; }
.footer__grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:2.2rem; }
.site-footer h4{ color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.85rem; }
.site-footer ul{ list-style:none; padding:0; display:grid; gap:.5rem; }
.site-footer a{ color:#8d999e; } .site-footer a:hover{ color:#fff; }
.footer__brand .brand{ color:#fff; margin-bottom:.8rem; }
.footer__brand p{ color:#76838a; max-width:34ch; font-size:.92rem; }
.footer__bottom{ border-top:1px solid #1a2529; margin-top:2.4rem; padding-top:1.3rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; color:#67737a; }
@media (max-width:720px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } .hero::before,.netgfx .flow,.netgfx .ping,.netgfx .pulse{ animation:none; } [data-parallax]{ transform:none !important; } }

/* ---- bespoke hero network graphic + floating product chips ---- */
.herofx{ position:relative; will-change:transform; }
.netgfx{ width:100%; height:auto; overflow:visible; }
.netgfx .base{ stroke:#d6dee1; stroke-width:1.3; fill:none; }
.netgfx .flow{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:5 11; animation:flow 2.6s linear infinite; }
.netgfx .flow.g{ animation-duration:3.2s; }
@keyframes flow{ to{ stroke-dashoffset:-32; } }
.netgfx .ping{ transform-origin:center; transform-box:fill-box; animation:ping 3.6s ease-out infinite; }
@keyframes ping{ 0%{ transform:scale(.6); opacity:.45; } 75%,100%{ transform:scale(2.5); opacity:0; } }
.netgfx .pulse{ animation:pulse 3.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.herochip{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:.65rem .85rem; }
.herochip__l{ font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.herochip__v{ font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:1.02rem; display:flex; align-items:center; gap:.4rem; }
.herochip .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.herochip--1{ top:7%; right:-3%; } .herochip--2{ bottom:8%; left:-5%; }
@media (max-width:860px){ .herochip--1{ right:3%; } .herochip--2{ left:3%; } }
.skip{ position:absolute; left:-999px; } .skip:focus{ left:1rem; top:1rem; background:#fff; padding:.6rem 1rem; border-radius:8px; z-index:100; }

/* ---- elegance pass: refined finish ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.5; }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::before{ display:none; }
.metric__n,.stat__n,.outcome__n,.cmtid{ font-variant-numeric:tabular-nums; }
.btn--primary{ box-shadow:0 10px 24px -10px rgba(29,121,145,.55); }
.btn--primary:hover{ box-shadow:0 14px 30px -10px rgba(29,121,145,.6); }
/* a touch more air + confident rhythm */
.hero__grid{ padding-block:clamp(3.8rem,7.5vw,6.4rem); }
.svc{ padding:2.2rem; }
.metric__l,.stat__l{ letter-spacing:.005em; }
/* hairline separators read as more deliberate */
.section--soft{ border-block:1px solid var(--line); }
/* photographic imagery */
.shot{ width:100%; height:auto; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }