/* Extracted styles for Maraway Landing Page */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:#06030f;color:#fff;overflow-x:hidden;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:99;padding:16px 48px;display:flex;align-items:center;justify-content:space-between;background:rgba(6,3,15,0.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05);}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.logo-sphere{width:34px;height:34px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;}
.logo-sphere img{width:22px;height:22px;object-fit:contain;}
.logo-name{font-family:'Syne',sans-serif;font-size:15px;font-weight:800;color:#fff;letter-spacing:-0.3px;}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:14px;transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-btn{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;border:none;padding:10px 22px;border-radius:50px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;transition:opacity .2s,transform .2s;}
.nav-btn:hover{opacity:.88;transform:translateY(-1px);}

/* HERO */
#hero{min-height:100vh;display:flex;align-items:center;padding:100px 48px 60px;position:relative;overflow:hidden;}
.hero-glow-1{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.28) 0%,transparent 65%);top:-150px;right:-150px;pointer-events:none;}
.hero-glow-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 65%);bottom:-100px;left:0;pointer-events:none;}
.hero-inner{max-width:1100px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2;}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);border-radius:50px;padding:5px 14px 5px 8px;font-size:12px;font-weight:600;color:#C084FC;letter-spacing:.5px;margin-bottom:22px;}
.hero-pill-dot{width:6px;height:6px;border-radius:50%;background:#A855F7;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
h1{font-family:'Syne',sans-serif;font-size:clamp(42px,5.5vw,70px);font-weight:800;line-height:1.0;letter-spacing:-2px;margin-bottom:20px;}
.grad{background:linear-gradient(90deg,#C084FC,#60A5FA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-p{font-size:17px;color:rgba(255,255,255,.65);line-height:1.75;max-width:460px;margin-bottom:36px;}
.hero-cta-wrap{display:flex;gap:14px;align-items:center;}
.btn-main{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;border:none;padding:15px 34px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;display:inline-block;transition:transform .2s,box-shadow .2s;}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(124,58,237,.4);}
.btn-ghost{color:rgba(255,255,255,.6);font-size:14px;text-decoration:none;display:flex;align-items:center;gap:6px;transition:color .2s;}
.btn-ghost:hover{color:#fff;}
.btn-ghost svg{transition:transform .2s;}
.btn-ghost:hover svg{transform:translateX(3px);}

/* Sphere */
.sphere-wrap{position:relative;width:320px;height:320px;margin:0 auto;}
.sphere-aura{position:absolute;inset:-50px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.22) 0%,transparent 65%);animation:aura 3.5s ease-in-out infinite;}
@keyframes aura{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.08);opacity:1;}}
.sphere-svg{position:absolute;inset:0;width:100%;height:100%;}
.sphere-ball{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 70px rgba(124,58,237,.35);z-index:2;}
.sphere-ball img{width:136px;height:136px;object-fit:contain;}
.badge{position:absolute;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:8px 13px;font-size:12px;font-weight:500;white-space:nowrap;z-index:3;display:flex;align-items:center;gap:7px;}
.bdot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.b1{top:20px;left:-40px;}
.b2{bottom:55px;left:-50px;}
.b3{top:55px;right:-50px;}
.b4{bottom:20px;right:-30px;}

/* FEATURES */
#features{padding:110px 48px;}
.sec-wrap{max-width:1100px;margin:0 auto;}
.sec-label{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#A855F7;margin-bottom:14px;}
.sec-title{font-family:'Syne',sans-serif;font-size:clamp(28px,3.8vw,44px);font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:12px;}
.sec-sub{font-size:16px;color:rgba(255,255,255,.55);line-height:1.7;max-width:480px;margin-bottom:56px;}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.05);border-radius:22px;overflow:hidden;}
.feat{background:#06030f;padding:38px 32px;transition:background .3s;cursor:default;}
.feat:hover{background:rgba(124,58,237,.06);}
.feat-num{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;color:rgba(168,85,247,.5);letter-spacing:2px;margin-bottom:16px;}
.feat-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:20px;}
/* feature color utilities */
.feat-icon--green{background:rgba(52,211,153,.1)}
.feat-icon--yellow{background:rgba(250,204,21,.1)}
.feat-icon--blue{background:rgba(96,165,250,.1)}
.feat-icon--purple{background:rgba(168,85,247,.1)}
.feat-icon--red{background:rgba(248,113,113,.1)}

.feat h3{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.2;}
.feat p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.7;}
.feat-tag{display:inline-block;margin-top:14px;font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:4px 11px;border-radius:20px;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);}

/* ABOUT */
#about{padding:110px 48px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.about-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.about-left .sec-sub{margin-bottom:32px;}
.team-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.tm{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px 16px;transition:border-color .3s;}
.tm:hover{border-color:rgba(168,85,247,.3);}
.tm-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1.5px solid rgba(168,85,247,.3);}
.tm-av img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.tm-name{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;color:#C084FC;line-height:1.2;}
.tm-role{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px;}
.about-right{display:flex;flex-direction:column;gap:16px;}
.mission-card{background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.2);border-radius:18px;padding:32px;}
.mission-card h3{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;margin-bottom:12px;}
.mission-card p{font-size:14px;color:rgba(255,255,255,.6);line-height:1.75;}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat-c{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;text-align:center;}
.stat-n{font-family:'Syne',sans-serif;font-size:28px;font-weight:800;background:linear-gradient(90deg,#C084FC,#60A5FA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;}
.stat-l{font-size:12px;color:rgba(255,255,255,.45);margin-top:5px;}

/* WAITLIST */
#waitlist{padding:120px 48px;text-align:center;position:relative;overflow:hidden;}
.wl-glow{position:absolute;width:800px;height:500px;border-radius:50%;background:radial-gradient(ellipse,rgba(107,33,168,.22) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.wl-inner{position:relative;z-index:2;max-width:620px;margin:0 auto;}
.wl-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:26px;padding:64px 52px;}
.wl-title{font-family:'Syne',sans-serif;font-size:clamp(32px,4.5vw,52px);font-weight:800;line-height:1.05;letter-spacing:-1.5px;margin-bottom:16px;}
.wl-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:40px;}
.wl-form{display:flex;gap:0;max-width:440px;margin:0 auto 18px;border-radius:50px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);}
.wl-input{flex:1;background:transparent;border:none;padding:15px 22px;font-size:14px;color:#fff;font-family:'DM Sans',sans-serif;outline:none;}
.wl-input::placeholder{color:rgba(255,255,255,.35);}
.wl-submit{background:linear-gradient(135deg,#7C3AED,#2563EB);color:#fff;border:none;padding:14px 26px;font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;border-radius:50px;margin:3px;transition:opacity .2s;}
.wl-submit:hover{opacity:.88;}
.wl-note{font-size:12px;color:rgba(255,255,255,.35);}
.success-msg{display:none;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);border-radius:12px;padding:14px 20px;font-size:14px;color:#34D399;margin-top:16px;}

/* FOOTER */
footer{padding:36px 48px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.ft-right{display:flex;gap:24px;flex-wrap:wrap;}
.ft-right a{color:rgba(255,255,255,.4);font-size:13px;text-decoration:none;transition:color .2s;}
.ft-right a:hover{color:#fff;}
.ft-copy{font-size:12px;color:rgba(255,255,255,.25);width:100%;text-align:center;margin-top:4px;}

/* DIVIDER */
.divider{width:56px;height:3px;background:linear-gradient(90deg,#A855F7,#60A5FA);border-radius:2px;margin:18px 0 28px;}

/* small utilities */
.logo-text{display:flex;flex-direction:column;margin-left:8px;}
.logo-sub{font-size:12px;color:rgba(255,255,255,.45);} 

/* Product image in hero */
.hero-product{display:block;width:100%;max-width:420px;height:auto;border-radius:14px;box-shadow:0 36px 100px rgba(2,6,23,0.65);object-fit:cover;margin:0 auto;transition:transform .45s cubic-bezier(.2,.9,.25,1),box-shadow .35s;transform-origin:center center;}
.hero-product:hover{transform:translateY(-6px) rotate(-1deg) scale(1.02);box-shadow:0 48px 120px rgba(2,6,23,0.7);}
.product-wrap{position:relative;width:420px;height:auto;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:6px 0;}

/* Badge tweaks - place relative to product and respond to size */
.badge{transition:transform .25s ease,opacity .25s ease;}
.product-wrap .b1{top:-12px;left:-36px;}
.product-wrap .b2{bottom:-12px;left:-36px;}
.product-wrap .b3{top:-12px;right:-36px;}
.product-wrap .b4{bottom:-12px;right:-36px;}

/* subtle reflection under product */
.product-wrap::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:70%;height:28px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));filter:blur(10px);opacity:.35;pointer-events:none}

/* Responsive adjustments */
@media (max-width:980px){
	.hero-inner{grid-template-columns:1fr;gap:36px;padding-bottom:18px}
	.product-wrap{width:320px}
	.hero-product{max-width:320px}
	.hero-p{max-width:100%}
}
@media (max-width:520px){
	nav{padding:12px 20px}
	#hero{padding:80px 20px}
	.hero-pill{font-size:11px;padding:4px 12px}
	.hero-inner{grid-template-columns:1fr;gap:22px}
	.product-wrap{width:260px}
	.hero-product{max-width:260px;border-radius:12px}
	.product-wrap .b1,.product-wrap .b2,.product-wrap .b3,.product-wrap .b4{display:none}
}

/* Additional responsive improvements */
@media (max-width:980px){
	.nav-links{gap:18px}
	.nav-links a{font-size:13px}
	.nav-btn{padding:10px 18px;font-size:13px}
	.sec-wrap{padding:0 20px}
	#features{padding:60px 20px}
	#about{padding:60px 20px}
	#waitlist{padding:70px 20px}
	.feat-grid{grid-template-columns:repeat(2,1fr);gap:18px}
}

@media (max-width:680px){
	nav{padding:10px 18px}
	.nav-links{display:flex;flex-wrap:wrap;gap:12px}
	.hero-pill{font-size:11px}
	h1{font-size:clamp(28px,6vw,44px)}
	.feat-grid{grid-template-columns:1fr}
	.feat{padding:26px}
	.wl-box{padding:36px 22px}
	.wl-form{max-width:100%;padding:0 10px}
}

/* Ensures images never overflow their containers */
img{max-width:100%;height:auto;display:block}

@media (max-width:420px){
	.nav-links{display:none}
	.nav-btn{padding:8px 12px;font-size:13px}
	.hero-p{font-size:15px}
	.btn-main{padding:12px 20px;font-size:14px}
	.sec-title{font-size:22px}
	.stat-n{font-size:22px}
	footer{padding:20px}
	.ft-right{justify-content:center;width:100%;margin-bottom:8px}
}

/* small touch: reduce large gaps on very narrow screens */
@media (max-width:360px){
	#hero{padding:60px 14px}
	.hero-inner{gap:18px}
}

/* Mobile nav toggle and menu */
.nav-toggle{display:none;border:0;background:transparent;padding:8px;cursor:pointer;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center}
.nav-toggle .bar{display:block;width:22px;height:2px;background:rgba(255,255,255,.9);border-radius:2px;position:relative;transition:transform .25s,opacity .2s}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:'';position:absolute;left:0;width:22px;height:2px;background:rgba(255,255,255,.9);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle .bar::before{top:-7px}
.nav-toggle .bar::after{top:7px}
.nav-toggle[aria-expanded='true'] .bar{transform:rotate(45deg)}
.nav-toggle[aria-expanded='true'] .bar::before{transform:rotate(-90deg) translateX(-1px);top:0}
.nav-toggle[aria-expanded='true'] .bar::after{opacity:0}

.mobile-nav{display:none;position:fixed;inset:64px 0 0 0;background:rgba(6,3,15,0.98);z-index:9999;padding:28px 20px;flex-direction:column;gap:18px;align-items:center;overflow:auto}
.mobile-nav.open{display:flex;animation:slideDown .28s ease-out}
@keyframes slideDown{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
.mobile-nav a{color:#fff;font-size:18px;text-decoration:none;padding:12px 8px;border-radius:8px;width:100%;text-align:center}
.mobile-nav a:hover{background:rgba(255,255,255,.03)}

/* show toggle on small widths */
@media (max-width:420px){
  .nav-toggle{display:flex}
  .nav-links{display:none}
}

/* Visually hidden utility for screen-reader-only text */
.visually-hidden{
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0; padding: 0; margin: -1px;
}