@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";

:root{
  --gn-primary:#673AB7;
  --gn-primary-dark:#5e35b1;
  --gn-secondary:#7C3AED;
  --gn-accent:#00B8D9;
  /* Same signature 3-stop gradient + glow shadows used across the rest of
     the site (--ln-neon-gradient/--ln-neon-glow in landing-page.css) -
     reused here by value so this page reads as the same brand, not a
     generic template skin. */
  --gn-gradient:linear-gradient(135deg,#7C3AED 0%,#673AB7 50%,#00B8D9 100%);
  --gn-glow:0 8px 28px -6px #7c3aed59,0 0 40px -12px #00d4ff4d;
  --gn-glow-lg:0 14px 40px -8px #7c3aed66,0 0 60px -14px #00d4ff59;
  --gn-success:#10B981;
  --gn-success-light:#ecfdf5;
  --gn-pale:#673ab712;
  --gn-heading:#0f172a;
  --gn-text:#1f2937;
  --gn-text-muted:#64748b;
  --gn-bg-light:#f8fafc;
  --gn-white:#fff;
  --gn-border:#e2e8f0;
  --gn-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --gn-shadow-md:0 4px 6px rgba(15,23,42,.1);
  --gn-shadow-lg:0 10px 25px rgba(15,23,42,.15);
}

html{height:auto!important;overflow-x:clip!important}
body{height:auto!important;overflow-x:clip!important;overflow-y:visible!important}
.gn-landing-wrapper{font-family:'Inter',sans-serif;color:var(--gn-text);position:relative;width:100%;max-width:100vw;overflow:visible!important;line-height:1.7;font-size:16px}
.gn-landing-wrapper h1,.gn-landing-wrapper h2,.gn-landing-wrapper h3,.gn-landing-wrapper h4{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-.02em;color:var(--gn-heading);line-height:1.2;margin:0}
/* :where() keeps this reset's specificity at plain "p" (0,0,1) on purpose -
   every real component below styles its own paragraph margin with at least
   one class (0,1,x), so it always wins this reset regardless of source
   order. A flat ".gn-landing-wrapper p{margin:0}" rule was tying (0,1,1)
   against single-class rules like .gn-hero-note (0,1,0) and silently
   winning, zeroing out their margin-top/bottom. */
:where(.gn-landing-wrapper) p{margin:0;color:var(--gn-text-muted)}
.gn-landing-wrapper code{font-family:'IBM Plex Mono','Courier New',monospace;background:var(--gn-pale);color:var(--gn-primary-dark);padding:2px 7px;border-radius:5px;font-size:.9em;font-weight:600}
.gn-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gn-section{padding:72px 0}
.gn-section-alt{background:var(--gn-bg-light)}
.gn-section-head{max-width:58ch;margin:0 auto 44px;text-align:center}
.gn-section-head h2{font-size:clamp(1.875rem,3.5vw,2.5rem);margin-top:12px}
.gn-section-head p{font-size:1rem;margin-top:14px;line-height:1.6}
.gn-eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--gn-primary);display:inline-block}
.gn-eyebrow-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:100px;background:var(--gn-pale);border:1px solid #673ab72e;color:var(--gn-primary);font-size:13px;font-weight:600;margin-bottom:24px;letter-spacing:.2px}
.gn-eyebrow-badge .gn-bdot{width:6px;height:6px;border-radius:50%;background:var(--gn-gradient);flex:none;box-shadow:0 0 0 3px #673ab71f}

/* ---------- buttons ---------- */
.gn-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;padding:14px 28px;border-radius:11px;cursor:pointer;border:2px solid transparent;transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease,background .2s ease,color .2s ease;white-space:nowrap;text-decoration:none!important}
.gn-btn-lg{padding:16px 32px;font-size:16px}
.gn-btn-primary{background:var(--gn-gradient);color:#fff!important;box-shadow:var(--gn-glow)}
.gn-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--gn-glow-lg);color:#fff!important}
.gn-btn-outline{border-color:var(--gn-border);color:var(--gn-heading)!important;background:var(--gn-white)}
.gn-btn-outline:hover{border-color:var(--gn-primary);background:var(--gn-pale);color:var(--gn-primary-dark)!important;transform:translateY(-2px)}

/* ---------- hero ---------- */
.gn-hero{padding:56px 0 40px;background:linear-gradient(135deg,#fff 0%,#F8FAFC 45%,#673ab712 100%);position:relative;overflow:hidden}
.gn-hero-inner{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;position:relative;z-index:1}
.gn-hero h1{font-size:clamp(2.25rem,4.4vw,3.2rem);font-weight:700;margin:0 0 24px;max-width:15ch;letter-spacing:-.03em}
.gn-hero h1 span{background:var(--gn-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn-hero p.gn-lede{font-size:1.1875rem;line-height:1.65;max-width:50ch;margin-bottom:34px;color:#41485c}
.gn-hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.gn-hero-note{font-size:13.5px;font-weight:500;color:var(--gn-text-muted);margin-top:26px;display:flex;align-items:center;gap:9px}
.gn-hero-note svg{width:16px;height:16px;color:var(--gn-success);flex:none}
.gn-docs-link{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--gn-primary);text-decoration:none!important;margin-top:14px}
.gn-docs-link:hover{color:var(--gn-primary-dark)}
.gn-docs-link i{font-size:11px}
.gn-docs-link-dark{color:#B8BFD1;margin-top:22px;justify-content:center;width:100%}
.gn-docs-link-dark:hover{color:#fff}

/* ---------- partner trust strip (same section as the main landing page -
   copied verbatim from landing-page.css since this page doesn't load that
   whole stylesheet; the Owl Carousel init these classes need already lives
   globally in header_newlanding.blade.php) ---------- */
.partner-slider-sectionField{font-family:'Inter',sans-serif!important;padding:44px 0 52px;background:linear-gradient(180deg,#f8f5fc 0%,#fff 100%);position:relative}
.partner-slider-sectionField::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,#673ab71a 50%,transparent 100%)}
.Trustedbyagil-heading{font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:clamp(1.35rem,2.8vw,1.85rem)!important;color:#1A1A2E!important;text-align:center;margin-bottom:3rem}
.partner-imgmain{width:140px;height:45px;object-fit:contain;opacity:1;transition:all .3s ease;filter:none}
.partner-imgmain:hover{opacity:.85;transform:scale(1.05)}

/* ---------- hero visual ---------- */
.gn-hero-visual{position:relative;text-align:center}
/* The source graphic is a square (1254x1254) unlike the old widescreen
   mockup this replaced, so width:100% of the grid column made it render
   very tall next to the headline. Capping height and letting width follow
   keeps it in proportion instead of stretching to fill the column. */
.gn-hero-img{width:auto;height:auto;max-width:100%;max-height:520px;display:inline-block;border-radius:20px;box-shadow:0 24px 60px -20px rgba(15,23,42,.18),0 4px 16px rgba(15,23,42,.06)}

/* ---------- stats band ---------- */
.gn-stats-band{background:linear-gradient(135deg,var(--gn-heading) 0%,#0F1225 100%);padding:64px 0}
/* Only the main GeoNest page's band has this heading (id="gnStats") - the
   8 industry pages reuse .gn-stats-band/.gn-stats-grid as a plain, unheaded
   strip, untouched by this rule since they never add a .gn-stats-head. */
.gn-stats-head{text-align:center;max-width:52ch;margin:0 auto 44px}
.gn-stats-head .gn-eyebrow{background:linear-gradient(135deg,#a78bfa 0%,#818cf8 50%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn-stats-head h2{color:#fff;font-size:clamp(1.625rem,3vw,2.125rem);margin-top:10px;letter-spacing:-.02em}
.gn-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;text-align:center;max-width:1120px;margin:0 auto;padding:0 24px}
.gn-stat-num{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1;margin-bottom:10px}
.gn-stat-num span{background:linear-gradient(135deg,#a78bfa 0%,#818cf8 50%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn-stat-label{font-size:13.5px;font-weight:500;color:#9CA3C4;letter-spacing:.01em}

/* ---------- industries ---------- */
.gn-industries-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* display:block/text-decoration/color reset here (not just on the base
   div-only cards) so a card that becomes a real <a> once its industry page
   exists - like Retail's below - doesn't need its own separate ruleset. */
.gn-industry-card{display:block;text-decoration:none!important;color:inherit;background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;padding:28px 22px;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.gn-industry-card:hover{box-shadow:var(--gn-glow);transform:translateY(-5px);border-color:transparent}
.gn-industry-card .gn-icon{width:42px;height:42px;border-radius:12px;background:var(--gn-gradient);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 6px 16px -6px #7c3aed4d;transition:transform .25s ease}
.gn-industry-card:hover .gn-icon{transform:scale(1.08) rotate(-3deg)}
.gn-industry-card .gn-icon svg{width:20px;height:20px;stroke:#fff}
.gn-industry-card h3{font-size:16px;margin-bottom:10px}
.gn-industry-card .gn-use-case{font-size:13.75px;color:var(--gn-text);margin-bottom:14px;line-height:1.55}
.gn-industry-card .gn-benefit{font-size:12.5px;font-weight:700;color:var(--gn-success);display:flex;gap:7px;align-items:flex-start}
.gn-industry-card .gn-benefit svg{width:14px;height:14px;flex:none;margin-top:1px}

/* ---------- workflow ---------- */
.gn-workflow-wrap{display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.gn-workflow-rail{position:relative}
/* Gray backdrop track - JS positions it (see layoutWorkflowRail) to
   span from the first step's circle down through the short tail below
   the last one, since it now has to reach past the last circle too. */
.gn-rail-track{position:absolute;left:17px;width:2px;background:var(--gn-border)}
/* Animated progress fill, one per step (including the last), drawn on
   top of the track above - JS positions top/height per segment against
   each step circle's real center (text wraps to different heights per
   step). Uses a pausable @keyframes animation rather than a plain CSS
   transition, since transitions have no way to actually pause mid-run -
   an earlier transition-based version kept "advancing" the visible line
   while hover-paused, which is what looked out of sync. */
.gn-rail-fill{position:absolute;left:17px;width:2px;background:var(--gn-gradient);transform:scaleY(0);transform-origin:top;border-radius:2px}
.gn-rail-fill.is-filling{animation:gn-rail-fill-grow 5s linear forwards}
.gn-rail-fill.is-paused{animation-play-state:paused}
@keyframes gn-rail-fill-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Small dot marking the end of the line below step 3, so the last step
   gets the same "something is happening" visual the line-fed steps get,
   instead of just trailing off. Pulses gently while step 3 is the
   active one. */
.gn-rail-end{position:absolute;left:14px;width:8px;height:8px;border-radius:50%;background:var(--gn-border);transition:background .25s ease}
.gn-rail-end.is-active{background:var(--gn-primary);animation:gn-rail-end-pulse 1.4s ease-in-out infinite}
@keyframes gn-rail-end-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
.gn-rail-step{position:relative;display:flex;align-items:flex-start;gap:17px;padding:15px 10px 15px 0;cursor:pointer;background:none;border:none;text-align:left;width:100%;min-height:86px}
.gn-rail-num{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:var(--gn-white);border:2px solid var(--gn-border);color:var(--gn-text-muted);font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;display:flex;align-items:center;justify-content:center;flex:none;transition:all .25s ease}
.gn-rail-step.is-active .gn-rail-num{background:var(--gn-gradient);border-color:transparent;color:#fff;box-shadow:var(--gn-glow)}
.gn-rail-text h4{font-family:'Inter',sans-serif;font-size:15px;color:var(--gn-text-muted);margin-bottom:4px;transition:color .2s ease}
.gn-rail-step.is-active .gn-rail-text h4{color:var(--gn-heading)}
.gn-rail-text span{font-size:12.75px;color:var(--gn-text-muted)}
.gn-workflow-detail{background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;padding:36px;box-shadow:var(--gn-shadow-md)}
.gn-workflow-panel{display:none}
/* Copy on the left, image on the right - stacks on narrow screens since
   a 1254x1254 image squeezed into a half column under ~600px gets too
   small to read. */
.gn-workflow-panel.is-active{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:700px){.gn-workflow-panel.is-active{grid-template-columns:1.05fr 1fr;align-items:center;gap:40px}}
.gn-workflow-panel h3{font-size:22px;margin-bottom:14px}
.gn-workflow-panel p{font-size:15.5px;line-height:1.65;margin-bottom:22px}
.gn-workflow-chips{display:flex;flex-wrap:wrap;gap:10px}
.gn-workflow-chips span{font-size:12.75px;font-weight:700;color:var(--gn-primary);background:var(--gn-pale);border:1px solid #673ab72e;padding:8px 15px;border-radius:20px}

/* In-page table of contents - static (not sticky, see the code comment
   above it in the blade file), scroll-spied by the script below. */
/* top is a fallback only (matches the shared header's own default 90px nav
   height) - the real value is set as an inline style by the script below,
   which measures #mainNavbar's actual rendered bottom edge so this stays
   correct whether the site's promo banner above the nav is showing or
   dismissed. z-index sits below the shared nav's own 999 so it can never
   visually cover it. */
.gn-toc{position:sticky;top:90px;z-index:40;border-bottom:1px solid var(--gn-border);background:var(--gn-white);box-shadow:0 1px 0 var(--gn-border)}
.gn-toc-inner{display:flex;gap:6px;overflow-x:auto;padding:14px 24px;scrollbar-width:none}
.gn-toc-inner::-webkit-scrollbar{display:none}
.gn-toc-link{flex:none;font-size:13.5px;font-weight:600;color:var(--gn-text-muted);padding:8px 16px;border-radius:20px;white-space:nowrap;text-decoration:none!important;transition:background .15s ease,color .15s ease}
.gn-toc-link:hover{color:var(--gn-primary);background:var(--gn-pale)}
.gn-toc-link.is-active{color:#fff;background:var(--gn-gradient)}

/* Visual proof embedded inside a workflow step, instead of that same
   diagram/mockup living in its own separate full-width section - sits in
   its own column beside the copy (see .gn-workflow-panel.is-active) rather
   than stacked below it. */
.gn-workflow-visual{display:flex;justify-content:center}
/* Real illustrative graphic per step, replacing the earlier hand-drawn
   SVG/CSS mockups (circle-vs-polygon diagram, fence-rule field grid,
   channel icon chips). */
.gn-workflow-visual-img{width:100%;max-width:340px;height:auto;display:block;border-radius:14px}

/* Merged Platform + Trust/integrations layout - the org-tree diagram and
   the integrations badge box stack in one column now instead of each
   being half of two separate section-wide grids. */
.gn-trust-visuals{display:flex;flex-direction:column;gap:20px}

/* ---------- lifecycle ---------- */
.gn-lifecycle{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* padding moved onto .gn-lifecycle-body below, so the real per-state
   screenshot (entering/staying/away.webp) can bleed edge-to-edge across
   the top of the card - .gn-lifecycle-step's own overflow:hidden +
   border-radius clips the image's top corners to match automatically. */
.gn-lifecycle-step{background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;position:relative;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.gn-lifecycle-step::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gn-gradient);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;z-index:1}
.gn-lifecycle-step:hover{box-shadow:var(--gn-glow);transform:translateY(-5px);border-color:transparent}
.gn-lifecycle-step:hover::before{transform:scaleX(1)}
/* No aspect-ratio/object-fit:cover here on purpose - that was cropping the
   notification card and directional label off these square images. Full
   image, scaled to the card's width, nothing cut off. */
.gn-lifecycle-visual{overflow:hidden;background:var(--gn-bg-light)}
.gn-lifecycle-visual img{width:100%;height:auto;display:block}
.gn-lifecycle-body{padding:24px 28px 28px}
.gn-lifecycle-step .gn-tag{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.09em;padding:6px 13px;border-radius:20px;display:inline-block;margin-bottom:20px}
.gn-lifecycle-step:nth-child(1) .gn-tag{background:var(--gn-pale);color:var(--gn-primary)}
.gn-lifecycle-step:nth-child(2) .gn-tag{background:#FEF3C7;color:#B45309}
.gn-lifecycle-step:nth-child(3) .gn-tag{background:var(--gn-success-light);color:var(--gn-success)}
.gn-lifecycle-step h3{font-size:20px;margin-bottom:11px}
.gn-lifecycle-step p{font-size:14.75px;line-height:1.6}

/* ---------- foundation rows ----------
   Same structural pattern as radar.com/product/geofencing's "foundation"
   section: a bordered text card beside a large, unboxed image, alternating
   sides row by row, separated by a hairline divider - not that page's
   copy. */
.gn-foundation-rows{display:flex;flex-direction:column}
.gn-foundation-row{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;padding:44px 0;border-bottom:1px solid var(--gn-border)}
.gn-foundation-rows .gn-foundation-row:last-child{border-bottom:none;padding-bottom:0}
.gn-foundation-rows .gn-foundation-row:first-child{padding-top:0}
@media (min-width:860px){
  .gn-foundation-row{grid-template-columns:1fr 1fr;gap:56px}
  .gn-foundation-row-reverse .gn-foundation-card{order:2}
  .gn-foundation-row-reverse .gn-foundation-visual{order:1}
}
.gn-foundation-card{background:var(--gn-bg-light);border:1px solid var(--gn-border);border-radius:18px;padding:34px 32px}
.gn-foundation-card .gn-eyebrow{margin-bottom:10px;display:block}
.gn-foundation-card h3{font-size:22px;margin-bottom:14px;line-height:1.3}
.gn-foundation-card p{font-size:15px;line-height:1.65;margin-bottom:20px;color:var(--gn-text-muted)}
.gn-foundation-visual img{width:100%;height:auto;display:block;border-radius:18px}

/* ---------- statement band ---------- */
.gn-statement-band{background:var(--gn-gradient);padding:72px 0;text-align:center}
.gn-statement-band h2{color:#fff;font-weight:600;font-size:clamp(1.75rem,3.8vw,2.75rem);max-width:15ch;margin:0 auto;letter-spacing:-.02em}

/* ---------- analytics preview ---------- */
.gn-analytics-wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
/* Exact same clamp() as .gn-section-head h2 - every other chapter's main
   heading uses that rule. This one was previously an <h3> at a flat 22px,
   then a smaller clamp(1.5rem,2.6vw,2rem) - both still didn't match. */
.gn-analytics-copy h2{font-size:clamp(1.875rem,3.5vw,2.5rem);margin-bottom:16px}
.gn-analytics-copy p{font-size:15.5px;line-height:1.65;margin-bottom:16px}
.gn-analytics-visuals{display:flex;flex-direction:column}
.gn-analytics-img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--gn-border);box-shadow:0 24px 60px -20px rgba(15,23,42,.16)}

/* ---------- compare ---------- */
.gn-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gn-compare-card{background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;padding:30px 26px;position:relative;overflow:hidden}
.gn-compare-card.is-geonest{border-color:transparent;box-shadow:var(--gn-glow-lg)}
.gn-compare-card.is-geonest::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--gn-gradient)}
.gn-compare-card .gn-compare-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.gn-compare-card h3{font-size:17px}
.gn-compare-card .gn-compare-badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:20px;background:var(--gn-gradient);color:#fff}
.gn-compare-card ul{list-style:none;margin:0;padding:0}
.gn-compare-card li{font-size:14.25px;color:var(--gn-text-muted);padding-left:26px;position:relative;margin-bottom:13px;line-height:1.5}
.gn-compare-card li.is-bad::before{content:'✕';position:absolute;left:0;top:0;color:#CBD5E1;font-weight:700;font-size:12px}
.gn-compare-card li.is-good::before{content:'✓';position:absolute;left:0;top:0;color:var(--gn-success);font-weight:700;font-size:12px}

/* ---------- platform & security (merged trust + integrations + platform) ---------- */
.gn-trust-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:8px}
.gn-trust-list{list-style:none;margin:0;padding:0}
.gn-trust-list li{display:flex;gap:13px;font-size:14.75px;color:var(--gn-text-muted);margin-bottom:18px;line-height:1.55}
.gn-trust-list li svg{width:19px;height:19px;color:var(--gn-success);flex:none;margin-top:2px}
.gn-trust-img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--gn-border);box-shadow:0 20px 50px -18px rgba(15,23,42,.16)}

/* ---------- architecture / integration flow ----------
   Styled like an actual terminal/API panel (window chrome, monospace
   pipeline steps, a backend-processing "log") rather than plain marketing
   cards, since this section is for the engineer wiring the integration up,
   not a feature pitch. */
.gn-tech-panel{background:linear-gradient(160deg,var(--gn-heading) 0%,#0F1225 100%);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(15,23,42,.35);margin-bottom:28px}
.gn-tech-panel-bar{display:flex;align-items:center;gap:7px;padding:14px 22px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.gn-tech-dot{width:11px;height:11px;border-radius:50%;flex:none}
.gn-tech-dot-red{background:#FF5F57}
.gn-tech-dot-yellow{background:#FEBC2E}
.gn-tech-dot-green{background:#28C840}
.gn-tech-panel-title{margin-left:10px;font-family:'IBM Plex Mono','Courier New',monospace;font-size:12.5px;color:#8891B3}
.gn-tech-panel-body{padding:40px 44px 44px}

.gn-tech-pipeline{position:relative;margin-bottom:36px}
.gn-tech-pipeline-step{position:relative;display:flex;gap:20px;padding-bottom:32px}
.gn-tech-pipeline-step:last-child{padding-bottom:0}
.gn-tech-pipeline-step::before{content:'';position:absolute;left:15px;top:34px;bottom:-6px;width:1px;background:rgba(255,255,255,.14)}
.gn-tech-pipeline-step:last-child::before{display:none}
.gn-tech-pipeline-marker{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(124,58,237,.2);border:1px solid rgba(167,139,250,.5);color:#C4B5FD;font-family:'IBM Plex Mono','Courier New',monospace;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1}
.gn-tech-pipeline-content{padding-top:3px}
.gn-tech-calls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.gn-tech-call{display:inline-flex;align-items:center;gap:8px}
.gn-tech-method{font-family:'IBM Plex Mono','Courier New',monospace;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;letter-spacing:.04em;flex:none}
.gn-tech-method.is-post{background:rgba(34,211,238,.15);color:#67E8F9}
.gn-tech-method.is-get{background:rgba(16,185,129,.15);color:#6EE7B7}
.gn-tech-method.is-native{background:rgba(167,139,250,.18);color:#C4B5FD}
.gn-tech-calls code{font-family:'IBM Plex Mono','Courier New',monospace;font-size:12.5px;color:#E2E8F0;background:rgba(255,255,255,.07);padding:4px 9px;border-radius:4px;white-space:normal;word-break:break-word;max-width:100%}
.gn-tech-pipeline-content p{font-size:14px;line-height:1.65;color:#9CA3C4;max-width:58ch;margin:0}

.gn-tech-log{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:24px 26px}
.gn-tech-log-title{font-family:'IBM Plex Mono','Courier New',monospace;font-size:12px;color:#6B7394;margin:0 0 14px}
.gn-tech-log-line{font-family:'IBM Plex Mono','Courier New',monospace;font-size:13.5px;color:#B8BFD1;padding:5px 0;display:flex;align-items:center;gap:11px}
.gn-tech-check{color:#34D399;font-weight:700;flex:none}
.gn-tech-log-line.is-dispatch{color:#fff;font-weight:600;margin-top:8px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.14)}
.gn-tech-log-line.is-dispatch .gn-tech-check{color:#22D3EE}
.gn-tech-channels{color:#67E8F9;font-weight:500}
@media (max-width:640px){.gn-tech-panel-body{padding:28px 22px 30px}.gn-tech-log{padding:20px}}

/* ---------- FAQ ---------- */
.gn-faq-list{max-width:780px;margin:0 auto}
.gn-faq-item{border-bottom:1px solid var(--gn-border);padding:24px 0}
.gn-faq-item summary{font-family:'Inter',sans-serif;font-weight:700;font-size:16.5px;color:var(--gn-heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
.gn-faq-item summary::-webkit-details-marker{display:none}
.gn-faq-item summary .gn-plus{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--gn-border);display:flex;align-items:center;justify-content:center;color:var(--gn-primary);font-size:15px;font-weight:700;transition:all .2s ease}
.gn-faq-item[open] summary .gn-plus{transform:rotate(45deg);border-color:transparent;background:var(--gn-gradient);color:#fff}
.gn-faq-item p{font-size:14.75px;line-height:1.65;margin-top:16px;max-width:64ch;color:var(--gn-text-muted)}

/* ---------- final CTA ---------- */
.gn-final-cta{text-align:center;padding:84px 0;background:linear-gradient(135deg,var(--gn-heading) 0%,#0F1225 100%);position:relative;overflow:hidden}
.gn-final-cta .gn-eyebrow{background:linear-gradient(135deg,#a78bfa 0%,#818cf8 50%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn-final-cta h2{color:#fff;font-weight:600;font-size:clamp(1.75rem,3.2vw,2.5rem);max-width:26ch;margin:14px auto 18px;letter-spacing:-.02em}
.gn-final-cta p{color:#B8BFD1;max-width:46ch;margin:0 auto 36px;font-size:16.5px;line-height:1.6}
.gn-final-cta .gn-hero-ctas{justify-content:center}
.gn-final-cta .gn-btn-outline{border-color:#3D4260;color:#fff!important;background:transparent}
.gn-final-cta .gn-btn-outline:hover{background:rgba(255,255,255,.08);border-color:var(--gn-accent);color:var(--gn-accent)!important}

@media (min-width:860px){.gn-hero-inner{grid-template-columns:1.05fr 1fr}}

/* ---------- per-industry inner pages (breadcrumb, inner hero, notification
   mockup, alternating use-case blocks, proof grid) - shared by every
   GeoNest industry page (retail.blade.php first), not used on the main
   GeoNest landing page itself. ---------- */
.gn-breadcrumb{border-bottom:1px solid var(--gn-border);background:var(--gn-bg-light)}
.gn-breadcrumb-inner{display:flex;align-items:center;gap:8px;padding:14px 24px;font-size:13px;font-weight:500}
.gn-breadcrumb-inner a{color:var(--gn-text-muted);text-decoration:none!important}
.gn-breadcrumb-inner a:hover{color:var(--gn-primary)}
.gn-breadcrumb-sep{color:var(--gn-border)}
.gn-breadcrumb-current{color:var(--gn-heading);font-weight:600}

/* Exact same padding as .gn-hero - was 56px 0 (no top/bottom split), which
   sat noticeably tighter than the main hero once the two were compared
   side by side. */
.gn-ihero{padding:35px 0 56px;background:var(--gn-white);position:relative;overflow:hidden}
/* align-items:center - text column and hero image are vertically
   centered against each other as a row. The two columns aren't the same
   height (the phone-mockup image is taller than the headline/lede/CTAs
   text block), so centering does shift the text down slightly from the
   section's own top padding to split the leftover space evenly above
   and below it - that's expected/correct centering behavior for
   mismatched-height columns, not a stray gap bug (a *bug* would be if
   only ONE side got the empty space, which is what the earlier version
   of this fix actually caught and fixed - see git history / prior
   session notes). */
.gn-ihero-inner{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media (min-width:900px){.gn-ihero-inner{grid-template-columns:1.1fr 1fr}}
/* Exact same size/weight/letter-spacing as .gn-hero h1 - was a separate,
   smaller clamp() that read as a noticeably lighter heading once compared
   side by side with the main GeoNest page's hero. */
.gn-ihero h1{font-size:clamp(2.25rem,4.4vw,3.2rem);font-weight:700;margin:14px 0 24px;max-width:16ch;letter-spacing:-.03em}
.gn-ihero h1 span{background:var(--gn-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.gn-ihero p.gn-lede{font-size:1.1875rem;line-height:1.65;max-width:50ch;margin-bottom:34px;color:#41485c}
/* The section right after the inner hero was stacking its own 110px
   top padding on top of the hero's 56px bottom padding - 166px of empty
   space with nothing in it, more than any other section transition on
   this page. Targets only the section immediately following .gn-ihero
   (an adjacent-sibling selector), not .gn-section generally, so every
   other section on the page keeps its normal padding. */
.gn-ihero + section.gn-section{padding-top:64px}

/* Notification mockup - a stylized illustration of a message a fence
   trigger sends, not a real screenshot (same honesty bar as the rest of
   this page's mockups: it looks designed, not like a captured app). */
/* border-radius/shadow matched to .gn-panel-mock (the other "small mockup
   card" component, used in the main page's workflow step 2) - was a
   lighter shadow (var(--gn-shadow-lg)) and 16px radius that read as
   slightly less substantial than every other card-style mockup on the
   page. */
.gn-notif-mock{width:100%;max-width:340px;background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;box-shadow:0 20px 50px -18px rgba(15,23,42,.16);overflow:hidden;margin:0 auto}
.gn-notif-head{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--gn-bg-light);border-bottom:1px solid var(--gn-border);font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--gn-text-muted)}
.gn-notif-icon{width:24px;height:24px;border-radius:7px;background:var(--gn-gradient);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.gn-notif-icon svg{width:13px;height:13px;stroke:#fff}
.gn-notif-body{padding:18px 16px}
.gn-notif-title{font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:var(--gn-heading);margin-bottom:6px}
.gn-notif-text{font-size:13.5px;color:var(--gn-text-muted);margin-bottom:14px;line-height:1.5}
.gn-notif-trigger{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--gn-success);background:var(--gn-success-light);padding:5px 11px;border-radius:20px}
.gn-notif-trigger svg{width:11px;height:11px}

/* Hero mockup image - one real illustrative graphic per industry page
   (a designed phone/map mockup, not a real screenshot presented as one),
   replacing the earlier animated CSS/JS radar demo. */
.gn-hero-mockup-img{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
@media (max-width:768px){.gn-hero-mockup-img{max-width:320px}}

/* Real phone-mockup image, used in place of .gn-notif-mock on pages where
   an actual designed graphic exists for each use case (retail's Enter/
   Dwell/Exit cards) rather than the generic CSS-built notification card. */
.gn-usecase-img{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;border-radius:18px}

.gn-usecase-block{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;padding:44px 0;border-bottom:1px solid var(--gn-border)}
.gn-usecase-block:last-child{border-bottom:none}
@media (min-width:860px){
  .gn-usecase-block{grid-template-columns:1fr 1fr}
  .gn-usecase-flip .gn-notif-mock,.gn-usecase-flip .gn-usecase-img{order:2}
  .gn-usecase-flip .gn-usecase-copy{order:1}
}
.gn-usecase-copy .gn-eyebrow{margin-bottom:10px;display:block}
.gn-usecase-copy h3{font-size:22px;margin-bottom:12px}
.gn-usecase-copy p{font-size:15.5px;margin-bottom:14px;line-height:1.6}

.gn-proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:700px){.gn-proof-grid{grid-template-columns:1fr}}
@media (min-width:700px){.gn-proof-grid-3{grid-template-columns:repeat(3,1fr)}}
/* Padding/radius/icon size/hover all matched to .gn-industry-card (the
   other "icon + heading + paragraph" grid card) - was a smaller 14px
   radius, 24px flat padding, and a 38px icon that read as a visibly
   smaller, less substantial card than every other card of this shape on
   the page. */
.gn-proof-box{background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;padding:28px 22px;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.gn-proof-box:hover{box-shadow:var(--gn-glow);transform:translateY(-5px);border-color:transparent}
.gn-proof-box .gn-icon{width:42px;height:42px;border-radius:12px;background:var(--gn-gradient);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 6px 16px -6px #7c3aed4d}
.gn-proof-box .gn-icon svg{width:20px;height:20px;stroke:#fff}
.gn-proof-box h3{font-size:16px;margin-bottom:10px;font-weight:600}
.gn-proof-box p{font-size:13.75px;line-height:1.55}

/* "More industries" cross-link grid - shared by every GeoNest industry
   page via components/geonest-related-industries.blade.php. Same card
   language as .gn-industry-card/.gn-proof-box above (icon chip, white
   card, border, hover-lift), extended with a real per-industry icon +
   benefit line (both reused verbatim from the main Industries grid, not
   new content) and a staggered scroll-triggered entrance driven by the
   inline --gn-ri-delay var each card sets in the Blade loop. */
.gn-related-industries-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gn-related-industry-card{display:flex;flex-direction:column;text-decoration:none!important;color:inherit;background:var(--gn-white);border:1px solid var(--gn-border);border-radius:18px;padding:26px 22px;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;opacity:0;transform:translateY(22px) scale(.97)}
.gn-related-industry-card.is-visible{animation:gn-ri-fade-in .55s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--gn-ri-delay,0ms)}
@keyframes gn-ri-fade-in{to{opacity:1;transform:translateY(0) scale(1)}}
.gn-related-industry-card:hover{box-shadow:var(--gn-glow);transform:translateY(-6px);border-color:transparent}
.gn-related-industry-card.is-visible:hover{transform:translateY(-6px) scale(1)}
.gn-related-industry-card .gn-icon{width:40px;height:40px;border-radius:11px;background:var(--gn-gradient);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 6px 16px -6px #7c3aed4d;transition:transform .3s ease}
.gn-related-industry-card:hover .gn-icon{transform:scale(1.1) rotate(-4deg)}
.gn-related-industry-card .gn-icon svg{width:19px;height:19px;stroke:#fff}
.gn-related-industry-card h3{font-size:16px;margin-bottom:8px;font-weight:600;color:var(--gn-heading)}
.gn-related-industry-card p{font-size:13.5px;line-height:1.55;color:var(--gn-text-muted);margin-bottom:14px}
.gn-related-industry-benefit{font-size:12px;font-weight:700;color:var(--gn-success);display:flex;gap:7px;align-items:flex-start;flex:1;margin-bottom:16px}
.gn-related-industry-benefit svg{width:13px;height:13px;flex:none;margin-top:1px}
.gn-related-industry-link{font-size:13px;font-weight:700;color:var(--gn-primary);display:flex;align-items:center;gap:6px}
.gn-related-industry-link svg{width:13px;height:13px;transition:transform .2s ease}
.gn-related-industry-card:hover .gn-related-industry-link svg{transform:translateX(3px)}
@media (max-width:860px){.gn-related-industries-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gn-related-industries-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
    .gn-related-industry-card{opacity:1;transform:none}
    .gn-related-industry-card.is-visible{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .gn-landing-wrapper *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}