:root{
	--blue-900:#04233a;
	--blue-800:#083055;
	--blue-600:#2b75ff;
	--blue-400:#66b2ff;
	--accent:#0ea5e9;
	--surface: rgba(255,255,255,0.06);
	--max-width:1200px;
}

*{box-sizing:border-box}
html{background: var(--blue-800);}
html,body{height:100%;margin:0;scroll-behavior: smooth;overflow-x: hidden}
body{
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:#eaf2ff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	 overscroll-behavior-y: none;
	position:relative;
	overflow-x:hidden;
}
body::after {
  content: "";
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: linear-gradient(135deg, #0a1f35 0%, #04233a 25%, #061b2f 50%, #030d1a 75%, #0a1f35 100%);
  z-index: -1; /* behind everything */
  pointer-events: none;
}

.hero{
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:80px 20px 48px;
	position:relative; /* for decorative pseudo elements */
}

.hero__inner{
	width:100%;
	max-width:var(--max-width);
	display:grid;
	grid-template-columns: 1fr 360px;
	gap:48px;
	align-items:center;
	position:relative;
	z-index:1; /* make sure content sits above decorative shapes */
}

/* Decorative background shapes and subtle texture */
.hero::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:0;
	background-image:
		radial-gradient(circle at 15% 25%, rgba(66,180,255,0.25) 0%, rgba(43,117,255,0.08) 15%, transparent 28%),
		radial-gradient(circle at 85% 75%, rgba(102,178,255,0.18) 0%, rgba(43,117,255,0.05) 20%, transparent 35%),
		radial-gradient(circle at 50% 50%, rgba(14,165,233,0.08) 0%, transparent 40%),
		linear-gradient(120deg, rgba(255,255,255,0.03), rgba(66,180,255,0.02) 50%, rgba(255,255,255,0.01));
	filter: blur(50px) saturate(120%);
	mix-blend-mode: screen;
	animation: bgShift 20s ease-in-out infinite;
}

@keyframes bgShift{
	0%{transform:translate(0, 0) scale(1)}
	50%{transform:translate(15px, -10px) scale(1.02)}
	100%{transform:translate(0, 0) scale(1)}
}

.hero::after{
	content:"";
	position:absolute;
	left:-20%;
	top:50%;
	width:70%;
	height:50%;
	background: linear-gradient(45deg, rgba(20,80,150,0.08), rgba(66,180,255,0.04) 30%, rgba(43,117,255,0.02));
	transform:rotate(-22deg) skewY(-5deg);
	filter:blur(60px);
	opacity:0.7;
	pointer-events:none;
	z-index:0;
	animation: bgFloat 25s ease-in-out infinite;
}

@keyframes bgFloat{
	0%{transform:rotate(-22deg) skewY(-5deg) translateY(0)}
	50%{transform:rotate(-22deg) skewY(-5deg) translateY(-20px)}
	100%{transform:rotate(-22deg) skewY(-5deg) translateY(0)}
}

@keyframes buttonGlow{
	0%{box-shadow:0 6px 18px rgba(43,117,255,0.18), 0 0 30px rgba(43,117,255,0)}
	50%{box-shadow:0 8px 28px rgba(102,178,255,0.3), 0 0 50px rgba(43,117,255,0.2)}
	100%{box-shadow:0 6px 18px rgba(43,117,255,0.18), 0 0 30px rgba(43,117,255,0)}
}

@keyframes badgeFloat{
	0%,100%{transform:translateY(0px)}
	50%{transform:translateY(-4px)}
}

/* subtle page-wide texture (very light) */
body::before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background-image: 
		repeating-linear-gradient(45deg, rgba(255,255,255,0.006) 0 1px, transparent 1px 12px),
		radial-gradient(circle at 20% 50%, rgba(66,180,255,0.04) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(14,165,233,0.03) 0%, transparent 60%);
	z-index:0;
}

.hero__content{
	padding-right:12px;
}

/* Developer badge */
.brand-logo{width:80px;height:80px;object-fit:contain;border-radius:16px;margin-right:20px;vertical-align:middle;box-shadow:0 20px 50px rgba(11,56,94,0.5);background:linear-gradient(135deg,rgba(102,178,255,0.25),rgba(43,117,255,0.15));padding:12px;border:2px solid rgba(102,178,255,0.3)}
.brand-name{vertical-align:middle}

.hero__title{
	font-size: clamp(32px, 6vw, 56px);
	line-height:1.02;
	margin:0 0 12px 0;
	letter-spacing:-0.02em;
	color: #fff;
}

.hero__tag{
	margin:0 0 18px 0;
	color: rgba(255,255,255,0.92);
	font-weight:600;
}

.hero__desc{
	margin:0 0 20px 0;
	color: rgba(235,245,255,0.82);
	max-width:54ch;
}

.hero__ctas{display:flex;gap:12px;align-items:center}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:3px}

.btn--primary{background:linear-gradient(90deg,var(--blue-600),var(--blue-400));color:white;box-shadow:0 6px 18px rgba(43,117,255,0.18);animation:buttonGlow 3s ease-in-out infinite;position:relative}
.btn--primary::before{
	content:"";
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	border-radius:12px;
	background:radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
	opacity:0;
	transition:opacity 0.3s ease;
	pointer-events:none;
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(43,117,255,0.22), 0 0 40px rgba(102,178,255,0.25);animation-play-state:paused}
.btn--primary:hover::before{opacity:1}
.btn--primary:active{transform:translateY(-1px)}

.btn--ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.95)}
.btn--ghost:hover{background:rgba(255,255,255,0.02);transform:translateY(-2px)}

.icon{display:inline-block;vertical-align:middle}

.hero__mockup{justify-self:end}

/* Informative hero features grid */
.hero-features{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
	gap:20px;
	width:100%;
	max-width:500px;
}

.feature-box{
	background:rgba(255,255,255,0.02);
	border:1px solid rgba(102,178,255,0.15);
	border-radius:16px;
	padding:24px 16px;
	text-align:center;
	backdrop-filter:blur(10px);
	transition:all 0.3s ease;
	cursor:default;
	position:relative;
	overflow:hidden;
}

.feature-box::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 50% 0%, rgba(102,178,255,0.1) 0%, transparent 70%);
	pointer-events:none;
}

.feature-box:hover{
	background:rgba(255,255,255,0.04);
	border-color:rgba(102,178,255,0.3);
	box-shadow:0 8px 24px rgba(43,117,255,0.15);
	transform:translateY(-6px);
}

.feature-icon{
	font-size:40px;
	margin-bottom:12px;
	display:block;
	animation:float 3s ease-in-out infinite;
}

.feature-box:nth-child(1) .feature-icon{animation-delay:0s}
.feature-box:nth-child(2) .feature-icon{animation-delay:0.2s}
.feature-box:nth-child(3) .feature-icon{animation-delay:0.4s}
.feature-box:nth-child(4) .feature-icon{animation-delay:0.6s}

@keyframes float{
	0%, 100%{transform:translateY(0px)}
	50%{transform:translateY(-8px)}
}

.feature-box h4{
	font-size:14px;
	font-weight:600;
	margin:0 0 8px 0;
	color:#fff;
	position:relative;
	z-index:1;
}

.feature-box p{
	font-size:12px;
	color:rgba(235,245,255,0.7);
	margin:0;
	line-height:1.5;
	position:relative;
	z-index:1;
}

@media (max-width:1100px){
	.hero-features{max-width:100%;grid-template-columns:repeat(2, 1fr)}
	.feature-box{padding:20px 14px}
	.feature-icon{font-size:36px}
	.feature-box h4{font-size:13px}
	.feature-box p{font-size:11px}
}

@media (max-width:460px){
	.hero-features{grid-template-columns:repeat(2, 1fr);gap:16px}
	.feature-box{padding:16px 12px}
	.feature-icon{font-size:32px}
	.feature-box h4{font-size:12px}
	.feature-box p{font-size:10px}
}

.features{padding:0px 20px 72px;color:rgba(255,255,255,0.95);background:transparent;position:relative}
.features::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background-image:
		radial-gradient(circle at 25% 30%, rgba(14,165,233,0.12) 0%, transparent 30%),
		radial-gradient(circle at 75% 70%, rgba(66,180,255,0.08) 0%, transparent 40%);
	filter: blur(80px);
	pointer-events:none;
}
.features .container{max-width:var(--max-width);margin:0 auto;position:relative;z-index:1}

.features h2{margin-top:0;margin-bottom:16px}
.features > .container > p{margin-bottom:48px}

/* Apps grid */
.apps-grid{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap:24px;
	margin-top:32px;
}

.app-card{
	display:flex;
	gap:16px;
	align-items:center;
	padding:14px;
	border-radius:12px;
	background: rgba(255,255,255,0.02);
	border:1px solid rgba(255,255,255,0.03);
	transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.app-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,9,25,0.6);background:rgba(255,255,255,0.028)}

.app-icon{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:0 0 64px;background:linear-gradient(180deg,var(--blue-400),var(--blue-600));box-shadow:0 6px 18px rgba(11,56,94,0.35)}

.app-meta{flex:1}
.app-title{margin:0;font-size:16px;color:#fff}
.app-short{margin:6px 0 12px 0;color:rgba(235,245,255,0.8);font-size:13px}

.btn--small{padding:8px 12px;border-radius:10px;font-size:13px}

@media (max-width:1100px){
	.apps-grid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
}

@media (max-width:800px){
	.apps-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
}

@media (max-width:460px){
	.apps-grid{grid-template-columns:1fr}
	.app-card{align-items:flex-start}
	.app-icon{width:56px;height:56px;flex:0 0 56px}
}

/* Play Store badge style (styled and accessible) */
.play-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(0,0,0,0.55);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 20px rgba(2,9,25,0.5);transition:all 0.3s ease;position:relative}
.play-badge:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(2,9,25,0.6), 0 0 20px rgba(43,117,255,0.15)}
.play-badge:active{transform:translateY(-1px)}
.btn--primary.play-badge{animation:buttonGlow 3s ease-in-out infinite}
.btn--primary.play-badge:hover{animation-play-state:paused}
.play-badge .play-icon{flex:0 0 auto;width:20px;height:20px;object-fit:contain;filter:brightness(0) saturate(100%) invert(63%) sepia(83%) saturate(664%) hue-rotate(186deg) brightness(102%) contrast(101%)}

/* Make the play icon brighter on primary hero badge */
.btn--primary.play-badge .play-icon{filter:brightness(0) saturate(100%) invert(76%) sepia(53%) saturate(648%) hue-rotate(177deg) brightness(105%) contrast(101%)}
.play-badge__text{display:inline-flex;flex-direction:column;line-height:1}
.play-badge__text strong{font-size:11px;font-weight:600;margin:0}
.play-badge__store{font-size:13px;font-weight:700}

/* Slightly different compact appearance for small badges */
.btn--small.play-badge{padding:8px 10px;border-radius:10px}
.btn--small.play-badge .play-badge__text{flex-direction:row;gap:6px;align-items:center}
.btn--small.play-badge .play-badge__text strong{font-size:11px;font-weight:600;margin:0}
.btn--small.play-badge .play-badge__store{font-weight:600;font-size:13px}

@media (max-width:420px){
	.play-badge{padding:8px 10px}
	.play-badge__store{font-size:12px}
}

/* Responsive */
@media (max-width:900px){
	.hero__inner{grid-template-columns:1fr;gap:28px}
	.hero__mockup{justify-self:center}
}

@media (max-width:420px){
	.hero{padding:36px 16px}
	.hero__title{font-size:28px}
	.btn{padding:10px 12px}
}

/* Footer */
.footer{
	background: linear-gradient(180deg, rgba(8,48,85,0.8) 0%, var(--blue-900) 100%);
	border-top: 1px solid rgba(255,255,255,0.05);
	padding:32px 20px;
	margin-top:72px;
	color:rgba(235,245,255,0.92);
}

.footer__content{
	width:100%;
	max-width:var(--max-width);
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}

.footer__brand{
	display:flex;
	align-items:center;
	gap:12px;
}

.footer__logo{
	width:48px;
	height:48px;
	border-radius:12px;
	object-fit:contain;
	background:linear-gradient(135deg,rgba(102,178,255,0.25),rgba(43,117,255,0.15));
	padding:8px;
	border:1px solid rgba(102,178,255,0.3);
	box-shadow:0 8px 20px rgba(11,56,94,0.3);
}

.footer__name{
	margin:0;
	font-size:16px;
	font-weight:700;
	color:#fff;
}

.footer__copyright{
	margin:0;
	font-size:12px;
	color:rgba(235,245,255,0.7);
}

/* Footer responsive */
@media (max-width:600px){
	.footer{padding:24px 16px}
	.footer__content{
		flex-direction:column;
		text-align:center;
	}
	.footer__brand{
		justify-content:center;
	}
}