/* Gemz Automate — premium airy SaaS direction */
:root{--navy:#06162d;--navy2:#0a2547;--blue:#0878f9;--blue2:#2c8cff;--ink:#0b1d3a;--muted:#64748b;--line:#dce6f2;--ice:#f3f7fc;--white:#fff;--font-head:'Poppins',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;--maxw:1080px;--radius:18px;--shadow:0 18px 45px rgba(13,42,77,.10)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:#fff;color:var(--ink);line-height:1.65;overflow-x:hidden}h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;color:var(--ink)}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}ul{list-style:none}.container{width:100%;max-width:var(--maxw);margin:auto;padding:0 28px}.section{padding:88px 0}.section--alt{background:var(--ice)}.text-center{text-align:center}.eyebrow{color:#176bc4;font-family:var(--font-head);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:.78rem;margin-bottom:12px}.section-title{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:15px}.section-intro{color:var(--muted);max-width:680px;margin:0 auto 44px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:600;padding:13px 27px;border-radius:9px;border:1px solid transparent;transition:.25s}.btn--primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 10px 24px rgba(8,120,249,.2)}.btn--primary:hover{transform:translateY(-2px)}.btn--ghost{background:#fff;color:var(--ink);border-color:#9aacc0}.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}.btn--lg{padding:15px 32px}
.nav{position:sticky;top:0;z-index:1000;background:#06162d;border-bottom:1px solid rgba(104,162,225,.22)}.nav__inner{height:76px;display:flex;align-items:center;justify-content:space-between}.nav__logo img{height:36px}.nav__links{display:flex;align-items:center;gap:30px}.nav__links a{color:#e7eef8;font-weight:500;font-size:.94rem}.nav__links a:hover{color:#fff}.nav__cta{color:#fff!important;padding:10px 21px!important}.nav__toggle{display:none;background:none;border:0;flex-direction:column;gap:5px}.nav__toggle span{width:26px;height:3px;background:#fff;border-radius:3px}
.hero{background:#fff;padding:78px 0 46px}.hero__content{display:grid;grid-template-columns:1.05fr .95fr;gap:68px;align-items:center}.hero__copy{min-width:0}.hero h1{font-size:clamp(2.8rem,5vw,4.45rem);letter-spacing:-.045em;margin-bottom:20px;max-width:650px}.hero h1 .grad{color:var(--blue)}.hero__tag{font-size:1.12rem;color:var(--muted);margin-bottom:30px;max-width:620px}.hero__ctas{display:flex;gap:25px;align-items:center;flex-wrap:wrap}.hero__demo{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-family:var(--font-head);font-weight:600}.hero__demo span{width:38px;height:38px;border:2px solid var(--blue);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem}.hero__visual{position:relative}.workflow-screen{background:linear-gradient(145deg,#eef5fc,#fff);border:1px solid #d7e3f0;border-radius:18px;padding:20px;box-shadow:0 22px 55px rgba(13,42,77,.14);min-height:320px;display:flex;flex-direction:column;justify-content:center}.workflow-top{position:absolute;top:17px;left:20px;display:flex;gap:6px}.workflow-top span{width:7px;height:7px;border-radius:50%;background:#b8c7d8}.workflow-call{background:#fff;border:1px solid #e0e8f1;border-radius:14px;padding:22px;display:flex;gap:16px;align-items:center;box-shadow:0 10px 28px rgba(13,42,77,.08)}.workflow-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#e8f3ff;color:var(--blue);font-size:1.5rem}.workflow-call small,.workflow-stat small{display:block;color:#8494a8;font-size:.7rem;letter-spacing:.08em}.workflow-call strong,.workflow-stat strong{display:block;color:var(--ink);font-family:var(--font-head)}.workflow-call p{color:#19a464;font-size:.82rem;margin-top:3px}.workflow-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.workflow-stat{background:#fff;border:1px solid #e0e8f1;border-radius:12px;padding:15px;display:flex;align-items:center;gap:11px}.workflow-stat b{color:var(--blue);font-size:1.15rem}.benefits{padding:24px 0 70px;background:#fff}.benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}.benefit{display:flex;align-items:flex-start;gap:17px}.benefit__icon{flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#edf6ff;color:var(--blue);font-size:1.35rem;font-weight:700}.benefit h3{font-size:1.08rem;margin:5px 0 5px}.benefit p{color:var(--muted);font-size:.91rem;line-height:1.5}
.grid{display:grid;gap:24px}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.card,.price-card,.contact-form,.faq-item{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.card{border-radius:var(--radius);padding:31px 28px}.card h3{margin-bottom:9px}.card p,.step p{color:var(--muted)}.pain-card{text-align:center}.pain-card:before{content:"";display:block;width:48px;height:48px;border-radius:50%;background:#eaf3ff;margin:0 auto 18px;box-shadow:inset 0 0 0 12px #f5f9ff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.step{text-align:center;padding:30px 24px}.step__num{width:54px;height:54px;margin:0 auto 17px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e7f2ff;color:var(--blue);font:700 1.25rem var(--font-head)}.step h3{margin-bottom:8px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;text-align:center}.price-card{border-radius:var(--radius);padding:38px 29px;display:flex;flex-direction:column;position:relative}.price-card--popular{border:2px solid var(--blue);box-shadow:0 20px 48px rgba(8,120,249,.16)}.price-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:999px;padding:5px 15px;font:600 .73rem var(--font-head);letter-spacing:.7px;text-transform:uppercase}.price-card h3{font-size:1.4rem;margin-bottom:7px}.price-card .price{font:700 2rem var(--font-head);color:var(--ink)}.price-card .price small{display:block;font:400 .85rem var(--font-body);color:var(--muted);margin-bottom:18px}.price-card ul{margin:0 auto 25px;flex-grow:1;text-align:left;max-width:270px}.price-card li{padding:8px 0 8px 25px;position:relative;color:#46576b;border-bottom:1px solid #edf1f5}.price-card li:before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.cta-banner{background:linear-gradient(115deg,#06162d,#0b315d);text-align:center}.cta-banner h2{color:#fff;margin-bottom:22px;font-size:clamp(1.7rem,4vw,2.4rem)}
.footer{background:#06162d;padding:32px 0 22px;color:#fff}.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:22px}.footer__brand{display:flex;align-items:center;gap:18px}.footer__logo img{height:32px}.footer__brand p{color:#aebed1;font-size:.88rem}.footer h4{display:none}.footer__links{display:flex;gap:22px}.footer__links a,.footer__contact li,.footer__contact a{color:#d4deeb;font-size:.88rem}.footer__contact{display:flex;gap:18px}.footer__bottom{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;color:#8fa2b9;font-size:.82rem}
.page-hero{background:var(--ice);padding:85px 0 70px;text-align:center}.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:15px}.page-hero p{color:var(--muted)}.service-row{display:grid;grid-template-columns:100px 1fr;gap:28px;padding:38px 0;border-bottom:1px solid var(--line)}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.contact-split{display:grid;grid-template-columns:1fr 1.2fr;gap:40px}.contact-form{border-radius:var(--radius);padding:32px}.form-group{margin-bottom:17px}.form-group label{display:block;margin-bottom:7px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border:1px solid #cbd8e6;border-radius:8px;background:#fff;color:var(--ink)}.form-group textarea{min-height:120px}
@media(max-width:960px){.hero__content{grid-template-columns:1fr;gap:42px}.hero__visual{max-width:650px}.benefits__grid{grid-template-columns:1fr;gap:24px}.grid-3,.steps,.pricing-grid{grid-template-columns:1fr}.hero__content:after{position:relative;right:auto;top:auto;width:100%;height:220px;margin-top:38px}.hero__content>*{max-width:100%}.footer__grid{flex-direction:column;text-align:center}.footer__brand{flex-direction:column}.contact-split{grid-template-columns:1fr}}
@media(max-width:768px){.hero{padding:58px 0 35px}.hero h1{font-size:clamp(2.45rem,12vw,3.4rem)}.workflow-row{grid-template-columns:1fr}.workflow-screen{min-height:0}.benefits{padding-bottom:50px}.nav__toggle{display:flex}.nav__links{position:absolute;top:76px;left:0;right:0;flex-direction:column;gap:0;background:#06162d;max-height:0;overflow:hidden}.nav__links.open{max-height:430px}.nav__links a{padding:15px 24px;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}.nav__links .nav__cta{margin:14px 24px;width:calc(100% - 48px)}.section{padding:64px 0}.hero{padding:75px 0}.footer__links,.footer__contact{flex-wrap:wrap;justify-content:center}.grid-2{grid-template-columns:1fr}}

/* Reference-match refinement */
:root{--maxw:1320px}
.nav__inner{height:70px}.nav__logo img{height:44px;width:auto}.nav__links{gap:38px}.nav__links a{font-size:.9rem}.nav__cta{margin-left:18px;padding:12px 26px!important}
.hero{padding:64px 0 36px}.hero__content{grid-template-columns:1.05fr .95fr;gap:72px}.hero h1{font-size:clamp(3rem,4.7vw,4.7rem);color:#092a5d;line-height:1.03}.hero__tag{font-size:1.12rem;max-width:590px}.hero-scene{height:338px;border-radius:14px;background:linear-gradient(135deg,#f5f8fb,#e1e7ec);position:relative;overflow:hidden}.scene-desk{position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 22%,rgba(255,255,255,.72) 22% 100%)}.scene-laptop{position:absolute;left:18px;bottom:34px;width:240px;height:142px;background:#252d36;border:9px solid #333e48;border-radius:8px;transform:skewY(-3deg);box-shadow:0 20px 20px rgba(0,0,0,.16)}.scene-laptop:after{content:"";position:absolute;left:-30px;bottom:-22px;width:300px;height:18px;background:#aeb7bf;border-radius:3px}.scene-cup{position:absolute;left:245px;bottom:64px;width:60px;height:64px;border-radius:7px 7px 18px 18px;background:#fff;color:#16437c;display:grid;place-items:center;font:700 2rem var(--font-head);box-shadow:0 8px 20px rgba(0,0,0,.1)}.scene-card{position:absolute;right:18px;background:rgba(255,255,255,.96);border:1px solid #e6edf4;border-radius:14px;box-shadow:0 15px 35px rgba(13,42,77,.12);display:flex;align-items:center;gap:14px;padding:18px}.scene-card--top{top:18px;width:245px}.scene-card--bottom{bottom:22px;width:215px}.scene-card>b{width:46px;height:46px;border-radius:50%;background:#0c428e;color:#fff;display:grid;place-items:center;font-size:1.2rem}.scene-card--bottom>b{background:#edf6ff;color:#0878f9}.scene-card span>*{display:block}.scene-card small{font-size:.7rem;color:#7386a0;letter-spacing:.06em}.scene-card strong{font:600 1rem var(--font-head);color:#092a5d}.scene-card em{font-style:normal;font-size:.76rem;color:#16a35f}
.benefits{padding-top:18px}.benefits__grid{gap:58px}.benefit__icon{width:62px;height:62px;flex-basis:62px}
.footer{padding-top:28px}
@media(max-width:960px){.nav__links{gap:18px}.hero-scene{max-width:650px}.nav__logo img{height:40px}}
@media(max-width:768px){.nav__inner{height:70px}.nav__links{top:70px}.nav__logo img{height:38px}.hero-scene{height:300px}.scene-card--top{width:210px}.scene-card--bottom{width:190px}.scene-laptop{width:190px}}

/* Hero visual only — automation flow */
.automation-flow{background:linear-gradient(145deg,#f7faff,#edf4fb);border:1px solid #d8e5f3;border-radius:18px;padding:20px 22px;box-shadow:0 22px 55px rgba(13,42,77,.14);min-height:338px}
.flow-head{display:flex;align-items:center;gap:9px;padding:2px 2px 15px;border-bottom:1px solid #dce6f2;color:#092a5d}.flow-head strong{font:600 .9rem var(--font-head)}.flow-head small{margin-left:auto;color:#70839b;font-size:.62rem;letter-spacing:.1em}.flow-live{width:9px;height:9px;border-radius:50%;background:#19a464;box-shadow:0 0 0 4px rgba(25,164,100,.12)}
.flow-step{background:#fff;border:1px solid #e0e8f1;border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;box-shadow:0 7px 18px rgba(13,42,77,.05)}.flow-icon{width:42px;height:42px;border-radius:10px;background:#e9f3ff;color:#0878f9;display:grid;place-items:center;font:700 .85rem var(--font-head)}.flow-step small{display:block;color:#8494a8;font-size:.6rem;letter-spacing:.1em}.flow-step strong{display:block;color:#092a5d;font:600 .91rem var(--font-head);line-height:1.25}.flow-step p{color:#6c7e93;font-size:.7rem;line-height:1.35}.flow-status{color:#19a464;font-size:.63rem;letter-spacing:.08em}.flow-check{width:25px;height:25px;border-radius:50%;background:#e9f8f1;color:#19a464;display:grid;place-items:center;font-size:.78rem}.flow-line{height:10px;width:2px;background:#b8d6f6;margin:0 0 0 34px}
@media(max-width:768px){.automation-flow{min-height:0}.flow-step{grid-template-columns:42px 1fr auto}}

/* Contact page icon sizing */
.contact-item{display:flex;align-items:flex-start;gap:14px;margin:22px 0}.ci-icon{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#edf6ff;color:var(--blue);display:grid;place-items:center}.ci-icon svg{width:18px;height:18px;display:block}.contact-item strong{display:block;font-family:var(--font-head);font-size:.92rem}.contact-item a{color:var(--muted);font-size:.9rem}

/* Graphic hero visual */
.hero__graphic{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 22px 55px rgba(13,42,77,.16)}

/* Approved full hero artwork with functional CTA hotspots */
.hero--artwork{padding:0;background:#06162d}
.hero-artwork{position:relative;width:100%;max-width:1536px;margin:0 auto;line-height:0}
.hero-artwork img{display:block;width:100%;height:auto}
.hero-hotspot{position:absolute;display:block;z-index:5;border-radius:18px}
.hero-hotspot:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero-hotspot--start{left:3.95%;top:51.55%;width:16.75%;height:7.1%}
.hero-hotspot--demo{left:21.9%;top:51.55%;width:16.55%;height:7.1%}
@media(max-width:768px){.hero-artwork{min-width:0}.hero-hotspot{border-radius:10px}}

/* White site header to complement dark hero */
.nav{background:#fff;border-bottom:1px solid #e8edf4}
.nav__links a{color:#071b3b}
.nav__links a:not(.nav__cta):hover{color:var(--blue)}
.nav__toggle span{background:#071b3b}

/* Refine white header to match approved reference */
.nav{background:#fbfcfe;border-bottom:1px solid #e5ebf3;box-shadow:0 1px 0 rgba(7,27,59,.03)}
.nav__links a{color:#071b3b}
.nav__links a:not(.nav__cta):hover{color:#0878f9}
.nav__links a:not(.nav__cta).active{color:#071b3b}
.nav__cta{background:#0878f9;color:#fff!important}

/* Final header + hero alignment: hide the header baked into the hero artwork */
.hero--artwork{overflow:hidden;background:#06162d}
.hero-artwork{margin-top:-6.1%;max-width:1536px}
.nav__logo img{height:42px;width:auto}
@media(max-width:768px){.hero-artwork{margin-top:-6.1%}.nav__logo img{height:38px}}

/* Prevent the post-hero benefits from covering the following section heading */
.benefits{position:relative;z-index:1;margin-bottom:32px}

/* Keep post-hero benefits in normal flow and clear of the next section */
.benefits{position:static;z-index:auto;margin:0;padding:40px 0 64px;background:#fff}
#how{position:relative;z-index:0;clear:both;padding-top:88px}

/* Correct hero crop: the overlapping "A Smarter Way..." text is part of the source artwork, not a layout heading. Crop both baked-in top header and bottom white strip. */
.hero--artwork{overflow:hidden}
.hero-artwork{margin:0 auto;aspect-ratio:1536/836;overflow:hidden;max-width:1536px}
.hero-artwork img{width:100%;height:auto;transform:translateY(-9.18%)}
.hero-hotspot--start{top:51.9%;height:8.7%}
.hero-hotspot--demo{top:51.9%;height:8.7%}
@media(max-width:768px){.hero-artwork{margin:0 auto;aspect-ratio:1536/836}}

/* Real section heading restored below hero */
.benefits__title{text-align:center;margin:0 0 42px}


/* Mobile navigation hard fix */
@media (max-width:768px){
  .nav{position:relative;z-index:1000}
  .nav__inner{position:relative}
  .nav__toggle{display:flex!important;position:relative;z-index:1002;cursor:pointer;padding:10px;margin-left:auto}
  .nav__links{display:flex!important;position:absolute!important;top:70px!important;left:0!important;right:0!important;z-index:1001!important;flex-direction:column!important;background:#fff!important;box-shadow:0 14px 28px rgba(7,27,59,.16);max-height:0!important;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
  .nav__links.open{max-height:440px!important;opacity:1;visibility:visible}
  .nav__links a{display:block!important;color:#071b3b!important;padding:15px 24px!important;border-bottom:1px solid #e8edf4!important}
  .nav__links .nav__cta{display:block!important;margin:14px 24px!important;width:calc(100% - 48px)!important;color:#fff!important;text-align:center}
}