@font-face {
  font-family:LocalUI;
  src:local("Aptos"),local("Segoe UI");
  font-display:swap
}
:root {
  --navy:#082a4b;
  --teal:#00b8b8;
  --deep-teal:#007f83;
  --ink:#17354f;
  --muted:#536777;
  --gold:#9b6c26;
  --line:#dae6e8;
  --green:#087b49;
  --cream:#faf8f2;
  --text-body:clamp(1.0625rem,.98rem + .28vw,1.25rem);
  --text-feature:clamp(1.0625rem,1rem + .18vw,1.1875rem);
  --text-detail:clamp(.9375rem,.9rem + .18vw,1.0625rem);
  --text-action:clamp(1rem,.95rem + .22vw,1.1875rem);
  --text-callout:clamp(1.125rem,1rem + .4vw,1.375rem)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:108px
}
body {
  margin:0;
  font-family:LocalUI,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  width:30px;
  height:30px;
  flex-shrink:0
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid #a76b0b;
  outline-offset:5px
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  line-height:1.16;
  color:var(--navy)
}
.container {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  background:var(--navy);
  color:white;
  padding:12px 20px;
  z-index:20
}
.skip-link:focus {
  top:12px
}
.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:#ffffffed;
  border-bottom:1px solid #edf0ed;
  backdrop-filter:blur(16px)
}
.navigation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:92px;
  gap:30px
}
.brand {
  width:238px;
  flex-shrink:0
}
.navigation nav {
  display:flex;
  align-items:center;
  gap:31px;
  font-size:min(1.125rem,var(--text-action));
  font-weight:600
}
.navigation nav>a:not(.button) {
  padding:12px 0
}
.navigation nav>a:not(.button):hover {
  color:var(--deep-teal)
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  border-radius:7px;
  font-size:var(--text-action);
  font-weight:650;
  line-height:1.3;
  padding:18px 23px;
  transition:background .2s,transform .2s,box-shadow .2s
}
.button svg {
  width:24px;
  height:24px
}
.button-whatsapp {
  background:var(--green);
  color:#fff;
  box-shadow:0 6px 18px #087b4915
}
.button-whatsapp:hover {
  background:#05683c;
  transform:translateY(-2px);
  box-shadow:0 10px 25px #087b4925
}
.nav-cta {
  padding:12px 18px
}
.menu-toggle {
  display:none;
  font-size:16px;
  min-height:44px
}
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 92% 8%,#f4bc7330,transparent 47%),linear-gradient(120deg,#fff 12%,#fcfdfb 58%,#edf8f6 100%)
}
.hero-glow {
  position:absolute;
  right:-90px;
  top:-250px;
  width:900px;
  height:900px;
  background:radial-gradient(circle,#edaa5a20 0,transparent 66%);
  z-index:-1
}
.hero-layout {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:45px;
  padding-top:64px;
  padding-bottom:66px;
  min-height:690px
}
.launch-label {
  font-size:clamp(.875rem,.82rem + .15vw,1rem);
  font-weight:750;
  letter-spacing:1px;
  color:#855c21;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:23px;
  line-height:1.6
}
.launch-label>span {
  font-size:22px;
  line-height:1
}
.occasion {
  font-size:var(--text-body);
  color:#79633e;
  margin-bottom:4px
}
.launch-intro {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  font-size:var(--text-body);
  letter-spacing:-.3px;
  margin:17px 0 24px
}
.launch-lockup {
  display:block;
  width:240px;
  max-width:100%;
  flex-shrink:0
}
.launch-lockup img {
  width:100%;
  height:auto
}
h1 {
  font-size:clamp(34px,3.2vw,48px);
  letter-spacing:-1.8px;
  font-weight:700;
  max-width:620px;
  line-height:1.1
}
h1 em {
  font-style:normal;
  color:var(--deep-teal)
}
.hero-description {
  font-size:var(--text-body);
  line-height:1.75;
  color:var(--muted);
  max-width:520px;
  margin-top:24px
}
.hero-cta {
  margin-top:28px;
  font-size:var(--text-action)
}
.hero-cta>span {
  margin-left:6px;
  font-size:19px
}
.hero-bottom {
  border-top:1px solid #b9c9c862;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:20px;
  gap:20px;
  font-size:var(--text-detail);
  font-weight:700;
  letter-spacing:.5px;
  line-height:1.6
}
.hero-bottom-detail {
  font-size:var(--text-detail);
  font-weight:400;
  letter-spacing:0
}
.hero-bottom-detail>span {
  color:var(--deep-teal);
  margin-left:18px
}
.product-stage {
  position:relative;
  align-self:center;
  min-width:0;
  height:490px;
  display:flex;
  align-items:center;
  padding-bottom:15px
}
.festival-geometry {
  position:absolute;
  width:560px;
  max-width:none;
  height:auto;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
  opacity:.35;
  pointer-events:none
}
.hero-artwork {
  position:absolute;
  top:-110px;
  right:-70px;
  width:430px;
  max-width:none;
  height:auto;
  opacity:.25;
  pointer-events:none;
  user-select:none;
  z-index:-1
}
.laptop {
  position:relative;
  width:100%;
  filter:drop-shadow(0 20px 15px #082a4b1f);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)
}
.laptop-screen {
  border:9px solid #173249;
  border-bottom-width:12px;
  border-radius:15px 15px 5px 5px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 0 0 1px #466278
}
.app-top {
  height:43px;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
  background:#fff;
  border-bottom:1px solid #e3ebee
}
.app-top img {
  width:120px
}
.app-top>span:not(.avatar) {
  font-size:8px;
  margin-left:auto;
  white-space:nowrap
}
.avatar {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  font-size:9px;
  background:#e3f1ed;
  color:var(--deep-teal)
}
.app-body {
  display:flex;
  min-height:276px
}
.app-sidebar {
  width:102px;
  flex-shrink:0;
  background:#082a4b;
  color:#d7e8ef;
  padding:15px 7px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:8px
}
.app-sidebar>span {
  padding:4px 6px
}
.sidebar-selected {
  border-radius:3px;
  background:#12546b;
  color:white
}
.app-sidebar .sidebar-bottom {
  margin-top:auto;
  color:#9ab9c6;
  font-size:7px
}
.app-content {
  padding:22px 18px 20px;
  flex:1;
  background:#f7fafb
}
.app-eyebrow {
  font-size:6px;
  letter-spacing:1.2px;
  color:var(--deep-teal);
  font-weight:700
}
.app-heading {
  font-size:21px;
  line-height:1.25;
  font-weight:650;
  letter-spacing:-.6px;
  margin-top:9px
}
.module-tiles {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px
}
.module-tiles>div {
  display:flex;
  align-items:center;
  gap:7px;
  background:white;
  border:1px solid #e3ebed;
  border-radius:5px;
  padding:10px 7px;
  font-size:7px;
  white-space:nowrap
}
.module-tiles svg {
  width:19px;
  height:19px;
  color:#008c8d
}
.journey-label {
  font-size:6px;
  letter-spacing:1px;
  color:#587180;
  margin-top:18px
}
.mini-journey {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:8px;
  margin-top:8px
}
.mini-journey span {
  padding:4px 9px;
  background:#e9f1f2;
  border-radius:3px
}
.mini-journey b {
  color:#028b89;
  font-weight:400
}
.laptop-base {
  height:13px;
  background:linear-gradient(#b3c3cb,#708b9b);
  width:110%;
  margin-left:-5%;
  border-radius:2px 2px 50% 50%/2px 2px 100% 100%;
  position:relative
}
.laptop-base:after {
  content:"";
  position:absolute;
  top:0;
  left:43%;
  width:14%;
  height:5px;
  background:#5b7382;
  border-radius:0 0 8px 8px
}
.phone {
  position:absolute;
  width:142px;
  height:274px;
  right:-15px;
  bottom:34px;
  border:6px solid #18374b;
  border-radius:24px;
  background:#fcffff;
  box-shadow:5px 16px 28px #082a4b30;
  padding:22px 9px 12px;
  transform:rotate(4deg)
}
.phone-notch {
  position:absolute;
  top:6px;
  left:38px;
  width:54px;
  height:6px;
  border-radius:6px;
  background:#18374b
}
.phone img {
  width:97px;
  margin:2px auto 15px
}
.phone-welcome {
  font-size:10px;
  line-height:1.5
}
.phone-welcome strong {
  color:var(--deep-teal);
  font-size:13px
}
.phone-profile {
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 0 9px;
  margin-top:10px;
  font-size:8px;
  font-weight:600
}
.phone-profile svg {
  width:20px;
  height:20px;
  color:var(--deep-teal)
}
.phone-row {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #e3ecee;
  padding:6px 0;
  font-size:7px
}
.phone-row b {
  color:#078b72
}
.phone-bar {
  font-size:6px;
  text-align:center;
  color:#fff;
  background:var(--deep-teal);
  border-radius:4px;
  margin-top:12px;
  padding:6px 0
}
.product-stage figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  font-size:var(--text-detail);
  color:#607080;
  letter-spacing:.2px
}
.section-space {
  padding:90px 0
}
.eyebrow {
  font-size:var(--text-detail);
  font-weight:750;
  letter-spacing:1.1px;
  color:var(--deep-teal);
  margin-bottom:17px;
  line-height:1.6
}
h2 {
  font-size:clamp(29px,2.8vw,39px);
  letter-spacing:-1.3px;
  font-weight:650;
  line-height:1.2
}
h2 span {
  color:var(--deep-teal)
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:44px;
  margin-bottom:44px
}
.section-heading>p {
  max-width:410px;
  font-size:var(--text-callout);
  font-weight:550;
  color:var(--navy);
  line-height:1.55;
  padding:24px 28px;
  border-left:0;
  border-radius:16px;
  background:linear-gradient(125deg,#fff 0%,#edf8f6 100%);
  box-shadow:0 12px 28px #082a4b08, inset 0 3px 0 #00898b;
  flex:0 1 410px;
  border:1px solid #badbd9
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.feature {
  padding:30px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:white;
  transition:background .2s;
  display:flex;
  flex-direction:column
}
.feature:hover {
  background:#f7fbfa
}
.feature-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:21px;
  color:var(--deep-teal)
}
.feature-top>span {
  font-size:var(--text-detail);
  color:#526c7d;
  letter-spacing:1px
}
.feature-top svg {
  height:62px;
  width:62px;
  padding:13px;
  border-radius:17px;
  color:#007f83;
  background:linear-gradient(140deg,#ddf5ef,#edf9f7);
  box-shadow:inset 0 0 0 1px #00a5a51c,0 5px 12px #082a4b07
}
.feature:nth-child(3n) .feature-top svg {
  color:#976422;
  background:linear-gradient(140deg,#f9ecd6,#fff9ef);
  box-shadow:inset 0 0 0 1px #b7873925,0 5px 12px #082a4b07
}
.feature:nth-child(4) .feature-top svg {
  color:var(--navy);
  background:linear-gradient(140deg,#dfeaf4,#f2f7fa)
}
.feature:first-child .feature-top svg {
  padding:10px;
  background:linear-gradient(140deg,#cfefeb,#f7fbef);
  box-shadow:inset 0 0 0 1px #00a5a52e,0 6px 16px #007f8312
}
.feature h3 {
  font-size:clamp(1.25rem,1.1rem + .3vw,1.5rem);
  font-weight:650;
  letter-spacing:-.4px;
  min-height:46px;
  max-width:275px;
  line-height:1.3
}
.feature>p {
  font-size:var(--text-feature);
  color:var(--muted);
  margin-top:12px;
  line-height:1.75;
  min-height:0;
  flex:1
}
.feature-detail {
  display:block;
  font-size:var(--text-detail);
  color:var(--deep-teal);
  margin-top:24px;
  letter-spacing:.15px;
  font-weight:600;
  line-height:1.5
}
.about {
  background:#f3f8f7;
  border-block:1px solid #e9f0ed
}
.about-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:85px
}
.about-copy>p:not(.eyebrow) {
  font-size:var(--text-body);
  line-height:1.75;
  color:#415d71;
  margin-top:20px
}
.about-copy>h2+p:not(.eyebrow) {
  padding-left:19px;
  border-left:3px solid var(--teal);
  font-size:var(--text-callout);
  font-weight:550;
  line-height:1.65;
  color:var(--navy)
}
.about-values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 18px;
  margin-top:27px;
  font-size:var(--text-detail)
}
.about-values b {
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#d8eeea;
  color:#00756f;
  margin-right:7px;
  font-size:15px
}
.text-link {
  display:inline-flex;
  gap:24px;
  font-size:var(--text-detail);
  font-weight:650;
  color:var(--deep-teal);
  margin-top:28px;
  border-bottom:1px solid #9bbfba;
  padding-bottom:7px
}
.connection-art {
  position:relative;
  height:390px;
  max-width:450px;
  width:100%;
  margin:auto;
  background:radial-gradient(circle,#c6e9e259,transparent 68%)
}
.orbit {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:2px solid #78b9b2;
  border-radius:50%;
  width:310px;
  height:310px
}
.orbit-outer {
  width:365px;
  height:365px;
  border-style:dashed;
  border-width:1px;
  border-color:#91bcb6
}
.connection-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:210px;
  height:210px;
  box-shadow:0 0 0 9px #ffffff70,0 16px 35px #082a4b12;
  padding:24px;
  border:2px solid #78b9b2;
  border-radius:50%
}
.connection-center span {
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:650;
  color:#3b6276;
  letter-spacing:.6px;
  margin-top:12px;
  line-height:1.5
}
.orbit-node {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  background:white;
  border:1px solid #9ccac3;
  border-radius:10px;
  padding:11px 14px;
  font-size:var(--text-detail);
  font-weight:650;
  box-shadow:0 7px 18px #082a4b0c
}
.orbit-node svg {
  width:29px;
  height:29px;
  color:var(--deep-teal)
}
.node-top {
  top:2px;
  left:50%;
  transform:translateX(-50%)
}
.node-bottom {
  bottom:2px;
  left:50%;
  transform:translateX(-50%)
}
.node-left {
  top:48%;
  left:0;
  transform:translateY(-50%)
}
.node-right {
  top:48%;
  right:0;
  transform:translateY(-50%)
}
.orbit-dot {
  position:absolute;
  border:5px solid #d9f0e9;
  background:#008d83;
  border-radius:50%;
  width:19px;
  height:19px
}
.dot-one {
  top:52px;
  left:70px
}
.dot-two {
  bottom:53px;
  right:69px
}
.contact {
  background:radial-gradient(ellipse at 100% 0,#0c5062,transparent 65%),var(--navy);
  padding:76px 0;
  position:relative;
  overflow:hidden
}
.contact:after {
  content:"";
  position:absolute;
  right:-90px;
  top:-260px;
  width:650px;
  height:650px;
  border:1px solid #ffffff0c;
  border-radius:50%;
  pointer-events:none
}
.contact-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:80px;
  position:relative;
  z-index:1
}
.contact .eyebrow {
  color:#95d8d1
}
.contact h2 {
  color:#fff;
  font-size:38px
}
.contact h2 span {
  color:#83d7d2
}
.contact p:not(.eyebrow) {
  max-width:530px;
  color:#c2d1dd;
  font-size:var(--text-body);
  margin-top:20px;
  line-height:1.75
}
.contact-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px
}
.contact .button {
  background:#087c4b;
  box-shadow:0 0 0 1px #ffffff25;
  font-size:var(--text-action)
}
.contact .button:hover {
  background:#09653f
}
.contact-email {
  font-size:var(--text-action);
  color:#fff
}
.contact-email span {
  margin-left:12px;
  color:#a8d1d3
}
.contact-note {
  font-size:var(--text-detail);
  color:#c2d1dd
}
footer {
  background:#fff
}
.footer-main {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:35px;
  padding-block:48px
}
.footer-brand {
  max-width:350px
}
.footer-brand img {
  width:220px
}
.footer-brand p {
  font-size:var(--text-detail);
  margin-top:14px;
  color:var(--muted)
}
.footer-brand>span {
  display:block;
  font-size:var(--text-detail);
  margin-top:12px;
  color:var(--muted)
}
.footer-brand strong {
  color:var(--navy);
  font-weight:600
}
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:var(--text-detail)
}
.footer-label {
  font-size:var(--text-detail);
  letter-spacing:1px;
  color:#607583;
  font-weight:700;
  margin-bottom:7px
}
.footer-main nav {
  display:flex;
  gap:28px;
  font-size:var(--text-detail);
  padding-top:2px
}
.footer-contact a:hover,.footer-main nav a:hover,.contact-email:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #e7eded;
  padding-block:20px;
  color:#647581;
  font-size:var(--text-detail)
}
@media(min-width:1280px) {
  .launch-lockup {
    width:360px
  }
}
@media(min-width:1500px) {
  .hero-layout {
    min-height:740px
  }
  .hero-description {
    font-size:var(--text-body);
    line-height:1.75
  }
  h1 {
    font-size:50px
  }
  .product-stage {
    height:510px
  }
}
@media(max-width:1100px) {
  .container {
    width:calc(100% - 64px)
  }
  .navigation nav {
    gap:21px;
    font-size:var(--text-action)
  }
  .brand {
    width:208px
  }
  .hero-layout {
    gap:32px;
    padding-top:50px;
    padding-bottom:48px
  }
  .hero-description {
    font-size:var(--text-body);
    line-height:1.75
  }
  .product-stage {
    height:410px;
    margin-bottom:60px
  }
  .app-sidebar {
    width:75px;
    font-size:6px
  }
  .app-top {
    padding-inline:10px
  }
  .app-content {
    padding:16px 10px
  }
  .app-heading {
    font-size:17px
  }
  .app-body {
    min-height:255px
  }
  .module-tiles {
    gap:6px
  }
  .module-tiles>div {
    font-size:6px;
    gap:4px;
    padding:8px 5px
  }
  .module-tiles svg {
    width:16px;
    height:16px
  }
  .phone {
    right:-12px;
    bottom:0;
    transform:rotate(4deg) scale(.85);
    transform-origin:bottom right
  }
  .product-stage figcaption {
    top:calc(100% + 12px);
    bottom:auto;
    font-size:var(--text-detail)
  }
  .festival-geometry {
    width:470px
  }
  .hero-artwork {
    width:340px;
    top:-105px;
    right:-25px
  }
  .section-heading {
    gap:44px;
    align-items:center
  }
  .section-heading>p {
    max-width:410px;
    flex:0 1 410px;
    font-size:var(--text-callout);
    font-weight:550;
    line-height:1.55;
    color:var(--navy);
    padding:24px 28px;
    border-left:0;
    border:1px solid #badbd9;
    border-radius:16px;
    background:linear-gradient(125deg,#fff 0%,#edf8f6 100%);
    box-shadow:0 12px 28px #082a4b08, inset 0 3px 0 #00898b
  }
  .feature {
    padding:30px;
    display:flex;
    flex-direction:column
  }
  .feature h3 {
    font-size:clamp(1.25rem,1.1rem + .3vw,1.5rem);
    line-height:1.3
  }
  .feature>p {
    min-height:0;
    font-size:var(--text-feature);
    line-height:1.75;
    flex:1
  }
  .about-layout {
    gap:40px;
    grid-template-columns:1fr 1.2fr
  }
  .connection-art {
    transform:scale(.87)
  }
  .about-values {
    grid-template-columns:1fr;
    font-size:var(--text-detail);
    gap:14px 18px
  }
  .contact-layout {
    gap:35px
  }
  .contact h2 {
    font-size:34px
  }
  .contact .button {
    font-size:var(--text-action);
    padding:18px
  }
  .footer-main nav {
    gap:18px;
    font-size:var(--text-detail)
  }
}
@media(max-width:800px) {
  html {
    scroll-padding-top:92px
  }
  .container {
    width:calc(100% - 40px)
  }
  .navigation {
    min-height:78px;
    flex-wrap:wrap;
    gap:0
  }
  .brand {
    width:194px
  }
  .navigation nav {
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    padding:8px 0 20px;
    gap:12px 26px;
    font-size:var(--text-action)
  }
  .menu-toggle {
    border:1px solid #c5d7d9;
    border-radius:5px;
    background:white;
    color:var(--navy);
    padding:7px 10px;
    align-items:center;
    gap:7px;
    font-size:16px;
    min-height:44px
  }
  .js-ready .menu-toggle {
    display:flex
  }
  .js-ready .navigation nav {
    display:none
  }
  .js-ready .menu-toggle[aria-expanded=true]+nav {
    display:flex
  }
  .menu-lines {
    width:14px;
    height:10px;
    border-block:1.5px solid currentColor;
    position:relative
  }
  .menu-lines:after {
    content:"";
    position:absolute;
    top:3px;
    left:0;
    width:14px;
    border-top:1.5px solid currentColor
  }
  .navigation .nav-cta {
    padding:9px 14px
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:48px;
    padding-top:40px;
    padding-bottom:36px
  }
  .hero-copy {
    max-width:580px;
    margin-inline:auto;
    text-align:center
  }
  .launch-label {
    justify-content:center;
    font-size:clamp(.875rem,.82rem + .15vw,1rem);
    letter-spacing:1px;
    margin-bottom:20px;
    line-height:1.6
  }
  .occasion {
    font-size:var(--text-body)
  }
  .launch-intro {
    justify-content:center;
    font-size:var(--text-body)
  }
  h1 {
    font-size:41px;
    letter-spacing:-1.5px
  }
  .hero-description {
    max-width:500px;
    margin-inline:auto;
    font-size:var(--text-body);
    line-height:1.75
  }
  .hero-cta {
    margin-top:25px;
    font-size:var(--text-action)
  }
  .product-stage {
    width:min(500px,94%);
    height:420px;
    margin-inline:auto
  }
  .app-sidebar {
    width:96px;
    font-size:8px
  }
  .app-body {
    min-height:270px
  }
  .app-content {
    padding:18px
  }
  .app-heading {
    font-size:21px
  }
  .module-tiles>div {
    font-size:7px;
    padding:10px 7px;
    gap:6px
  }
  .phone {
    bottom:8px;
    right:-14px;
    transform:rotate(4deg) scale(.9)
  }
  .product-stage figcaption {
    bottom:auto;
    font-size:var(--text-detail)
  }
  .festival-geometry {
    width:480px
  }
  .hero-artwork {
    top:-105px;
    right:-20px
  }
  .product-stage {
    margin-top:75px
  }
  .hero-bottom {
    margin-top:25px;
    justify-content:center;
    text-align:center;
    font-size:var(--text-detail);
    letter-spacing:.5px;
    line-height:1.6
  }
  .hero-bottom-detail {
    display:none;
    font-size:var(--text-detail)
  }
  .section-space {
    padding:62px 0
  }
  .section-heading {
    display:block;
    margin-bottom:32px;
    align-items:center;
    gap:44px
  }
  .section-heading>p {
    max-width:410px;
    margin-top:20px;
    flex:0 1 410px;
    font-size:var(--text-callout);
    font-weight:550;
    line-height:1.55;
    color:var(--navy);
    padding:24px 28px;
    border-left:0;
    border:1px solid #badbd9;
    border-radius:16px;
    background:linear-gradient(125deg,#fff 0%,#edf8f6 100%);
    box-shadow:0 12px 28px #082a4b08, inset 0 3px 0 #00898b
  }
  .feature-grid {
    grid-template-columns:1fr 1fr
  }
  .feature>p {
    min-height:0;
    font-size:var(--text-feature);
    line-height:1.75;
    flex:1
  }
  .about-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .connection-art {
    order:2;
    transform:none;
    max-width:410px;
    margin-top:20px
  }
  .about-values {
    grid-template-columns:1fr 1fr;
    font-size:var(--text-detail);
    gap:14px 18px
  }
  .about-copy {
    max-width:580px
  }
  .contact {
    padding:58px 0
  }
  .contact-layout {
    grid-template-columns:1fr;
    gap:30px
  }
  .contact-actions {
    align-items:flex-start
  }
  .contact h2 {
    font-size:35px
  }
  .contact .button {
    font-size:var(--text-action);
    padding:18px 22px
  }
  .footer-main {
    flex-wrap:wrap;
    padding-block:36px;
    gap:28px
  }
  .footer-main nav {
    width:100%;
    gap:30px;
    font-size:var(--text-detail)
  }
  .footer-bottom {
    font-size:var(--text-detail);
    gap:20px
  }
  .footer-contact {
    font-size:var(--text-detail)
  }
}
@media(max-width:480px) {
  .container {
    width:calc(100% - 36px)
  }
  h1 {
    font-size:35px;
    letter-spacing:-1.1px
  }
  .hero-layout {
    gap:43px
  }
  .hero-cta {
    font-size:var(--text-action);
    padding:17px 15px;
    gap:9px
  }
  .hero-cta svg {
    width:22px;
    height:22px
  }
  .launch-intro {
    flex-direction:column;
    gap:13px;
    font-size:var(--text-body);
    margin:18px 0 25px
  }
  .hero-description {
    font-size:var(--text-body);
    line-height:1.75
  }
  .product-stage {
    height:318px;
    width:96%;
    margin-top:80px
  }
  .laptop-screen {
    border-width:6px;
    border-bottom-width:9px;
    border-radius:10px 10px 3px 3px
  }
  .app-top {
    height:31px;
    gap:6px;
    padding:0 8px
  }
  .app-top img {
    width:87px
  }
  .app-top>span:not(.avatar) {
    font-size:6px
  }
  .avatar {
    width:14px;
    height:14px;
    font-size:7px
  }
  .app-body {
    min-height:207px
  }
  .app-sidebar {
    width:67px;
    font-size:6px;
    gap:5px;
    padding:10px 4px
  }
  .app-sidebar>span {
    padding:3px 4px
  }
  .app-sidebar .sidebar-bottom {
    font-size:5px
  }
  .app-content {
    padding:13px 9px
  }
  .app-eyebrow {
    font-size:5px;
    letter-spacing:.6px
  }
  .app-heading {
    font-size:15px;
    letter-spacing:-.3px
  }
  .module-tiles {
    margin-top:11px;
    gap:5px
  }
  .module-tiles>div {
    font-size:5px;
    gap:3px;
    padding:8px 3px
  }
  .module-tiles svg {
    width:13px;
    height:13px
  }
  .journey-label {
    font-size:5px;
    margin-top:11px
  }
  .mini-journey {
    font-size:6px;
    margin-top:6px
  }
  .mini-journey span {
    padding:3px 5px
  }
  .laptop-base {
    height:9px
  }
  .phone {
    transform:rotate(4deg) scale(.67);
    right:-8px;
    bottom:6px
  }
  .product-stage figcaption {
    bottom:auto;
    font-size:var(--text-detail)
  }
  .festival-geometry {
    width:355px
  }
  .hero-artwork {
    width:260px;
    top:-115px;
    right:0;
    opacity:.24
  }
  .hero-bottom {
    font-size:var(--text-detail);
    letter-spacing:.5px;
    margin-top:19px;
    padding-block:17px;
    line-height:1.6
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature {
    padding:30px;
    display:flex;
    flex-direction:column
  }
  .feature h3 {
    min-height:0;
    font-size:clamp(1.25rem,1.1rem + .3vw,1.5rem);
    max-width:none;
    line-height:1.3
  }
  .feature>p {
    min-height:0;
    font-size:var(--text-feature);
    line-height:1.75;
    flex:1
  }
  .feature-top {
    margin-bottom:17px
  }
  .feature-detail {
    margin-top:24px;
    font-size:var(--text-detail);
    line-height:1.5
  }
  h2 {
    font-size:30px;
    letter-spacing:-1px
  }
  .about-copy>p:not(.eyebrow) {
    font-size:var(--text-body);
    line-height:1.75
  }
  .about-copy>h2+p:not(.eyebrow) {
    font-size:var(--text-callout)
  }
  .about-values {
    font-size:var(--text-detail);
    gap:14px 18px
  }
  .connection-art {
    height:330px;
    max-width:330px;
    margin-top:8px
  }
  .orbit {
    width:257px;
    height:257px
  }
  .orbit-outer {
    width:300px;
    height:300px
  }
  .connection-center {
    width:160px;
    height:160px;
    padding:17px
  }
  .connection-center span {
    font-size:14px;
    letter-spacing:.6px;
    line-height:1.5
  }
  .orbit-node {
    padding:11px 14px;
    font-size:var(--text-detail);
    gap:6px
  }
  .orbit-node svg {
    width:24px;
    height:24px
  }
  .node-left {
    left:0;
    top:29%
  }
  .node-right {
    right:0;
    top:71%
  }
  .dot-one {
    left:35px;
    top:52px
  }
  .dot-two {
    right:39px;
    bottom:44px
  }
  .contact h2 {
    font-size:31px
  }
  .contact .button {
    font-size:var(--text-action);
    padding:17px 15px;
    gap:9px
  }
  .contact-email {
    font-size:var(--text-action)
  }
  .contact-note {
    font-size:var(--text-detail)
  }
  .footer-contact {
    width:100%;
    font-size:var(--text-detail)
  }
  .footer-bottom {
    flex-direction:column;
    gap:3px;
    font-size:var(--text-detail)
  }
  .footer-main nav {
    font-size:var(--text-detail)
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}