:root {
  --sky: #1599ef;
  --deep-blue: #0758b9;
  --aqua: #70f5ff;
  --aqua-dark: #0879b9;
  --lime: #94f12b;
  --ink: #073a68;
  --white: #fff;
  --glass: rgba(225, 251, 255, 0.45);
  --line: rgba(255, 255, 255, 0.8);
  --shadow: 0 22px 60px rgba(0, 61, 126, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  background: #e6fbff;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: -4rem; padding: .8rem 1rem; background: white; border-radius: 1rem; }
.skip-link:focus { top: 1rem; }
.sky-glow { position: fixed; inset: 0 0 auto; height: 65vh; pointer-events: none; background: radial-gradient(circle at 12% 3%, rgba(255,255,255,.85), transparent 28%); z-index: 0; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; padding: 24px clamp(18px, 6vw, 96px); }
.aqua-nav {
  max-width: 1320px; height: 86px; margin: auto; padding: 10px 16px 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  color: white; border: 1px solid rgba(255,255,255,.75); border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(2,77,169,.38));
  box-shadow: inset 0 2px 1px rgba(255,255,255,.8), inset 0 -3px 8px rgba(0,50,137,.35), 0 12px 40px rgba(0,44,124,.22);
  backdrop-filter: blur(18px) saturate(1.3);
}
.brand { display: flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 800; letter-spacing: -.04em; text-shadow: 0 2px 5px rgba(0,52,120,.55); }
.brand img { width: 60px; aspect-ratio: 1; border-radius: 16px; box-shadow: inset 0 0 0 1px white, 0 4px 12px rgba(0,65,155,.35); }
.nav-links { display: flex; align-items: center; gap: clamp(22px, 4vw, 58px); font-weight: 700; font-size: 17px; }
.nav-links > a:not(.gel-button) { text-shadow: 0 2px 4px rgba(0,50,120,.7); transition: transform .2s, color .2s; }
.nav-links > a:not(.gel-button):hover { color: #d8fffd; transform: translateY(-2px); }
.menu-toggle { display: none; }
.gel-button {
  display: inline-flex; justify-content: center; align-items: center; min-height: 58px; padding: 0 30px;
  color: white; font-weight: 800; border-radius: 999px; border: 1px solid rgba(255,255,255,.95);
  background: linear-gradient(#8ff9ff 0%, #35caea 42%, #0781c9 54%, #19b9df 100%);
  box-shadow: inset 0 4px 5px rgba(255,255,255,.8), inset 0 -5px 7px rgba(0,83,156,.5), 0 5px 14px rgba(0,64,145,.35);
  text-shadow: 0 2px 3px rgba(0,78,130,.7); transition: transform .2s, filter .2s;
}
.gel-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gel-button.small { min-height: 52px; padding-inline: 28px; }

.hero { position: relative; min-height: 940px; padding: 190px clamp(24px, 8vw, 140px) 170px; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); align-items: center; gap: 40px; color: white; isolation: isolate; background: linear-gradient(180deg, #0868ce 0%, #13a9ee 44%, #8be6f1 76%, #0ea4cf 100%); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -5; background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.55), transparent 8%), radial-gradient(circle at 75% 24%, rgba(123,242,255,.45), transparent 26%); }
.hero-copy { position: relative; z-index: 3; max-width: 620px; margin-left: auto; padding-bottom: 80px; text-shadow: 0 4px 12px rgba(0,70,143,.35); }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .17em; font-size: 13px; font-weight: 900; }
.eyebrow { padding: 9px 14px; border: 1px solid rgba(255,255,255,.6); border-radius: 99px; background: rgba(0,83,165,.2); backdrop-filter: blur(8px); }
.status-light { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 28px 0 22px; font-size: clamp(58px, 6.3vw, 98px); line-height: .93; letter-spacing: -.065em; text-wrap: balance; }
.hero h1 span { color: #e6fffe; }
.hero-copy > p { max-width: 570px; font-size: clamp(21px, 2vw, 29px); line-height: 1.42; font-weight: 600; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 34px; flex-wrap: wrap; }
.app-store-button { display: inline-flex; align-items: center; gap: 13px; min-width: 240px; padding: 10px 22px; color: white; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: linear-gradient(#239bea, #075bb6); box-shadow: inset 0 3px 5px rgba(255,255,255,.55), inset 0 -5px 8px rgba(0,38,121,.42), 0 8px 18px rgba(0,48,118,.32); transition: transform .2s; }
.app-store-button:hover { transform: translateY(-3px); }
.app-store-button svg { width: 34px; height: 40px; }
.app-store-button span { font-size: 25px; font-weight: 750; line-height: 1; }
.app-store-button small { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; }
.text-link { font-weight: 800; border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 5px; }
.text-link span { color: #caff45; }

.hero-device { position: relative; z-index: 4; width: min(500px, 78%); justify-self: center; transform: rotate(8deg) translateY(20px); filter: drop-shadow(0 35px 34px rgba(0,42,96,.38)); }
.phone-shell { position: relative; padding: 11px; border-radius: 76px; background: linear-gradient(115deg, #f9ffff, #444f5d 15%, #ecfcff 43%, #303945 70%, #eaffff); box-shadow: inset 0 0 0 3px #182a40, inset 0 0 0 5px rgba(255,255,255,.7); overflow: hidden; }
.phone-shell img { width: 100%; border-radius: 65px; }
.phone-speaker { position: absolute; z-index: 2; top: 23px; left: 50%; width: 32%; height: 32px; transform: translateX(-50%); border-radius: 99px; background: #07111c; box-shadow: inset 0 -2px 3px #34414f; }
.orbit { position: absolute; z-index: -1; border: 2px solid rgba(203,255,255,.55); border-radius: 50%; box-shadow: 0 0 20px rgba(80,238,255,.4); }
.orbit-one { inset: 5% -20% 5% -20%; transform: rotate(-10deg); }
.orbit-two { inset: -5% 2% 20%; transform: rotate(25deg); }
.glass-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 25%, white, rgba(255,255,255,.2) 12%, rgba(72,223,255,.12) 58%, rgba(0,83,164,.2)); border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 0 22px rgba(255,255,255,.65), 0 12px 25px rgba(0,63,133,.15); }
.bubble-one { width: 90px; height: 90px; right: -30%; top: 18%; }
.bubble-two { width: 45px; height: 45px; left: -15%; top: 35%; }
.bubble-three { width: 65px; height: 65px; right: -16%; bottom: 8%; }
.cloud { position: absolute; z-index: -3; width: 280px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(6px); box-shadow: 70px -30px 0 18px rgba(255,255,255,.72), 140px 2px 0 5px rgba(255,255,255,.7), 35px 20px 0 rgba(255,255,255,.7); }
.cloud-a { top: 270px; left: -60px; transform: scale(.7); }
.cloud-b { top: 230px; right: -40px; transform: scale(.8); }
.hills { position: absolute; z-index: -2; left: -5%; right: -5%; bottom: 130px; height: 250px; }
.hills div { position: absolute; bottom: -70px; width: 70%; height: 260px; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 10%, #a7f148, #3ca928 52%, #087643); box-shadow: inset 0 20px 35px rgba(233,255,127,.55); }
.hills div:first-child { left: -10%; transform: rotate(5deg); }
.hills div:last-child { right: -15%; bottom: -50px; transform: rotate(-7deg); }
.waterline { position: absolute; z-index: -1; height: 170px; inset: auto 0 0; background: linear-gradient(180deg, rgba(173,255,255,.8), #05a9d2 32%, #007caf); box-shadow: inset 0 12px 10px rgba(255,255,255,.55); }
.waterline::after { content: ""; position: absolute; inset: 12px 0 auto; height: 20px; background: rgba(255,255,255,.3); filter: blur(8px); transform: skewY(-1deg); }

.feature-dock { position: relative; z-index: 5; padding: 100px clamp(24px, 8vw, 140px) 130px; text-align: center; background: radial-gradient(circle at 50% 0, rgba(68,229,255,.42), transparent 30%), linear-gradient(#087ead, #e7fbff 58%); }
.section-heading { max-width: 770px; margin: auto auto 50px; }
.kicker { color: #0077b8; }
.section-heading h2, .showcase h2, .pro-panel h2, .download h2 { margin: 12px 0 16px; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.section-heading p, .showcase-copy > p, .pro-panel p, .download p { font-size: 20px; line-height: 1.6; color: #35698c; }
.feature-grid { max-width: 1260px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.aqua-card { position: relative; min-height: 310px; padding: 38px 30px 30px; text-align: left; border: 1px solid rgba(255,255,255,.95); border-radius: 34px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(79,220,238,.4)); box-shadow: inset 0 2px 2px white, inset 0 -9px 18px rgba(0,121,174,.15), var(--shadow); backdrop-filter: blur(15px); }
.aqua-card::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 25px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, #7ffbff, white, #75f8f1); box-shadow: 0 0 8px #53eefa; }
.aqua-card .status-light { position: absolute; right: 30px; top: 42px; }
.aqua-card h3 { margin: 22px 0 10px; font-size: 28px; letter-spacing: -.03em; }
.aqua-card p { font-size: 16px; line-height: 1.55; color: #35698c; }
.feature-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 1px solid white; border-radius: 20px; color: #0875bf; font-size: 36px; background: linear-gradient(145deg, white, #6fdbed); box-shadow: inset 0 3px 5px white, inset 0 -6px 10px rgba(0,84,157,.2), 0 6px 12px rgba(0,78,145,.2); }
.disc { border-radius: 50%; background: conic-gradient(#eefcff, #84d3e4, #fff2a3, #90c6ff, #fff, #c5efff); }
.disc i { width: 19px; height: 19px; border-radius: 50%; background: #0d86bd; border: 6px solid white; }
.equalizer { gap: 4px; align-items: flex-end; padding-bottom: 17px; }
.equalizer i { width: 7px; border-radius: 3px; background: linear-gradient(#8bff40, #24d9df, #2771da); box-shadow: 0 0 3px white; }
.equalizer i:nth-child(1) { height: 16px; }.equalizer i:nth-child(2) { height: 29px; }.equalizer i:nth-child(3) { height: 42px; }.equalizer i:nth-child(4) { height: 24px; }.equalizer i:nth-child(5) { height: 34px; }

.showcase { min-height: 820px; padding: 130px clamp(24px, 9vw, 160px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; background: linear-gradient(160deg, #f4ffff 0%, #c7f3f7 55%, #87dbe9 100%); overflow: hidden; }
.showcase-copy { max-width: 590px; }
.showcase-copy ul { padding: 0; margin: 35px 0 0; list-style: none; display: grid; gap: 17px; font-size: 18px; font-weight: 700; }
.showcase-copy li span { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; color: #087d8c; background: #aaff68; box-shadow: inset 0 2px 3px white, 0 3px 7px rgba(27,115,85,.2); }
.screen-stack { position: relative; min-height: 610px; perspective: 1200px; }
.screen { position: absolute; top: 50%; left: 50%; width: min(315px, 48%); margin: 0; padding: 8px; border-radius: 46px; background: linear-gradient(135deg, white, #4b5e6e 40%, #eaffff 70%, #263848); box-shadow: 0 30px 55px rgba(0,65,106,.3); overflow: hidden; }
.screen img { border-radius: 38px; }
.screen-back { transform: translate(-105%, -50%) rotateY(15deg) rotate(-8deg); }
.screen-middle { z-index: 2; transform: translate(-45%, -54%) rotate(3deg); }
.screen-front { z-index: 3; transform: translate(18%, -45%) rotateY(-15deg) rotate(8deg); }

.pro-panel { max-width: 1280px; margin: 110px auto; min-height: 330px; padding: 52px 60px; display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 38px; border-radius: 50px; border: 1px solid white; background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.9), transparent 25%), linear-gradient(135deg, #bdfdff, #65dce8 55%, #269cd5); box-shadow: inset 0 3px 4px white, inset 0 -12px 30px rgba(0,91,155,.2), var(--shadow); }
.pro-orb { width: 160px; height: 160px; padding: 16px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, white, rgba(255,255,255,.2) 20%, rgba(30,173,225,.35)); box-shadow: inset 0 0 25px white, 0 20px 35px rgba(0,83,145,.25); }
.pro-orb img { border-radius: 32px; }
.pro-panel h2 { font-size: clamp(36px, 4vw, 58px); }
.pro-panel p { margin-bottom: 0; }

.download { position: relative; padding: 125px 24px 140px; text-align: center; color: white; background: radial-gradient(circle at 50% 30%, #48dff1, transparent 30%), linear-gradient(160deg, #0754b7, #0c9ed1 60%, #087fac); overflow: hidden; }
.download::before, .download::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; width: 500px; height: 500px; }
.download::before { left: -220px; top: -250px; }.download::after { right: -200px; bottom: -300px; }
.download > img { width: 128px; margin: 0 auto 30px; border-radius: 30px; box-shadow: 0 18px 40px rgba(0,45,106,.35); }
.download .kicker { color: #c9fffe; }
.download p { color: #d9fbff; }
.download .app-store-button { margin-top: 20px; }
footer { padding: 55px clamp(24px, 8vw, 140px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px 45px; background: #053c70; color: #c7e7f4; }
.footer-brand { color: white; font-size: 24px; }
.footer-brand img { width: 48px; border-radius: 13px; }
footer p, footer small { margin: 0; }
footer div { display: flex; gap: 25px; font-weight: 700; }
footer div a:hover { color: white; }
footer small { grid-column: 2 / 4; font-size: 12px; opacity: .75; }

@media (max-width: 1000px) {
  .hero { min-height: 1100px; grid-template-columns: 1fr; padding-top: 180px; text-align: center; }
  .hero-copy { margin: auto; padding-bottom: 0; }
  .hero-actions { justify-content: center; }
  .hero-device { width: min(390px, 68vw); transform: rotate(5deg); align-self: start; }
  .feature-grid { grid-template-columns: 1fr; max-width: 600px; }
  .showcase { grid-template-columns: 1fr; gap: 60px; }
  .showcase-copy { margin: auto; text-align: center; }
  .showcase-copy ul { display: inline-grid; text-align: left; }
  .pro-panel { margin-inline: 24px; grid-template-columns: 130px 1fr; }
  .pro-panel .gel-button { grid-column: 2; justify-self: start; }
  .pro-orb { width: 125px; height: 125px; }
}

@media (max-width: 720px) {
  .site-header { padding: 14px; }
  .aqua-nav { height: 70px; border-radius: 22px; }
  .brand { font-size: 24px; }.brand img { width: 48px; border-radius: 13px; }
  .menu-toggle { display: grid; gap: 5px; padding: 10px; background: transparent; border: 0; }
  .menu-toggle span:not(.sr-only) { width: 25px; height: 3px; border-radius: 9px; background: white; box-shadow: 0 2px 3px rgba(0,50,120,.5); }
  .nav-links { position: absolute; top: 82px; left: 12px; right: 12px; display: none; padding: 22px; flex-direction: column; gap: 20px; border: 1px solid white; border-radius: 24px; background: rgba(4,95,178,.9); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .nav-links.open { display: flex; }
  .hero { min-height: 980px; padding: 130px 22px 150px; gap: 30px; }
  .hero h1 { font-size: clamp(50px, 16vw, 76px); }
  .hero-copy > p { font-size: 19px; }
  .hero-device { width: min(300px, 72vw); }
  .bubble-one { right: -20%; }
  .feature-dock { padding: 80px 18px 100px; }
  .aqua-card { min-height: 290px; }
  .showcase { padding: 100px 22px 70px; min-height: 1030px; }
  .screen-stack { min-height: 520px; transform: scale(.82); transform-origin: top center; width: 120%; margin-left: -10%; }
  .pro-panel { padding: 42px 28px; grid-template-columns: 1fr; text-align: center; border-radius: 35px; }
  .pro-orb { margin: auto; }.pro-panel .gel-button { grid-column: 1; justify-self: center; }
  footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  footer small { grid-column: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-device { animation: float 6s ease-in-out infinite; }
  .bubble-one { animation: bob 5s ease-in-out infinite; }.bubble-two { animation: bob 4s 1s ease-in-out infinite; }.bubble-three { animation: bob 6s .5s ease-in-out infinite; }
  @keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -15px; } }
  @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 5px -18px; } }
}