:root{
  --hero1:#0b86ff;
	  --hero2:#0a6eea;
	  
	  --ink:#0b1220;
	  --muted:rgba(11,18,32,.72);
	  --muted2:rgba(11,18,32,.58);
	  
	  --white:#ffffff;
	  --card:#ffffff;
	  --stroke:rgba(11,18,32,.12);
	  
	  --accent:#ffd700;
	  --teal:#18d4c8;
	  
	  --shadow:0 22px 60px rgba(0,0,0,.14);
	  --shadow2:0 14px 40px rgba(0,0,0,.10);
	  
	  --radius:22px;
	  --max:1120px;
	  --gutter:22px;
	  
	  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Geist", "Segoe UI",
	  Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
	}
	
	*{box-sizing:border-box}
	html,body{height:100%}
	body{
	  margin:0;
	  font-family:var(--font);
			color:var(--ink);
				background:var(--white);
					overflow-x:hidden;
				  }
				  a{color:inherit;text-decoration:none}
				  
				  .wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
					  
					  /* TOPBAR (sits on hero background) */
					  .topbar{
						position:sticky;
						top:0;
						z-index:20;
						
						/* Solid blue instead of transparent gradient */
						background:#0b86ff;
						
						/* Optional: remove glass effect */
						backdrop-filter:none;
						
						border-bottom:1px solid rgba(255,255,255,.18);
						color:#fff;
					  }
					  
					  .appIcon {
						height: 76px !important;
						width: 76px !important;
						border-radius: 24%; /* iOS-style icon rounding */
						box-shadow:
						  0 8px 24px rgba(0,0,0,0.10),
						  0 2px 6px rgba(0,0,0,0.08);
						display: block;
						overflow: hidden;
					  }
					  
					  .nav{
						display:flex; align-items:center; justify-content:space-between;
						padding:16px 0;
						gap:16px;
					  }
					  .brand{
						display:flex; align-items:center; gap:10px;
						font-weight:800;
						letter-spacing:.2px;
					  }
					  
					  
					  .appLogo{
						width:200px; height:40px;
						overflow:visible;
						flex:0 0 auto;
					  }
					  
					  /* Your real icon */
					  .appIcon{
						width:40px; height:40px;
						overflow:visible;
						box-shadow:0 10px 24px rgba(0,0,0,.18);
						flex:0 0 auto;
					  }
					  .appIcon img{width:100%; height:100%; object-fit:cover; display:block
					  }
					  
					  /* Container positioning */
					  .lang-switcher {
						position: relative;
						display: inline-block;
						font-family: inherit; 
					  }
					  
					  /* The visible button */
					  .lang-toggle {
						background: transparent;
						border: none;
						color: inherit; /* Matches your nav text colour */
						font-size: 1rem;
						cursor: pointer;
						padding: 8px 12px;
						display: flex;
						align-items: center;
						gap: 6px;
					  }
					  
					  /* Smaller chevron */
					  .chevron {
						font-size: 0.7em;
					  }
					  
					  /* The dropdown menu */
					  .lang-menu {
						position: absolute;
						top: 100%;
						right: 0; /* Aligns dropdown to the right edge */
						background-color: #ffffff;
						min-width: 120px;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
						border-radius: 6px;
						padding: 8px 0;
						margin: 0;
						list-style: none;
						
						/* Hidden state for smooth transition */
						opacity: 0;
						visibility: hidden;
						transform: translateY(-10px);
						transition: all 0.2s ease;
						z-index: 1000;
					  }
					  
					  /* Show menu on hover */
					  .lang-switcher:hover .lang-menu {
						opacity: 1;
						visibility: visible;
						transform: translateY(0);
					  }
					  
					  /* Menu links */
					  .lang-menu li a {
						display: block;
						padding: 8px 16px;
						color: #333333;
						text-decoration: none;
						font-size: 0.9rem;
						transition: background-color 0.1s ease;
					  }
					  
					  /* Hover state for links */
					  .lang-menu li a:hover {
						background-color: #f5f5f5;
					  }
					  
					  .navlinks{
						display:flex; gap:18px; align-items:center;
						color:rgba(255,255,255,.86);
						font-size:14px;
					  }
					  .navlinks a{opacity:.92}
					  .navlinks a:hover{opacity:1}
					  
					  .cta{display:flex; gap:10px; align-items:center}
					  .btn{
						display:inline-flex; align-items:center; justify-content:center;
						gap:10px;
						padding:10px 14px;
						border-radius:999px;
						font-weight:600;
						font-size:14px;
						border:1px solid rgba(255,255,255,.24);
						background:rgba(255,255,255,.12);
						box-shadow:0 10px 24px rgba(0,0,0,.12);
						transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
						cursor:pointer;
						user-select:none;
						white-space:nowrap;
						color:#fff;
					  }
					  .btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30)}
					  .btn.primary{
						color:#0b3a2f;
						background:linear-gradient(180deg, #ffe96b, var(--accent));
							  border-color:rgba(0,0,0,.08);
							  box-shadow:0 18px 40px rgba(0,0,0,.18);
							}
							.btn.ghost{background:transparent; box-shadow:none}
							
							/* HERO */
							main.hero{
							  /* single smooth gradient (no tiles) */
							  background:linear-gradient(180deg, var(--hero1), var(--hero2));
								  color:#fff;
								}
								.heroInner{padding:50px 24px 56px}
								
								.heroGrid{
								  display:grid;
								  grid-template-columns: 600px 500px;
								  gap:44px;
								  align-items:center;
								  min-height:560px;
								}
								
								.shotWrap{
								  /* optional: matches your blue example vibe */
								  padding: clamp(24px, 6vw, 72px) 0;
								}
								
								.shotStage{
								  position: relative;
								  width: min(850px, 80vw);
								  margin: 0 auto;
								  
								  /* Control the “canvas” height without hardcoding */
								  aspect-ratio: 16 / 9;
								}
								
								/* Base phone styling */
								
								.shotStage{
								  transform: scale(0.75);
								  transform-origin: top center;
								}
								
								.phone{
								  position: absolute;
								  height: auto;
								  display: block;
								  
								  /* iPhone screenshot corners */
								  border-radius: 28px;
								  
								  /* Realistic soft shadow */
								  filter: drop-shadow(0 18px 28px rgba(0,0,0,.22))
									drop-shadow(0 6px 10px rgba(0,0,0,.12));
								  
								  /* Helps with transforms looking crisp */
								  transform-origin: center center;
								  will-change: transform;
								}
								
								/* Front phone (left) */
								.phone-front{
								  width: clamp(280px, 34vw, 380px);
								  left: 6%;
								  top: 6%;
								  z-index: 2;
								  transform: rotate(-2deg) translate(0, 0);
								}
								
								/* Back phone (right) */
								.phone-back{
								  width: clamp(280px, 34vw, 380px);
								  left: 46%;
								  top: 14%;
								  z-index: 1;
								  transform: rotate(2deg) translate(0, 0);
								  opacity: 0.98;
								}
								
								/* Tighten on small screens so they don’t spill */
								@media (max-width: 800px){
								  .shotStage{ aspect-ratio: 4 / 5; }
								  
								  .phone-front{
									left: -20%;
									top: 8%;
									transform: rotate(-2deg) scale(0.98);
								  }
								  
								  .phone-back{
									left: 48%;
									top: 22%;
									transform: rotate(2deg) scale(0.98);
								  }
								}
								
								
								.badge{
								  display:inline-flex; align-items:center; gap:10px;
								  background:rgba(255,255,255,.14);
								  border:1px solid rgba(255,255,255,.18);
								  padding:8px 12px;
								  border-radius:999px;
								  font-weight:600;
								  font-size:13px;
								  color:rgba(255,255,255,.86);
								  width:fit-content;
								  box-shadow:0 14px 32px rgba(0,0,0,.12);
								}
								.badge .dot{
								  width:10px; height:10px; border-radius:999px;
								  background:rgba(255,255,255,.92);
								  position:relative;
								}
								.badge .dot:after{
								  content:"";
								  position:absolute; inset:-5px;
								  border-radius:999px;
								  border:1px solid rgba(255,255,255,.35);
								  opacity:.7;
								}
								
								h1{
								  margin:18px 0 14px;
								  line-height:0.95;
								  letter-spacing:-.03em;
								  font-size:clamp(40px, 5vw, 78px);
								}
								.accentWord{
								  color:var(--accent);
										text-shadow:0 16px 40px rgba(0,0,0,.14);
									  }
									  .sub{
										font-size:clamp(16px, 1.2vw, 18px);
										color:rgba(255,255,255,.84);
										line-height:1.55;
										max-width:46ch;
										margin-bottom:22px;
									  }
									  .heroBtns{
										display:flex; flex-wrap:wrap; gap:12px;
										align-items:center;
										margin:10px 0 18px;
									  }
									  .micro{
										display:flex; gap:14px; flex-wrap:wrap; align-items:center;
										color:rgba(255,255,255,.68);
										font-size:13px;
										margin-top:6px;
									  }
									  .micro span{
										display:inline-flex; align-items:center; gap:8px;
										background:rgba(255,255,255,.10);
										border:1px solid rgba(255,255,255,.14);
										padding:8px 10px;
										border-radius:999px;
									  }
									  .icon{width:16px; height:16px; display:inline-block; opacity:.95}
									  
									  .announce{
										margin-top:22px;
										display:flex;
										align-items:center;
										justify-content:space-between;
										gap:14px;
										padding:14px 14px 14px 16px;
										border-radius:18px;
										background:rgba(255,255,255,.12);
										border:1px solid rgba(255,255,255,.18);
										box-shadow:var(--shadow2);
											  max-width:520px;
											  position:relative;
											  overflow:hidden;
											  color:#fff;
											}
											.announce:before{
											  content:"";
											  position:absolute; inset:-1px;
											  background: radial-gradient(700px 200px at 30% 0%, rgba(255,215,0,.18), transparent 55%),
												radial-gradient(600px 220px at 90% 120%, rgba(24,212,200,.16), transparent 60%);
											  opacity:.9;
											  pointer-events:none;
											}
											.announce > *{position:relative}
											.announce .left{display:flex; flex-direction:column; gap:4px}
											.announce .kicker{
											  font-size:12px;
											  color:rgba(255,255,255,.78);
											  display:flex; align-items:center; gap:8px;
											  font-weight:800;
											}
											.announce .title{
											  font-size:16px;
											  font-weight:600;
											  color:#fff;
											  letter-spacing:-.01em;
											}
											.announce .go{
											  width:36px; height:36px; border-radius:999px;
											  border:1px solid rgba(255,255,255,.22);
											  background:rgba(255,255,255,.14);
											  display:grid; place-items:center;
											  flex:0 0 auto;
											}
											
											/* Screenshot block (replaces phone mock) */
											.shotWrap{
											  position:relative;
											  display:flex;
											  align-items:center;
											  justify-content:center;
											  min-height:520px;
											}
											.shot{
											  width:min(420px, 92%);
											  border-radius:36px;
											  overflow:hidden;
											  box-shadow:0 30px 80px rgba(0,0,0,.28);
											  border:1px solid rgba(255,255,255,.22);
											  background:rgba(255,255,255,.08);
											}
											.shot img{
											  width:100%;
											  height:auto;
											  display:block;
											}
											
											/* White sections */
											section{padding:48px 0; background:#fff}
											.sectionTitle{
											  font-size:34px;
											  letter-spacing:-.02em;
											  margin:0 0 10px;
											  color:var(--ink);
												  }
												  .sectionSub{
													color:var(--muted);
														  line-height:1.6;
														  max-width:72ch;
														  margin:0 0 28px;
														}
														
														.grid3{
														  display:grid;
														  grid-template-columns:repeat(3,1fr);
														  gap:14px;
														}
														.panel{
														  background:var(--card);
																border:1px solid var(--stroke);
																	border-radius:22px;
																	padding:18px 18px 16px;
																	box-shadow:0 18px 44px rgba(0,0,0,.06);
																	overflow:hidden;
																	position:relative;
																  }
																  .panel h3{margin:10px 0 6px; font-size:18px; letter-spacing:-.01em; color:var(--ink)}
																.panel p{margin:0; color:var(--muted); line-height:1.55; font-size:14px}
																	  
																	  .step{
																		display:flex; align-items:center; gap:10px;
																		color:rgba(11,18,32,.78);
																		font-weight:600;
																		letter-spacing:.02em;
																		font-size:12px;
																		text-transform:uppercase;
																		opacity:.95;
																	  }
																	  .step .num{
																		width:26px; height:26px; border-radius:10px;
																		display:grid; place-items:center;
																		background:rgba(11,18,32,.06);
																		border:1px solid rgba(11,18,32,.10);
																	  }
																	  
																	  .split{
																		display:grid;
																		grid-template-columns: 1.1fr .9fr;
																		gap:18px;
																		align-items:start;
																		margin-top:18px;
																	  }
																	  .list{display:flex; flex-direction:column; gap:10px}
																	  .li{
																		display:flex; gap:12px; align-items:flex-start;
																		background:#fff;
																		border:1px solid rgba(11,18,32,.10);
																		border-radius:18px;
																		padding:14px 14px;
																		color:var(--muted);
																			  line-height:1.55;
																			  font-size:14px;
																			  box-shadow:0 12px 28px rgba(0,0,0,.04);
																			}
																			.check{
																			  width:22px; height:22px;
																			  border-radius:8px;
																			  background:linear-gradient(180deg, #ffe96b, var(--accent));
																					color:rgba(0,0,0,.60);
																					display:grid; place-items:center;
																					flex:0 0 auto;
																					margin-top:1px;
																					box-shadow:0 14px 28px rgba(0,0,0,.08);
																				  }
																				  
																				  .faq{display:grid; grid-template-columns:1fr; gap:10px; max-width:780px}
																				  details{
																					background:#fff;
																					border:1px solid rgba(11,18,32,.10);
																					border-radius:18px;
																					padding:14px 16px;
																					box-shadow:0 14px 34px rgba(0,0,0,.04);
																				  }
																				  summary{cursor:pointer; font-weight:600; letter-spacing:-.01em; list-style:none; color:var(--ink)}
																						summary::-webkit-details-marker{display:none}
																						details p{margin:10px 0 0; color:var(--muted); line-height:1.6; font-size:14px}
																							  
																							  footer{
																								padding:30px 0 40px;
																								border-top:1px solid rgba(11,18,32,.10);
																								background:#fff;
																							  }
																							  .foot{
																								display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
																								color:var(--muted2);
																									  font-size:13px;
																									}
																									.foot a{opacity:.9}
																									.foot a:hover{opacity:1}
																									
																									@media (max-width: 940px){
																									  .heroGrid{grid-template-columns:1fr; gap:28px; min-height:auto}
																									  .shotWrap{min-height:420px}
																									  .navlinks{display:none}
																									  .split{grid-template-columns:1fr}
																									  .grid3{grid-template-columns:1fr}
																									  .announce{max-width:100%}
																									}