/* ============================================================
   eLocker home.css - homepage-only enhancements.
   Loaded after site.css + components-extra.css, so it overrides.
   Scoped to the homepage to avoid touching the rest of the site.
   ============================================================ */

/* ---------- Hero: cinematic entrance (static locker visual) ---------- */
/* Initial hidden states are applied by home.js ONLY when GSAP is present,
   so if the CDN fails the hero still renders normally. */
.hero-cine .hero-frame{will-change:transform,filter}
.hero-cine .ov-badge,.hero-cine .ov-cost{will-change:transform,opacity}
/* a soft cyan rim that breathes once on entrance */
.hero-cine .hero-frame::before{
  content:"";position:absolute;inset:-1px;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(95,208,255,.18), 0 0 60px -10px rgba(4,178,244,.35);
  opacity:0;transition:opacity 1.2s var(--ease)}
.hero-cine.in .hero-frame::before{opacity:1}
/* Dark hero that merges into the blue section below it */
.hero-cine::before{background:radial-gradient(90% 75% at 50% -6%, rgba(4,178,244,.14), transparent 55%),
  linear-gradient(180deg,#0A1322 0%,#0C1729 46%,#14203A 100%)}
/* Top fold = hero + problem band sharing ONE continuous background.
   Instead of each section painting its own gradient + squares (which read as two
   blocks), the .topfold wrapper carries a single gradient and a single squares
   lattice that fade once from the top of the hero to the bottom of the problem
   band. The two sections sit transparent on top. */
.topfold{position:relative;isolation:isolate;
  border-radius:0 0 clamp(14px,1.3vw,22px) clamp(14px,1.3vw,22px);overflow:clip}
/* one gradient, top to bottom (near-black top with a soft cyan glow, lifting
   through navy, settling dark at the base) */
.topfold::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(105% 48% at 50% -10%, rgba(4,178,244,.12), transparent 60%),
    linear-gradient(180deg,#05090F 0%,#0A1322 26%,#16233E 66%,#0A101E 100%)}
/* one squares lattice, faint, fading out around the hero/problem boundary
   (between the logo strip and the problem copy). The % stops are relative to the
   whole .topfold height, so nudge them if the cut-off point drifts. */
.topfold::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 22%,transparent 52%);
  mask:linear-gradient(180deg,#000 0%,#000 22%,transparent 52%)}
/* the two child sections drop their own backgrounds so the shared one shows */
.topfold .dark{background:transparent}
.topfold .dark::before,.topfold .dark::after{display:none}

/* Menu merges into the hero at the top; liquid glass appears on scroll */
body[data-nav="home"] .site-nav:not(.scrolled){
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body[data-nav="home"] .site-nav:not(.scrolled)::before{opacity:0}
.hero-cine.dark{border-radius:0}                                  /* no rounded bottom: merge with section below */
.hero-cine.dark + section.dark{border-top-left-radius:0;border-top-right-radius:0}

/* Centered, full-width text hero with scroll cinematic */
.hero-centered-wrap{position:relative;z-index:2;max-width:1000px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;will-change:transform,opacity,filter}
.hero-cine .eyebrow{justify-content:center}
.hero-centered-wrap .display{font-size:clamp(34px,5.05vw,62px);line-height:1.07;letter-spacing:-.03em;max-width:21ch;margin:0 auto 22px}
.hero-centered-wrap .lead{max-width:62ch;margin:0 auto 30px;font-size:clamp(15px,1.45vw,19px)}

/* Centered hero: title and subtitle stacked and centred */
.hero-row{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1000px;margin:0 auto}
.hero-row .eyebrow{justify-content:center}
.hero-row .display{margin:0 auto 22px;max-width:21ch}
.hero-row .lead{margin:0 auto;max-width:60ch}
.hero-col-main,.hero-col-sub{width:100%}
.hero-ticks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:13px 24px;margin:34px auto 0;max-width:940px}
.hero-ticks li{display:inline-flex;align-items:center;gap:10px;font-size:16.5px;font-weight:600;color:rgba(233,239,248,.86)}
.hero-ticks li svg{width:21px;height:21px;flex:none;color:var(--cyan);background:rgba(4,178,244,.14);border-radius:50%;padding:4px}

/* ---------- Hero animated locker tower (replaces the photo) ---------- */
.hero-tower-wrap{position:relative;display:flex;align-items:center;justify-content:center;perspective:1100px;min-height:clamp(380px,42vw,560px)}
.hero-tower-wrap .lkw{will-change:transform}
.hero-tower-wrap .lkw-screen{min-height:240px}
.hero-ring{position:relative;width:128px;height:128px;margin:2px auto 12px;display:grid;place-items:center;filter:drop-shadow(0 14px 22px rgba(0,0,0,.7))}
.hero-ring svg{position:absolute;inset:0;width:100%;height:100%}
.hero-prog{transform:rotate(-90deg);transform-origin:center;stroke-dasharray:402;stroke-dashoffset:402;stroke-linecap:round}
.hero-ring .rc{position:relative;z-index:2;text-align:center}
.hero-ring .rc .v{font-size:32px;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.hero-ring .rc .c{font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(125,216,255,.6);margin-top:3px}
.fbadge{position:absolute;z-index:30;display:flex;align-items:center;gap:11px;border-radius:16px;padding:12px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 25px 50px -12px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.2)}
.fbadge .fi{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:rgba(4,178,244,.18);color:#7DD8FF;border:1px solid rgba(4,178,244,.3)}
.fbadge .fi svg{width:17px;height:17px}
.fbadge b{display:block;font-size:var(--fs-label);font-weight:800;color:#fff;letter-spacing:-.01em}
.fbadge span{font-size:var(--fs-label);color:rgba(180,210,240,.6)}
.fbadge.tl{top:8px;left:-14px}
.fbadge.br{bottom:34px;right:-16px}
@media(min-width:1024px){.fbadge.tl{left:-56px}.fbadge.br{right:-56px}}

/* ---------- Logo strip now lives in the shared .lc styles (site.css): white panel, one row ---------- */
/* Logo strip is merged into the hero; keep the same bottom padding as the shared standard */
.hero.hero-cine{padding-bottom:clamp(44px,5.5vw,64px)}

/* ---------- Problem section: scroll-in handled by GSAP ScrollTrigger in home.js ---------- */

/* ---------- Solution cards: labelled image placeholder ---------- */
.pick-card .img-ph{position:absolute;inset:0;z-index:-2;display:grid;place-items:center;
  background:linear-gradient(165deg,#1B2742,#0C1322);color:rgba(125,216,255,.5);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:20px}
.pick-card .img-ph span{max-width:22ch;line-height:1.5}

/* ---------- Ecosystem: horizontal scrolling cards (no UK map) ---------- */
.eco-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.eco-nav{display:flex;gap:10px}
.eco-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-d);
  background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s}
.eco-nav button:hover{background:rgba(95,208,255,.16);border-color:rgba(95,208,255,.45)}
.eco-nav button:disabled{opacity:.3;cursor:default}
.eco-nav button svg{width:20px;height:20px}
.eco-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin:0 calc(-1*clamp(20px,5vw,52px));padding:6px clamp(20px,5vw,52px) 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.eco-scroll::-webkit-scrollbar{display:none}
.eco-track{display:flex;gap:16px}
.eco-card{scroll-snap-align:start;flex:0 0 clamp(260px,30vw,330px);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line-d);border-radius:var(--r);padding:26px;min-height:236px;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s var(--ease),background .2s}
.eco-card:hover{border-color:rgba(95,208,255,.4);transform:translateY(-3px);
  background:linear-gradient(160deg,rgba(95,208,255,.1),rgba(255,255,255,.02))}
.eco-card .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;
  background:rgba(4,178,244,.16);color:#7DD8FF;margin-bottom:16px}
.eco-card .ic svg{width:24px;height:24px;stroke-width:1.7}
.eco-card h3{font-size:17.5px;margin-bottom:8px;color:#fff}
.eco-card p{font-size:14px;color:rgba(233,239,248,.66);line-height:1.55}
.eco-card .num{margin-top:auto;font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(125,216,255,.5)}
/* Locks & lockers graphic in the platform-flow card (replaces the phone) */
.eco-lockmini{flex:none;width:120px;background:#0b1422;border-radius:18px;padding:9px;
  border:1px solid rgba(17,26,46,.2);box-shadow:0 10px 24px -12px rgba(8,16,34,.45);
  display:grid;grid-template-columns:1fr 1fr;gap:7px}
.eco-lockmini .eld{position:relative;aspect-ratio:1;border-radius:9px;
  background:linear-gradient(152deg,#26365A,#121A2C);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07),inset 0 -2px 4px rgba(0,0,0,.6);
  display:grid;place-items:center}
.eco-lockmini .eld svg{width:16px;height:16px;color:#46587A}
.eco-lockmini .eld.on{box-shadow:0 0 0 1.5px rgba(4,178,244,.7),0 0 16px rgba(4,178,244,.4)}
.eco-lockmini .eld.on svg{color:#04B2F4}

/* Stacked grid instead of a horizontal scroller */
.eco-h{display:none}
.eco-scroll{overflow:visible;margin:0;padding:0;scroll-snap-type:none}
.eco-track{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eco-card{flex:none;width:auto;scroll-snap-align:none}
@media(max-width:900px){.eco-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.eco-track{grid-template-columns:1fr}}

/* ---------- Locker workflow block (replaces 'How it works' phone) ---------- */
.lkw-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
@media(max-width:860px){.lkw-grid{grid-template-columns:1fr}}
.lkw-stage{display:flex;justify-content:center;perspective:1100px}
.lkw{position:relative;width:330px;max-width:84vw;border-radius:30px;padding:14px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(158deg,#1E2C4C 0%,#0A101E 100%);
  box-shadow:inset 0 0 0 2px #38496B,inset 0 0 0 7px #05090F,0 50px 90px -18px rgba(0,0,0,.9);
  transform-style:preserve-3d}
.lkw-screen{position:relative;border-radius:18px;overflow:hidden;background:#050A14;color:#fff;
  min-height:188px;padding:16px;box-shadow:inset 0 0 16px rgba(0,0,0,1)}
.lkw-screen .glare{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 46%)}
.lkw-scr{position:absolute;inset:0;padding:16px;opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none;display:flex;flex-direction:column}
.lkw-scr.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.lkw-scr .chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#7DD8FF;background:rgba(4,178,244,.14);
  border:1px solid rgba(4,178,244,.3);border-radius:999px;padding:6px 11px;margin-bottom:11px}
.lkw-scr .chip svg{width:13px;height:13px}
.lkw-scr h4{font-size:18px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px}
.lkw-scr p{font-size:12.5px;color:rgba(180,210,240,.7);line-height:1.5}
.lkw-scr .row{display:flex;align-items:center;gap:10px;margin-top:12px;border-radius:11px;padding:9px 11px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.05)}
.lkw-scr .row .ri{width:28px;height:28px;flex:none;border-radius:8px;background:rgba(4,178,244,.16);color:#7DD8FF;display:grid;place-items:center}
.lkw-scr .row .ri svg{width:14px;height:14px}
.lkw-scr .row b{font-size:11.5px;color:#fff;display:block}
.lkw-scr .row span{font-size:10px;color:rgba(180,210,240,.55)}
.lkw-doors{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.lkw-door{position:relative;border-radius:12px;overflow:hidden;min-height:64px;
  background:linear-gradient(152deg,#26365A,#121A2C);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.07),inset 0 -2px 5px rgba(0,0,0,.6)}
.lkw-door .lk-face{position:absolute;inset:0;border-radius:inherit;z-index:3;padding:10px;
  display:flex;justify-content:space-between;
  background:linear-gradient(152deg,#26365A,#121A2C);
  transform-origin:left center;backface-visibility:hidden;transition:transform .7s var(--ease)}
.lkw-door .lk-num{font-size:10px;font-weight:800;color:rgba(255,255,255,.5)}
.lkw-door .lk-led{width:6px;height:6px;border-radius:50%;background:#3A4A66;align-self:flex-start}
.lkw-door .lk-int{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 25%,#11203A,#04070E)}
.lkw-door .lk-int span{width:42px;height:30px;border-radius:4px;background:linear-gradient(160deg,#D8C49A,#B69A6A);
  box-shadow:0 5px 12px rgba(0,0,0,.7);position:relative}
.lkw-door .lk-int span::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:7px;transform:translateX(-50%);
  background:linear-gradient(180deg,#04B2F4,#0A93D8)}
.lkw.open .lkw-door.active{box-shadow:0 0 0 1.5px rgba(4,178,244,.7),0 0 24px rgba(4,178,244,.4)}
.lkw.open .lkw-door.active .lk-led{background:var(--cyan);box-shadow:0 0 9px rgba(4,178,244,.9)}
.lkw.open .lkw-door.active .lk-face{transform:rotateY(-108deg)}
/* system-at-the-bottom strip */
.lkw-system{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line-d);padding-top:26px}
.lkw-system .sys-h{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5FD0FF;text-align:center;margin-bottom:18px}
.lkw-sys-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:780px){.lkw-sys-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.lkw-sys-row{grid-template-columns:1fr}}
.lkw-sys{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);
  border:1px solid var(--line-d);border-radius:14px;padding:16px}
.lkw-sys .si{width:38px;height:38px;flex:none;border-radius:11px;background:rgba(4,178,244,.16);color:#7DD8FF;display:grid;place-items:center}
.lkw-sys .si svg{width:19px;height:19px;stroke-width:1.7}
.lkw-sys b{font-size:14px;color:#fff;display:block;margin-bottom:2px}
.lkw-sys span{font-size:12.5px;color:rgba(233,239,248,.62);line-height:1.45}

/* ---------- Proof verticals: metric + clickable + thinner icons ---------- */
.tri-card .ic-wrap svg{stroke-width:1.6}
.tri.tri-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.tri.tri-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tri.tri-4{grid-template-columns:1fr}}
a.tri-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.dark a.tri-card:hover{transform:translateY(-3px);border-color:rgba(95,208,255,.45)}
.tri-metric{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin:2px 0 12px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7DD8FF;
  background:rgba(4,178,244,.12);border:1px solid rgba(4,178,244,.25);border-radius:999px;padding:6px 12px}
.tri-card .tri-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:700;color:#7DD8FF}
.tri-card .tri-go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
a.tri-card:hover .tri-go svg{transform:translateX(3px)}

/* ---------- Resources cards: shrink the oversized arrow ---------- */
.rcard .go svg{width:15px;height:15px;flex:none}

/* ---------- "Where eLocker works" cards: darken images for legible text ---------- */
.pick .pick-card::after{background:linear-gradient(180deg,rgba(8,14,28,.32) 18%,rgba(8,14,28,.78) 62%,rgba(8,14,28,.94))}
.pick .pick-card img{filter:brightness(.86) saturate(1.02)}
/* Four routes: single horizontal row */
#where-elocker-works .pick{grid-template-columns:repeat(4,1fr)}
#where-elocker-works .pick-card{min-height:clamp(300px,26vw,400px)}
#where-elocker-works .pick-card h3{font-size:clamp(17px,1.5vw,20px)}
@media(max-width:980px){#where-elocker-works .pick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#where-elocker-works .pick{grid-template-columns:1fr}}
/* Icon polish (homepage): match site-wide ~80% icon sizing, thin stroke */
.ic-wrap svg,.sc-ic svg,.wic svg,.si svg,.di svg,.eic svg{width:78%;height:78%;stroke-width:1.5}
/* clickable ecosystem tiles */
a.eco-tile{text-decoration:none;color:inherit;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.eco-tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}

/* ============================================================
   MOBILE-ONLY homepage fixes (do not affect desktop).
   ============================================================ */

/* 429 + 480: the "Why eLocker" reasons read as a tall, cramped stack on mobile.
   The .split.tall wrapper forced the image to a large min-height and stretched
   the column, wasting scroll, and the single-column reason list squeezed the
   copy. Rebuild the MOBILE layout: release the tall-stretch behaviour, lay the
   six reasons out as a compact, comfortably padded 2-column grid, and let the
   image sit at a sensible height above it. */
@media(max-width:680px){
  /* Agree with the shared stacked behaviour (motion.css): photo sits BELOW the
     reasons at a comfortable height, never a tiny squeezed band. Keep the
     compact 2-column reasons grid. */
  #why .split.tall>div:has(.media-frame),
  #why .split.tall>div:has(.imgbox){order:2}
  #why .split.tall .media-frame,#why .split.tall .imgbox{height:auto;aspect-ratio:auto;max-height:none}
  #why .split.tall .media-frame img,
  #why .imgbox img{min-height:0;height:clamp(220px,55vw,320px);width:100%;object-fit:cover}
  #why .whylist{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
  #why .wl{flex-direction:column;gap:10px;padding:16px 15px;align-items:flex-start;
    background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:14px}
  #why .wl .wic{width:40px;height:40px;border-radius:12px}
  #why .wl h3{font-size:15.5px;line-height:1.3;margin-bottom:4px}
  #why .wl p{font-size:var(--fs-note);line-height:1.45}
}
/* On the narrowest phones two columns would squeeze the copy: drop to a single
   tidy row-per-reason instead, still with comfortable padding. */
@media(max-width:380px){
  #why .whylist{grid-template-columns:1fr;gap:9px}
  #why .wl{flex-direction:row;align-items:flex-start;gap:13px;padding:14px 15px}
  #why .wl .wic{width:38px;height:38px}
}

/* 482: on mobile the gap between the logo bar (.lc, inside the hero) and the
   problem band below it was too large. Trim the hero's bottom padding on small
   screens (the problem band's top padding is also reduced in index.html) so the
   two sections sit closer together. */
@media(max-width:680px){
  .hero.hero-cine{padding-bottom:clamp(18px,4vw,30px)}
}