/* Hamida Traders - Locked Home V11.1 Body CSS - Frontend Integration 2026-08-31 */

/* SIGNATURE HERO */
.hero{
  position:relative;overflow:hidden;background:#061a2d;color:#fff;
  min-height:720px;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,26,45,.98) 0%,rgba(6,26,45,.91) 42%,rgba(6,26,45,.58) 68%,rgba(6,26,45,.88) 100%),
    radial-gradient(circle at 77% 26%,rgba(23,105,210,.38),transparent 30%),
    linear-gradient(145deg,#061a2d,#0a2946 56%,#07121e);
}
.hero-grid{
  position:absolute;inset:0;opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(90deg,transparent 0%,black 42%,black 100%);
}
.hero-scene{
  position:absolute;right:-2%;top:68px;width:min(54vw,790px);height:590px;
  opacity:.48;filter:saturate(.78) contrast(1.05)
}
.hero-inner{
  position:relative;z-index:2;width:min(var(--max),calc(100% - 30px));margin:auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:center;
  min-height:720px;padding:72px 0 68px
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:999px;
  border:1px solid rgba(85,220,158,.26);background:rgba(22,130,87,.14);
  color:#8ce0ba;font-size:10.5px;font-weight:900;letter-spacing:.14em
}
.eyebrow i{width:7px;height:7px;background:#4bd49a;border-radius:50%;box-shadow:0 0 0 5px rgba(75,212,154,.1)}
.hero h1{
  max-width:760px;margin:20px 0 18px;font-size:clamp(42px,5.4vw,74px);
  line-height:.98;letter-spacing:-.045em;font-weight:900
}
.hero h1 .accent{display:block;color:#76aef6}
.hero-copy{
  max-width:690px;color:#b9c9d8;font-size:15.5px;line-height:1.75;margin:0
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{
  min-height:48px;padding:0 18px;border-radius:12px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:850;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#fff;color:#061a2d;box-shadow:0 12px 30px rgba(0,0,0,.16)}
.btn-primary:hover{box-shadow:0 17px 36px rgba(0,0,0,.22)}
.btn-ghost{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff}
.hero-trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;color:#91a9bd;font-size:11px}
.hero-trust span{display:flex;align-items:center;gap:7px}
.hero-trust b{width:7px;height:7px;border-radius:50%;background:#4bd49a}

.hero-side{position:relative;min-height:510px}
.orbit{
  position:absolute;right:0;top:20px;width:430px;height:430px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08)
}
.orbit:before,.orbit:after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.07)
}
.orbit:before{inset:55px}.orbit:after{inset:115px}
.signal-card{
  position:absolute;width:255px;padding:18px;border-radius:18px;
  background:rgba(8,35,60,.78);border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(14px);box-shadow:0 22px 45px rgba(0,0,0,.2)
}
.signal-card small{display:block;color:#7f98ad;font-size:9.5px;font-weight:850;letter-spacing:.12em}
.signal-card strong{display:block;margin-top:6px;color:#fff;font-size:16px}
.signal-card p{margin:7px 0 0;color:#aabccd;font-size:11.5px}
.card-a{right:150px;top:18px}.card-b{right:-8px;top:188px}.card-c{right:168px;top:352px}
.signal-icon{
  width:34px;height:34px;margin-bottom:14px;border-radius:10px;
  display:grid;place-items:center;background:rgba(23,105,210,.18);color:#8ab7f4;font-size:16px
}
.hero-route{
  position:absolute;right:-20px;bottom:-34px;width:300px;height:112px;border-radius:18px;
  background:linear-gradient(140deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);padding:17px
}
.route-line{height:2px;background:linear-gradient(90deg,#43d295,#3f8ef3);margin:17px 7px 12px;position:relative}
.route-line:before,.route-line:after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%)}
.route-line:before{left:-2px;background:#43d295}.route-line:after{right:-2px;background:#3f8ef3}
.route-labels{display:flex;justify-content:space-between;color:#9fb1c2;font-size:10px}

/* editorial strip */
.proof-strip{
  position:relative;z-index:5;width:min(var(--max),calc(100% - 30px));margin:-40px auto 0;
  background:#fff;border:1px solid #e0e8ef;border-radius:22px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.3fr repeat(3,1fr);overflow:hidden
}
.proof-lead{padding:24px 26px;background:linear-gradient(135deg,#0a2946,#061a2d);color:#fff}
.proof-lead .mini{color:#7ec5a8;font-size:9px;font-weight:900;letter-spacing:.14em}
.proof-lead strong{display:block;margin-top:7px;font-size:17px}
.proof-item{padding:24px;border-left:1px solid #e4ebf1}
.proof-item b{display:block;color:#0052cc;font-size:22px}
.proof-item span{display:block;margin-top:4px;color:#708296;font-size:11px}

/* sections */
.section{padding:88px 16px}
.wrap{width:min(var(--max),100%);margin:auto}
.section-kicker{color:#168257;font-size:10px;font-weight:900;letter-spacing:.14em}
.section h2{margin:10px 0 0;font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.03em;color:#061a2d}
.section-lead{max-width:760px;color:#68798a;font-size:14px;line-height:1.75;margin:16px 0 0}

.private-network{background:#fff}
.network-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;margin-top:38px;align-items:start}
.network-rail{
  position:sticky;top:105px;padding:26px;border:1px solid #dce5ed;border-radius:22px;background:#f8fafc
}
.network-rail h3{margin:0;color:#061a2d;font-size:20px}
.network-rail p{color:#68798a;font-size:12.5px}
.private-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#e9f6f0;color:#168257;font-size:9px;font-weight:900;letter-spacing:.12em}
.network-flow{display:grid;gap:14px}
.flow-card{
  position:relative;padding:24px 24px 24px 78px;border:1px solid #dce5ed;border-radius:18px;background:#fff;
  box-shadow:0 10px 28px rgba(6,26,45,.05);transition:.25s
}
.flow-card:hover{transform:translateX(5px);box-shadow:0 18px 36px rgba(6,26,45,.09)}
.flow-no{
  position:absolute;left:22px;top:22px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#061a2d;color:#fff;font-size:11px;font-weight:900
}
.flow-card h3{margin:0 0 5px;font-size:16px;color:#14283d}.flow-card p{margin:0;color:#68798a;font-size:12.5px}

.opportunity{
  background:linear-gradient(135deg,#061a2d 0%,#0a2946 55%,#0d3152 100%);color:#fff;overflow:hidden;position:relative
}
.opportunity:after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;right:-140px;top:-160px;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.015)}
.opportunity .section-kicker{color:#70d5aa}.opportunity h2{color:#fff}.opportunity .section-lead{color:#a9bdcf}
.matrix{position:relative;z-index:2;margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.matrix-card{padding:22px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);backdrop-filter:blur(10px)}
.matrix-card .icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(74,145,239,.16);color:#9bc2f4;margin-bottom:20px}
.matrix-card h3{margin:0 0 8px;font-size:15px}.matrix-card p{margin:0;color:#a7bacb;font-size:12px;line-height:1.65}

.products{background:#f4f7fa}
.product-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.product-card{
  position:relative;min-height:270px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #dce5ed;
  padding:22px;display:flex;flex-direction:column;justify-content:flex-end
}
.product-card:before{
  content:"";position:absolute;inset:0;background:
   radial-gradient(circle at 78% 22%,rgba(23,105,210,.16),transparent 28%),
   linear-gradient(135deg,#eef4fa 0%,#fff 70%);
}
.product-ghost{position:absolute;right:20px;top:16px;font-size:76px;opacity:.12}
.product-card>*{position:relative}
.product-card small{color:#168257;font-size:9px;font-weight:900;letter-spacing:.12em}
.product-card h3{margin:7px 0 6px;font-size:20px;color:#061a2d}
.product-card p{margin:0;color:#6d8092;font-size:12px;max-width:80%}

.cta{padding:24px 16px 90px;background:#f4f7fa}
.cta-box{
  width:min(var(--max),100%);margin:auto;border-radius:26px;padding:42px;
  background:linear-gradient(100deg,#0052cc,#0b67d6 58%,#168257);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:0 26px 65px rgba(0,82,204,.22)
}
.cta-box h2{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.08}.cta-box p{margin:10px 0 0;color:#dceaff;font-size:13px;max-width:680px}

/* subtle professional animation */
.reveal{
  opacity:1;
  transform:none;
  transition:opacity .65s ease,transform .65s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}
.float-slow{animation:floatSlow 7s ease-in-out infinite}
.float-slow.delay{animation-delay:-2.6s}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media(max-width:1000px){
  .hero-inner{grid-template-columns:1fr}.hero-side{display:none}.hero{min-height:auto}
  .hero-inner{min-height:650px}.proof-strip{grid-template-columns:1fr 1fr}.proof-lead{grid-column:1/-1}
  .network-layout{grid-template-columns:1fr}.network-rail{position:relative;top:auto}.matrix{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .hero-inner{width:calc(100% - 24px);padding:60px 0}.hero h1{font-size:44px}
  .proof-strip{width:calc(100% - 24px);grid-template-columns:1fr}.proof-item{border-left:0;border-top:1px solid #e4ebf1}
  .section{padding:64px 12px}.matrix,.product-grid{grid-template-columns:1fr}.cta{padding:15px 12px 64px}.cta-box{padding:28px 22px;align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===== V5 EXCLUSIVE VISUAL SYSTEM ===== */
body{background:#f2f6fa}

.hero{min-height:760px;background:#041522}
.hero:before{
  background:
    linear-gradient(90deg,rgba(4,19,33,.985) 0%,rgba(4,19,33,.94) 40%,rgba(4,19,33,.52) 70%,rgba(4,19,33,.86) 100%),
    radial-gradient(circle at 80% 20%,rgba(33,111,211,.3),transparent 32%),
    radial-gradient(circle at 66% 80%,rgba(22,130,87,.17),transparent 30%),
    linear-gradient(145deg,#041522,#082540 55%,#061622)
}
.hero-inner{min-height:760px;padding-top:82px;padding-bottom:90px}
.hero-main{max-width:760px}
.hero h1{font-size:clamp(48px,6vw,82px);line-height:.93;letter-spacing:-.055em;margin-top:22px}
.hero-small{display:block;color:#fff;font-weight:850}
.hero h1 .accent{display:block;background:linear-gradient(90deg,#8bbcff,#d5e6ff 68%,#9be0c3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy{max-width:650px;font-size:14px;line-height:1.8;color:#b3c5d5}
.eyebrow{padding:8px 13px;border-radius:10px;background:rgba(14,59,85,.38);border-color:rgba(85,220,158,.18);color:#91d7ba}
.btn{min-height:50px;border-radius:11px;padding:0 19px}
.btn-primary{background:linear-gradient(135deg,#ffffff,#edf4fb)}
.btn-ghost{background:rgba(255,255,255,.045);backdrop-filter:blur(10px)}
.hero-trust{margin-top:34px;gap:24px;text-transform:uppercase;letter-spacing:.06em;font-size:9px}

.orbit{width:450px;height:450px;right:-10px;top:14px;border-color:rgba(132,181,235,.12)}
.orbit:before,.orbit:after{border-color:rgba(132,181,235,.09)}
.signal-card{width:250px;border-radius:16px;background:linear-gradient(145deg,rgba(8,33,56,.88),rgba(11,47,77,.7));border-color:rgba(255,255,255,.09);box-shadow:0 26px 70px rgba(0,0,0,.22)}
.signal-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(145deg,rgba(124,178,245,.26),rgba(80,218,158,.1),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.signal-card strong{font-size:15px}.signal-card p{line-height:1.65}
.hero-route{background:linear-gradient(145deg,rgba(7,31,52,.88),rgba(7,31,52,.45));backdrop-filter:blur(14px);border-color:rgba(255,255,255,.09)}

.trade-deck{
  position:relative;z-index:6;width:min(var(--max),calc(100% - 30px));margin:-52px auto 0;
  display:grid;grid-template-columns:1.15fr 1.85fr;overflow:hidden;
  border:1px solid rgba(216,228,238,.96);border-radius:24px;background:rgba(255,255,255,.96);
  box-shadow:0 28px 80px rgba(5,28,48,.14)
}
.deck-intro{padding:28px 30px;background:linear-gradient(135deg,#071d31,#0b3151);color:#fff}
.deck-kicker{color:#6cd2a9;font-size:9px;font-weight:900;letter-spacing:.15em}
.deck-intro strong{display:block;margin-top:8px;font-size:18px;line-height:1.28}
.deck-intro p{margin:8px 0 0;color:#9eb3c4;font-size:11px;line-height:1.6}
.deck-flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:center;padding:16px 18px}
.deck-flow article{padding:12px 10px}
.deck-flow article span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#edf4ff;color:#075fcf;font-size:10px;font-weight:900;margin-bottom:11px}
.deck-flow article small{display:block;color:#168257;font-size:8px;font-weight:900;letter-spacing:.13em}
.deck-flow article b{display:block;margin-top:3px;color:#071d31;font-size:12px}
.deck-flow article p{margin:3px 0 0;color:#7b8e9f;font-size:9.5px}
.deck-flow i{font-style:normal;color:#a5b6c5;font-size:20px;text-align:center}

.section{padding-top:100px;padding-bottom:100px}
.section-kicker{font-size:9px;letter-spacing:.16em}
.section h2{font-size:clamp(34px,4.3vw,54px);letter-spacing:-.04em}
.section-lead{font-size:13px;line-height:1.8;max-width:720px}

.private-network{background:linear-gradient(180deg,#fff 0%,#f9fbfd 100%)}
.network-layout{grid-template-columns:.72fr 1.28fr;gap:52px;margin-top:44px}
.network-rail{border-radius:20px;background:linear-gradient(180deg,#f8fbfd,#f1f6fa);border-color:#dbe5ed;box-shadow:0 16px 50px rgba(6,26,45,.05)}
.network-flow{gap:12px}
.flow-card{border-radius:16px;padding-top:22px;padding-bottom:22px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px)}
.flow-card:hover{transform:translateX(7px) scale(1.005)}

.opportunity{background:linear-gradient(135deg,#051624 0%,#0a2d49 52%,#0c3c57 100%)}
.matrix{gap:14px}
.matrix-card{min-height:210px;border-radius:17px;padding:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.025));transition:transform .25s ease,border-color .25s ease,background .25s ease}
.matrix-card:hover{transform:translateY(-5px);border-color:rgba(123,186,255,.25);background:rgba(255,255,255,.07)}

.products{background:#f2f6fa}
.product-grid{gap:16px}
.product-card{min-height:290px;border-radius:18px;padding:24px;box-shadow:0 14px 34px rgba(5,28,48,.04);transition:transform .25s ease,box-shadow .25s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(5,28,48,.1)}
.product-card:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:999px;background:linear-gradient(90deg,#1769d2,#168257);transform:scaleX(0);transform-origin:left;transition:.25s}
.product-card:hover:after{transform:scaleX(1)}
.product-ghost{opacity:.09;filter:grayscale(1)}

.cta{background:#f2f6fa}
.cta-box{position:relative;overflow:hidden;background:linear-gradient(105deg,#071d31 0%,#0b4b82 55%,#168257 100%);box-shadow:0 28px 70px rgba(6,26,45,.18)}
.cta-box:after{content:"";position:absolute;right:-70px;top:-100px;width:260px;height:260px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 55px rgba(255,255,255,.035),0 0 0 110px rgba(255,255,255,.02)}
.cta-box>*{position:relative;z-index:1}


@media(max-width:1000px){
  .trade-deck{grid-template-columns:1fr}
  .deck-flow{grid-template-columns:1fr 24px 1fr 24px 1fr}
}
@media(max-width:680px){
  .hero h1{font-size:47px}
  .trade-deck{width:calc(100% - 24px);margin-top:-36px}
  .deck-flow{grid-template-columns:1fr;padding:8px 18px 16px}
  .deck-flow i{transform:rotate(90deg);height:24px}
}

.hero{min-height:700px}.hero-inner{min-height:700px;grid-template-columns:1.22fr .78fr;padding-top:70px;padding-bottom:82px}.hero h1{font-size:clamp(42px,5vw,66px);line-height:.96;max-width:650px;margin-bottom:15px}.hero-under{margin:0 0 17px;border-radius:8px;padding:7px 10px;font-size:9px;letter-spacing:.13em}.hero-copy{font-size:13.5px;max-width:630px}.hero-side{min-height:455px;transform:scale(.86);transform-origin:center right;margin-right:-18px}.signal-card{width:238px;padding:16px}.signal-card strong{font-size:14px}.signal-card p{font-size:10.5px}.card-a{right:142px;top:10px}.card-b{right:-2px;top:166px}.card-c{right:155px;top:314px}.orbit{width:410px;height:410px;right:0;top:5px}.hero-route{right:-32px!important;bottom:-50px!important;width:285px!important;height:104px!important}.hero-scene{opacity:.20!important;right:-4%;top:82px;width:min(50vw,720px)!important;filter:saturate(.45) contrast(.9) brightness(.85)!important}
@media(max-width:1000px){.hero-side{display:none}.hero-inner{grid-template-columns:1fr}}@media(max-width:680px){.hero h1{font-size:43px}.hero-under{line-height:1.45}}

/* requested hero background mood: garment stock + warehouse + shipping, very subtle */
.hero{
  background-image:
    linear-gradient(90deg,rgba(4,19,33,.97) 0%,rgba(4,19,33,.92) 38%,rgba(4,19,33,.69) 63%,rgba(4,19,33,.82) 100%),
    url("../images/Hero-ht.png");
  background-size:cover;background-position:center center;background-repeat:no-repeat
}
.hero:before{
  background:
    radial-gradient(circle at 78% 23%,rgba(30,105,206,.24),transparent 30%),
    radial-gradient(circle at 65% 79%,rgba(22,130,87,.10),transparent 26%),
    linear-gradient(145deg,rgba(4,21,34,.36),rgba(5,31,51,.18))
}
.hero-scene{opacity:.06!important}

/* keep hierarchy premium */
.hero-inner{grid-template-columns:1.28fr .72fr}
.hero h1{font-size:clamp(40px,4.55vw,60px);max-width:470px;line-height:.98}
.hero-under{max-width:505px}
.hero-side{transform:scale(.79);transform-origin:center right;margin-right:-34px}

/* make room for route so private trade remains readable */
.card-a{right:156px;top:14px}
.card-b{right:2px;top:162px}
.card-c{right:175px;top:310px}
.hero-route{
  right:-115px!important;
  bottom:-58px!important;
  width:280px!important;
  height:102px!important;
  z-index:8!important
}

/* slight extra canvas on right for route */
.hero-side{width:108%}

/* menu letters not bold */

/* V10: brighter approved Hero-ht.png while preserving strong text readability */
.hero{
  background-image:
    linear-gradient(90deg,rgba(4,19,33,.82) 0%,rgba(4,19,33,.72) 38%,rgba(4,19,33,.42) 63%,rgba(4,19,33,.60) 100%),
    url("../images/Hero-ht.png");
}
.hero:before{
  background:
    radial-gradient(circle at 78% 23%,rgba(30,105,206,.14),transparent 30%),
    radial-gradient(circle at 65% 79%,rgba(22,130,87,.06),transparent 26%),
    linear-gradient(145deg,rgba(4,21,34,.16),rgba(5,31,51,.07));
}
.hero-grid{opacity:.07}
.hero-scene{opacity:0!important}

/* Premium watermark-style SEO keyword line */
.hero-under{
  display:inline-flex;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(207,230,247,.70);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.32);
}
.hero-under i{
  width:18px;height:1px;border-radius:0;background:rgba(112,213,170,.78);box-shadow:none
}

/* Right-side cards: clearer typography during subtle movement */
.signal-card{
  background:linear-gradient(145deg,rgba(5,27,47,.92),rgba(8,44,72,.86));
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.signal-card small{
  color:#c6d9ea;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.signal-card strong{
  color:#fff;
  font-size:15px;
  font-weight:850;
  text-shadow:0 1px 10px rgba(0,0,0,.48);
}
.signal-card p{
  color:#d4e1ec;
  font-size:12px;
  line-height:1.65;
  font-weight:500;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.float-slow{animation-duration:9s}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Keep longer final H1 balanced */
.hero h1{font-size:clamp(38px,4.25vw,57px);max-width:680px;line-height:.98}
.hero-small{line-height:1.02}

@media(max-width:680px){
  .hero h1{font-size:40px}
  .hero-under{font-size:8.5px;letter-spacing:.12em}
}

.hero-route__label{color:#79d8af;font-weight:900;letter-spacing:.12em}
.network-result-label{color:#061a2d}


/* Final responsive correction */
@media(max-width:1000px){
  .network-layout{grid-template-columns:1fr}
  .network-rail{position:relative;top:auto}
}
@media(max-width:680px){
  .hero h1{font-size:36px}
}


/* Home product category images */
.product-card .product-category-image{position:absolute;right:20px;top:16px;width:92px;height:92px;object-fit:contain;object-position:center;opacity:1;filter:none;pointer-events:none}

.product-card[data-href]{cursor:pointer}