/* ================= SOLID CONCRETE — coming soon ================= */
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyahsans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyahsans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyahsans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url(fonts/thmanyahsans-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --orange:#E5652C;
  --bg:#0C0C0B;
  --t1:#FFFFFF;--t2:rgba(255,255,255,.62);--t3:rgba(255,255,255,.4);
  --ln:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  --px:0;--py:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg);color:var(--t1);
  font-family:"Thmanyah Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(229,101,44,.45)}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:72px 72px;background-position:center;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 45%,#000 10%,transparent 72%);
          mask:radial-gradient(ellipse 70% 60% at 50% 45%,#000 10%,transparent 72%);
}
.orb{
  position:absolute;width:820px;height:560px;left:50%;top:-360px;margin-left:-410px;
  border-radius:50%;background:var(--orange);opacity:.32;filter:blur(120px);
  animation:orb 16s ease-in-out infinite alternate;
}
@keyframes orb{to{transform:translate(80px,60px) scale(1.12)}}
.mark{
  position:absolute;left:50%;top:50%;width:min(135vw,1500px);height:auto;
  transform:translate(calc(-50% + var(--px) * 24px),calc(-46% + var(--py) * 16px));
  transition:transform 1.2s var(--ease);
}
.mk-fill{fill:var(--orange);opacity:.035}
.mk-line{fill:none;stroke:var(--orange);stroke-width:.12;opacity:.55;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3.4s var(--ease) .3s forwards}
.mk-line2{stroke-width:.06;opacity:.25;transform:translate(3px,2.4px);animation-delay:.8s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- top ---------- */
.top{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  width:min(1180px,100%);margin:0 auto;padding:26px 28px 0;
}
.lang{
  height:38px;min-width:48px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--ln2);color:var(--t1);
  font:700 13px "Thmanyah Sans",sans-serif;letter-spacing:.04em;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .3s,border-color .3s,transform .25s var(--ease);
}
.lang:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
.lang:active{transform:scale(.95)}
.lang:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- hero ---------- */
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 24px 40px;
}
.logo-v{width:128px;height:auto;margin-bottom:34px;filter:drop-shadow(0 18px 40px rgba(229,101,44,.25))}
.badge{
  display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--ln2);
  font-weight:700;font-size:14px;color:var(--t1);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(229,101,44,.7);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(229,101,44,0)}100%{box-shadow:0 0 0 0 rgba(229,101,44,0)}}

h1{
  margin:26px 0 18px;font-weight:900;font-size:clamp(46px,9vw,124px);line-height:1.3;
  font-feature-settings:"swsh" 1;
}
h1 span,h1 b{display:block}
h1 b{
  font-weight:900;padding-bottom:.08em;
  background:linear-gradient(270deg,#fff 0%,#F6A57C 42%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[dir="ltr"] h1{letter-spacing:-.035em;line-height:1.02;font-feature-settings:normal}
html[dir="ltr"] h1 b{background-image:linear-gradient(90deg,#fff 0%,#F6A57C 42%,var(--orange) 100%)}
.sub{font-weight:500;font-size:clamp(17px,2vw,22px);color:var(--t2)}

.pour{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:46px}
.pour-bar{position:relative;width:min(280px,70vw);height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pour-bar i{position:absolute;inset:0 auto 0 0;width:40%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--orange),#F6A57C);animation:pour 2.6s var(--ease) infinite}
@keyframes pour{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
html[dir="rtl"] .pour-bar i{inset:0 0 0 auto;animation-name:pour-rtl}
@keyframes pour-rtl{0%{transform:translateX(110%)}100%{transform:translateX(-260%)}}
.pour span{font-size:13.5px;font-weight:500;color:var(--t3)}

.count{display:flex;gap:10px;margin-top:34px;direction:ltr}
.count[hidden]{display:none}
.count div{
  width:84px;padding:14px 0 10px;border-radius:18px;
  background:rgba(255,255,255,.035);border:1px solid var(--ln);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.count b{display:block;font-weight:700;font-size:30px;font-variant-numeric:tabular-nums;line-height:1.1}
.count small{font-size:12px;color:var(--t3)}

/* ---------- footer ---------- */
.foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;
  padding:22px 24px calc(26px + env(safe-area-inset-bottom));
  font-size:13px;font-weight:500;color:var(--t3);
}
.foot .dot{width:3px;height:3px;border-radius:50%;background:var(--t3)}
.foot bdi{letter-spacing:.06em}
.foot .domain{letter-spacing:.16em;font-size:12px}

/* ---------- reveal ---------- */
[data-rv]{animation:rv 1.1s var(--ease) calc(var(--d,0) * 110ms + 150ms) both}
@keyframes rv{from{opacity:0;transform:translateY(24px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.swap [data-i18n]{animation:swap .5s var(--ease) both}
@keyframes swap{from{opacity:0;filter:blur(6px)}}

@media (max-width:640px){
  .top{padding:18px 18px 0}
  .logo-v{width:88px;margin-bottom:28px}
  .hero{padding:32px 20px 28px}
  .pour{margin-top:36px}
  .count div{width:70px}
  .count b{font-size:24px}
  .foot .dot2,.foot .domain{display:none}
}
@media (max-width:640px) and (max-height:760px){.logo-v{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mk-line{stroke-dashoffset:0}
}