/* ===== Home page styles ===== */

/* Hero */
.hero{ position:relative; background:
    radial-gradient(115% 95% at 90% -12%, rgba(38,134,84,.3) 0%, rgba(38,134,84,0) 50%),
    radial-gradient(105% 92% at 4% 2%, rgba(18,74,102,.6) 0%, rgba(18,74,102,0) 56%),
    linear-gradient(150deg, #103E54 0%, #11524A 42%, #155B46 74%, #186044 100%); color:#fff; padding:calc(var(--nav-h) + 56px) 0 clamp(70px,9vw,120px); overflow:hidden; }
.hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(130% 90% at 50% -15%, rgba(255,255,255,.12), transparent 55%), linear-gradient(180deg, transparent 68%, rgba(6,30,20,.4)); }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.hero-bg .o1{ width:520px; height:520px; background:radial-gradient(circle,#2C8A5C,transparent 70%); top:-140px; right:-80px; mix-blend-mode:screen; }
.hero-bg .o2{ width:460px; height:460px; background:radial-gradient(circle,#1E6F94,transparent 70%); bottom:-180px; left:-120px; opacity:.5; mix-blend-mode:screen; }
.grid-lines{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000,transparent 75%); }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
/* min-width:0 pins the fr columns to their ratio so long translated words can't
   steal width from the photo column - the hero photo stays the same size in any language. */
.hero-inner > *{ min-width:0; }
.hero-copy{ align-self:center; overflow-wrap:break-word; }
.hero-stats{ align-self:center; }
.hero-chip{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; margin-bottom:26px; backdrop-filter:blur(6px); }
.hero-chip .dot{ background:var(--green-bright); box-shadow:0 0 0 4px rgba(78,174,102,.3); }
.hero h1{ color:#fff; margin-bottom:24px; }
.hero .lead{ color:rgba(255,255,255,.86); max-width:54ch; margin-bottom:34px; }

.hero-photo{ position:relative; z-index:1; border-radius:var(--r-xl); box-shadow:0 40px 80px -30px rgba(4,26,18,.72), 0 0 0 1px rgba(255,255,255,.1); aspect-ratio:4/3.7; }
.hero-photo > img{ border-radius:var(--r-xl); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.hero-photo::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); background:linear-gradient(180deg, transparent 52%, rgba(5,26,18,.5)); }
.hero-stats{ position:relative; }
.hero-stats::before{ content:""; position:absolute; z-index:0; width:78%; height:64%; top:4%; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(78,174,102,.5), transparent 70%); filter:blur(64px); pointer-events:none; }
.float-card{ position:absolute; z-index:2; left:18px; bottom:18px; right:18px; display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-radius:var(--r); padding:14px 16px; box-shadow:0 18px 40px -16px rgba(4,26,18,.55), 0 0 0 1px rgba(255,255,255,.5) inset; }
.float-card .num{ background:var(--grad-bright); }
.float-card .num svg{ width:20px; height:20px; }
.float-card strong{ display:block; color:var(--ink); font-size:.98rem; }
.float-card span{ font-size:.8rem; color:var(--ink-faint); line-height:1.3; display:block; }
.stat-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; }
.stat-strip .stat{ text-align:center; }
.stat-strip .big{ color:#fff; }
.stat-strip .lbl{ color:rgba(255,255,255,.7); }
@media(max-width:920px){
  /* ---- Mobile hero -------------------------------------------------------
     The copy is split around the photo, so spacing has to be deliberate or it
     reads as three unrelated fragments. Rhythm: chip + headline as one tight
     pair, the photo as a clear full-width break, then lead + CTAs as a single
     grouped block. Gaps are set per element (not container gap) for control.
     !important overrides the inline padding/type sizes on the page itself. */
  .hero{ padding:104px 0 4px!important; }
  .hero-inner{ display:flex; flex-direction:column; grid-template-columns:1fr; align-items:stretch; gap:0; }
  .hero-inner > .hero-copy{ display:contents; }

  .hero-copy .hero-chip{ order:-3; margin:0 0 16px!important; }
  .hero-copy h1{
    order:-2; margin:0 0 22px!important;
    font-size:clamp(31px,8.6vw,42px)!important; line-height:1.06; letter-spacing:-.022em;
    max-width:none!important; text-wrap:balance;
  }
  .hero-stats{ order:-1; margin:0 0 26px; max-width:none; width:100%; align-self:stretch; }
  .hero-photo{ aspect-ratio:16/11; border-radius:22px; box-shadow:0 26px 54px -26px rgba(4,26,18,.8), 0 0 0 1px rgba(255,255,255,.12); }
  .hero-photo > img, .hero-photo image-slot{ border-radius:22px; }
  .hero-stats::before{ display:none; }   /* the glow reads as a smudge at this size */

  /* Float card: smaller, tucked in, still legible */
  .float-card{ left:12px; right:12px; bottom:12px; padding:12px 14px; gap:11px; border-radius:16px; }
  .float-card .num{ width:36px; height:36px; }
  .float-card strong{ font-size:.92rem; }
  .float-card span{ font-size:.78rem; line-height:1.35; }

  .hero-copy > *:not(.hero-chip):not(h1){ order:0; }
  .hero .lead{ margin:0 0 24px!important; max-width:none; font-size:1.02rem; line-height:1.62; }
  .hero .hero-copy .btn-row{ margin:0; gap:12px; }
  .hero .hero-copy .btn-row .btn{ flex:1 1 100%; justify-content:center; white-space:normal; }

  /* Proof points sit closer, as a related group rather than a separate band */
  .hero-feats-row{ margin-top:34px!important; padding-top:26px!important; gap:10px; }
  .hero-feats-row .hfeat{ padding:14px 16px; }
}

/* Trust row */
.trust-label{ font-size:.82rem; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; margin-bottom:26px; }
.logo-row{ display:flex; flex-wrap:wrap; gap:clamp(28px,6vw,72px); align-items:center; justify-content:center; }
.logo-row span{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.45rem; letter-spacing:-.02em; color:#A9BCB4; opacity:.85; transition:color .2s; }
.logo-row span:hover{ color:var(--green-deep); }

/* Levels - SDR / BDM cards with photo header band */
.levels-row{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start; }
@media(max-width:820px){ .levels-row{ grid-template-columns:1fr; } }
.lvl-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -38px rgba(8,39,57,.28); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.lvl-card:hover{ transform:translateY(-5px); box-shadow:0 1px 2px rgba(8,39,57,.06), 0 44px 80px -44px rgba(8,39,57,.34); }
.lvl-sdr{ border-color:#CCD8E0; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -36px rgba(12,37,48,.4); }
.lvl-bdm{ border-color:#CFE6D7; box-shadow:0 1px 2px rgba(8,39,57,.05), 0 30px 60px -36px rgba(28,101,71,.34); }
.lvl-head{ position:relative; margin:54px 22px 0; height:128px; border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -44px 56px -34px rgba(0,0,0,.34); }
.lvl-sdr .lvl-head{ background:linear-gradient(135deg, #1B405A 0%, #0C2530 100%); }
.lvl-bdm .lvl-head{ background:linear-gradient(135deg, #25965F 0%, #12624D 100%); }
.lvl-photo{ position:absolute; left:8px; bottom:0; height:164px; width:auto; pointer-events:none; }
.lvl-title{ position:absolute; top:0; bottom:0; right:22px; left:244px; display:flex; flex-direction:column; justify-content:center; color:#fff; }
.lvl-bdm .lvl-title{ left:238px; padding-top:14px; }
.lvl-abbr{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:2.6rem; line-height:1; letter-spacing:-.025em; text-shadow:0 2px 14px rgba(0,0,0,.18); }
.lvl-role{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(.92rem,1.05vw,1.06rem); line-height:1.2; margin-top:8px; color:rgba(255,255,255,.92); text-wrap:balance; }
.lvl-rec{ position:absolute; top:-26px; right:16px; display:inline-flex; align-items:center; gap:.5em; background:#fff; color:var(--green-deep); font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.73rem; letter-spacing:.12em; text-transform:uppercase; padding:10px 16px; border-radius:999px; box-shadow:0 14px 30px -12px rgba(28,101,71,.55), inset 0 0 0 1px rgba(28,101,71,.10); }
.lvl-rec svg{ width:14px; height:14px; color:var(--green); }
.lvl-body{ padding:28px 30px 30px; }
.lvl-best{ margin:0 0 20px; color:var(--ink-soft); }
.lvl-best strong{ color:var(--green-deep); }
.lvl-plus{ font-weight:700; color:var(--ink); margin:0 0 14px; }
.lvl-body .check-list{ margin-bottom:24px; }
@media(max-width:480px){ .lvl-title{ left:214px; } .lvl-bdm .lvl-title{ left:234px; } .lvl-photo{ height:150px; } }

/* Process - same theme palette as the hero (teal→emerald gradient, blue corner glow, faint grid) */
#process{ position:relative; overflow:hidden; background:
    radial-gradient(110% 100% at 50% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(105% 92% at 4% 2%, rgba(18,74,102,.5) 0%, rgba(18,74,102,0) 56%),
    linear-gradient(150deg, #103E54 0%, #11524A 42%, #155B46 74%, #186044 100%); }
#process::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 80%); mask-image:radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 80%); }
#process > .wrap{ position:relative; z-index:1; }
.process{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.proc-line{ position:absolute; top:20px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,rgba(78,174,102,.15),rgba(78,174,102,.6),rgba(78,174,102,.15)); }
.proc-step h4{ color:#fff; margin:16px 0 8px; }
.proc-step{ text-align:left; }
.proc-step:has(.proc-ic){ display:flex; flex-direction:column; align-items:flex-start; }
.process:has(.proc-ic) .proc-line{ top:20px; }
.proc-step h4{ margin:16px 0 8px; }
.proc-step p{ color:rgba(232,241,236,.92); font-size:.95rem; line-height:1.62; margin:0; text-wrap:pretty; }
#process .section-head{ margin-bottom:clamp(22px,3vw,34px); }
.proc-step .num{ position:relative; z-index:1; box-shadow:0 0 0 6px #14564A; }
@media(max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); gap:30px 22px; } .proc-line{ display:none; } }
@media(max-width:560px){ .process{ grid-template-columns:1fr; } }

/* Verticals */
.vert-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media(max-width:900px){ .vert-layout{ grid-template-columns:1fr; } }
.vert-points{ display:flex; flex-direction:column; gap:18px; margin-top:28px; }
.vp{ display:flex; gap:14px; align-items:flex-start; }
.ic-mini{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--bg-soft); color:var(--green-deep); display:grid; place-items:center; }
.ic-mini svg{ width:20px; height:20px; }
.vp strong{ display:block; }
.vp span{ color:var(--ink-faint); font-size:.92rem; }
.vert-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px){ .vert-grid{ grid-template-columns:1fr; } }
.vert-chip{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:12px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.vert-chip::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--grad-bright); flex:none; }
.vert-chip:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:#CFE6D7; }

/* ROI */
.roi-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,64px); align-items:center; }
@media(max-width:900px){ .roi-layout{ grid-template-columns:1fr; } }
.roi-stats{ display:grid; gap:18px; }
.roi-card{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-lg); padding:28px 30px; backdrop-filter:blur(6px); }
.roi-big{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(3rem,6vw,4.4rem); line-height:1; letter-spacing:-.03em; color:#fff; }
.roi-card p{ margin:8px 0 0; color:rgba(255,255,255,.85); font-size:1rem; }

/* Testimonial */
.quote{ max-width:900px; margin:0 auto; text-align:center; position:relative; }
.quote-mark{ font-family:'Space Grotesk',sans-serif; font-size:7rem; line-height:.5; color:var(--green); opacity:.18; height:60px; }
.quote blockquote{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.32; letter-spacing:-.02em; color:var(--ink); margin:0 0 30px; }
.quote figcaption{ display:inline-flex; align-items:center; gap:14px; }
.avatar{ width:52px; height:52px; border-radius:50%; background:var(--grad-bright); color:#fff; display:grid; place-items:center; font-family:'Space Grotesk',sans-serif; font-weight:700; }
.quote figcaption strong{ display:block; text-align:left; }
.quote figcaption span{ color:var(--ink-faint); font-size:.92rem; text-align:left; display:block; }

/* CTA band */
.cta-band{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--grad); color:#fff; padding:clamp(48px,7vw,84px) clamp(28px,5vw,64px); text-align:center; }
.cta-bg{ position:absolute; inset:0; pointer-events:none; }
.cta-bg .orb{ position:absolute; border-radius:50%; filter:blur(70px); }
.cta-bg .o1{ width:380px; height:380px; background:radial-gradient(circle,#4EAE66,transparent 70%); top:-120px; left:-60px; opacity:.55; }
.cta-bg .o2{ width:380px; height:380px; background:radial-gradient(circle,#0EA5A5,transparent 70%); bottom:-140px; right:-60px; opacity:.4; }
.cta-inner{ position:relative; z-index:1; max-width:680px; margin:0 auto; }
.cta-inner h2{ color:#fff; margin:.3em 0; }

/* Process - animated icons */
.proc-ic{ width:50px; height:50px; margin:16px 0 0; border-radius:14px; background:rgba(78,174,102,.14); border:1px solid rgba(78,174,102,.3); color:var(--green-bright); display:grid; place-items:center; }
.proc-ic svg{ width:24px; height:24px; }
@media (prefers-reduced-motion: no-preference){
  .proc-step[data-deck-active] .proc-ic, .proc-ic{ animation:procFloat 3.6s ease-in-out infinite; }
  .proc-step:nth-child(2) .proc-ic{ animation-delay:.3s; }
  .proc-step:nth-child(3) .proc-ic{ animation-delay:.6s; }
  .proc-step:nth-child(4) .proc-ic{ animation-delay:.9s; }
  .proc-step:nth-child(5) .proc-ic{ animation-delay:1.2s; }
  .proc-step:nth-child(6) .proc-ic{ animation-delay:1.5s; }
}
@keyframes procFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.proc-step:hover .proc-ic{ background:var(--grad-bright); color:#fff; border-color:transparent; transition:background .25s, color .25s; }

/* Verticals - interactive icons */
.vert-chip{ cursor:default; }
.vert-chip::before{ display:none; }
.vert-chip .vchip-ic{ flex:none; width:40px; height:40px; border-radius:11px; background:var(--bg-soft); color:var(--green-deep); display:grid; place-items:center; transition:background .3s cubic-bezier(.2,.8,.2,1), color .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.vert-chip .vchip-ic svg{ width:21px; height:21px; }
.vert-chip:hover .vchip-ic{ background:var(--grad-bright); color:#fff; transform:rotate(-8deg) scale(1.08); }

/* Challenges we solve */
.chal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:8px; }
@media(max-width:760px){ .chal-grid{ grid-template-columns:1fr; } }
.chal{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.chal:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#CFE6D7; }
.chal .chal-ic{ width:46px; height:46px; border-radius:12px; background:var(--bg-soft); color:var(--green-deep); display:grid; place-items:center; margin-bottom:16px; }
.chal .chal-ic svg{ width:23px; height:23px; }
.chal .struggle{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px; }
.chal .solution{ display:flex; gap:11px; align-items:flex-start; padding-top:14px; border-top:1px solid var(--bg-soft-2); }
.chal .solution .arr{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--grad-bright); color:#fff; display:grid; place-items:center; margin-top:1px; }
.chal .solution .arr svg{ width:13px; height:13px; }
.chal .solution p{ margin:0; color:var(--ink-soft); font-size:.96rem; line-height:1.55; }
.chal .solution strong{ color:var(--green-deep); }

/* Hero feature chips - interactive icons (dark hero) */
.hero-feats{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.hero-feats .hfeat{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); cursor:default;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
}
.hero-feats .hfeat:hover, .hero-feats .hfeat:focus-visible{
  transform:translateX(5px); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); outline:none;
}
.hero-feats .hfeat-ic{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
  transition:background .32s cubic-bezier(.2,.8,.2,1), color .32s, transform .32s cubic-bezier(.2,.8,.2,1);
}
.hero-feats .hfeat-ic svg{ width:20px; height:20px; }
.hero-feats .hfeat:hover .hfeat-ic, .hero-feats .hfeat:focus-visible .hfeat-ic{
  background:var(--grad-bright); color:#fff; transform:rotate(-8deg) scale(1.08);
}
.hero-feats .hfeat strong{ color:#fff; font-weight:600; font-size:.98rem; line-height:1.25; letter-spacing:-.005em; }
.hero-feats .hfeat .hl{ color:var(--green-bright); font-weight:800; }
/* full-width row variant - three points across the page */
.hero-feats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(40px,5vw,60px); padding-top:clamp(28px,3.4vw,40px); border-top:1px solid rgba(255,255,255,.13); }
.hero-feats-row .hfeat{ padding:16px 18px; }
.hero-feats-row .hfeat:hover, .hero-feats-row .hfeat:focus-visible{ transform:translateY(-4px); }
@media(max-width:760px){ .hero-feats-row{ grid-template-columns:1fr; } }

/* ===== Premium process section - shared across pages ===== */
/* Match the hero palette exactly (teal→emerald gradient, green + deep-blue corner glow) */
#process.section.dark{ background:
  radial-gradient(115% 95% at 90% -12%, rgba(38,134,84,.3) 0%, rgba(38,134,84,0) 50%),
  radial-gradient(105% 92% at 4% 2%, rgba(18,74,102,.6) 0%, rgba(18,74,102,0) 56%),
  linear-gradient(150deg, #103E54 0%, #11524A 42%, #155B46 74%, #186044 100%); }
#process .proc-line{ display:none; }
#process .process{ position:relative; z-index:1; }
#process .proc-step{ position:relative; background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:26px 22px 24px; backdrop-filter:blur(6px); transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s, box-shadow .35s; }
#process .proc-step:hover{ transform:translateY(-6px); border-color:rgba(78,174,102,.45); background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow:0 30px 60px -34px rgba(0,0,0,.7); }
#process .proc-ic{ margin-top:0; }

/* Icon top-left, number beside the title */
#process .proc-title{ display:flex; align-items:flex-start; gap:11px; margin:18px 0 10px; }
#process .proc-title h4{ margin:0; letter-spacing:-.01em; }
#process .proc-title .num{ margin-top:1px; }
#process .proc-step .num{ position:static; width:24px; height:24px; font-size:.74rem; border-radius:7px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; box-shadow:none; flex:none; }
#process .proc-step:hover .num{ background:var(--grad-bright); border-color:transparent; color:#fff; transition:background .25s, color .25s, border-color .25s; }
/* Premium section header */
#process .proc-head-badge{ width:62px; height:62px; border-radius:18px; margin:0 auto 20px; display:grid; place-items:center; background:linear-gradient(150deg, rgba(78,174,102,.24), rgba(78,174,102,.06)); border:1px solid rgba(143,227,180,.34); color:#8FE3B4; box-shadow:0 18px 40px -20px rgba(0,0,0,.6); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
#process .proc-head-badge svg{ width:30px; height:30px; }
#process .proc-head-badge:hover{ transform:translateY(-4px) rotate(-5deg) scale(1.06); box-shadow:0 26px 50px -22px rgba(0,0,0,.7); }
#process .section-head h2{ font-size:clamp(2.3rem,4.6vw,3.4rem); letter-spacing:-.025em; }
#process .section-head h2 .hl{ color:#8FE3B4; }
#process .proc-subhead{ color:rgba(232,241,236,.78); font-size:1.06rem; line-height:1.55; max-width:46ch; margin:14px auto 0; }
#process .proc-step-tag{ display:block; margin-top:auto; padding-top:18px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(143,227,180,.72); }

/* ================= Process journey ================= */
#process .section-head{ margin-bottom:clamp(38px,5vw,58px); }
#process .proc-subhead{ color:rgba(232,241,236,.7); font-size:1.05rem; line-height:1.55; margin:16px auto 0; }

.journey{ position:relative; }
.jr-rail{ position:absolute; top:27px; left:10%; right:10%; height:1px; background:linear-gradient(90deg, rgba(143,227,180,0), rgba(143,227,180,.45) 12%, rgba(143,227,180,.45) 88%, rgba(143,227,180,0)); }
.jr-rail::after{ content:''; position:absolute; top:-1px; left:0; width:22%; height:3px; border-radius:99px; background:linear-gradient(90deg, rgba(143,227,180,0), #8FE3B4, rgba(143,227,180,0)); filter:blur(.4px); animation:jrFlow 6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes jrFlow{ 0%{ transform:translateX(-20%); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(475%); opacity:0; } }
@media(prefers-reduced-motion:reduce){ .jr-rail::after{ animation:none; opacity:.5; } }

.jr-steps{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.4vw,34px); }
.jr-step{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.jr-node{ position:relative; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(158deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.16); box-shadow:0 0 0 8px #11524A, 0 18px 34px -22px rgba(0,0,0,.9); transition:border-color .3s, background .3s, transform .3s; }
.jr-ic{ display:grid; place-items:center; color:#8FE3B4; transition:color .3s; }
.jr-ic svg{ width:23px; height:23px; }
.jr-step:hover .jr-node{ transform:translateY(-4px); border-color:rgba(143,227,180,.6); background:linear-gradient(158deg, rgba(143,227,180,.22), rgba(143,227,180,.06)); }
.jr-step:hover .jr-ic{ color:#fff; }
.jr-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.22em; color:rgba(143,227,180,.72); margin:24px 0 8px; }
.jr-step h3{ font-family:'Space Grotesk',sans-serif; font-size:clamp(1.1rem,1.6vw,1.32rem); letter-spacing:-.015em; color:#fff; margin:0 0 9px; }
.jr-step p{ font-size:.9rem; line-height:1.62; color:rgba(232,241,236,.72); margin:0; text-wrap:pretty; }

@media(max-width:980px){
  .jr-rail{ display:none; }
  .jr-steps{ grid-template-columns:repeat(2,1fr); gap:34px 28px; }
  .jr-node{ box-shadow:0 18px 34px -22px rgba(0,0,0,.9); }
}
@media(max-width:560px){
  .jr-steps{ grid-template-columns:1fr; gap:28px; }
  .jr-step{ display:grid; grid-template-columns:54px 1fr; column-gap:18px; align-items:start; }
  .jr-node{ grid-row:span 3; }
  .jr-num{ margin:2px 0 4px; }
  .jr-step h3{ margin:0 0 5px; }
}

.jr-proof{ list-style:none; margin:clamp(44px,6vw,66px) 0 0; padding:26px 0 0; border-top:1px solid rgba(255,255,255,.1); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 44px; }
@media(max-width:760px){ .jr-proof{ grid-template-columns:1fr; } }
.jr-proof li{ display:flex; align-items:flex-start; gap:13px; font-size:.92rem; line-height:1.6; color:rgba(232,241,236,.72); text-wrap:pretty; }
.jr-proof svg{ flex:none; width:20px; height:20px; margin-top:1px; color:#8FE3B4; }
.jr-proof strong{ color:#fff; font-weight:700; }