:root{
    --bg:#080b0c; --bg2:#020809;
    --card:#0d1416; --card2:#0a1112;
    --line:rgba(52,214,196,.14);
    --teal:#34d6c4; --teal2:#5fe3d4; --amber:#f0a850;
    --text:#eef2f1; --muted:#a7b4b3; --dim:#6f7c7b;
    --grad:linear-gradient(100deg,var(--teal2),var(--amber));
    --display:'Space Grotesk',sans-serif;
    --body:'Outfit',sans-serif;
    --mono:'JetBrains Mono',monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:#04080a}
  body{
    font-family:var(--body); color:var(--text);
    display:flex; justify-content:center;
    -webkit-font-smoothing:antialiased;
  }
  .app{
    width:100%; max-width:430px; min-height:100vh;
    background:
      radial-gradient(120% 60% at 50% 0%, #0c1517 0%, var(--bg) 42%, var(--bg2) 100%);
    position:relative; overflow:hidden;
    padding-bottom:34px;
  }

  /* top bar */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px 10px;
  }
  .brand{display:flex; align-items:center; gap:9px}
  .brand img{width:30px; height:30px; border-radius:8px; display:block}
  .brand b{font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.01em}
  .langwrap{position:relative}
  .langbtn{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04);
    border:1px solid var(--line); border-radius:10px; padding:7px 11px; cursor:pointer;
    color:var(--text); font-family:var(--body)}
  .langbtn .lc{font-family:var(--mono); font-size:11px; color:var(--teal2); letter-spacing:.05em}
  .langbtn .ln{font-size:13px}
  .langbtn .chev{font-size:10px; color:var(--dim)}
  .langmenu{position:absolute; right:0; top:calc(100% + 8px); min-width:178px;
    max-height:64vh; overflow-y:auto;
    background:#0c1416; border:1px solid var(--line); border-radius:12px; padding:6px;
    display:none; z-index:30; box-shadow:0 18px 44px -14px rgba(0,0,0,.65)}
  [dir="rtl"] .langmenu{right:auto; left:0}
  [dir="rtl"] .eyebrow::before{order:2}
  .langmenu.open{display:block}
  .langmenu button{display:flex; align-items:center; gap:14px; width:100%; background:none;
    border:0; cursor:pointer; padding:10px 11px; border-radius:8px; text-align:left;
    transition:background .15s}
  .langmenu button:hover{background:rgba(255,255,255,.05)}
  .langmenu .lc{font-family:var(--mono); font-size:11px; color:var(--dim);
    letter-spacing:.06em; min-width:38px}
  .langmenu .ln{font-size:14px; color:var(--text)}
  .langmenu button.on .lc, .langmenu button.on .ln{color:var(--teal2)}

  /* hero */
  .hero{position:relative}
  /* smoke mp4 as the top strip (replaces the old coffee.jpg); text sits below */
  .hero-img{position:relative; height:248px; overflow:hidden}
  .hero-img img, .hero-img video{width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block}
  .hero-img::after{content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(8,11,12,.15) 0%,rgba(8,11,12,.05) 38%,rgba(8,11,12,.85) 82%,var(--bg) 100%)}
  .hero-body{padding:0 20px; margin-top:-26px; position:relative; z-index:2; text-align:center}
  .slogan{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--teal); opacity:.85; margin-bottom:12px}
  .offer{font-family:var(--display); font-weight:700; font-size:42px; line-height:1.1;
    letter-spacing:-.02em; padding-bottom:.14em;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stack{font-family:var(--display); font-weight:600; font-size:18px; color:var(--text);
    margin-top:8px; letter-spacing:-.01em}
  .vit-line{margin-top:16px; font-size:14.5px; color:var(--muted); line-height:1.5}
  .num{font-family:var(--mono); font-weight:600; color:var(--teal2);
    text-shadow:0 0 14px rgba(95,227,212,.45)}
  .num.amberglow{color:var(--amber); text-shadow:0 0 14px rgba(240,168,80,.4)}
  .tag{margin-top:14px; font-size:13px; color:var(--dim); letter-spacing:.01em}

  .slogan-top{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; text-align:center; color:var(--teal); opacity:.92; padding:4px 20px 14px}
  /* sections */
  section{padding:0 20px}
  .gap{margin-top:34px}
  .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--dim); margin-bottom:14px; display:flex; align-items:center; gap:10px}
  .eyebrow::before{content:""; width:18px; height:1px; background:var(--teal); opacity:.6}

  .card{background:linear-gradient(180deg,var(--card),var(--card2));
    border:1px solid var(--line); border-radius:16px; padding:18px 17px; margin-bottom:12px}
  .card h3{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em;
    display:flex; align-items:center; justify-content:center; gap:9px}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--teal2);
    box-shadow:0 0 10px var(--teal2)}
  .dot.a{background:var(--amber); box-shadow:0 0 10px var(--amber)}
  .card p{margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.55}
  .cdiv{height:1px; background:var(--line); margin:15px 0 12px}
  .card p.cmuted{margin-top:0; font-size:12.5px; color:var(--dim); line-height:1.55}

  /* vit block */
  .vit-card{background:
      radial-gradient(120% 130% at 0% 0%, rgba(52,214,196,.08), transparent 60%),
      linear-gradient(180deg,var(--card),var(--card2));
    border:1px solid var(--line); border-radius:18px; padding:20px 18px}
  .vit-card p{font-size:14px; color:var(--muted); line-height:1.6}
  .vit-stats{display:flex; gap:12px; margin-top:16px}
  .stat{flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line);
    border-radius:13px; padding:14px 12px; text-align:center}
  .stat .n{font-family:var(--mono); font-weight:600; font-size:21px; color:var(--teal2);
    text-shadow:0 0 16px rgba(95,227,212,.55)}
  .stat .n.a{color:var(--amber); text-shadow:0 0 16px rgba(240,168,80,.5)}
  .stat .n{white-space:nowrap}
  .stat .n .u{font-size:13px; font-weight:500; opacity:.82; margin-left:1px}
  .stat .l{font-size:11px; color:var(--dim); margin-top:4px; letter-spacing:.02em}


  /* register */
  .reg{background:linear-gradient(180deg,#0e1618,#0a1011);
    border:1px solid var(--line); border-radius:18px; padding:20px 18px}
  .reg .field{margin-bottom:11px}
  .reg label{font-size:11px; color:var(--dim); font-family:var(--mono); letter-spacing:.04em;
    display:block; margin-bottom:6px}
  .reg input{width:100%; background:#070d0e; border:1px solid var(--line); border-radius:11px;
    color:var(--text); font-family:var(--body); font-size:15px; padding:13px 14px; outline:none;
    transition:border-color .2s, box-shadow .2s}
  .reg input::placeholder{color:#54625f}
  .reg input:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(52,214,196,.16)}
  .cta{width:100%; margin-top:8px; border:0; cursor:pointer;
    font-family:var(--display); font-weight:600; font-size:15.5px; color:#06100f;
    background:var(--grad); border-radius:13px; padding:16px 14px; letter-spacing:-.005em;
    box-shadow:0 10px 30px -10px rgba(52,214,196,.5); transition:transform .12s, filter .2s}
  .cta:hover{filter:brightness(1.05)}
  .cta:active{transform:translateY(1px)}
  .cta:focus-visible{outline:2px solid var(--teal2); outline-offset:3px}
  .reg-note{text-align:center; font-size:12px; color:var(--dim); margin-top:11px}

  footer{padding:26px 22px 0; text-align:center}
  footer p{font-size:11px; color:#566260; line-height:1.6}
  footer .cc{margin-top:12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:#3f4a48}
  .foot-links{display:grid; grid-template-columns:max-content max-content; justify-content:center; column-gap:26px; row-gap:13px; margin-top:18px}
  .flink{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--teal2);
    text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:color .2s}
  .flink:hover{color:var(--teal)}
  .flink:focus-visible{outline:2px solid var(--teal2); outline-offset:3px}
  .flink .ar{color:var(--dim); font-size:10px}

  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
    .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}
    @keyframes rise{to{opacity:1; transform:none}}
  }

/* registration status (added for the live Mini App) */
.reg-status{margin-top:10px; font-size:12.5px; text-align:center; min-height:16px; color:var(--muted); line-height:1.4}
.reg-status.ok{color:var(--teal2)}
.reg-status.err{color:#ff8a7a}
.cta[disabled]{opacity:.6; cursor:not-allowed}

/* hide scrollbar (mini app scrolls by touch; keeps the surface clean) */
html{scrollbar-width:none; -ms-overflow-style:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0; height:0; display:none}

/* success screen (after registration) */
.success{background:linear-gradient(180deg,#0e1618,#0a1011); border:1px solid var(--line); border-radius:18px; padding:32px 24px; text-align:center}
.success .check{width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:27px; color:#06100f; background:var(--grad); box-shadow:0 0 28px rgba(95,227,212,.5)}
.succ-title{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em}
.succ-body{margin:10px auto 0; font-size:14px; color:var(--muted); line-height:1.55; max-width:340px}
.succ-email{margin:14px auto 0; max-width:340px; font-family:var(--mono); font-size:14px; color:var(--teal2); word-break:break-all; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:rgba(52,214,196,.07)}
.succ-note{margin:14px auto 0; max-width:340px; font-size:12.5px; color:var(--dim); line-height:1.5}
.succ-gift{margin-top:16px; font-family:var(--mono); font-size:19px}
.success .cta{display:block; width:100%; text-align:center; text-decoration:none; margin-top:20px}