:root{
--ink:#111d45;--muted:#5f6c88;--blue:#167cff;--purple:#6845f3;--line:#e4e8f2;
--container:1320px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#fff;line-height:1.5}
a{text-decoration:none;color:inherit}
.container{width:min(var(--container),calc(100% - 72px));margin:auto}
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(225,229,240,.75)}
.header-inner{height:82px;display:flex;align-items:center}
.logo-link img{display:block;width:258px;height:auto}
.nav{display:flex;gap:42px;margin-left:auto;margin-right:34px}
.nav a{font-size:17px;font-weight:600;position:relative;padding:30px 0}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:21px;height:2px;background:linear-gradient(90deg,#177dff,#7045f4);transform:scaleX(0);transition:.2s}
.nav a.active:after,.nav a:hover:after{transform:scaleX(1)}
.visit-btn{color:#fff;font-size:17px;font-weight:600;padding:12px 21px;border-radius:11px;background:linear-gradient(110deg,#1785ff,#7043f4);box-shadow:0 10px 24px rgba(74,82,222,.2)}
.menu,.mobile-nav{display:none}

/* Hero — dimensions intentionally mirror the approved 1024×1536 reference proportions */
.hero{position:relative;overflow:hidden;padding:42px 0 0;background:
radial-gradient(ellipse at 74% 20%,rgba(197,218,255,.72),transparent 34%),
radial-gradient(ellipse at 87% 4%,rgba(227,206,255,.55),transparent 27%),
linear-gradient(180deg,#fff 0%,#fff 70%,#fff9f6 100%)}
.hero:after{content:"";position:absolute;left:-10%;right:-10%;height:170px;bottom:-120px;border-radius:50% 50% 0 0;background:#fff9f6;box-shadow:0 -30px 80px rgba(255,221,213,.18)}
.hero-inner{display:grid;grid-template-columns:49% 51%;min-height:620px;position:relative;z-index:2}
.hero-copy{padding:35px 0 30px}
.eyebrow{display:inline-block;border:1px solid #a292ff;color:#6845f3;border-radius:999px;padding:5px 14px;font-size:10px;font-weight:900;letter-spacing:3px}
h1{font-size:clamp(54px,5.55vw,82px);line-height:.99;letter-spacing:-4px;margin:23px 0 22px}
h1 span{background:linear-gradient(90deg,#7150f7,#147dff);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-copy>p{max-width:630px;color:#4c5975;font-size:17px;line-height:1.58;margin:0}
.hero-buttons{display:flex;gap:16px;margin-top:29px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-weight:600;transition:.2s}
.btn:hover,.visit-btn:hover,.cta-button:hover{transform:translateY(-2px)}
.primary{color:#fff;background:linear-gradient(100deg,#6950f5,#147eff);box-shadow:0 12px 28px rgba(75,79,220,.22)}
.hero-buttons .btn{padding:13px 23px;font-size:19px}
.secondary{border:1px solid #94b0ff;background:#fff;color:#19274a;padding:12px 23px}
.secondary b{font-size:15px;color:#157eff}
.hero-features{display:grid;grid-template-columns:repeat(4,1fr);margin-top:39px}
.hero-features>div{display:flex;align-items:center;gap:9px;padding-right:13px;border-right:1px solid #e0e4ed}
.hero-features>div:last-child{border:0}
.hero-features i{font-style:normal;width:68px;height:50px;display:grid;place-items:center;border-radius:10px;font-size:31px}
.hero-features .blue{color:#1384ff;background:#edf6ff}.hero-features .green{color:#0da76e;background:#e8fbf3}.hero-features .orange{color:#f18b21;background:#fff2e4}.hero-features .violet{color:#7148e8;background:#f0ebff}
.hero-features b,.hero-features small{display:block}.hero-features b{font-size:17px;font-weight:600}.hero-features small{font-size:8px;color:#758198;margin-top:2px}
.hero-art-wrap{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;overflow:visible}
.hero-art{width:100%;max-width:650px;height:auto;object-fit:contain;object-position:center top;display:block;margin-top:0;filter:drop-shadow(0 18px 25px rgba(45,59,106,.05))}

/* Apps */
.apps{position:relative;padding:80px 0 35px;background:linear-gradient(180deg,#fff9f6 0%,#fffdfc 30%,#fff 100%)}
.section-heading{text-align:center;margin:0 auto 30px}
.section-kicker{color:#dc4597;font-size:9px;font-weight:900;letter-spacing:3px}
.section-heading h2{font-size:53px;letter-spacing:-2.2px;line-height:1;margin:9px 0 9px}
.section-heading h2 span{background:linear-gradient(90deg,#6e4cf5,#197dff);color:transparent;background-clip:text;-webkit-background-clip:text}
.section-heading p{margin:0;color:#3b4252;font-size:22px;font-weight:600}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.app-card{padding:13px;border:1px solid #e2e7f2;border-radius:18px;background:rgba(255,255,255,.95);box-shadow:0 8px 25px rgba(45,58,105,.055);transition:.25s}
.app-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(45,58,105,.1)}
.app-shot{height:258px;border-radius:12px;overflow:hidden;border:1px solid #e3e8f2;background:#eff4ff}
.app-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.app-name{display:flex;gap:10px;align-items:center;margin:13px 1px 8px}
.app-logo{width:47px;height:47px;border-radius:11px;display:grid;place-items:center;flex:none}
.app-logo.fish{background:#ffd52b;font-size:23px}.app-logo.aslam{background:#fff;border:1px solid #e1e5ed;font-size:8px;font-weight:900;color:#143365}
.app-name h3{margin:0;font-size:16px;letter-spacing:-.3px}.app-name label{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:999px;background:#edf4ff;color:#5a28c7;font-size:13px;font-weight:600}
.app-card>p{min-height:74px;margin:0 10px 14px;color:#5e6a82;font-size:15px;line-height:1.5}
.small{padding:11px 17px;font-size:14px;font-weight:600;margin-bottom:15px;margin-left:10px}
.coming{padding:13px;background:linear-gradient(145deg,#f4ecff,#fbf7ff)}
.coming-box{min-height:373px;border:1px solid #e2d3ff;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}
.coming-icon{width:61px;height:61px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#9a72ff,#bd98ff);color:#fff;font-size:29px;margin-bottom:18px;box-shadow:0 10px 23px rgba(111,72,211,.15)}
.coming h3{font-size:21px;line-height:1.25;margin:0 0 16px}.coming p{max-width:300px;min-height:0;margin:0 0 21px;color:#64708a;font-size:12px}
.soft{padding:10px 26px;background:#fff;border:1px solid #bd9cff;color:#5639bd;font-size:12px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;padding:11px 20px;border:1px solid #e7e9f0;border-radius:17px;background:#fff;box-shadow:0 8px 22px rgba(45,58,105,.04)}
.benefits>div{display:flex;align-items:center;justify-content:center;gap:11px;border-right:1px solid #e3e6ee;padding:8px}
.benefits>div:last-child{border:0}.benefits i{font-style:normal;width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:#fff0f6;color:#ed5da7}.benefits>div:nth-child(2) i{background:#e7fbf2;color:#11a36d}.benefits>div:nth-child(3) i{background:#f0ebff;color:#7147e6}.benefits>div:nth-child(4) i{background:#fff2e3;color:#ee8c28}
.benefits b,.benefits small{font-size:14px;color:#778198}.benefits b{font-size:18px;font-weight:600}.benefits small{font-size:8px;color:#778198}

/* CTA/footer */
.cta-section{padding:44px 0 52px;background:#fff}
.cta{min-height:145px;border-radius:19px;padding:27px 43px;display:flex;align-items:center;gap:28px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(105deg,#5c63f7,#df5db6 58%,#ffb68b);box-shadow:0 16px 35px rgba(102,76,217,.18)}
.cta:before{content:"";position:absolute;width:500px;height:500px;right:-110px;top:-230px;border:1px solid rgba(255,255,255,.22);border-radius:50%}
.cta-kicker{font-size:8px;letter-spacing:3px;font-weight:900}.cta h2{font-size:27px;letter-spacing:-.8px;margin:5px 0 1px}.cta h2 span{color:#fff}.cta p{font-size:14px;margin:0;opacity:.92}
.cta-button{margin-left:auto;position:relative;z-index:2;background:#fff;color:#176be8;border-radius:10px;padding:15px 25px;font-size:13px;font-weight:900;min-width:200px;text-align:center;box-shadow:0 10px 22px rgba(50,53,129,.14)}
.hand-note{font-family:"Comic Sans MS",cursive;font-size:17px;line-height:1.05;transform:rotate(-7deg);position:relative;z-index:2;min-width:85px}.hand-note u{display:block;text-decoration:none;border-bottom:2px solid #f02e86;width:70px;transform:rotate(-5deg);margin-left:12px}
.footer{border-top:1px solid #e8ebf2;background:#fff}.footer-inner{min-height:105px;display:flex;align-items:center;gap:35px}.footer-logo img{width:240px;display:block}.footer-inner nav{display:flex;gap:30px;margin:auto}.footer-inner nav a{font-size:15px;font-weight:600}.footer-right{text-align:right}.social{display:flex;justify-content:flex-end;gap:8px;margin-bottom:6px}.social a{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;color:#1474e8;font-size:10px;font-weight:900}.footer-right small{font-size:13px;color:#6d7890}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17244b;color:#fff;padding:10px 15px;border-radius:9px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1100px){
.container{width:min(var(--container),calc(100% - 42px))}
.hero-inner{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin:auto}.hero-buttons{justify-content:center}.hero-features{text-align:left}.hero-art-wrap{justify-content:center;height:500px}.hero-art{width:680px;max-width:none}
.app-grid{grid-template-columns:1fr 1fr}.coming{grid-column:1/-1}.coming-box{min-height:270px}
}
@media(max-width:760px){
.container{width:calc(100% - 28px)}.header-inner{height:70px}.logo-link img{width:205px}.nav,.visit-btn{display:none}.menu{display:flex;margin-left:auto;flex-direction:column;gap:4px;border:1px solid #dce2ef;background:#fff;border-radius:8px;padding:8px}.menu span{width:18px;height:2px;background:#263252}.mobile-nav{padding:10px 18px;border-top:1px solid #e6e9f1;background:#fff}.mobile-nav.open{display:flex;flex-direction:column}.mobile-nav a{padding:9px 0;font-size:13px;font-weight:700}
.hero{padding-top:30px}.hero-copy{padding-top:18px}.hero-copy h1{font-size:45px;letter-spacing:-2.5px}.hero-copy>p{font-size:14px}.hero-features{grid-template-columns:1fr 1fr;gap:10px}.hero-features>div{border:0}.hero-art-wrap{height:380px;margin-top:-10px}.hero-art{width:560px}
.section-heading h2{font-size:42px}.section-heading p{font-size:13px}.app-grid{grid-template-columns:1fr}.coming{grid-column:auto}.app-shot{height:230px}.benefits{grid-template-columns:1fr 1fr}.benefits>div{border:0;justify-content:flex-start}.cta{padding:25px 22px;display:block;text-align:center}.cta-button{display:inline-flex;margin:19px auto 0}.hand-note{display:none}.footer-inner{padding:25px 0;flex-direction:column}.footer-inner nav{margin:0;flex-wrap:wrap;justify-content:center;gap:18px}.footer-right{text-align:center}.social{justify-content:center}
}
@media(max-width:470px){
.logo-link img{width:185px}.hero-copy h1{font-size:39px}.hero-buttons{flex-direction:column}.hero-buttons .btn{width:100%}.hero-features{grid-template-columns:1fr}.hero-art-wrap{height:300px}.hero-art{width:455px}.benefits{grid-template-columns:1fr}
}