/* Pyaww landing — hand-written, zero dependencies, no network calls. */
:root{
  --bg:#07070b;
  --card:#10111a;
  --line:rgba(255,255,255,.07);
  --ink:#eef0f6;
  --ink2:rgba(238,240,246,.66);
  --ink3:rgba(238,240,246,.40);
  --azure:#4da6f4;
  --azure-deep:#1461e0;
  --red:#ff453a;
  --radius:16px;
  --max:1060px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans Myanmar", "Myanmar Sangam MN", "Myanmar Text", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(77,166,244,.35)}
a{color:var(--azure); text-decoration:none}
a:hover{text-decoration:underline}
section{scroll-margin-top:24px}
img{max-width:100%}

/* ---- bilingual visibility ---- */
body.lang-en .my,
body.lang-my .en { display:none !important; }
.my { line-height:1.85; }

/* ---- top bar ---- */
.top{
  max-width:var(--max); margin:0 auto; padding:22px 28px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-weight:600; font-size:15px; letter-spacing:.01em}
.brand:hover{text-decoration:none; opacity:.85}
.brand-wave{width:24px; height:12px; display:block}
.top-nav{display:flex; align-items:center; gap:18px}
.langswitch{
  display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.03);
}
.langswitch button{
  appearance:none; border:0; background:transparent; color:var(--ink3);
  font:600 12.5px/1 var(--font); padding:8px 13px; cursor:pointer; letter-spacing:.02em;
}
.langswitch button[aria-pressed="true"]{background:rgba(77,166,244,.18); color:var(--ink)}
.langswitch button:hover{color:var(--ink)}
.gh{color:var(--ink2); font-size:13.5px}
.gh:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative; text-align:center; padding:84px 28px 64px; overflow:hidden}
.glow{
  position:absolute; inset:-20% -10% auto; height:640px; pointer-events:none;
  background:
    radial-gradient(560px 300px at 50% 30%, rgba(77,166,244,.16), transparent 70%),
    radial-gradient(900px 480px at 50% 0%, rgba(20,97,224,.12), transparent 72%);
}
.wave-hero{position:relative; width:min(430px, 72vw); display:block; margin:0 auto 30px}
.wave-path{filter:drop-shadow(0 0 26px rgba(77,166,244,.35))}
@keyframes draw{to{stroke-dashoffset:0}}
.hero h1{
  position:relative; margin:0; font-size:clamp(42px, 7vw, 64px); line-height:1.1;
  font-weight:700; letter-spacing:-.02em;
}
.hero h1 .always{font-weight:400; color:var(--ink2); font-size:.72em}
.tagline{position:relative; margin:16px 0 0; font-size:clamp(18px, 2.6vw, 23px); color:var(--ink); font-weight:500}
.tagline .my{font-weight:500}
.sub{position:relative; margin:16px auto 0; max-width:640px; color:var(--ink2); font-size:16.5px}
.cta{position:relative; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:30px 0 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:12px; font-weight:600; font-size:15.5px;
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn.primary{
  color:#fff; background:linear-gradient(135deg, #58a8f8, #1461e0);
  box-shadow:0 10px 34px rgba(35,110,235,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{
  color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.fine{position:relative; margin:18px 0 0; font-size:13px; color:var(--ink3)}
.fine.dim{margin-top:8px}
.fine a{color:var(--ink2); border-bottom:1px solid rgba(238,240,246,.25)}
.fine a:hover{color:var(--ink); text-decoration:none}

/* ---- how it works ---- */
.how{max-width:var(--max); margin:0 auto; padding:76px 28px 8px; text-align:center}
h2{margin:0 0 12px; font-size:clamp(24px, 3.4vw, 30px); letter-spacing:-.01em; font-weight:650}
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:34px; text-align:left;
}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px;
}
.step h3{margin:18px 0 8px; font-size:17px; font-weight:650}
.step p{margin:0; color:var(--ink2); font-size:14.5px}
.cap-holder{height:56px; display:flex; align-items:center}
.keycap{
  width:56px; height:56px; display:grid; place-items:center;
  background:linear-gradient(#181926, #10111a); border:1px solid rgba(255,255,255,.13);
  border-radius:12px; font-size:24px; font-weight:600; color:var(--ink);
  box-shadow:0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
}
.wave-red{width:38px; height:auto; display:block}
.wave-red path{animation:recpulse 2.1s ease-in-out infinite}
@keyframes recpulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,69,58,.45))}
  50%{filter:drop-shadow(0 0 9px rgba(255,69,58,.7))}
}

/* ---- panel shot ---- */
.panel-sec{max-width:var(--max); margin:0 auto; padding:76px 28px 0; text-align:center}
.lede{max-width:620px; margin:8px auto 0; color:var(--ink2)}
.shot{margin:40px auto 0; padding:0}
.shot img{
  display:block; margin:0 auto; width:min(400px, 88vw); height:auto;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.6));
}

/* ---- features ---- */
.features{max-width:var(--max); margin:0 auto; padding:88px 28px 0; text-align:center}
.grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:34px; text-align:left;
}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px}
.card h3{margin:0 0 8px; font-size:16.5px; font-weight:650}
.card p{margin:0; color:var(--ink2); font-size:14.5px}

/* ---- privacy ---- */
.privacy{
  margin-top:88px; padding:64px 28px; text-align:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:radial-gradient(600px 260px at 50% 20%, rgba(77,166,244,.08), transparent 70%);
}
.privacy h2{margin:0 auto 14px; max-width:760px; font-size:clamp(26px, 4vw, 36px); font-weight:700; letter-spacing:-.015em}
.privacy p{max-width:680px; margin:0 auto; color:var(--ink2)}

/* ---- install ---- */
.install{max-width:760px; margin:0 auto; padding:84px 28px 0; text-align:left}
.install h2{text-align:center}
.install ol{
  list-style:none; counter-reset:step; margin:30px 0 0; padding:0;
}
.install li{
  counter-increment:step; position:relative; padding:0 0 0 52px; margin:20px 0;
  color:var(--ink2);
}
.install li::before{
  content:counter(step); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-size:14px; font-weight:650; color:#fff;
  background:linear-gradient(135deg, #58a8f8, #1461e0);
  box-shadow:0 4px 14px rgba(35,110,235,.35);
}
.install strong{color:var(--ink); font-weight:600}
.install .fine{text-align:center; margin-top:34px}

/* ---- footer ---- */
footer{
  max-width:var(--max); margin:0 auto; padding:56px 28px 72px; text-align:center;
  color:var(--ink3); font-size:13px;
}
footer p{max-width:720px; margin:0 auto 16px}
.foot-links{display:flex; gap:22px; justify-content:center; margin:0 0 16px}
.foot-links a{color:var(--ink2)}
footer .dim{color:var(--ink3)}

/* ---- motion / responsive ---- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}
@media (max-width: 860px){
  .steps, .grid{grid-template-columns:1fr}
  .hero{padding-top:64px}
  .top{padding:18px 20px 0}
}