/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#04081a;--bg2:#06091e;
  --card:#0b1226;--card2:#0d1528;
  --b1:rgba(96,165,250,.1);--b2:rgba(96,165,250,.22);--b3:rgba(96,165,250,.4);
  --cyan:#60a5fa;--cyan2:#93c5fd;--blue:#3b82f6;--indigo:#6366f1;
  --text:#f0f4ff;--sub:#7a9bbf;--dim:#3d5878;--dimmer:#263a52;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}

/* ===== KEYFRAMES ===== */
@keyframes up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes glow-border{0%,100%{box-shadow:0 0 0 0 rgba(96,165,250,0),0 20px 40px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 3px rgba(96,165,250,.12),0 20px 40px rgba(0,0,0,.3)}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes slide-in-right{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes scale-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer-flow{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}}
@keyframes orbit{0%{transform:rotate(0deg) translateX(180px) rotate(0deg)}100%{transform:rotate(360deg) translateX(180px) rotate(-360deg)}}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

/* ===== NAV ===== */
nav{position:fixed;top:0;inset-inline:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 3.5rem;
  background:rgba(4,8,26,.72);backdrop-filter:blur(28px);
  border-bottom:1px solid var(--b1)}
.nav-logo{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;text-decoration:none;color:var(--text)}
.nav-back{display:inline-flex;align-items:center;gap:.45rem;
  color:var(--sub);text-decoration:none;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;border:1px solid var(--b1);padding:.32rem .85rem;
  border-radius:7px;transition:all .2s}
.nav-back svg{display:block;flex-shrink:0}
.nav-back:hover{color:var(--cyan2);border-color:var(--b2);background:rgba(96,165,250,.06)}

/* ===== HERO ===== */
.hero{padding:9rem 2rem 5rem;position:relative;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(96,165,250,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(96,165,250,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 50%,black,transparent)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.oa{width:600px;height:600px;background:rgba(59,130,246,.09);top:-200px;left:-150px}
.ob{width:400px;height:400px;background:rgba(99,102,241,.07);bottom:-100px;right:-80px}
.oc{width:300px;height:300px;background:rgba(96,165,250,.05);top:30%;right:10%}

.hero-tag{position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--b2);border-radius:6px;padding:.3rem .85rem;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:2.2rem;
  animation:up .6s var(--ease) both}
.hero-tag-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);
  animation:blink 2s infinite;flex-shrink:0}

.app-icon-wrap{position:relative;z-index:1;display:inline-block;
  margin-bottom:2rem;animation:scale-in .7s var(--ease) .1s both}
.app-icon{width:100px;height:100px;border-radius:22px;
  background:linear-gradient(135deg,var(--blue),var(--indigo));
  border:2px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;margin:0 auto;
  box-shadow:0 20px 50px rgba(59,130,246,.3),0 0 0 1px rgba(96,165,250,.15);
  animation:glow-border 3s ease-in-out infinite}

.hero-title{position:relative;z-index:1;
  font-size:clamp(2.5rem,7vw,6rem);font-weight:800;
  line-height:.95;letter-spacing:-.04em;
  background:linear-gradient(160deg,#fff 25%,var(--cyan2) 60%,var(--blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:up .7s var(--ease) .2s both}
.hero-sub{position:relative;z-index:1;
  font-size:clamp(.9rem,2vw,1.2rem);font-weight:600;color:var(--cyan);
  letter-spacing:.04em;margin-top:.5rem;
  animation:up .7s var(--ease) .3s both}
.hero-desc{position:relative;z-index:1;
  max-width:540px;margin:.9rem auto 0;color:var(--sub);
  font-size:.875rem;line-height:1.9;
  animation:up .7s var(--ease) .4s both}

/* Hero meta badges */
.hero-meta{position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  flex-wrap:wrap;margin-top:1.8rem;
  animation:up .7s var(--ease) .5s both}
.meta-badge{display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(96,165,250,.06);border:1px solid var(--b1);
  border-radius:8px;padding:.35rem .85rem;
  font-size:.73rem;font-weight:600;color:var(--sub)}
.meta-badge svg{color:var(--cyan);flex-shrink:0}
.meta-live{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.18);color:#4ade80}
.meta-dot{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:pulse-dot 1.8s ease-in-out infinite}

/* ===== DIV ===== */
.div{height:1px;background:linear-gradient(90deg,transparent,var(--b1),transparent)}

/* ===== SHARED ===== */
section{padding:5rem 2rem}
.wrap{max-width:1080px;margin:0 auto}
.sec-tag{display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--b2);border-radius:6px;padding:.28rem .8rem;
  font-size:.67rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:1.2rem}
.sec-h{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;
  line-height:1.1;letter-spacing:-.025em;margin-bottom:.5rem}
.sec-h em{font-style:normal;color:var(--cyan2)}
.sec-p{color:var(--sub);font-size:.875rem;line-height:1.9;max-width:520px;margin-bottom:3rem}

/* ===== FEATURED IMAGE ===== */
#featured{padding-top:3rem;padding-bottom:4rem}
.feat-frame{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid var(--b2);box-shadow:0 40px 80px rgba(0,0,0,.4);
  animation:scale-in .8s var(--ease) both}
.feat-frame img{width:100%;display:block;border-radius:20px}
.feat-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),var(--indigo),transparent)}
.feat-glow{position:absolute;inset:-40px;
  background:radial-gradient(ellipse at center,rgba(96,165,250,.12),transparent 65%);
  pointer-events:none;z-index:-1}

/* ===== SCREENSHOTS ===== */
#screenshots{padding-bottom:5rem}
.ss-header{margin-bottom:2rem}

.ss-scroll-wrap{position:relative}
.ss-scroll-wrap::before,.ss-scroll-wrap::after{content:'';position:absolute;top:0;bottom:0;
  width:80px;pointer-events:none;z-index:10}
.ss-scroll-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ss-scroll-wrap::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}

.ss-track{display:flex;gap:1.2rem;overflow-x:auto;
  padding:1.5rem 2rem 2rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--b2) transparent;
  -webkit-overflow-scrolling:touch}
.ss-track::-webkit-scrollbar{height:4px}
.ss-track::-webkit-scrollbar-track{background:transparent}
.ss-track::-webkit-scrollbar-thumb{background:var(--b2);border-radius:10px}
.ss-track::-webkit-scrollbar-thumb:hover{background:var(--b3)}

.ss-item{flex-shrink:0;scroll-snap-align:start;
  width:220px;position:relative;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--b1);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  cursor:pointer}
.ss-item:hover{transform:translateY(-8px) scale(1.02);
  box-shadow:0 30px 60px rgba(0,0,0,.45);border-color:var(--b2)}
.ss-item img{width:100%;display:block}
.ss-item::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 70%,rgba(4,8,26,.6));
  opacity:0;transition:opacity .3s}
.ss-item:hover::after{opacity:1}
.ss-num{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);
  background:rgba(4,8,26,.75);backdrop-filter:blur(12px);
  border:1px solid var(--b1);border-radius:6px;
  padding:.2rem .55rem;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;color:var(--cyan2);
  opacity:0;transition:opacity .3s}
.ss-item:hover .ss-num{opacity:1}

/* Scroll hint */
.ss-hint{display:flex;align-items:center;gap:.6rem;
  color:var(--dimmer);font-size:.72rem;font-weight:600;letter-spacing:.08em;
  margin-top:.5rem;padding-left:2rem}
.ss-hint svg{color:var(--dim)}

/* ===== LIGHTBOX ===== */
#lightbox{display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(4,8,26,.95);backdrop-filter:blur(24px);
  align-items:center;justify-content:center;flex-direction:column;gap:1.2rem}
#lightbox.open{display:flex}
#lightbox img{max-width:min(380px,85vw);max-height:85vh;
  border-radius:20px;border:1px solid var(--b2);
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  animation:scale-in .3s var(--ease)}
.lb-close{position:absolute;top:1.5rem;right:1.5rem;
  width:42px;height:42px;border-radius:50%;
  background:rgba(96,165,250,.1);border:1px solid var(--b2);
  color:var(--sub);font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s}
.lb-close:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#f87171}
.lb-nav{display:flex;gap:1rem}
.lb-btn{display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(96,165,250,.08);border:1px solid var(--b2);
  border-radius:9px;padding:.5rem 1.2rem;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.78rem;
  color:var(--sub);cursor:pointer;transition:all .2s}
.lb-btn:hover{background:rgba(96,165,250,.15);border-color:var(--b3);color:var(--cyan2)}
.lb-counter{color:var(--dimmer);font-size:.75rem;font-weight:600;align-self:center}

/* ===== LANGUAGES ===== */
#languages{background:var(--bg2);border-top:1px solid var(--b1);border-bottom:1px solid var(--b1)}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem;
  margin-top:2rem}
.lang-card{background:var(--card2);border:1px solid var(--b1);border-radius:13px;
  padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.9rem;
  transition:all .2s var(--ease);cursor:default;
  animation:up .5s var(--ease) both}
.lang-card:hover{border-color:var(--b2);background:rgba(96,165,250,.05);
  transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.lang-emoji{font-size:1.8rem;line-height:1;flex-shrink:0}
.lang-info{}
.lang-from{font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);margin-bottom:.1rem}
.lang-to{font-size:.88rem;font-weight:700;color:var(--text)}
.lang-arrow-ic{margin-left:auto;color:var(--dimmer);flex-shrink:0;font-size:.9rem}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;
  border-radius:9px;padding:.75rem 1.65rem;cursor:pointer;border:none;
  transition:transform .2s,box-shadow .2s,background .2s}
.btn-p{background:var(--blue);color:#fff;box-shadow:0 2px 18px rgba(59,130,246,.28)}
.btn-p:hover{background:var(--indigo);transform:translateY(-2px);box-shadow:0 6px 26px rgba(59,130,246,.38)}
.btn-g{background:transparent;color:var(--cyan2);border:1px solid var(--b2)}
.btn-g:hover{background:rgba(96,165,250,.07);border-color:var(--b3);transform:translateY(-2px)}

/* ===== FOOTER ===== */
footer{background:var(--bg2);border-top:1px solid var(--b1);padding:2.8rem 2rem;text-align:center}
.f-name{font-size:1.2rem;font-weight:800;letter-spacing:-.01em;color:var(--text);display:block;margin-bottom:.8rem}
.f-rule{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--b2),transparent);margin:1rem auto}
.f-copy{color:var(--dimmer);font-size:.78rem;line-height:2.2;font-weight:500}
.f-copy strong{color:var(--dim)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  nav{padding:.9rem 1.4rem}
  section{padding:3.5rem 1.2rem}
  .ss-item{width:170px}
  .lang-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .hero-title{letter-spacing:-.03em}
}