/* ============================================================
   ALBA — "Сайт в разработке" / Outdoor advertising theme
   Neon billboard at night, being built by a crane.
   ============================================================ */

:root{
  --bg-0:#05070f;
  --bg-1:#0a0e1a;
  --bg-2:#121a30;
  --neon:#ffd23f;        /* warm sign yellow   */
  --neon-2:#ff8a3d;      /* sodium orange      */
  --cyan:#37e6ff;        /* led accent         */
  --tg:#2aabee;          /* telegram blue      */
  --green:#27d07f;       /* call green         */
  --ink:#e8edf7;
  --muted:#8d97b0;
  --hazard-a:#f4c20d;    /* warning tape       */
  --hazard-b:#1a1a1a;
  --frame:#1c2742;
}

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

html,body{height:100%}

body{
  font-family:"Rubik",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  min-height:100dvh;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 20%, #cfe3ff, transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, #fff, transparent),
    radial-gradient(1px 1px at 35% 60%, #bcd4ff, transparent),
    radial-gradient(1px 1px at 90% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 12% 75%, #e6efff, transparent),
    radial-gradient(1px 1px at 50% 85%, #fff, transparent),
    radial-gradient(1px 1px at 70% 12%, #fff, transparent);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45}to{opacity:1}}

.moon{
  position:absolute;top:8%;right:12%;
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff7e0, #ffe9a8 55%, #e9cf7d 100%);
  box-shadow:0 0 50px 12px rgba(255,228,150,.35), inset -14px -10px 0 rgba(0,0,0,.06);
  filter:saturate(.9);
}

/* city silhouette at the horizon */
.skyline{
  position:absolute;left:0;right:0;bottom:0;height:34vh;min-height:200px;
  background:
    linear-gradient(to top, rgba(0,0,0,.55), transparent),
    repeating-linear-gradient(90deg,
      #070b15 0 38px, #0c1322 38px 44px, #070b15 44px 96px, #0a1120 96px 104px);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 220V120h40V90h30v40h26V70h44v60h30V110h36v40h30V60h50v90h40V100h30v50h34V130h40v20h30V80h46v70h30V120h40v30h30V96h44v54h30V112h36v38h30V70h48v80h40V118h30v32h34V124h44v26h30V86h40v64h30V130h36v20h30V100h50v50h40V90h30v60h26V126h44v24h30V70h36v80h30V120h40v30h30V110h44v40h30V60h50v90h40V120h30v30h30V140h40V220z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 220V120h40V90h30v40h26V70h44v60h30V110h36v40h30V60h50v90h40V100h30v50h34V130h40v20h30V80h46v70h30V120h40v30h30V96h44v54h30V112h36v38h30V70h48v80h40V118h30v32h34V124h44v26h30V86h40v64h30V130h36v20h30V100h50v50h40V90h30v60h26V126h44v24h30V70h36v80h30V120h40v30h30V110h44v40h30V60h50v90h40V120h30v30h30V140h40V220z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ---------- sparks canvas ---------- */
#sparks{position:fixed;inset:0;z-index:5;pointer-events:none}

/* ---------- stage ---------- */
.stage{
  position:relative;z-index:3;
  flex:1;
  width:min(960px,92vw);
  margin:0 auto;
  padding:clamp(28px,6vh,64px) 0 32px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,5vh,48px);
}

/* ============================================================
   BILLBOARD
   ============================================================ */
.billboard-wrap{position:relative;width:min(680px,90vw);margin-top:64px}

.billboard{
  position:relative;
  border-radius:16px;
  padding:14px;
  background:
    linear-gradient(180deg,#16203a,#0d1424);
  border:3px solid var(--frame);
  box-shadow:
    0 0 0 6px rgba(0,0,0,.35),
    0 30px 60px -20px rgba(0,0,0,.8),
    inset 0 0 40px rgba(0,0,0,.6);
}

.screen{
  position:relative;
  border-radius:8px;
  padding:clamp(26px,5vw,42px) clamp(18px,4vw,34px);
  background:
    radial-gradient(120% 140% at 50% -10%, rgba(55,230,255,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#0b1020,#070b16);
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
  text-align:center;
}

/* subtle moving scanline on the LED screen */
.screen::after{
  content:"";position:absolute;left:0;right:0;height:38%;top:-38%;
  background:linear-gradient(180deg, transparent, rgba(55,230,255,.05), transparent);
  animation:scan 6s linear infinite;
}
@keyframes scan{to{top:120%}}

/* brand neon */
.neon-brand{
  font-family:"Russo One",sans-serif;
  font-size:clamp(54px,12vw,104px);
  line-height:.9;
  letter-spacing:.06em;
  color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--neon),
    0 0 30px var(--neon-2),
    0 0 60px var(--neon-2);
  animation:flicker 4.5s infinite;
}
@keyframes flicker{
  0%,18%,22%,25%,53%,57%,100%{opacity:1;filter:none}
  20%,24%,55%{opacity:.35;filter:brightness(.6)}
}

.neon-sub{
  margin-top:6px;
  font-size:clamp(10px,2.6vw,15px);
  letter-spacing:.42em;
  padding-left:.42em;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(55,230,255,.8);
}

.headline{
  margin-top:clamp(18px,3.5vw,28px);
  font-family:"Russo One",sans-serif;
  line-height:1.04;
  letter-spacing:.02em;
}
.headline .line{display:block;font-size:clamp(24px,6.4vw,46px);color:#eaf1ff}
.headline .accent{
  color:var(--neon);
  text-shadow:0 0 10px rgba(255,210,63,.6),0 0 28px rgba(255,138,61,.35);
}

.uz{
  margin-top:14px;
  font-size:clamp(11px,2.8vw,14px);
  color:var(--muted);
  letter-spacing:.04em;
}

/* working progress bar */
.progress{
  position:relative;
  margin:clamp(20px,4vw,30px) auto 4px;
  width:min(360px,86%);
  height:18px;
  border-radius:20px;
  background:
    repeating-linear-gradient(45deg,
      var(--hazard-b) 0 12px, var(--hazard-a) 12px 24px);
  background-size:34px 34px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.progress-fill{
  position:absolute;inset:2px;width:6%;
  border-radius:20px;
  background:linear-gradient(90deg,var(--neon-2),var(--neon),#fff6cf);
  box-shadow:0 0 14px rgba(255,210,63,.7);
  animation:build 6.5s cubic-bezier(.6,.02,.3,1) infinite;
}
@keyframes build{
  0%{width:4%}
  60%{width:78%}
  78%{width:82%}
  100%{width:96%}
}
.progress-label{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-size:10px;font-weight:700;letter-spacing:.32em;padding-left:.32em;
  color:#fff;mix-blend-mode:difference;
}

/* hazard tape strips top & bottom of the board */
.tape{
  height:14px;border-radius:4px;margin:0 2px;
  background:repeating-linear-gradient(45deg,
    var(--hazard-b) 0 16px, var(--hazard-a) 16px 32px);
  background-size:45px 45px;
  box-shadow:0 0 12px rgba(0,0,0,.5) inset;
  animation:march 1.4s linear infinite;
}
.tape-top{margin-bottom:12px}
.tape-bottom{margin-top:12px}
@keyframes march{to{background-position:45px 0}}

/* support legs */
.leg{position:absolute;bottom:-58px;width:14px;height:64px;
  background:linear-gradient(90deg,#0c1322,#1b2742,#0c1322);
  border-radius:3px;z-index:-1}
.leg-l{left:18%}
.leg-r{right:18%}
.leg::after{content:"";position:absolute;bottom:0;left:-7px;width:28px;height:10px;
  border-radius:3px;background:#0a0f1c}

/* ---------- crane ---------- */
.crane{position:absolute;top:-70px;left:-26px;width:60%;height:80px;z-index:4}
.crane-jib{
  position:absolute;top:0;left:0;right:0;height:10px;border-radius:4px;
  background:repeating-linear-gradient(90deg,#e0a92c 0 10px,#a87a16 10px 14px);
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.crane-jib::before{ /* mast */
  content:"";position:absolute;left:0;top:-46px;width:10px;height:52px;
  background:repeating-linear-gradient(0deg,#e0a92c 0 10px,#a87a16 10px 14px);
  border-radius:3px;
}
.crane-cable{
  position:absolute;right:8%;top:8px;width:2px;height:64px;
  background:linear-gradient(#9aa6bf,#5b667e);
  transform-origin:top center;
  animation:swing 4.2s ease-in-out infinite;
}
.crane-hook{
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border:3px solid #cfd6e6;border-top:none;
  border-radius:0 0 10px 10px;
}
.crane-hook::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:#cfd6e6}
@keyframes swing{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{text-align:center;width:min(620px,92vw);display:flex;flex-direction:column;align-items:center;gap:18px}
.contact-lead{font-size:clamp(15px,3.6vw,19px);color:var(--ink);max-width:30ch;line-height:1.5}

.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:14px;
  font-weight:700;font-size:clamp(15px,3.6vw,17px);letter-spacing:.01em;
  text-decoration:none;color:#06121f;
  border:1px solid rgba(255,255,255,.18);
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease;
  will-change:transform;
}
.btn svg{flex:0 0 auto}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:active{transform:translateY(-1px) scale(.99)}

.btn-phone{
  background:linear-gradient(135deg,#3ef0a0,var(--green));
  box-shadow:0 10px 26px -10px rgba(39,208,127,.7),0 0 0 0 rgba(39,208,127,.5);
  animation:pulse-green 2.6s infinite;
}
@keyframes pulse-green{
  0%{box-shadow:0 10px 26px -10px rgba(39,208,127,.7),0 0 0 0 rgba(39,208,127,.5)}
  70%{box-shadow:0 10px 26px -10px rgba(39,208,127,.7),0 0 0 16px rgba(39,208,127,0)}
  100%{box-shadow:0 10px 26px -10px rgba(39,208,127,.7),0 0 0 0 rgba(39,208,127,0)}
}

.btn-tg{
  color:#fff;
  background:linear-gradient(135deg,#46c4ff,var(--tg));
  box-shadow:0 10px 26px -10px rgba(42,171,238,.75);
}
.btn-tg:hover{filter:brightness(1.05)}

.hint{font-size:13px;color:var(--muted);letter-spacing:.02em}

.foot{
  position:relative;z-index:3;
  text-align:center;padding:18px 16px 26px;
  font-size:12px;color:#5b667e}

/* ---------- responsive ---------- */
@media (max-width:520px){
  .billboard-wrap{margin-top:54px}
  .crane{top:-58px;left:-14px}
  .moon{width:64px;height:64px;top:6%;right:8%}
  .actions{flex-direction:column;width:100%}
  .btn{justify-content:center;width:100%}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .progress-fill{width:72%}
}