/* =========================================================
   VALID WORLD
   MAHMOUD NOUR ELDIN — 2026
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root{

  --white:#FFFFFF;
  --paper:#F4F7FC;
  --paper-blue:#EDF4FF;

  --ink:#10172A;
  --ink-soft:#5C667C;
  --ink-faint:#929CAF;

  --valid:#286BE5;
  --valid-bright:#347DF5;
  --valid-deep:#102D6B;
  --valid-dark:#071A42;
  --valid-night:#04102B;

  --sky:#50C7F5;
  --sky-light:#DFF5FF;

  --yellow:#FFC928;
  --yellow-soft:#FFF1A8;

  --line:rgba(16,45,107,.12);
  --line-light:rgba(255,255,255,.15);

  --shadow-sm:
  0 10px 30px rgba(8,30,76,.10);

  --shadow-md:
  0 24px 65px rgba(8,30,76,.16);

  --shadow-lg:
  0 40px 110px rgba(4,16,43,.24);

  --radius-sm:14px;
  --radius-md:24px;
  --radius-lg:38px;
  --radius-xl:54px;
  --radius-pill:999px;

  --font:
  "Cairo",
  "Segoe UI",
  Tahoma,
  sans-serif;

  --ease:
  cubic-bezier(.16,.8,.28,1);

  --container:1320px;

}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{

  box-sizing:border-box;

}


html{

  scroll-behavior:smooth;

}


body{

  margin:0;

  color:var(--ink);

  background:var(--paper);

  font-family:var(--font);

  line-height:1.7;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;

}


body.nav-is-open{

  overflow:hidden;

}


img{

  display:block;

  max-width:100%;

}


a{

  color:inherit;

  text-decoration:none;

}


button{

  padding:0;

  color:inherit;

  background:none;

  border:0;

  font:inherit;

  cursor:pointer;

}


h1,
h2,
h3,
p{

  margin:0;

}


svg{

  display:block;

}


::selection{

  color:var(--valid-dark);

  background:var(--yellow);

}


:focus-visible{

  outline:3px solid var(--yellow);

  outline-offset:4px;

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip-link{

  position:fixed;

  z-index:9999;

  top:-100px;

  right:20px;

  padding:12px 22px;

  color:var(--valid-dark);

  background:var(--yellow);

  border-radius:var(--radius-pill);

  font-size:14px;

  font-weight:900;

  transition:top .3s;

}


.skip-link:focus{

  top:20px;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{

  width:100%;

  max-width:var(--container);

  margin-inline:auto;

  padding-inline:28px;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  min-height:52px;

  padding:12px 28px;

  border-radius:var(--radius-pill);

  font-size:14px;

  font-weight:900;

  white-space:nowrap;

  transition:
  transform .3s var(--ease),
  box-shadow .3s var(--ease),
  color .3s var(--ease),
  background .3s var(--ease),
  border-color .3s var(--ease);

}


.btn svg{

  width:18px;

  height:18px;

  transition:transform .3s var(--ease);

}


.btn:hover{

  transform:translateY(-3px);

}


.btn:hover svg{

  transform:translateX(-4px);

}


.btn-white{

  color:var(--valid-deep);

  background:var(--white);

  box-shadow:
  0 18px 45px rgba(3,16,48,.18);

}


.btn-white:hover{

  box-shadow:
  0 25px 60px rgba(3,16,48,.28);

}


.btn-outline-light{

  color:var(--white);

  background:rgba(255,255,255,.07);

  border:1px solid rgba(255,255,255,.42);

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

}


.btn-outline-light:hover{

  color:var(--valid-deep);

  background:var(--white);

  border-color:var(--white);

}


/* =========================================================
   LABEL
   ========================================================= */

.section-label{

  display:inline-flex;

  align-items:center;

  gap:10px;

  color:var(--valid);

  font-size:13px;

  font-weight:900;

}


.section-label > span{

  width:10px;

  height:10px;

  flex:none;

  background:var(--yellow);

  border-radius:50%;

  box-shadow:
  0 0 0 7px rgba(255,201,40,.14);

}


.section-label.on-dark{

  color:rgba(255,255,255,.78);

}


/* =========================================================
   REVEAL
   ========================================================= */

[data-reveal]{

  opacity:0;

  transform:translateY(34px);

  transition:
  opacity .8s var(--ease),
  transform .8s var(--ease);

}


[data-reveal].is-visible{

  opacity:1;

  transform:none;

}


[data-reveal-stagger] > *{

  opacity:0;

  transform:translateY(28px);

  transition:
  opacity .7s var(--ease),
  transform .7s var(--ease);

}


[data-reveal-stagger].is-visible > *{

  opacity:1;

  transform:none;

}


[data-reveal-stagger].is-visible > *:nth-child(2){

  transition-delay:.10s;

}


[data-reveal-stagger].is-visible > *:nth-child(3){

  transition-delay:.20s;

}


/* =========================================================
   OPENING WORLD
   ========================================================= */

.valid-opening{

  position:relative;

  min-height:100vh;

  color:var(--white);

  overflow:hidden;

  isolation:isolate;

  background:

  radial-gradient(
  circle at 16% 23%,
  rgba(80,199,245,.25),
  transparent 29%
  ),

  radial-gradient(
  circle at 85% 68%,
  rgba(40,107,229,.45),
  transparent 34%
  ),

  linear-gradient(
  135deg,
  #06183C 0%,
  #102D6B 48%,
  #286BE5 100%
  );

}


.valid-opening__grid{

  position:absolute;

  z-index:-3;

  inset:0;

  opacity:.16;

  background-image:

  linear-gradient(
  rgba(255,255,255,.08) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.08) 1px,
  transparent 1px
  );

  background-size:58px 58px;

  mask-image:
  linear-gradient(
  to bottom,
  rgba(0,0,0,.9),
  transparent 92%
  );

}


.valid-opening__light{

  position:absolute;

  z-index:-2;

  border-radius:50%;

  pointer-events:none;

  filter:blur(10px);

}


.valid-opening__light--one{

  top:-210px;

  right:-170px;

  width:650px;

  height:650px;

  background:
  radial-gradient(
  circle,
  rgba(80,199,245,.32),
  transparent 69%
  );

}


.valid-opening__light--two{

  left:-230px;

  bottom:-300px;

  width:750px;

  height:750px;

  background:
  radial-gradient(
  circle,
  rgba(52,125,245,.36),
  transparent 70%
  );

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{

  position:relative;

  z-index:100;

  width:100%;

  padding:20px 24px 0;

}


.header-shell{

  width:100%;

  max-width:1480px;

  min-height:78px;

  margin-inline:auto;

  padding:10px 13px 10px 20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

  background:rgba(5,23,60,.64);

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:25px;

  box-shadow:
  0 24px 60px rgba(1,9,29,.20),
  inset 0 1px 0 rgba(255,255,255,.09);

  backdrop-filter:blur(20px);

  -webkit-backdrop-filter:blur(20px);

  transition:
  background .3s,
  box-shadow .3s,
  transform .3s;

}


.site-header.is-scrolled{

  position:fixed;

  top:0;

  right:0;

  left:0;

  padding-top:10px;

}


.site-header.is-scrolled .header-shell{

  background:rgba(4,16,43,.91);

  box-shadow:
  0 20px 55px rgba(1,9,29,.30);

}


/* =========================================================
   HEADER BRANDS
   ========================================================= */

.header-brands{

  display:flex;

  align-items:center;

  gap:15px;

  min-width:250px;

}


.valid-brand{

  display:flex;

  align-items:center;

  justify-content:center;

  width:116px;

  height:54px;

  padding:9px 14px;

  background:
  linear-gradient(
  145deg,
  #286BE5,
  #102D6B
  );

  border:
  1px solid
  rgba(255,255,255,.18);

  border-radius:16px;

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.14),
  0 10px 25px rgba(0,0,0,.15);

}


.valid-brand img{

  width:100%;

  height:100%;

  object-fit:contain;

}


.header-brands__line{

  width:1px;

  height:31px;

  background:
  rgba(255,255,255,.22);

}


.parent-brand{

  display:flex;

  align-items:center;

  max-width:128px;

  opacity:.85;

  transition:
  opacity .3s,
  transform .3s;

}


.parent-brand:hover{

  opacity:1;

  transform:translateY(-2px);

}


.parent-brand img{

  width:100%;

  max-height:36px;

  object-fit:contain;

}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.main-nav{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

}


.main-nav a{

  position:relative;

  padding:10px 12px;

  color:rgba(255,255,255,.72);

  font-size:13px;

  font-weight:800;

  transition:
  color .3s,
  background .3s;

}


.main-nav a::after{

  content:"";

  position:absolute;

  right:50%;

  bottom:4px;

  width:0;

  height:2px;

  background:var(--yellow);

  border-radius:10px;

  transform:translateX(50%);

  transition:width .3s var(--ease);

}


.main-nav a:hover{

  color:var(--white);

}


.main-nav a:hover::after{

  width:24px;

}


/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;

  min-width:300px;

}


.worlds-return{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:rgba(255,255,255,.74);

  font-size:12px;

  font-weight:800;

  transition:
  color .3s,
  transform .3s;

}


.worlds-return svg{

  width:18px;

  height:18px;

}


.worlds-return:hover{

  color:var(--yellow);

  transform:translateX(3px);

}


.header-contact{

  min-height:45px;

  padding:9px 20px;

}


.nav-toggle{

  display:none;

  width:48px;

  height:48px;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:5px;

  color:var(--white);

  background:
  rgba(255,255,255,.09);

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:15px;

}


.nav-toggle span{

  width:20px;

  height:2px;

  background:currentColor;

  border-radius:10px;

}


/* =========================================================
   HERO
   ========================================================= */

.valid-hero{

  width:100%;

  max-width:1480px;

  margin-inline:auto;

  padding:
  clamp(70px,8vw,125px)
  55px
  100px;

}


.valid-hero__content{

  display:grid;

  grid-template-columns:
  minmax(0,.9fr)
  minmax(470px,1.1fr);

  align-items:center;

  gap:70px;

}


.valid-hero__copy{

  position:relative;

  z-index:3;

}


.valid-hero__eyebrow{

  display:inline-flex;

  align-items:center;

  gap:11px;

  margin-bottom:22px;

  color:rgba(255,255,255,.75);

  font-size:13px;

  font-weight:900;

}


.valid-hero__eyebrow span{

  width:11px;

  height:11px;

  background:var(--yellow);

  border-radius:50%;

  box-shadow:
  0 0 0 8px rgba(255,201,40,.12),
  0 0 25px rgba(255,201,40,.50);

}


.valid-hero h1{

  max-width:690px;

  font-size:
  clamp(48px,5.4vw,86px);

  font-weight:900;

  line-height:1.07;

  letter-spacing:-.045em;

}


.valid-hero h1 > span{

  display:inline;

  color:var(--sky);

}


.valid-hero h1 strong{

  display:block;

  margin-top:9px;

  color:var(--yellow);

  font-size:.64em;

  letter-spacing:-.025em;

}


.valid-hero__copy > p{

  max-width:620px;

  margin-top:27px;

  color:rgba(255,255,255,.73);

  font-size:
  clamp(16px,1.4vw,19px);

  font-weight:500;

  line-height:2;

}


.valid-hero__actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:34px;

}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.valid-hero__visual{

  position:relative;

  min-height:570px;

}


.valid-hero__image{

  position:absolute;

  inset:0;

  overflow:hidden;

  border:
  1px solid
  rgba(255,255,255,.18);

  border-radius:48px;

  box-shadow:
  0 45px 100px rgba(1,9,30,.34);

  transform:rotate(-1.5deg);

}


.valid-hero__image::before{

  content:"";

  position:absolute;

  z-index:2;

  inset:18px;

  pointer-events:none;

  border:
  1px solid
  rgba(255,255,255,.14);

  border-radius:35px;

}


.valid-hero__image img{

  width:100%;

  height:100%;

  object-fit:cover;

}


.valid-hero__image-overlay{

  position:absolute;

  inset:0;

  background:

  linear-gradient(
  90deg,
  rgba(5,24,62,.56),
  transparent 55%
  ),

  linear-gradient(
  to top,
  rgba(4,16,43,.55),
  transparent 48%
  );

}


/* =========================================================
   HERO LIVE CARD
   ========================================================= */

.hero-live-card{

  position:absolute;

  z-index:5;

  right:-35px;

  bottom:45px;

  width:min(340px,70%);

  padding:20px;

  background:
  rgba(255,255,255,.91);

  color:var(--ink);

  border:
  1px solid
  rgba(255,255,255,.82);

  border-radius:25px;

  box-shadow:
  0 25px 65px rgba(1,9,30,.25);

  backdrop-filter:blur(16px);

  -webkit-backdrop-filter:blur(16px);

}


.hero-live-card__top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}


.hero-live-card__top > strong{

  color:var(--ink-faint);

  font-size:9px;

  letter-spacing:.15em;

}


.hero-live-card__pulse{

  display:flex;

  align-items:center;

  gap:7px;

  color:var(--valid);

  font-size:11px;

  font-weight:900;

}


.hero-live-card__pulse i{

  width:8px;

  height:8px;

  background:#29C978;

  border-radius:50%;

  box-shadow:
  0 0 0 6px rgba(41,201,120,.12);

  animation:
  livePulse 1.8s infinite;

}


.hero-live-card__body{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:20px;

  margin-top:22px;

}


.hero-live-card__body span{

  color:var(--ink-soft);

  font-size:12px;

  font-weight:700;

}


.hero-live-card__body strong{

  color:var(--valid-deep);

  font-size:20px;

  font-weight:900;

}


.hero-live-card__route{

  display:flex;

  align-items:center;

  margin-top:20px;

}


.hero-live-card__route i{

  position:relative;

  z-index:2;

  width:12px;

  height:12px;

  flex:none;

  background:#D5DCE8;

  border:
  3px solid
  var(--white);

  border-radius:50%;

  box-shadow:
  0 0 0 1px #CCD4E1;

}


.hero-live-card__route i.is-done{

  background:var(--valid);

  box-shadow:
  0 0 0 1px var(--valid);

}


.hero-live-card__route i.is-active{

  background:var(--yellow);

  box-shadow:
  0 0 0 1px var(--yellow),
  0 0 0 7px rgba(255,201,40,.18);

  animation:
  routePulse 1.8s infinite;

}


.hero-live-card__route span{

  height:3px;

  flex:1;

  background:
  linear-gradient(
  90deg,
  var(--valid),
  var(--sky)
  );

}


/* =========================================================
   HERO JOURNEY
   ========================================================= */

.hero-journey{

  position:relative;

  width:100%;

  max-width:1320px;

  margin:
  -25px auto 0;

  padding:
  0 45px 40px;

}


.hero-journey__track{

  position:absolute;

  top:12px;

  right:70px;

  left:70px;

  height:2px;

  overflow:hidden;

  background:
  rgba(255,255,255,.16);

}


.hero-journey__progress{

  display:block;

  width:15%;

  height:100%;

  background:
  linear-gradient(
  90deg,
  var(--yellow),
  var(--sky)
  );

  box-shadow:
  0 0 20px var(--sky);

}


.hero-journey__items{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
  repeat(8,1fr);

  gap:12px;

}


.hero-journey__item{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:8px;

  color:rgba(255,255,255,.48);

  text-align:center;

}


.hero-journey__item span{

  display:flex;

  align-items:center;

  justify-content:center;

  width:26px;

  height:26px;

  color:rgba(255,255,255,.70);

  background:var(--valid-deep);

  border:
  2px solid
  rgba(255,255,255,.22);

  border-radius:50%;

  font-size:9px;

  font-weight:900;

}


.hero-journey__item strong{

  font-size:11px;

  font-weight:800;

}


.hero-journey__item.is-active{

  color:var(--white);

}


.hero-journey__item.is-active span{

  color:var(--valid-deep);

  background:var(--yellow);

  border-color:var(--yellow);

  box-shadow:
  0 0 0 7px rgba(255,201,40,.13),
  0 0 25px rgba(255,201,40,.35);

}


/* =========================================================
   MOBILE NAV
   ========================================================= */

.mobile-nav{

  position:fixed;

  z-index:1000;

  inset:0;

  display:flex;

  flex-direction:column;

  padding:
  max(20px,env(safe-area-inset-top))
  20px
  max(20px,env(safe-area-inset-bottom));

  color:var(--white);

  background:

  radial-gradient(
  circle at 90% 10%,
  rgba(80,199,245,.25),
  transparent 30%
  ),

  radial-gradient(
  circle at 10% 90%,
  rgba(40,107,229,.38),
  transparent 35%
  ),

  linear-gradient(
  145deg,
  #04102B,
  #102D6B
  );

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:translateY(-15px);

  transition:
  opacity .42s var(--ease),
  visibility .42s,
  transform .42s var(--ease);

  overflow:hidden;

}


.mobile-nav.is-open{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:none;

}


.mobile-nav__grid{

  position:absolute;

  inset:0;

  opacity:.11;

  pointer-events:none;

  background-image:

  linear-gradient(
  rgba(255,255,255,.09) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.09) 1px,
  transparent 1px
  );

  background-size:44px 44px;

}


.mobile-nav__top{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

}


.mobile-nav__brands{

  display:flex;

  align-items:center;

  gap:12px;

}


.mobile-nav__valid-logo{

  width:102px;

  height:49px;

  padding:8px 12px;

  object-fit:contain;

  background:
  linear-gradient(
  145deg,
  var(--valid),
  var(--valid-deep)
  );

  border:
  1px solid
  rgba(255,255,255,.18);

  border-radius:14px;

}


.mobile-nav__brands > span{

  width:1px;

  height:29px;

  background:
  rgba(255,255,255,.22);

}


.mobile-nav__brands a{

  display:flex;

  width:100px;

  opacity:.82;

}


.mobile-nav__brands a img{

  width:100%;

  max-height:34px;

  object-fit:contain;

}


.mobile-nav__close{

  display:flex;

  align-items:center;

  justify-content:center;

  width:48px;

  height:48px;

  flex:none;

  color:var(--white);

  background:
  rgba(255,255,255,.09);

  border:
  1px solid
  rgba(255,255,255,.18);

  border-radius:15px;

}


.mobile-nav__close svg{

  width:22px;

  height:22px;

}


.mobile-nav__intro{

  position:relative;

  z-index:2;

  margin-top:
  clamp(25px,5vh,45px);

}


.mobile-nav__intro span{

  color:var(--sky);

  font-size:10px;

  font-weight:900;

  letter-spacing:.18em;

}


.mobile-nav__intro strong{

  display:block;

  max-width:370px;

  margin-top:8px;

  font-size:
  clamp(25px,7vw,39px);

  font-weight:900;

  line-height:1.32;

}


.mobile-nav__links{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
  repeat(2,minmax(0,1fr));

  gap:9px;

  margin-top:
  clamp(20px,4vh,35px);

}


.mobile-nav__links a{

  display:flex;

  align-items:center;

  gap:11px;

  min-height:72px;

  padding:12px;

  background:
  rgba(255,255,255,.065);

  border:
  1px solid
  rgba(255,255,255,.12);

  border-radius:18px;

  transition:
  background .3s,
  border-color .3s,
  transform .3s;

}


.mobile-nav__links a:hover{

  background:
  rgba(255,255,255,.11);

  border-color:
  rgba(255,255,255,.25);

  transform:translateY(-2px);

}


.mobile-nav__links a > span{

  display:flex;

  align-items:center;

  justify-content:center;

  width:36px;

  height:36px;

  flex:none;

  color:var(--valid-dark);

  background:var(--yellow);

  border-radius:12px;

  font-size:10px;

  font-weight:900;

}


.mobile-nav__links div{

  min-width:0;

}


.mobile-nav__links strong{

  display:block;

  font-size:13px;

  font-weight:900;

}


.mobile-nav__links small{

  display:block;

  margin-top:1px;

  color:rgba(255,255,255,.48);

  font-size:9px;

  font-weight:600;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

}


.mobile-nav__bottom{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  gap:12px;

  margin-top:auto;

  padding-top:18px;

}


.mobile-nav__worlds{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:rgba(255,255,255,.72);

  font-size:11px;

  font-weight:800;

}


.mobile-nav__worlds svg{

  width:18px;

  height:18px;

}


.mobile-nav__cta{

  margin-right:auto;

  min-height:47px;

  padding-inline:20px;

}


/* =========================================================
   OPERATION PROBLEM
   ========================================================= */

.operation-problem{

  position:relative;

  padding:
  130px
  max(30px,calc((100vw - 1420px)/2));

  color:var(--white);

  overflow:hidden;

  background:

  radial-gradient(
  circle at 80% 30%,
  rgba(52,125,245,.25),
  transparent 35%
  ),

  linear-gradient(
  135deg,
  var(--valid-night),
  #0A2357
  );

}


.operation-problem::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.08;

  background-image:

  linear-gradient(
  rgba(255,255,255,.1) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.1) 1px,
  transparent 1px
  );

  background-size:55px 55px;

}


.operation-problem__grid{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
  minmax(0,.82fr)
  minmax(520px,1.18fr);

  align-items:center;

  gap:90px;

}


.operation-problem__copy h2{

  max-width:650px;

  margin-top:20px;

  font-size:
  clamp(42px,5vw,75px);

  font-weight:900;

  line-height:1.13;

  letter-spacing:-.035em;

}


.operation-problem__copy h2 strong{

  display:block;

  color:var(--sky);

}


.operation-problem__copy > p{

  max-width:590px;

  margin-top:25px;

  color:rgba(255,255,255,.65);

  font-size:
  clamp(16px,1.4vw,19px);

  line-height:2;

}


.operation-problem__message{

  max-width:580px;

  margin-top:38px;

  padding:24px 26px;

  color:rgba(255,255,255,.65);

  background:
  rgba(255,255,255,.07);

  border:
  1px solid
  rgba(255,255,255,.13);

  border-right:
  4px solid
  var(--yellow);

  border-radius:20px;

  font-size:14px;

}


.operation-problem__message strong{

  display:block;

  margin-top:4px;

  color:var(--white);

  font-size:
  clamp(19px,2vw,28px);

  font-weight:900;

  line-height:1.45;

}


/* =========================================================
   PROBLEM NETWORK
   ========================================================= */

.problem-network{

  position:relative;

  min-height:560px;

}


.problem-network__lines{

  position:absolute;

  z-index:0;

  inset:0;

  width:100%;

  height:100%;

}


.problem-network__lines path{

  stroke:
  rgba(80,199,245,.34);

  stroke-width:2;

  stroke-dasharray:8 10;

  animation:
  lineMove 15s linear infinite;

}


.problem-network__node{

  position:absolute;

  z-index:2;

  display:flex;

  align-items:center;

  gap:10px;

  min-width:145px;

  padding:14px 16px;

  color:var(--white);

  background:
  rgba(255,255,255,.08);

  border:
  1px solid
  rgba(255,255,255,.15);

  border-radius:17px;

  box-shadow:
  0 18px 40px rgba(1,8,28,.17);

  backdrop-filter:blur(10px);

}


.problem-network__node span{

  display:flex;

  align-items:center;

  justify-content:center;

  width:32px;

  height:32px;

  flex:none;

  color:var(--valid-deep);

  background:var(--yellow);

  border-radius:10px;

  font-size:9px;

  font-weight:900;

}


.problem-network__node strong{

  font-size:13px;

  font-weight:900;

}


.problem-network__node--inventory{

  top:5%;

  right:2%;

}


.problem-network__node--orders{

  top:5%;

  left:2%;

}


.problem-network__node--packing{

  top:42%;

  right:-3%;

}


.problem-network__node--shipping{

  top:42%;

  left:-3%;

}


.problem-network__node--collection{

  right:4%;

  bottom:4%;

}


.problem-network__node--returns{

  left:4%;

  bottom:4%;

}


.problem-network__center{

  position:absolute;

  z-index:3;

  top:50%;

  left:50%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:190px;

  height:190px;

  text-align:center;

  background:

  radial-gradient(
  circle at 35% 25%,
  rgba(80,199,245,.35),
  transparent 45%
  ),

  linear-gradient(
  145deg,
  var(--valid-bright),
  var(--valid-deep)
  );

  border:
  1px solid
  rgba(255,255,255,.27);

  border-radius:50%;

  box-shadow:

  0 0 0 24px rgba(40,107,229,.07),

  0 0 0 48px rgba(40,107,229,.04),

  0 35px 70px rgba(1,9,30,.34);

  transform:
  translate(-50%,-50%);

}


.problem-network__center span{

  color:rgba(255,255,255,.64);

  font-size:11px;

  font-weight:800;

}


.problem-network__center strong{

  margin-top:2px;

  font-size:34px;

  font-weight:900;

  letter-spacing:.08em;

}


.problem-network__center i{

  position:absolute;

  right:23px;

  top:35px;

  width:12px;

  height:12px;

  background:var(--yellow);

  border-radius:50%;

  box-shadow:
  0 0 0 8px rgba(255,201,40,.14),
  0 0 28px var(--yellow);

  animation:
  livePulse 1.8s infinite;

}


/* =========================================================
   ORDER JOURNEY
   ========================================================= */

.order-journey{

  position:relative;

  padding:145px 0;

  overflow:hidden;

  background:

  radial-gradient(
  circle at 95% 5%,
  rgba(40,107,229,.10),
  transparent 25%
  ),

  var(--paper);

}


.journey-heading{

  max-width:850px;

  margin-inline:auto;

  text-align:center;

}


.journey-heading .section-label{

  justify-content:center;

}


.journey-heading h2{

  margin-top:20px;

  font-size:
  clamp(43px,5vw,72px);

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.04em;

}


.journey-heading h2 strong{

  display:block;

  color:var(--valid);

}


.journey-heading p{

  max-width:670px;

  margin:
  22px auto 0;

  color:var(--ink-soft);

  font-size:
  clamp(16px,1.4vw,19px);

}


.journey-list{

  position:relative;

  max-width:1180px;

  margin:
  100px auto 0;

}


.journey-list::before{

  content:"";

  position:absolute;

  top:40px;

  bottom:40px;

  left:50%;

  width:3px;

  background:

  linear-gradient(
  to bottom,
  transparent,
  var(--valid) 8%,
  var(--sky) 50%,
  var(--valid) 92%,
  transparent
  );

  border-radius:20px;

  transform:translateX(-50%);

  box-shadow:
  0 0 24px rgba(40,107,229,.22);

}


.journey-stage{

  position:relative;

  display:grid;

  grid-template-columns:
  minmax(0,1fr)
  96px
  minmax(0,1fr);

  align-items:center;

  gap:34px;

  min-height:370px;

  margin-bottom:70px;

}


.journey-stage:last-child{

  margin-bottom:0;

}


.journey-stage:nth-child(even)
.journey-stage__media{

  grid-column:3;

}


.journey-stage:nth-child(even)
.journey-stage__number{

  grid-column:2;

  grid-row:1;

}


.journey-stage:nth-child(even)
.journey-stage__content{

  grid-column:1;

  grid-row:1;

  text-align:left;

}


.journey-stage__media{

  position:relative;

  height:355px;

  overflow:hidden;

  background:var(--valid-deep);

  border-radius:35px;

  box-shadow:var(--shadow-md);

}


.journey-stage__media::after{

  content:"";

  position:absolute;

  inset:0;

  background:

  linear-gradient(
  to top,
  rgba(4,16,43,.52),
  transparent 55%
  );

}


.journey-stage__media img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:
  transform .8s var(--ease);

}


.journey-stage:hover
.journey-stage__media img{

  transform:scale(1.045);

}


.journey-stage__media > span{

  position:absolute;

  z-index:2;

  right:20px;

  bottom:18px;

  padding:7px 12px;

  color:var(--white);

  background:
  rgba(4,16,43,.58);

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:var(--radius-pill);

  font-size:9px;

  font-weight:900;

  letter-spacing:.14em;

  backdrop-filter:blur(8px);

}


.journey-stage__number{

  position:relative;

  z-index:4;

  display:flex;

  align-items:center;

  justify-content:center;

  width:72px;

  height:72px;

  margin-inline:auto;

  color:var(--white);

  background:

  linear-gradient(
  145deg,
  var(--valid-bright),
  var(--valid-deep)
  );

  border:
  7px solid
  var(--paper);

  border-radius:50%;

  box-shadow:
  0 0 0 2px rgba(40,107,229,.17),
  0 15px 35px rgba(16,45,107,.22);

  font-size:18px;

  font-weight:900;

}


.journey-stage__content{

  padding:30px;

}


.journey-stage__content > span{

  color:var(--valid);

  font-size:12px;

  font-weight:900;

}


.journey-stage__content h3{

  margin-top:7px;

  font-size:
  clamp(30px,3vw,44px);

  font-weight:900;

  line-height:1.2;

}


.journey-stage__content p{

  max-width:470px;

  margin-top:15px;

  color:var(--ink-soft);

  font-size:16px;

  line-height:1.95;

}


.journey-stage:nth-child(even)
.journey-stage__content p{

  margin-right:auto;

}


/* =========================================================
   OPERATION SYSTEM
   ========================================================= */

.operation-system{

  position:relative;

  min-height:820px;

  display:flex;

  align-items:center;

  padding:
  120px
  max(30px,calc((100vw - 1420px)/2));

  color:var(--white);

  overflow:hidden;

  isolation:isolate;

  background:

  radial-gradient(
  circle at 75% 50%,
  rgba(80,199,245,.22),
  transparent 33%
  ),

  linear-gradient(
  135deg,
  #071A42,
  #174FB8
  );

}


.operation-system__background{

  position:absolute;

  z-index:-1;

  inset:0;

  opacity:.13;

  background-image:

  linear-gradient(
  rgba(255,255,255,.08) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.08) 1px,
  transparent 1px
  );

  background-size:65px 65px;

}


.operation-system__inner{

  width:100%;

  display:grid;

  grid-template-columns:
  minmax(0,.8fr)
  minmax(600px,1.2fr);

  align-items:center;

  gap:70px;

}


.operation-system__copy h2{

  margin-top:20px;

  font-size:
  clamp(47px,5.6vw,84px);

  font-weight:900;

  line-height:1.08;

  letter-spacing:-.045em;

}


.operation-system__copy h2 strong{

  display:block;

  color:var(--yellow);

}


.operation-system__copy p{

  max-width:580px;

  margin-top:28px;

  color:rgba(255,255,255,.70);

  font-size:
  clamp(16px,1.5vw,20px);

  line-height:2;

}


.operation-system__visual{

  position:relative;

  min-height:600px;

}


.system-core{

  position:absolute;

  z-index:5;

  top:50%;

  left:50%;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  width:220px;

  height:220px;

  color:var(--white);

  text-align:center;

  background:

  radial-gradient(
  circle at 30% 20%,
  rgba(80,199,245,.55),
  transparent 38%
  ),

  linear-gradient(
  145deg,
  var(--valid-bright),
  var(--valid-deep)
  );

  border:
  1px solid
  rgba(255,255,255,.30);

  border-radius:50%;

  box-shadow:

  0 0 0 28px rgba(255,255,255,.04),

  0 0 0 57px rgba(255,255,255,.025),

  0 40px 90px rgba(1,9,30,.40);

  transform:
  translate(-50%,-50%);

}


.system-core span{

  color:rgba(255,255,255,.65);

  font-size:12px;

  font-weight:800;

}


.system-core strong{

  font-size:39px;

  font-weight:900;

  letter-spacing:.09em;

}


.system-core i{

  position:absolute;

  top:31px;

  right:31px;

  width:13px;

  height:13px;

  background:var(--yellow);

  border-radius:50%;

  box-shadow:
  0 0 0 8px rgba(255,201,40,.14),
  0 0 30px var(--yellow);

  animation:
  livePulse 1.8s infinite;

}


.system-orbit{

  position:absolute;

  top:50%;

  left:50%;

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:50%;

  transform:
  translate(-50%,-50%);

}


.system-orbit--one{

  width:430px;

  height:430px;

}


.system-orbit--two{

  width:590px;

  height:590px;

  border-style:dashed;

  animation:
  orbitRotate 35s linear infinite;

}


.system-item{

  position:absolute;

  z-index:6;

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:112px;

  min-height:49px;

  padding:10px 17px;

  color:var(--white);

  background:
  rgba(255,255,255,.10);

  border:
  1px solid
  rgba(255,255,255,.18);

  border-radius:var(--radius-pill);

  box-shadow:
  0 15px 35px rgba(1,9,30,.18);

  font-size:13px;

  font-weight:900;

  backdrop-filter:blur(10px);

}


.system-item--store{

  top:5%;

  left:50%;

  transform:translateX(-50%);

}


.system-item--inventory{

  top:24%;

  right:4%;

}


.system-item--packing{

  right:5%;

  bottom:22%;

}


.system-item--shipping{

  bottom:4%;

  left:50%;

  transform:translateX(-50%);

}


.system-item--customer{

  bottom:22%;

  left:5%;

}


.system-item--settlement{

  top:24%;

  left:4%;

}


/* =========================================================
   NUMBERS
   ========================================================= */

.valid-numbers{

  position:relative;

  padding:145px 0;

  overflow:hidden;

  background:

  radial-gradient(
  circle at 85% 25%,
  rgba(40,107,229,.12),
  transparent 30%
  ),

  var(--paper-blue);

}


.valid-numbers__heading{

  max-width:880px;

}


.valid-numbers__heading h2{

  margin-top:19px;

  font-size:
  clamp(43px,5vw,70px);

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.04em;

}


.valid-numbers__heading h2 strong{

  display:block;

  color:var(--valid);

}


.valid-numbers__hero{

  position:relative;

  min-height:410px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:50px;

  margin-top:65px;

  padding:60px;

  color:var(--white);

  overflow:hidden;

  background:

  radial-gradient(
  circle at 80% 20%,
  rgba(80,199,245,.32),
  transparent 33%
  ),

  linear-gradient(
  135deg,
  var(--valid-night),
  var(--valid)
  );

  border-radius:46px;

  box-shadow:var(--shadow-lg);

}


.valid-numbers__hero::after{

  content:"";

  position:absolute;

  inset:0;

  opacity:.10;

  background-image:

  linear-gradient(
  rgba(255,255,255,.10) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.10) 1px,
  transparent 1px
  );

  background-size:52px 52px;

}


.valid-numbers__ghost{

  position:absolute;

  z-index:0;

  left:-10px;

  bottom:-95px;

  color:rgba(255,255,255,.055);

  font-size:
  clamp(150px,22vw,330px);

  font-weight:900;

  line-height:1;

  letter-spacing:-.08em;

  direction:ltr;

}


.valid-numbers__main{

  position:relative;

  z-index:2;

}


.valid-numbers__main > span{

  display:block;

  color:var(--sky);

  font-size:16px;

  font-weight:900;

}


.valid-numbers__main > strong{

  display:block;

  margin-top:-5px;

  color:var(--white);

  font-size:
  clamp(76px,11vw,155px);

  font-weight:900;

  line-height:1;

  letter-spacing:-.075em;

  direction:ltr;

  text-align:right;

}


.valid-numbers__main > small{

  display:block;

  margin-top:13px;

  color:rgba(255,255,255,.72);

  font-size:
  clamp(16px,1.6vw,22px);

  font-weight:700;

}


.valid-numbers__daily{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  gap:15px;

  min-width:250px;

  padding:22px;

  background:
  rgba(255,255,255,.10);

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:22px;

  backdrop-filter:blur(12px);

}


.live-dot{

  width:13px;

  height:13px;

  flex:none;

  background:#2BDB83;

  border-radius:50%;

  box-shadow:
  0 0 0 9px rgba(43,219,131,.13),
  0 0 28px rgba(43,219,131,.60);

  animation:
  livePulse 1.8s infinite;

}


.valid-numbers__daily strong{

  display:block;

  font-size:15px;

  font-weight:900;

}


.valid-numbers__daily small{

  display:block;

  margin-top:2px;

  color:rgba(255,255,255,.58);

  font-size:11px;

  line-height:1.6;

}


.valid-numbers__grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:18px;

  margin-top:20px;

}


.valid-stat{

  min-height:240px;

  padding:32px;

  background:var(--white);

  border:
  1px solid
  rgba(16,45,107,.09);

  border-radius:28px;

  box-shadow:var(--shadow-sm);

}


.valid-stat > span{

  display:block;

  color:var(--valid);

  font-size:
  clamp(43px,5vw,67px);

  font-weight:900;

  line-height:1;

  direction:ltr;

  text-align:right;

}


.valid-stat strong{

  display:block;

  margin-top:16px;

  font-size:20px;

  font-weight:900;

}


.valid-stat p{

  margin-top:9px;

  color:var(--ink-soft);

  font-size:14px;

  line-height:1.8;

}


/* =========================================================
   STORIES
   ========================================================= */

.operation-stories{

  padding:145px 0;

  background:var(--white);

}


.stories-heading{

  max-width:850px;

}


.stories-heading h2{

  margin-top:19px;

  font-size:
  clamp(43px,5vw,70px);

  font-weight:900;

  line-height:1.15;

  letter-spacing:-.04em;

}


.stories-heading h2 strong{

  display:block;

  color:var(--valid);

}


.stories-heading p{

  max-width:650px;

  margin-top:20px;

  color:var(--ink-soft);

  font-size:
  clamp(16px,1.4vw,19px);

}


.stories-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:20px;

  margin-top:65px;

}


.story-card{

  position:relative;

  min-height:410px;

  padding:38px;

  overflow:hidden;

  background:

  linear-gradient(
  145deg,
  #F7FAFF,
  #EAF2FF
  );

  border:
  1px solid
  rgba(40,107,229,.11);

  border-radius:32px;

  transition:
  transform .4s var(--ease),
  box-shadow .4s var(--ease);

}


.story-card::after{

  content:"";

  position:absolute;

  left:-80px;

  bottom:-90px;

  width:230px;

  height:230px;

  background:
  radial-gradient(
  circle,
  rgba(40,107,229,.14),
  transparent 68%
  );

}


.story-card:hover{

  transform:translateY(-8px);

  box-shadow:var(--shadow-md);

}


.story-card__number{

  display:flex;

  align-items:center;

  justify-content:center;

  width:54px;

  height:54px;

  color:var(--valid-deep);

  background:var(--yellow);

  border-radius:17px;

  font-size:13px;

  font-weight:900;

}


.story-card > span{

  display:block;

  margin-top:42px;

  color:var(--valid);

  font-size:12px;

  font-weight:900;

}


.story-card h3{

  margin-top:9px;

  font-size:
  clamp(24px,2.3vw,34px);

  font-weight:900;

  line-height:1.35;

}


.story-card p{

  margin-top:17px;

  color:var(--ink-soft);

  font-size:15px;

  line-height:1.9;

}


/* =========================================================
   LIVE TRACKING
   ========================================================= */

.live-tracking{

  padding:
  130px
  max(30px,calc((100vw - 1420px)/2));

  background:

  radial-gradient(
  circle at 15% 50%,
  rgba(80,199,245,.19),
  transparent 29%
  ),

  linear-gradient(
  135deg,
  #E9F3FF,
  #F9FBFF
  );

}


.live-tracking__inner{

  display:grid;

  grid-template-columns:
  minmax(0,.78fr)
  minmax(560px,1.22fr);

  align-items:center;

  gap:85px;

}


.live-tracking__copy h2{

  margin-top:19px;

  font-size:
  clamp(43px,5vw,72px);

  font-weight:900;

  line-height:1.13;

  letter-spacing:-.04em;

}


.live-tracking__copy h2 strong{

  display:block;

  color:var(--valid);

}


.live-tracking__copy > p{

  max-width:580px;

  margin-top:22px;

  color:var(--ink-soft);

  font-size:
  clamp(16px,1.4vw,19px);

}


.tracking-update{

  display:inline-flex;

  align-items:center;

  gap:14px;

  margin-top:32px;

  padding:15px 19px;

  background:var(--white);

  border:
  1px solid
  rgba(40,107,229,.12);

  border-radius:17px;

  box-shadow:var(--shadow-sm);

}


.tracking-update > span{

  width:11px;

  height:11px;

  background:#2BDB83;

  border-radius:50%;

  box-shadow:
  0 0 0 8px rgba(43,219,131,.12);

  animation:
  livePulse 1.8s infinite;

}


.tracking-update small{

  display:block;

  color:var(--ink-faint);

  font-size:10px;

  font-weight:800;

}


.tracking-update strong{

  display:block;

  font-size:13px;

  font-weight:900;

}


/* =========================================================
   TRACKING CARD
   ========================================================= */

.tracking-card{

  position:relative;

  padding:40px;

  color:var(--white);

  overflow:hidden;

  background:

  radial-gradient(
  circle at 85% 15%,
  rgba(80,199,245,.28),
  transparent 30%
  ),

  linear-gradient(
  145deg,
  var(--valid-dark),
  var(--valid)
  );

  border-radius:38px;

  box-shadow:var(--shadow-lg);

}


.tracking-card::before{

  content:"";

  position:absolute;

  inset:14px;

  pointer-events:none;

  border:
  1px solid
  rgba(255,255,255,.11);

  border-radius:28px;

}


.tracking-card__top{

  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;

}


.tracking-card__top span{

  display:block;

  color:rgba(255,255,255,.55);

  font-size:11px;

  font-weight:800;

}


.tracking-card__top strong{

  display:block;

  margin-top:3px;

  color:var(--yellow);

  font-size:28px;

  font-weight:900;

}


.tracking-card__top > small{

  padding:7px 11px;

  color:rgba(255,255,255,.65);

  background:
  rgba(255,255,255,.08);

  border-radius:var(--radius-pill);

  font-size:9px;

  font-weight:900;

  direction:ltr;

}


.tracking-card__journey{

  position:relative;

  z-index:2;

  display:flex;

  align-items:flex-start;

  margin-top:60px;

}


.tracking-step{

  width:70px;

  flex:none;

  text-align:center;

}


.tracking-step > span{

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  width:45px;

  height:45px;

  margin-inline:auto;

  color:rgba(255,255,255,.45);

  background:
  rgba(255,255,255,.08);

  border:
  2px solid
  rgba(255,255,255,.16);

  border-radius:50%;

  font-size:12px;

  font-weight:900;

}


.tracking-step strong{

  display:block;

  margin-top:12px;

  color:rgba(255,255,255,.70);

  font-size:11px;

  font-weight:900;

}


.tracking-step small{

  display:block;

  color:rgba(255,255,255,.38);

  font-size:9px;

}


.tracking-step.is-complete > span{

  color:var(--valid-deep);

  background:var(--sky);

  border-color:var(--sky);

}


.tracking-step.is-current > span{

  background:var(--yellow);

  border-color:var(--yellow);

  box-shadow:
  0 0 0 10px rgba(255,201,40,.12),
  0 0 35px rgba(255,201,40,.40);

}


.tracking-step.is-current > span i{

  width:12px;

  height:12px;

  background:var(--valid-deep);

  border-radius:50%;

  animation:
  routePulse 1.6s infinite;

}


.tracking-step.is-current strong{

  color:var(--yellow);

}


.tracking-line{

  height:3px;

  flex:1;

  margin-top:21px;

  background:
  rgba(255,255,255,.14);

}


.tracking-line.is-complete{

  background:

  linear-gradient(
  90deg,
  var(--sky),
  var(--yellow)
  );

  box-shadow:
  0 0 18px rgba(80,199,245,.35);

}


.tracking-card__next{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-top:50px;

  padding:18px 20px;

  background:
  rgba(255,255,255,.09);

  border:
  1px solid
  rgba(255,255,255,.13);

  border-radius:18px;

}


.tracking-card__next span{

  color:rgba(255,255,255,.55);

  font-size:11px;

  font-weight:800;

}


.tracking-card__next strong{

  color:var(--white);

  font-size:14px;

  font-weight:900;

}


/* =========================================================
   VALID — CONTACT CLOSING
   ========================================================= */

.valid-closing{

  position:relative;

  width:100%;

  min-height:auto;

  padding:100px 6%;

  overflow:hidden;

  background:

  linear-gradient(
    105deg,
    rgba(2,15,42,.97) 0%,
    rgba(5,31,78,.94) 50%,
    rgba(12,65,150,.88) 100%
  ),

  url("../images/valid-closing.jpg")
  center / cover no-repeat;

}


.valid-closing::before{

  content:"";

  position:absolute;

  width:520px;

  height:520px;

  top:-260px;

  right:-100px;

  border-radius:50%;

  background:

  rgba(38,114,255,.20);

  filter:blur(90px);

}


.valid-closing::after{

  content:"";

  position:absolute;

  right:0;

  bottom:0;

  width:100%;

  height:1px;

  background:

  linear-gradient(
    90deg,
    transparent,
    rgba(75,198,255,.55),
    transparent
  );

}


.valid-closing__container{

  position:relative;

  z-index:2;

  width:min(1400px,100%);

  margin-inline:auto;

}


.valid-closing__content{

  max-width:790px;

  margin-bottom:46px;

}


.valid-closing__eyebrow{

  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-bottom:18px;

  color:#55cdfb;

  font-size:14px;

  font-weight:800;

}


.valid-closing__eyebrow i{

  width:9px;

  height:9px;

  border-radius:50%;

  background:#ffc629;

  box-shadow:

  0 0 0 8px
  rgba(255,198,41,.11),

  0 0 24px
  rgba(255,198,41,.70);

}


.valid-closing h2{

  max-width:780px;

  margin:0;

  color:#fff;

  font-size:

  clamp(38px,4vw,67px);

  line-height:1.14;

  font-weight:900;

  letter-spacing:-1.8px;

}


.valid-closing h2 span{

  display:block;

  margin-top:5px;

  color:#ffc629;

}


.valid-closing__content > p{

  max-width:690px;

  margin:

  23px 0 0;

  color:

  rgba(255,255,255,.73);

  font-size:18px;

  line-height:2;

}


/* =========================================================
   CONTACT CARDS
   ========================================================= */

.valid-contact-grid{

  display:grid;

  grid-template-columns:

  repeat(3,minmax(0,1fr));

  gap:17px;

}


.valid-contact-card{

  position:relative;

  display:flex;

  align-items:center;

  gap:17px;

  min-height:132px;

  padding:24px;

  overflow:hidden;

  color:#fff;

  text-decoration:none;

  background:

  rgba(255,255,255,.075);

  border:

  1px solid
  rgba(255,255,255,.15);

  border-radius:23px;

  box-shadow:

  inset 0 1px 0
  rgba(255,255,255,.08),

  0 20px 45px
  rgba(0,0,0,.13);

  backdrop-filter:

  blur(15px);

  -webkit-backdrop-filter:

  blur(15px);

  transition:

  transform .3s ease,

  background .3s ease,

  border-color .3s ease;

}


.valid-contact-card::before{

  content:"";

  position:absolute;

  right:0;

  top:0;

  width:100%;

  height:3px;

  opacity:0;

  background:

  linear-gradient(
    90deg,
    #ffc629,
    #4bcaff
  );

  transition:

  opacity .3s ease;

}


.valid-contact-card:hover{

  transform:

  translateY(-7px);

  background:

  rgba(255,255,255,.12);

  border-color:

  rgba(85,205,251,.42);

}


.valid-contact-card:hover::before{

  opacity:1;

}


.valid-contact-card--whatsapp{

  background:

  linear-gradient(
    135deg,
    rgba(25,190,105,.18),
    rgba(255,255,255,.075)
  );

}


.valid-contact-card__icon{

  display:grid;

  place-items:center;

  flex:none;

  width:58px;

  height:58px;

  color:#ffc629;

  background:

  rgba(255,255,255,.09);

  border:

  1px solid
  rgba(255,255,255,.14);

  border-radius:18px;

}


.valid-contact-card--whatsapp
.valid-contact-card__icon{

  color:#31d47d;

}


.valid-contact-card__icon svg{

  width:27px;

  height:27px;

  fill:currentColor;

  stroke:currentColor;

  stroke-width:1.5;

  stroke-linecap:round;

  stroke-linejoin:round;

}


.valid-contact-card__text{

  display:flex;

  flex-direction:column;

  min-width:0;

}


.valid-contact-card__text small{

  margin-bottom:4px;

  color:

  rgba(255,255,255,.55);

  font-size:11px;

  font-weight:700;

}


.valid-contact-card__text strong{

  color:#fff;

  font-size:19px;

  font-weight:900;

}


.valid-contact-card__text > span{

  margin-top:4px;

  color:

  rgba(255,255,255,.64);

  font-size:13px;

}


.valid-contact-card > b{

  margin-right:auto;

  color:#53cfff;

  font-size:24px;

  font-weight:400;

  transition:

  transform .3s ease;

}


.valid-contact-card:hover > b{

  transform:

  translateX(-5px);

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .valid-closing{

    padding:

    85px 5%;

  }


  .valid-contact-grid{

    grid-template-columns:1fr;

  }


  .valid-contact-card{

    min-height:110px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  .valid-closing{

    padding:

    72px 22px;

    background:

    linear-gradient(
      160deg,
      rgba(2,15,42,.98),
      rgba(8,49,117,.94)
    ),

    url("../images/valid-closing.jpg")
    center / cover no-repeat;

  }


  .valid-closing__content{

    margin-bottom:34px;

  }


  .valid-closing h2{

    font-size:

    clamp(34px,10vw,48px);

    line-height:1.2;

    letter-spacing:-1px;

  }


  .valid-closing__content > p{

    margin-top:18px;

    font-size:15px;

    line-height:1.9;

  }


  .valid-contact-grid{

    gap:12px;

  }


  .valid-contact-card{

    min-height:102px;

    padding:18px;

    gap:14px;

    border-radius:19px;

  }


  .valid-contact-card__icon{

    width:50px;

    height:50px;

    border-radius:15px;

  }


  .valid-contact-card__icon svg{

    width:23px;

    height:23px;

  }


  .valid-contact-card__text strong{

    font-size:16px;

  }


  .valid-contact-card__text > span{

    font-size:12px;

  }

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{

  position:relative;

  color:var(--white);

  overflow:hidden;

  background:

  radial-gradient(
  circle at 85% 15%,
  rgba(40,107,229,.30),
  transparent 30%
  ),

  linear-gradient(
  145deg,
  #020A1D,
  #071A42
  );

}


.site-footer__grid{

  position:absolute;

  inset:0;

  opacity:.08;

  background-image:

  linear-gradient(
  rgba(255,255,255,.10) 1px,
  transparent 1px
  ),

  linear-gradient(
  90deg,
  rgba(255,255,255,.10) 1px,
  transparent 1px
  );

  background-size:60px 60px;

}


.site-footer__top{

  position:relative;

  z-index:2;

  width:100%;

  max-width:1420px;

  margin-inline:auto;

  padding:
  105px
  30px
  75px;

  display:grid;

  grid-template-columns:
  1.15fr
  .65fr
  1fr;

  gap:90px;

}


.footer-brand > img{

  width:185px;

  height:85px;

  padding:14px 20px;

  object-fit:contain;

  background:

  linear-gradient(
  145deg,
  var(--valid),
  var(--valid-deep)
  );

  border:
  1px solid
  rgba(255,255,255,.17);

  border-radius:22px;

  box-shadow:
  0 18px 45px rgba(0,0,0,.22);

}


.footer-brand p{

  max-width:390px;

  margin-top:26px;

  color:rgba(255,255,255,.60);

  font-size:15px;

  line-height:2;

}


.footer-brand .btn{

  margin-top:27px;

}


.footer-navigation > span,
.footer-worlds > span{

  display:block;

  margin-bottom:23px;

  color:var(--sky);

  font-size:11px;

  font-weight:900;

}


.footer-navigation{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

}


.footer-navigation a{

  margin-bottom:11px;

  color:rgba(255,255,255,.65);

  font-size:14px;

  font-weight:700;

  transition:
  color .3s,
  transform .3s;

}


.footer-navigation a:hover{

  color:var(--yellow);

  transform:translateX(-4px);

}


.footer-parent{

  display:flex;

  width:190px;

  opacity:.92;

}


.footer-parent img{

  width:100%;

  max-height:65px;

  object-fit:contain;

  object-position:right center;

}


.footer-worlds p{

  max-width:430px;

  margin-top:22px;

  color:rgba(255,255,255,.55);

  font-size:13px;

  line-height:1.9;

}


.footer-worlds__link{

  display:inline-flex;

  align-items:center;

  gap:9px;

  margin-top:25px;

  color:var(--yellow);

  font-size:13px;

  font-weight:900;

}


.footer-worlds__link svg{

  width:19px;

  height:19px;

  transition:
  transform .3s;

}


.footer-worlds__link:hover svg{

  transform:translateX(5px);

}


.site-footer__bottom{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  width:100%;

  max-width:1420px;

  margin-inline:auto;

  padding:
  24px 30px;

  color:rgba(255,255,255,.40);

  border-top:
  1px solid
  rgba(255,255,255,.10);

  font-size:11px;

  font-weight:700;

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes livePulse{

  0%,
  100%{

    transform:scale(1);

    opacity:1;

  }

  50%{

    transform:scale(.78);

    opacity:.65;

  }

}


@keyframes routePulse{

  0%,
  100%{

    transform:scale(1);

  }

  50%{

    transform:scale(.70);

  }

}


@keyframes lineMove{

  to{

    stroke-dashoffset:-180;

  }

}


@keyframes orbitRotate{

  to{

    transform:
    translate(-50%,-50%)
    rotate(360deg);

  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media
(max-width:1180px){

  .main-nav{

    display:none;

  }


  .header-actions{

    min-width:auto;

  }


  .nav-toggle{

    display:flex;

  }


  .header-contact{

    display:none;

  }


  .valid-hero{

    padding-inline:35px;

  }


  .valid-hero__content{

    grid-template-columns:
    minmax(0,.9fr)
    minmax(400px,1.1fr);

    gap:40px;

  }


  .valid-hero__visual{

    min-height:500px;

  }


  .operation-problem__grid,
  .operation-system__inner,
  .live-tracking__inner{

    grid-template-columns:
    1fr 1fr;

    gap:50px;

  }


  .operation-system__inner{

    grid-template-columns:
    .8fr 1.2fr;

  }


  .operation-system__visual{

    transform:scale(.88);

  }


  .site-footer__top{

    gap:45px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width:768px){

  .container{

    padding-inline:18px;

  }


  .site-header{

    padding:
    12px 12px 0;

  }


  .header-shell{

    min-height:66px;

    padding:7px;

    border-radius:20px;

  }


  .site-header.is-scrolled{

    padding:
    7px 8px 0;

  }


  .header-brands{

    min-width:0;

    gap:8px;

  }


  .valid-brand{

    width:92px;

    height:47px;

    padding:8px 10px;

    border-radius:13px;

  }


  .header-brands__line{

    height:27px;

  }


  .parent-brand{

    max-width:83px;

  }


  .header-actions{

    gap:7px;

  }


  .worlds-return{

    display:none;

  }


  .nav-toggle{

    width:46px;

    height:46px;

    border-radius:13px;

  }


  /* HERO */


  .valid-opening{

    min-height:auto;

  }


  .valid-hero{

    padding:
    60px
    18px
    80px;

  }


  .valid-hero__content{

    display:flex;

    flex-direction:column;

    gap:45px;

  }


  .valid-hero__copy{

    width:100%;

  }


  .valid-hero__eyebrow{

    margin-bottom:17px;

    font-size:11px;

  }


  .valid-hero h1{

    font-size:
    clamp(43px,13vw,67px);

    line-height:1.08;

  }


  .valid-hero h1 strong{

    margin-top:10px;

    font-size:.54em;

    line-height:1.35;

  }


  .valid-hero__copy > p{

    margin-top:21px;

    font-size:15px;

    line-height:1.9;

  }


  .valid-hero__actions{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:8px;

    margin-top:27px;

  }


  .valid-hero__actions .btn{

    min-width:0;

    padding-inline:14px;

    font-size:11px;

  }


  .valid-hero__visual{

    width:100%;

    min-height:430px;

  }


  .valid-hero__image{

    border-radius:30px;

    transform:none;

  }


  .valid-hero__image::before{

    inset:11px;

    border-radius:22px;

  }


  .hero-live-card{

    right:14px;

    bottom:-25px;

    width:
    calc(100% - 28px);

    padding:17px;

    border-radius:21px;

  }


  .hero-live-card__body{

    margin-top:15px;

  }


  .hero-live-card__body strong{

    font-size:17px;

  }


  /* HERO JOURNEY */


  .hero-journey{

    margin-top:10px;

    padding:
    25px 18px 45px;

    overflow-x:auto;

    scrollbar-width:none;

  }


  .hero-journey::-webkit-scrollbar{

    display:none;

  }


  .hero-journey__track{

    display:none;

  }


  .hero-journey__items{

    width:max-content;

    display:flex;

    gap:8px;

  }


  .hero-journey__item{

    width:77px;

    padding:10px 7px;

    background:
    rgba(255,255,255,.055);

    border:
    1px solid
    rgba(255,255,255,.10);

    border-radius:15px;

  }


  .hero-journey__item span{

    width:29px;

    height:29px;

  }


  /* MOBILE NAV */


  .mobile-nav{

    padding-inline:14px;

  }


  .mobile-nav__valid-logo{

    width:88px;

    height:45px;

  }


  .mobile-nav__brands a{

    width:77px;

  }


  .mobile-nav__intro{

    margin-top:
    clamp(18px,3vh,28px);

  }


  .mobile-nav__intro strong{

    font-size:
    clamp(24px,7.3vw,34px);

  }


  .mobile-nav__links{

    gap:7px;

    margin-top:
    clamp(15px,3vh,24px);

  }


  .mobile-nav__links a{

    min-height:65px;

    padding:9px;

    border-radius:16px;

  }


  .mobile-nav__links a > span{

    width:32px;

    height:32px;

    border-radius:10px;

  }


  .mobile-nav__links strong{

    font-size:11px;

  }


  .mobile-nav__links small{

    font-size:8px;

  }


  .mobile-nav__bottom{

    gap:8px;

    padding-top:12px;

  }


  .mobile-nav__worlds{

    max-width:135px;

    font-size:9px;

    line-height:1.5;

  }


  .mobile-nav__cta{

    min-height:43px;

    padding-inline:14px;

    font-size:10px;

  }


  /* PROBLEM */


  .operation-problem{

    padding:
    95px 18px;

  }


  .operation-problem__grid{

    display:flex;

    flex-direction:column;

    gap:65px;

  }


  .operation-problem__copy h2{

    font-size:
    clamp(40px,11vw,58px);

  }


  .operation-problem__copy > p{

    font-size:15px;

  }


  .operation-problem__message{

    padding:20px;

  }


  .problem-network{

    width:100%;

    min-height:500px;

  }


  .problem-network__node{

    min-width:112px;

    padding:10px;

  }


  .problem-network__node span{

    width:27px;

    height:27px;

  }


  .problem-network__node strong{

    font-size:11px;

  }


  .problem-network__node--packing{

    right:0;

  }


  .problem-network__node--shipping{

    left:0;

  }


  .problem-network__center{

    width:145px;

    height:145px;

  }


  .problem-network__center strong{

    font-size:25px;

  }


  /* JOURNEY */


  .order-journey{

    padding:
    100px 0;

  }


  .journey-heading{

    text-align:right;

  }


  .journey-heading .section-label{

    justify-content:flex-start;

  }


  .journey-heading h2{

    font-size:
    clamp(38px,11vw,55px);

  }


  .journey-heading p{

    font-size:15px;

  }


  .journey-list{

    margin-top:60px;

    padding-right:0;

  }


  .journey-list::before{

    display:none;

  }


  .journey-stage{

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;

    min-height:0;

    margin-bottom:24px;

    padding:14px;

    background:var(--white);

    border:
    1px solid
    rgba(40,107,229,.10);

    border-radius:27px;

    box-shadow:var(--shadow-sm);

  }


  .journey-stage:nth-child(even)
  .journey-stage__media,

  .journey-stage:nth-child(even)
  .journey-stage__number,

  .journey-stage:nth-child(even)
  .journey-stage__content{

    grid-column:auto;

    grid-row:auto;

    text-align:right;

  }


  .journey-stage__media{

    order:2;

    width:100%;

    height:245px;

    border-radius:21px;

  }


  .journey-stage__number{

    position:absolute;

    z-index:5;

    top:27px;

    right:27px;

    order:1;

    width:54px;

    height:54px;

    margin:0;

    color:var(--valid-deep);

    background:var(--yellow);

    border:
    5px solid
    var(--white);

    font-size:13px;

  }


  .journey-stage__content{

    order:3;

    padding:
    24px 8px
    13px;

  }


  .journey-stage__content h3{

    font-size:
    clamp(27px,8vw,36px);

  }


  .journey-stage__content p{

    font-size:14px;

  }


  /* SYSTEM */


  .operation-system{

    min-height:auto;

    padding:
    100px 18px;

  }


  .operation-system__inner{

    display:flex;

    flex-direction:column;

    gap:55px;

  }


  .operation-system__copy h2{

    font-size:
    clamp(43px,12vw,65px);

  }


  .operation-system__copy p{

    font-size:15px;

  }


  .operation-system__visual{

    width:100%;

    min-height:430px;

    transform:none;

  }


  .system-core{

    width:145px;

    height:145px;

  }


  .system-core strong{

    font-size:25px;

  }


  .system-core i{

    top:20px;

    right:20px;

    width:10px;

    height:10px;

  }


  .system-orbit--one{

    width:275px;

    height:275px;

  }


  .system-orbit--two{

    width:390px;

    height:390px;

  }


  .system-item{

    min-width:82px;

    min-height:40px;

    padding:8px 12px;

    font-size:10px;

  }


  /* NUMBERS */


  .valid-numbers{

    padding:
    100px 0;

  }


  .valid-numbers__heading h2{

    font-size:
    clamp(38px,11vw,55px);

  }


  .valid-numbers__hero{

    min-height:500px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    gap:35px;

    margin-top:45px;

    padding:35px 22px;

    border-radius:31px;

  }


  .valid-numbers__main > strong{

    font-size:
    clamp(66px,20vw,105px);

  }


  .valid-numbers__main > small{

    font-size:14px;

  }


  .valid-numbers__daily{

    width:100%;

    min-width:0;

  }


  .valid-numbers__ghost{

    bottom:-35px;

    font-size:145px;

  }


  .valid-numbers__grid{

    grid-template-columns:1fr;

    gap:10px;

  }


  .valid-stat{

    min-height:0;

    padding:26px;

  }


  /* STORIES */


  .operation-stories{

    padding:
    100px 0;

  }


  .stories-heading h2{

    font-size:
    clamp(38px,11vw,55px);

  }


  .stories-grid{

    grid-template-columns:1fr;

    gap:12px;

    margin-top:45px;

  }


  .story-card{

    min-height:350px;

    padding:28px;

  }


  /* TRACKING */


  .live-tracking{

    padding:
    100px 18px;

  }


  .live-tracking__inner{

    display:flex;

    flex-direction:column;

    gap:50px;

  }


  .live-tracking__copy h2{

    font-size:
    clamp(39px,11vw,57px);

  }


  .tracking-card{

    width:100%;

    padding:
    28px 17px;

    border-radius:29px;

  }


  .tracking-card__journey{

    margin-top:45px;

    overflow-x:auto;

    padding:
    10px 0 18px;

    scrollbar-width:none;

  }


  .tracking-card__journey::-webkit-scrollbar{

    display:none;

  }


  .tracking-step{

    width:61px;

  }


  .tracking-step > span{

    width:39px;

    height:39px;

  }


  .tracking-line{

    min-width:35px;

    margin-top:18px;

  }


  .tracking-card__next{

    margin-top:25px;

  }


  /* CLOSING */


  .valid-closing{

    min-height:720px;

    padding:
    100px 18px;

  }


  .valid-closing__overlay{

    background:

    linear-gradient(
    to left,
    rgba(4,16,43,.95),
    rgba(7,26,66,.80)
    );

  }


  .valid-closing h2{

    font-size:
    clamp(49px,14vw,72px);

  }


  .valid-closing p{

    font-size:16px;

  }


  .valid-closing__actions{

    display:grid;

    grid-template-columns:1fr;

  }


  /* FOOTER */


  .site-footer__top{

    padding:
    80px 18px
    55px;

    grid-template-columns:1fr;

    gap:55px;

  }


  .footer-brand > img{

    width:160px;

    height:76px;

  }


  .footer-navigation{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:8px 25px;

  }


  .footer-navigation > span{

    grid-column:1/-1;

  }


  .footer-navigation a{

    margin:0;

  }


  .site-footer__bottom{

    padding:
    23px 18px;

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media
(max-width:390px){

  .parent-brand{

    display:none;

  }


  .header-brands__line{

    display:none;

  }


  .mobile-nav__brands a{

    width:67px;

  }


  .mobile-nav__links a{

    min-height:61px;

  }


  .mobile-nav__links small{

    display:none;

  }


  .problem-network__node{

    min-width:101px;

  }


  .problem-network__center{

    width:128px;

    height:128px;

  }


  .system-orbit--two{

    width:345px;

    height:345px;

  }


  .valid-numbers__main > strong{

    font-size:63px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media
(prefers-reduced-motion:reduce){

  *{

    scroll-behavior:auto !important;

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

  }

}

/* =========================================================
   FINAL SCALE & ALIGNMENT TUNING — JULY 2026
   ========================================================= */

.valid-brand{width:138px;height:54px;padding:5px 10px;}
.valid-brand img{width:100%;height:100%;object-fit:contain;transform:scale(1.14);}
.mobile-nav__valid-logo{width:122px;height:50px;padding:5px 9px;}

.valid-hero h1{font-size:clamp(42px,4.55vw,72px);}
.valid-hero h1 strong{font-size:.60em;}
.valid-hero__copy > p{font-size:clamp(14px,1.15vw,17px);line-height:1.9;}
.operation-problem__copy h2{font-size:clamp(36px,4.1vw,62px);}
.operation-problem__copy > p{font-size:clamp(14px,1.15vw,17px);}
.journey-heading h2,
.valid-numbers__heading h2{font-size:clamp(36px,4.15vw,62px);}
.journey-heading p,
.valid-numbers__heading p{font-size:clamp(14px,1.15vw,17px);}
.journey-stage__content h3{font-size:clamp(26px,2.5vw,38px);}
.journey-stage__content p{font-size:15px;}
.operation-system h2,
.tracking-heading h2,
.stories-heading h2,
.contact-content h2{font-size:clamp(36px,4.2vw,64px);}
.operation-system p,
.tracking-heading p,
.stories-heading p,
.contact-content p{font-size:clamp(14px,1.15vw,17px);}

.hero-journey__item{gap:13px;}
.hero-journey__item strong{display:block;margin-top:2px;font-size:10px;line-height:1.45;}
.hero-journey__track{top:12px;}

.valid-numbers__main > strong{font-size:clamp(72px,9vw,132px);line-height:.95;}
.valid-numbers__main > small{font-size:18px;}
.valid-numbers__daily small{font-size:11px;line-height:1.7;}
.valid-stat > span{font-size:clamp(38px,4vw,58px);}
.valid-stat > strong{font-size:18px;}
.valid-stat p{font-size:13px;line-height:1.8;}

@media (max-width:1180px){
  .valid-brand{width:128px;}
  .valid-hero h1{font-size:clamp(40px,5.4vw,64px);}
}
@media (max-width:768px){
  .valid-brand{width:112px;height:49px;}
  .valid-hero h1{font-size:clamp(36px,11vw,52px);}
  .valid-hero__copy > p{font-size:14px;}
  .hero-journey__item{gap:12px;}
  .hero-journey__item strong{font-size:10px;margin-top:3px;}
  .valid-numbers__main > strong{font-size:clamp(58px,19vw,86px);}
  .valid-numbers__main > small{font-size:14px;}
  .valid-stat > span{font-size:38px;}
  .valid-stat > strong{font-size:16px;}
}




/* =========================================================
   VALID — LOGOS CORRECTION
   إصلاح الهيدر + تكبير لوجو الفوتر
   ========================================================= */


/* =========================================================
   1) إعادة مساحة الهيدر للوضع المظبوط
   ========================================================= */

.header-brands{

  display:flex !important;

  align-items:center !important;

  gap:15px !important;

  min-width:300px !important;

  overflow:visible !important;

}


/* =========================================================
   2) لوجو VALID في الهيدر
   حر — بدون مربع — ولا يخرج فوق البار
   ========================================================= */

.valid-brand{

  position:relative !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  flex:none !important;

  width:145px !important;

  min-width:145px !important;

  height:52px !important;

  padding:0 !important;

  margin:0 !important;

  overflow:visible !important;

  background:transparent !important;

  background-color:transparent !important;

  background-image:none !important;

  border:0 !important;

  outline:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

}


/* تكبير الصورة داخل المساحة فقط */

.valid-brand img{

  position:static !important;

  display:block !important;

  width:145px !important;

  min-width:0 !important;

  max-width:145px !important;

  height:50px !important;

  max-height:50px !important;

  padding:0 !important;

  margin:0 !important;

  object-fit:contain !important;

  object-position:center !important;

  transform:scale(1.22) !important;

  transform-origin:center !important;

  filter:none !important;

}


/* =========================================================
   3) لوجو محمود نور الدين في الهيدر
   أبيض بالكامل
   ========================================================= */

.site-header .parent-brand{

  width:125px !important;

  min-width:125px !important;

  height:40px !important;

  padding:0 !important;

  background:transparent !important;

  border:0 !important;

  box-shadow:none !important;

}


.site-header .parent-brand img{

  display:block !important;

  width:125px !important;

  max-width:125px !important;

  height:38px !important;

  max-height:38px !important;

  object-fit:contain !important;

  opacity:1 !important;

  transform:none !important;

  filter:

  brightness(0)

  invert(1) !important;

}


/* =========================================================
   4) الفوتر
   تكبير لوجو VALID بشكل واضح
   ========================================================= */

.site-footer .footer-brand{

  overflow:visible !important;

}


.site-footer .footer-brand > img{

  display:block !important;

  width:340px !important;

  max-width:none !important;

  height:145px !important;

  max-height:none !important;

  padding:0 !important;

  margin:0 !important;

  background:transparent !important;

  background-color:transparent !important;

  background-image:none !important;

  border:0 !important;

  outline:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

  object-fit:contain !important;

  object-position:right center !important;

  transform:scale(1.35) !important;

  transform-origin:right center !important;

  filter:none !important;

}


/* =========================================================
   5) لوجو محمود في الفوتر
   يفضل أبيض زي ما هو دلوقتي
   ========================================================= */

.site-footer .parent-brand img,
.site-footer .footer-parent img,
.site-footer .footer-parent-brand img{

  opacity:1 !important;

  transform:none !important;

  filter:

  brightness(0)

  invert(1) !important;

}


/* =========================================================
   6) التابلت
   ========================================================= */

@media(max-width:1180px){


  .header-brands{

    min-width:265px !important;

    gap:11px !important;

  }


  .valid-brand{

    width:130px !important;

    min-width:130px !important;

  }


  .valid-brand img{

    width:130px !important;

    max-width:130px !important;

    transform:scale(1.18) !important;

  }


  .site-header .parent-brand{

    width:105px !important;

    min-width:105px !important;

  }


  .site-header .parent-brand img{

    width:105px !important;

    max-width:105px !important;

  }

}


/* =========================================================
   7) التليفون
   ========================================================= */

@media(max-width:768px){


  .header-brands{

    min-width:0 !important;

    flex:1 !important;

    gap:7px !important;

  }


  .valid-brand{

    width:105px !important;

    min-width:105px !important;

    height:44px !important;

  }


  .valid-brand img{

    width:105px !important;

    max-width:105px !important;

    height:42px !important;

    max-height:42px !important;

    transform:scale(1.15) !important;

  }


  .site-header .parent-brand{

    width:78px !important;

    min-width:78px !important;

    height:32px !important;

  }


  .site-header .parent-brand img{

    width:78px !important;

    max-width:78px !important;

    height:30px !important;

    max-height:30px !important;

  }


  /* حجم مناسب للوجو في فوتر التليفون */

  .site-footer .footer-brand > img{

    width:255px !important;

    height:105px !important;

    transform:scale(1.25) !important;

  }

}

/* =========================================================
   VALID — FINAL HEADER + MOBILE MENU FIX
   ========================================================= */


/* =========================================================
   1) الهيدر يقف أعلى الصفحة
   ولا يتحرك مع السكرول
   ========================================================= */

.site-header,
.site-header.is-scrolled{

  position:absolute !important;

  top:0 !important;

  right:0 !important;

  left:0 !important;

  bottom:auto !important;

  width:100% !important;

  z-index:100 !important;

  margin:0 !important;

  transform:none !important;

}


/* إلغاء أي اختلاف كان بيحصل بعد النزول */

.site-header.is-scrolled{

  position:absolute !important;

  top:0 !important;

  padding-top:20px !important;

}


/* البار نفسه يفضل بنفس الشكل */

.site-header .header-shell,
.site-header.is-scrolled .header-shell{

  transform:none !important;

  margin-top:0 !important;

}


/* =========================================================
   2) تكبير VALID داخل الهيدر فقط
   من غير تكبير مساحة الهيدر
   ========================================================= */

.site-header .valid-brand{

  position:relative !important;

  width:165px !important;

  min-width:165px !important;

  height:52px !important;

  overflow:visible !important;

  padding:0 !important;

  background:transparent !important;

  background-color:transparent !important;

  background-image:none !important;

  border:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

}


.site-header .valid-brand img{

  position:static !important;

  display:block !important;

  width:165px !important;

  min-width:0 !important;

  max-width:165px !important;

  height:52px !important;

  max-height:52px !important;

  padding:0 !important;

  margin:0 !important;

  object-fit:contain !important;

  object-position:center !important;

  transform:scale(2.20) !important;

  transform-origin:center !important;

  filter:none !important;

}


/* =========================================================
   3) لوجو محمود في الهيدر يفضل أبيض
   ========================================================= */

.site-header .parent-brand img{

  opacity:1 !important;

  transform:none !important;

  filter:
  brightness(0)
  invert(1) !important;

}


/* =========================================================
   4) لوجو VALID داخل قائمة التلت شرط
   من غير مربع أو إطار
   ========================================================= */

.mobile-nav .mobile-nav__valid-logo{

  display:block !important;

  width:175px !important;

  max-width:175px !important;

  height:65px !important;

  max-height:65px !important;

  padding:0 !important;

  margin:0 !important;

  object-fit:contain !important;

  object-position:right center !important;

  background:transparent !important;

  background-color:transparent !important;

  background-image:none !important;

  border:0 !important;

  outline:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

  transform:scale(1.18) !important;

  transform-origin:right center !important;

}


/* لو صورة VALID داخل عنصر أب عليه المربع القديم */

.mobile-nav__brand,
.mobile-nav__logo,
.mobile-nav__brand-valid{

  background:transparent !important;

  background-color:transparent !important;

  background-image:none !important;

  border:0 !important;

  outline:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

  overflow:visible !important;

}


/* =========================================================
   لوجو محمود نور الدين داخل قائمة الموبايل
   ========================================================= */

.mobile-nav__brands a img{

  opacity:1 !important;

  filter:
    brightness(0)
    saturate(100%)
    invert(100%) !important;

}

/* =========================================================
   6) الموبايل
   ========================================================= */

@media(max-width:768px){


  /* الهيدر يقف أعلى الصفحة ولا ينزل */

  .site-header,
  .site-header.is-scrolled{

    position:absolute !important;

    top:0 !important;

    right:0 !important;

    left:0 !important;

    padding:10px 9px 0 !important;

    transform:none !important;

  }


  /* حجم مناسب للوجو داخل الهيدر */

  .site-header .valid-brand{

    width:112px !important;

    min-width:112px !important;

    height:44px !important;

  }


  .site-header .valid-brand img{

    width:112px !important;

    max-width:112px !important;

    height:43px !important;

    max-height:43px !important;

    transform:scale(1.30) !important;

  }


  /* لوجو محمود في الهيدر */

  .site-header .parent-brand img{

    filter:
    brightness(0)
    invert(1) !important;

  }


  /* منيو الموبايل تفضل فوق الصفحة */

  .mobile-nav{

    position:fixed !important;

    z-index:999999 !important;

  }


  /* VALID داخل المنيو */

  .mobile-nav .mobile-nav__valid-logo{

    width:165px !important;

    max-width:165px !important;

    height:62px !important;

    max-height:62px !important;

    transform:scale(1.18) !important;

  }

}

/* =========================================================
   MOBILE — منع الهيدر من تغطية بداية الهيرو
   ========================================================= */

@media (max-width: 768px){

  .valid-hero{
    padding-top: 155px !important;
  }

}