/* ============================================================
   PAKADLO.COM — Landing Page Styles
   ============================================================ */
:root{--green:#7ed957;--black:#070907;--card:#111712;--line:#1e2c20;--text:#eef6ea;--muted:#a3b89e;}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Noto Sans Devanagari','Segoe UI',Arial,sans-serif;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--text);line-height:1.7;min-height:100vh;overflow-x:hidden;}
.wrap{max-width:1000px;margin:0 auto;padding:0 18px;}
a{text-decoration:none;color:var(--green);}
::selection{background:var(--green);color:#08130a;}

/* ============ SPLASH SCREEN ============
   SAFE VERSION: CSS khud 2.2 second baad splash hatati hai —
   agar JavaScript band bhi ho jaye, page phir bhi dikhega. */
#splash{position:fixed;inset:0;background:#050705;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
        animation:splashgone .7s ease 2.2s forwards;}
@keyframes splashgone{to{opacity:0;visibility:hidden;}}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none;animation:none;}
.slogo{position:relative;width:min(250px,60vw);}
.slogo img{width:100%;display:block;animation:zoom 1.2s cubic-bezier(.2,.8,.2,1);position:relative;z-index:2;}
.slogo .ring{position:absolute;inset:-16%;border-radius:50%;border:1.5px solid rgba(126,217,87,.25);animation:ringpulse 1.6s ease infinite;}
.slogo .ring.r2{inset:-28%;border-color:rgba(126,217,87,.12);animation-delay:.3s;}
@keyframes ringpulse{0%{transform:scale(.85);opacity:1;}100%{transform:scale(1.15);opacity:0;}}
@keyframes zoom{from{transform:scale(.55);opacity:0;}to{transform:scale(1);opacity:1;}}
#splash .bar{width:170px;height:4px;background:#1c2b1c;border-radius:99px;overflow:hidden;}
#splash .bar div{height:100%;width:0;background:var(--green);border-radius:99px;animation:load 1.8s ease forwards;}
@keyframes load{to{width:100%;}}
#splash .st{color:var(--muted);font-size:13px;letter-spacing:5px;animation:stin 1.6s ease;text-indent:5px;}
@keyframes stin{0%{opacity:0;letter-spacing:12px;}60%{opacity:.7;}100%{opacity:1;}}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:99;background:rgba(7,9,7,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1000px;margin:0 auto;padding:11px 18px;display:flex;justify-content:space-between;align-items:center;}
.nl{display:flex;align-items:center;gap:10px;}
.nl img{height:42px;width:auto;}
.nl b{font-size:20px;color:#fff;letter-spacing:.3px;}
.nl b span{color:var(--green);}
.soon-pill{background:rgba(126,217,87,.1);border:1px solid var(--green);color:var(--green);font-size:11.5px;font-weight:800;letter-spacing:2px;padding:7px 15px;border-radius:99px;animation:blink 2.2s ease infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ============ HERO ============ */
.hero{position:relative;text-align:center;padding:70px 18px 66px;overflow:hidden;}
.hero .glow{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(105px);opacity:.25;background:var(--green);top:-170px;left:50%;transform:translateX(-50%);animation:pulse 5s ease infinite;}
@keyframes pulse{0%,100%{opacity:.2;transform:translateX(-50%) scale(1);}50%{opacity:.32;transform:translateX(-50%) scale(1.08);}}

.wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(70px,18vw,210px);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(126,217,87,.06);letter-spacing:8px;white-space:nowrap;pointer-events:none;user-select:none;}

.part{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:0;animation:rise linear infinite;pointer-events:none;}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0;}10%{opacity:.5;}90%{opacity:.25;}100%{transform:translateY(-85vh) scale(.4);opacity:0;}}

.logobox{position:relative;display:inline-block;}
.logobox .halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(126,217,87,.18),transparent 65%);animation:pulse 4s ease infinite;}
.logobox img.logo{width:min(320px,72vw);display:block;position:relative;filter:drop-shadow(0 14px 45px rgba(126,217,87,.35));animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

.hero h1{font-size:clamp(26px,5vw,42px);color:#fff;line-height:1.35;margin-top:24px;font-weight:800;}
.shine{background:linear-gradient(90deg,#7ed957 20%,#eaffdf 40%,#7ed957 60%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite;}
@keyframes shine{to{background-position:200% center;}}
.hero p{color:var(--muted);font-size:16px;max-width:540px;margin:14px auto 0;}
.hero p b{color:var(--green);}
.divider{width:70px;height:3px;background:var(--green);border-radius:99px;margin:26px auto 0;opacity:.8;}
.scroll-hint{margin:34px auto 0;width:26px;height:42px;border:2px solid var(--line);border-radius:99px;position:relative;}
.scroll-hint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:9px;border-radius:99px;background:var(--green);transform:translateX(-50%);animation:wheel 1.6s ease infinite;}
@keyframes wheel{0%{opacity:1;top:8px;}70%{opacity:0;top:22px;}100%{opacity:0;top:8px;}}

/* ============ MYSTERY CARDS ============ */
section{padding:46px 18px 60px;position:relative;}
.cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:920px;margin:0 auto;}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 26px;flex:1 1 240px;max-width:292px;text-align:center;transition:.25s;position:relative;overflow:hidden;}
.mcard::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 180px at 50% -40%,rgba(126,217,87,.12),transparent);opacity:0;transition:.25s;}
.mcard:hover{transform:translateY(-6px);border-color:var(--green);}
.mcard:hover::before{opacity:1;}
.mcard .num{position:absolute;top:14px;left:18px;color:#2a3a28;font-weight:900;font-size:15px;letter-spacing:2px;}
.mcard .ico{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:31px;margin:0 auto 16px;background:rgba(126,217,87,.12);border:1px solid var(--line);}
.mcard b{color:#fff;font-size:17.5px;display:block;}
.mcard p{color:var(--muted);font-size:13.5px;margin-top:9px;}

/* ============ COMING SOON STRIP ============ */
.strip{text-align:center;padding:30px 18px 40px;}
.strip .big{font-size:clamp(30px,6vw,52px);font-weight:900;letter-spacing:1px;color:#fff;}
.strip .big span{color:var(--green);}
.strip .dots{color:var(--green);letter-spacing:6px;font-size:22px;margin-top:6px;animation:blink 1.6s ease infinite;}
.strip p{color:var(--muted);font-size:14px;margin-top:14px;max-width:430px;margin-left:auto;margin-right:auto;}

/* ============ MARQUEE ============ */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#0a0d09;padding:12px 0;}
.mq{display:flex;gap:38px;white-space:nowrap;width:max-content;animation:mq 22s linear infinite;}
.mq span{color:#2f402c;font-weight:900;font-size:15px;letter-spacing:4px;}
.mq span.on{color:var(--green);}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ FOOTER ============ */
footer{padding:36px 18px 24px;background:#070907;text-align:center;}
footer img{width:min(190px,50vw);}
.f-contact{color:var(--muted);font-size:13.5px;margin-top:14px;}
.f-contact b{color:#fff;}
.copyright{color:#3f4f3d;font-size:11.5px;margin-top:18px;letter-spacing:.5px;}