/* ═══════════════════════════════════════════════════════════
   W Eight Shipping Trading Company — Coming Soon
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --brand:        #e73023;
  --brand-soft:   #ff5a4d;
  --brand-deep:   #b81f14;

  /* Ink */
  --ink-900:      #0b0f17;
  --ink-800:      #0f141e;
  --ink-700:      #222732;
  --ink-600:      #343b4a;
  --ink-500:      #3b4250;

  /* Text */
  --txt:          #ffffff;
  --txt-dim:      rgba(255,255,255,.72);
  --txt-faint:    rgba(255,255,255,.48);

  /* Surfaces */
  --glass:        rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.09);
  --line:         rgba(255,255,255,.12);

  --radius:       14px;
  --radius-lg:    20px;

  --ease:         cubic-bezier(.22,.8,.28,1);
  --shell:        min(1140px, 100% - 3rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100vh;
  min-height:100svh;
  font-family:'Mulish', Muli, Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--txt);
  background:var(--ink-800);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ═══════════ Ambient background ═══════════ */

.bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -20%, #1b2230 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
}

/* dot grid */
.bg__grid{
  position:absolute; inset:-10%;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(90% 70% at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 35%, #000 0%, transparent 78%);
  animation:drift 32s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(34px,34px,0); } }

/* glow blobs */
.blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
  will-change:transform;
}
.blob--1{
  width:44vw; height:44vw; min-width:340px; min-height:340px;
  top:-14vw; left:-8vw;
  background:radial-gradient(circle, var(--brand) 0%, transparent 68%);
  animation:float1 20s var(--ease) infinite;
}
.blob--2{
  width:38vw; height:38vw; min-width:300px; min-height:300px;
  bottom:-16vw; right:-10vw;
  background:radial-gradient(circle, #2c6cff 0%, transparent 68%);
  opacity:.34;
  animation:float2 26s var(--ease) infinite;
}
.blob--3{
  width:30vw; height:30vw; min-width:240px; min-height:240px;
  top:44%; left:56%;
  background:radial-gradient(circle, var(--brand-deep) 0%, transparent 70%);
  opacity:.26;
  animation:float1 30s var(--ease) infinite reverse;
}
@keyframes float1{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(6vw,4vw,0) scale(1.12); }
}
@keyframes float2{
  0%,100%{ transform:translate3d(0,0,0) scale(1.06); }
  50%    { transform:translate3d(-7vw,-3vw,0) scale(.94); }
}

/* sweeping light beam */
.bg__beam{
  position:absolute; top:-40%; left:-30%;
  width:60%; height:180%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.045) 50%, transparent 100%);
  transform:rotate(14deg);
  animation:sweep 11s ease-in-out infinite;
}
@keyframes sweep{
  0%,100%{ transform:rotate(14deg) translateX(-20%); opacity:0; }
  50%    { transform:rotate(14deg) translateX(150%); opacity:1; }
}

/* ═══════════ Layout ═══════════ */

.page{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100svh;
  width:var(--shell); margin-inline:auto;
  padding-block:1.75rem 1.5rem;
}

/* ═══════════ Header ═══════════ */

.head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  animation:rise .8s var(--ease) both;
}

.brand{
  display:inline-block; flex:none;
  transition:opacity .3s var(--ease);
}
.brand:hover{ opacity:.85; }

.brand__img{
  width:clamp(180px, 21vw, 232px);
  height:auto;                      /* intrinsic 1500 × 446 */
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));
}

.head__cta{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.05rem;
  font-size:.875rem; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--line); border-radius:100px;
  background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.head__cta svg{ width:15px; height:15px; fill:var(--brand-soft); flex:none; }
.head__cta:hover{
  border-color:rgba(231,48,35,.55);
  background:rgba(231,48,35,.12);
  transform:translateY(-2px);
}

/* ═══════════ Main ═══════════ */

.main{
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding-block:clamp(1.75rem, 4.5vh, 3.25rem);
  gap:1.15rem;
}

/* eyebrow */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem 1rem .45rem .8rem;
  font-size:.75rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-dim);
  border:1px solid var(--line); border-radius:100px;
  background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:rise .8s .05s var(--ease) both;
}
.eyebrow__dot{
  position:relative; width:7px; height:7px; flex:none;
  border-radius:50%; background:var(--brand);
}
.eyebrow__dot::after{
  content:''; position:absolute; inset:0;
  border-radius:50%; background:var(--brand);
  animation:ping 2s var(--ease) infinite;
}
@keyframes ping{
  0%  { transform:scale(1); opacity:.85; }
  75%,100%{ transform:scale(3.2); opacity:0; }
}

/* title */
.title{
  max-width:16ch;
  font-size:clamp(2.5rem, 7.6vw, 5rem);
  font-weight:900; line-height:1.02;
  letter-spacing:-.03em;
  text-wrap:balance;
  animation:rise .9s .12s var(--ease) both;
}
.title__accent{
  position:relative; display:inline-block;
  color:var(--brand-soft);
  background:linear-gradient(96deg, var(--brand-soft), #ff8a7a 55%, var(--brand) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.title__underline{
  position:absolute; left:0; bottom:-.06em;
  width:100%; height:.16em;
  color:var(--brand);
  overflow:visible;
}
.title__underline path{
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:draw 1.3s .85s var(--ease) forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* lede */
.lede{
  max-width:66ch;
  font-size:clamp(.95rem, 1.6vw, 1.06rem);
  font-weight:400; line-height:1.7;
  color:var(--txt-dim);
  text-wrap:pretty;
  animation:rise .9s .2s var(--ease) both;
}
.lede strong{ color:var(--txt); font-weight:800; }

/* ═══════════ Countdown ═══════════ */

.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.35rem, 1.4vw, 1rem);
  margin-top:.45rem;
  animation:rise .9s .28s var(--ease) both;
}
.unit{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  min-width:clamp(66px, 10.5vw, 104px);
  padding:clamp(.7rem,1.6vw,1.05rem) clamp(.4rem,1vw,.7rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,.02));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -22px rgba(0,0,0,.9);
}
.unit__num{
  font-size:clamp(1.7rem, 4.6vw, 2.9rem);
  font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  transition:transform .3s var(--ease);
}
.unit__num.tick{ animation:tick .45s var(--ease); }
@keyframes tick{
  0%  { transform:translateY(-38%); opacity:0; filter:blur(3px); }
  100%{ transform:translateY(0);    opacity:1; filter:blur(0); }
}
.unit__lbl{
  font-size:.63rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt-faint);
}
.unit__sep{
  font-size:clamp(1.3rem,3vw,2rem); font-weight:800;
  color:var(--brand); line-height:1;
  padding-top:clamp(.85rem,2.1vw,1.35rem);
  animation:blink 1s steps(2,start) infinite;
}
@keyframes blink{ 50%{ opacity:.22; } }

/* ═══════════ Progress ═══════════ */

.progress{
  width:min(420px,100%);
  margin-top:.5rem;
  animation:rise .9s .34s var(--ease) both;
}
.progress__bar{
  height:6px; border-radius:100px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.progress__fill{
  display:block; height:100%; width:var(--pct);
  border-radius:100px;
  background:linear-gradient(90deg, var(--brand-deep), var(--brand) 45%, var(--brand-soft));
  box-shadow:0 0 18px rgba(231,48,35,.65);
  transform-origin:left;
  animation:grow 1.6s .6s var(--ease) both;
}
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.progress__meta{
  display:flex; justify-content:space-between;
  margin-top:.5rem;
  font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-faint);
}
.progress__pct{ color:var(--brand-soft); }

/* ═══════════ Notify form ═══════════ */

.notify{
  position:relative;
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:center;
  width:min(560px,100%);
  margin-top:1.1rem;
  animation:rise .9s .4s var(--ease) both;
}
.notify__field{
  position:relative; flex:1 1 260px; min-width:0;
}
.notify__icon{
  position:absolute; top:50%; left:1.05rem;
  transform:translateY(-50%);
  width:17px; height:17px; fill:var(--txt-faint);
  transition:fill .3s var(--ease);
  pointer-events:none;
}
.notify__field:focus-within .notify__icon{ fill:var(--brand-soft); }
.notify input{
  width:100%;
  padding:.95rem 1.15rem .95rem 2.85rem;
  font-size:.94rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.notify input::placeholder{ color:var(--txt-faint); }
.notify input:focus{
  border-color:rgba(231,48,35,.6);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 4px rgba(231,48,35,.14);
}
.notify input:user-invalid{ border-color:rgba(231,48,35,.85); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.6rem;
  font-size:.94rem; font-weight:800; letter-spacing:.01em;
  color:#fff; cursor:pointer;
  border:0; border-radius:var(--radius);
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow:0 14px 32px -14px rgba(231,48,35,.95);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.btn svg{ width:17px; height:17px; fill:currentColor; transition:transform .28s var(--ease); }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 20px 40px -14px rgba(231,48,35,1); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:translateY(0); }

.notify__msg{
  flex:1 1 100%;
  min-height:1.2em;
  font-size:.8rem; font-weight:600;
  color:var(--brand-soft);
  opacity:0; transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.notify__msg.show{ opacity:1; transform:translateY(0); }
.notify__msg.ok{ color:#4ddb9a; }

/* ═══════════ Service chips ═══════════ */

.chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem;
  margin-top:1.15rem;
  list-style:none;
  animation:rise .9s .48s var(--ease) both;
}
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem;
  font-size:.8rem; font-weight:700;
  color:var(--txt-dim);
  border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.035);
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.chip svg{ width:15px; height:15px; fill:var(--brand); flex:none; opacity:.9; }
.chip:hover{
  color:var(--txt);
  border-color:rgba(231,48,35,.45);
  background:rgba(231,48,35,.1);
  transform:translateY(-3px);
}

/* ═══════════ Footer ═══════════ */

.foot{
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.07);
  animation:rise .9s .56s var(--ease) both;
}
.foot__contacts{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.5rem;
}
.pill{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.85rem; font-weight:700;
  color:var(--txt-dim);
  transition:color .3s var(--ease);
}
.pill svg{
  width:30px; height:30px; padding:7px; flex:none;
  fill:var(--brand-soft);
  border:1px solid var(--line); border-radius:9px;
  background:var(--glass);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.pill span{ display:flex; flex-direction:column; line-height:1.35; text-align:left; }
.pill small{
  font-size:.63rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-faint);
}
a.pill:hover{ color:var(--txt); }
a.pill:hover svg{ background:rgba(231,48,35,.16); border-color:rgba(231,48,35,.5); }

.foot__copy{
  font-size:.73rem; letter-spacing:.03em;
  color:var(--txt-faint);
  text-align:center;
}

/* ═══════════ Road motif ═══════════ */

.road{
  position:fixed; inset:auto 0 0 0; z-index:0;
  height:52px; pointer-events:none;
  overflow:hidden;
}
.road__line{
  position:absolute; bottom:8px; left:0; right:0;
  height:1px;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.16) 0 26px, transparent 26px 52px);
  animation:dash 2.4s linear infinite;
}
@keyframes dash{ to{ transform:translateX(-52px); } }
.road__car{
  position:absolute; bottom:6px; left:0;
  width:74px; height:auto;
  color:rgba(255,255,255,.1);
  animation:cross 17s linear infinite;
}
@keyframes cross{
  0%  { transform:translateX(-20vw); }
  100%{ transform:translateX(120vw); }
}

/* ═══════════ Entrance ═══════════ */

@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ═══════════ Responsive ═══════════ */

@media (max-width:768px){
  :root{ --shell:min(1140px, 100% - 2.25rem); }
  .head__cta span{ display:none; }
  .head__cta{ padding:.6rem; }
  .head__cta svg{ width:17px; height:17px; }
  .title{ max-width:14ch; }
  .foot__contacts{ gap:.9rem; }
}

@media (max-width:560px){
  :root{ --shell:min(1140px, 100% - 1.75rem); }
  .page{ padding-block:1.25rem 1rem; }
  .eyebrow{ font-size:.66rem; letter-spacing:.08em; }
  .unit__sep{ display:none; }
  .countdown{
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:.45rem; width:100%;
  }
  .unit{ min-width:0; }
  .notify{ flex-direction:column; }
  .btn{ justify-content:center; }
  .chips{ gap:.4rem; }
  .chip{ font-size:.73rem; padding:.48rem .8rem; }
  .foot__contacts{ flex-direction:column; align-items:flex-start; width:100%; }
  .foot{ align-items:flex-start; }
  .foot__copy{ text-align:left; }
}

@media (max-width:340px){
  .countdown{ grid-template-columns:repeat(2,1fr); }
  .unit__num{ font-size:1.85rem; }
}

/* short desktop / laptop viewports — compress so nothing gets cut off */
@media (min-width:769px) and (max-height:820px){
  .main{ padding-block:1.25rem; gap:.85rem; }
  .title{ font-size:clamp(2.4rem, 5.4vw, 3.9rem); }
  .lede{ font-size:1rem; line-height:1.62; }
  .unit{ padding:.7rem .55rem; }
  .unit__num{ font-size:2.15rem; }
  .unit__sep{ padding-top:.9rem; }
  .chips{ margin-top:.85rem; }
  .foot{ padding-top:1.1rem; gap:.8rem; }
}

/* 1366×768-class laptops — drop the progress meter to gain the last few pixels */
@media (min-width:769px) and (max-height:780px){
  .progress{ display:none; }
  .main{ padding-block:1rem; }
  .pill svg{ width:26px; height:26px; padding:6px; }
  .foot{ padding-top:.9rem; gap:.65rem; }
}

/* landscape phones */
@media (max-height:560px){
  .road{ display:none; }
  .title__underline{ display:none; }
}

/* ═══════════ Motion / contrast prefs ═══════════ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .title__underline path{ stroke-dashoffset:0; }
  .progress__fill{ transform:none; }
  .road{ display:none; }
}