:root{
  color-scheme: light;
  --bg:#ffffff;
  --text:#0b0c0f;
  --muted:#5b5f6a;
  --border:rgba(15,23,42,.12);
  --card:rgba(255,255,255,.75);
  --shadow:0 18px 60px rgba(0,0,0,.08);
  --shadow-soft:0 10px 40px rgba(0,0,0,.06);
  --radius:22px;
  --radius-sm:16px;
  --accent:#2f6bff;
  --accent-2:#0ea5e9;
  --pill:rgba(47,107,255,.10);
  --max:1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 70% 10%, rgba(47,107,255,.08), transparent 55%),
              radial-gradient(900px 600px at 10% 20%, rgba(14,165,233,.06), transparent 50%),
              var(--bg);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
header{
  position:sticky; top:0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition: ease all .3s;

}
.landing header{
  position:fixed;
  top:0;
  left:0;
  right:0;
}
.landing header.scrolled{
  position:fixed;
}
header.scrolled{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
}
.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.logo{
  width:34px; height:34px; border-radius:12px;
}
.brand-title{
  font-weight:700; letter-spacing:-.02em;
}
.brand-sub{
  font-size:12px; color:var(--muted); margin-top:1px;
}
.navlinks{display:flex; align-items:center; gap:16px}
.navlinks a{
  font-size:14px; color:var(--muted); text-decoration:none;
  padding:8px 10px; border-radius:12px;
}
.navlinks a:hover{background:rgba(15,23,42,.04); color:var(--text)}
.nav-right{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:16px;
  order:2;
}
.nav-menu-download{
  display:none;
}
.nav-download-arrow{
  display:inline-flex;
  text-decoration:none;
  color:var(--text);
  font-size:22px;
  line-height:1;
  font-weight:700;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  position:relative;
  flex-direction:column;
  align-items:center;
  gap:3px;
  order:3;
}
.nav-download-arrow::after{
  content:"";
  width:14px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
.nav-menu .navlinks{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  color:var(--text);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:0;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.menu-toggle:hover{
  transform:translateY(-1px);
}
.menu-toggle-line{
  width:16px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .28s ease, opacity .2s ease;
}
.cta{
  display:flex; gap:10px; align-items:center;
}
.settings-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.settings-toggle{
  all:unset;
  width:auto;
  height:auto;
  -webkit-appearance:none;
  appearance:none;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  margin:0;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .24s ease, color .2s ease;
}
.settings-toggle-image{
  width:22px;
  height:22px;
  display:block;
}
.settings-toggle:focus{
  outline:none;
}
.settings-toggle:focus-visible{
  outline:2px solid rgba(47,107,255,.55);
  outline-offset:4px;
}
.settings-toggle::-moz-focus-inner{
  border:0;
  padding:0;
}
.settings-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:90;
  min-width:228px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow-soft);
  padding:12px;
  display:grid;
  gap:12px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .24s ease, transform .26s cubic-bezier(.22,.61,.36,1), visibility .24s ease;
}
.settings-wrap.is-open .settings-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.settings-group{
  display:grid;
  gap:8px;
}
.settings-label{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.02em;
}
.settings-options{
  display:flex;
  gap:8px;
}
.settings-option{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  min-height:34px;
  border-radius:11px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.settings-option.is-active{
  color:#fff;
  background:var(--accent);
  border-color:transparent;
}
.theme-btn{
  -webkit-appearance:none;
  appearance:none;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  padding:10px 10px;
  border-radius:14px;
  font-weight:600;
  font-size:14px;
  text-decoration: none;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  border-color:rgba(47,107,255,.22);
  background:linear-gradient(180deg, rgba(47,107,255,.95), rgba(47,107,255,.85));
  color:#fff;
}
.btn.primary:hover{filter:brightness(1.02)}
.app-store-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
}
.app-store-badge{
  display:block;
  height:44px;
  width:auto;
}

.hero-download-badge{
  width:150px;
  height:auto;
}

[data-magnet]{
  position:relative;
}

[data-magnet-inner]{
  transform:translate3d(0, 0, 0);
  transition:transform .5s ease-in-out;
  will-change:transform;
}
@media (max-width: 520px){
  .app-store-badge{
    height:40px;
  }
  .hero-download-badge{
    width:150px;
    height:auto;
  }
}
.small{
  font-size:12px; color:var(--muted);
}

.hero{
  height: 90vh;
  padding:0px 0 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  overflow:hidden;
}
.landing .hero{
  height:100vh;
  min-height:100svh;
  padding:0;
}
.hero .container{
  position:relative;
  z-index:1;
}
.hero-aurora{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .30s ease;
}
.hero-aurora canvas{
  width:100%;
  height:100%;
  display:block;
}
html[data-theme="dark"] .hero-aurora{
  opacity:1;
}
.grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  align-items:center;
}
.hero-main-image{
    width: 500px;
    object-fit: cover;
    height: 500px;
}
@media (max-width: 920px){
  .grid{grid-template-columns:1fr; gap:20px}

  .landing .hero{
    height:auto;
    min-height:0;
    padding:98px 0 28px;
    align-items:flex-start;
  }

  .hero .grid{
    align-items:flex-start;
  }

  .hero-main-image{
    width:min(86vw, 360px);
    height:auto;
    object-fit:contain;
    justify-self:center;
  }
}

.h-eyebrow{
  display:inline-flex; gap:10px; align-items:center;
  border:1px solid rgba(47,107,255,.16);
  margin-top: 10px;
  background:var(--pill);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  color:rgba(47,107,255,.95);
  font-weight:600;
}
.h-title{
  font-size:56px;
  letter-spacing:-.04em;
  margin:14px 0 10px;
  line-height:1.02;
}
.blur-text{
  display:flex;
  flex-wrap:wrap;
}
.blur-text .blur-text-segment{
  display:inline-block;
  will-change:transform, filter, opacity;
  opacity:0;
  filter:blur(10px);
  animation-duration:var(--blur-duration, .7s);
  animation-delay:var(--blur-delay, 0ms);
  animation-fill-mode:both;
  animation-timing-function:ease;
}
.blur-text[data-direction="top"] .blur-text-segment{
  transform:translateY(-50px);
}
.blur-text[data-direction="bottom"] .blur-text-segment{
  transform:translateY(50px);
}
.blur-text.is-inview[data-direction="top"] .blur-text-segment{
  animation-name:blur-text-in-top;
}
.blur-text.is-inview[data-direction="bottom"] .blur-text-segment{
  animation-name:blur-text-in-bottom;
}
@keyframes blur-text-in-top{
  0%{
    filter:blur(10px);
    opacity:0;
    transform:translateY(-50px);
  }
  60%{
    filter:blur(5px);
    opacity:.5;
    transform:translateY(5px);
  }
  100%{
    filter:blur(0);
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes blur-text-in-bottom{
  0%{
    filter:blur(10px);
    opacity:0;
    transform:translateY(50px);
  }
  60%{
    filter:blur(5px);
    opacity:.5;
    transform:translateY(-5px);
  }
  100%{
    filter:blur(0);
    opacity:1;
    transform:translateY(0);
  }
}
@media (max-width: 520px){
  .h-title{font-size:clamp(1.9rem, 10vw, 2.35rem)}
}
.h-sub{
  font-size:18px;
  color:var(--muted);
  max-width:58ch;
  margin:0 0 18px;
}

.rotating-text-main{
  position:relative;
  display:inline-block;
  margin:0 .25rem;
  padding:0;
  border:none;
  background:transparent;
  color:var(--accent);
  font-weight:700;
  white-space:nowrap;
  vertical-align:-0.1em;
  line-height:inherit;
}

.rotating-text-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;
}

.rotating-text-stage{
  position:relative;
  display:inline-block;
  overflow:hidden;
  min-height:1.35em;
  padding-bottom:.22em;
  margin-bottom:-.22em;
  line-height:inherit;
  vertical-align:baseline;
}

@media (min-width: 761px){
  .rotating-text-main .rotating-text-stage{
    /* Extra clip area for long words so the right edge is not cut on desktop */
    padding-right:48px;
    margin-right:-48px;
  }
}

.rotating-text-phrase{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  line-height:inherit;
}

.rotating-text-word{
  display:inline-flex;
}

.rotating-text-element{
  display:inline-block;
  transform:translateY(100%);
  opacity:0;
  transition:transform .82s cubic-bezier(.22,.61,.36,1), opacity .62s ease;
  transition-delay:var(--char-delay, 0ms);
  line-height:inherit;
}

.rotating-text-space{
  white-space:pre;
}

.rotating-text-phrase.is-active .rotating-text-element{
  transform:translateY(0);
  opacity:1;
}

.rotating-text-phrase.is-exiting .rotating-text-element{
  transform:translateY(-120%);
  opacity:0;
  transition-delay:var(--char-delay-out, 0ms);
}

@media (max-width: 920px){
  .h-title{
    font-size:clamp(2rem, 8.8vw, 3rem);
    margin:8px 0 10px;
  }

  .h-sub{
    font-size:17px;
    max-width:34ch;
  }
}

.h-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.h-meta{margin-top:10px}

@media (max-width: 760px){
  .hero .container{
    padding:0 16px;
  }

  .landing .hero{
    padding:82px 0 20px;
    min-height:100svh;
    min-height:100dvh;
  }

  .hero .grid{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:
      "title"
      "actions"
      "photo"
      "subtitle";
    gap:10px;
    min-height:calc(100svh - 102px);
    min-height:calc(100dvh - 102px);
    align-content:start;
  }

  .hero-copy{
    display:contents;
  }

  .h-title{
    grid-area:title;
    font-size:clamp(2rem, 10.5vw, 2.5rem);
    line-height:1.02;
    margin:4px 0 0;
    max-width:11ch;
  }

  .hero-main-image{
    grid-area:photo;
    width:min(94vw, 360px);
    max-width:100%;
    height:auto;
    justify-self:center;
    transform:scale(1.26);
    transform-origin:center top;
    margin:-100px 0 0;
    pointer-events:none;
  }

  .h-actions{
    grid-area:actions;
    width:100%;
    justify-content:flex-start;
    align-items:center;
    flex-direction:row;
    gap:10px;
    text-align:left;
    position:relative;
    z-index:3;
  }

  .h-sub{
    grid-area:subtitle;
    margin:auto auto 0;
    width:100%;
    max-width:none;
    text-align:center;
    font-size:16px;
    line-height:1.3;
  }

  .h-sub br{
    display:none;
  }

  .rotating-text-main{
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    text-align:center;
  }

  .rotating-text-main .rotating-text-stage{
    display:block;
    width:100% !important;
    margin:0;
    min-height:1.3em;
    padding-bottom:0;
    margin-bottom:0;
  }

  .rotating-text-main .rotating-text-phrase{
    width:100%;
    justify-content:center;
  }

  .nav{
    padding:10px 0;
  }

  .brand-sub{
    display:block;
  }

  .nav-right{
    margin-left:auto;
    gap:10px;
  }

  .nav-download-arrow{
    order:1;
    display:inline-flex;
    width:40px;
    height:40px;
    justify-content:center;
    align-items:center;
    flex-direction:row;
    gap:0;
    font-size:24px;
    line-height:1;
    position:relative;
    z-index:82;
  }

  .nav-download-arrow::after{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:9px;
  }

  .menu-toggle{
    order:2;
    display:inline-flex;
    position:relative;
    z-index:82;
  }

  .nav-menu{
    order:3;
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 76px);
    left:0;
    right:0;
    bottom:auto;
    height:calc(100vh - (env(safe-area-inset-top, 0px) + 76px));
    height:calc(100dvh - (env(safe-area-inset-top, 0px) + 76px));
    padding:
      28px
      24px
      calc(env(safe-area-inset-bottom, 0px) + 18px);
    border:0;
    border-radius:0;
    background:rgba(246,247,250,.98);
    box-shadow:0 24px 56px rgba(15,23,42,.14);
    backdrop-filter:saturate(140%) blur(8px);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-14px);
    transition:opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility .28s ease;
    overflow-y:auto;
    z-index:75;
  }

  .nav.menu-open .nav-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav.menu-open .menu-toggle-line:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  .nav.menu-open .menu-toggle-line:nth-child(2){
    opacity:0;
  }

  .nav.menu-open .menu-toggle-line:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .nav-menu .navlinks{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:22px;
    margin-top:12px;
  }

  .nav-menu .navlinks a{
    width:100%;
    font-size:2.2rem;
    line-height:1.06;
    letter-spacing:-.02em;
    padding:0;
    border-radius:0;
  }

  .nav-menu .cta{
    width:100%;
    margin-top:24px;
    justify-content:flex-start;
    align-items:stretch;
    flex-direction:column;
    gap:16px;
    padding-top:20px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
    border-top:1px solid var(--border);
  }

  .nav-menu .settings-wrap{
    order:2;
    width:100%;
    position:relative;
    display:flex;
    justify-content:center;
  }

  .nav-menu .settings-toggle{
    display:flex;
    width:auto;
  }

  .nav-menu .settings-panel{
    position:absolute;
    top:calc(100% + 12px);
    bottom:auto;
    right:0;
    left:0;
    min-width:0;
    width:100%;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
    background:transparent;
    box-shadow:none;
    border:1px solid var(--border);
    padding:14px;
  }

  .nav-menu .settings-wrap.is-open .settings-panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-menu .settings-label{
    font-size:13px;
  }

  .nav-menu .settings-option{
    min-height:46px;
    font-size:15px;
  }

  .nav-menu-download{
    order:1;
    display:inline-flex;
    width:100%;
    flex:none;
    align-items:center;
    justify-content:center;
    min-height:56px;
    border-radius:999px;
    text-decoration:none;
    font-size:1.18rem;
    font-weight:600;
    letter-spacing:.01em;
    color:#fff;
    background:#2f3138;
  }
}

body.mobile-menu-open{
  overflow:hidden;
}

@media (max-width: 760px){
  .landing .cards-tilted{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:4px 4px 2px;
    margin:0 -4px;
  }

  .landing .cards-tilted::-webkit-scrollbar{
    display:none;
  }

  .landing .cards-tilted .feature-line{
    flex:0 0 88%;
    max-width:88%;
    scroll-snap-align:center;
  }

  .landing .section.divider{
    background:transparent;
    border-top:none;
    padding-top:12px;
    padding-bottom:6px;
    margin-bottom: 24px;
  }

  .landing .section.divider + .section{
    padding-top:10px;
  }
}

.phone-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}
.phone{
  width:min(360px, 92vw);
  border-radius:36px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.75);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateZ(0);
}
.phone-top{
  height:54px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(255,255,255,.60);
}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  color:var(--muted);
}
.phone-body{padding:14px}
.shots{
  display:grid;
  gap:12px;
}
.shot{
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
.shot img{display:block; width:100%; height:auto}
.note{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
}

.section{
  padding:28px 0;
}

.section.divider{
  padding:28px 0;
  background-color: #eeeeee;
}
.card{
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  padding:18px;
}
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 920px){
  .cards{grid-template-columns:1fr}
}
.card h3{
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.card p{margin:0; color:var(--muted)}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 920px){
  .split{grid-template-columns:1fr}
}

.kpi{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.65);
}
.kpi strong{display:block; font-size:14px}
.kpi span{display:block; font-size:12px; color:var(--muted); margin-top:4px}
.dot{
  width:10px; height:10px; border-radius:99px;
  background:rgba(47,107,255,.85);
  margin-top:6px;
}

.calc{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.calc h3{margin:0 0 10px}
.form{
  display:grid;
  gap:12px;
}
.field label{
  display:flex; justify-content:space-between;
  font-size:12px; color:var(--muted);
  margin-bottom:6px;
}
.field input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  cursor:pointer;
  border:0;
  padding:0;
  height:24px;
  accent-color:initial;
  -webkit-tap-highlight-color:transparent;
  --range-progress:0%;
}
.field input[type="range"]:focus{
  outline:none;
}
.field input[type="range"]:focus-visible{
  outline:none;
}
.field input[type="range"]::-webkit-slider-runnable-track{
  -webkit-appearance:none;
  appearance:none;
  height:14px;
  border-radius:999px;
  border:0;
  background:linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--range-progress),
    rgba(15,23,42,.22) var(--range-progress),
    rgba(15,23,42,.22) 100%
  );
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.16);
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--accent);
  border:2px solid #fff;
  box-shadow:0 2px 10px rgba(15,23,42,.22);
  margin-top:-6px;
}
.field input[type="range"]::-moz-focus-outer{
  border:0;
}
.field input[type="range"]::-moz-range-track{
  height:14px;
  border-radius:999px;
  border:0;
  background:rgba(15,23,42,.22);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.16);
}
.field input[type="range"]::-moz-range-progress{
  height:14px;
  border-radius:999px;
  background:var(--accent);
}
.field input[type="range"]::-moz-range-thumb{
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--accent);
  border:2px solid #fff;
  box-shadow:0 2px 10px rgba(15,23,42,.22);
}
.value{
  font-variant-numeric:tabular-nums;
  color:var(--text);
  font-weight:700;
}
.result{
  margin-top:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(47,107,255,.16);
  background:rgba(47,107,255,.06);
}
.result .big{
  font-size:26px; font-weight:800; letter-spacing:-.02em;
}
.result-amount{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:nowrap;
}
.result .small{margin-top:4px}
.disclaimer{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}

.stack-showcase{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  border:none;
  min-height:640px;
  padding:48px 44px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:18px;
  align-items:center;
  background:transparent;
}

.stack-section{
  padding-top:0px;
  padding-bottom:12px;
}

.stack-copy{
  position:relative;
  z-index:2;
  max-width:420px;
}

.stack-kicker{
  margin:0 0 10px;
  color:var(--muted);
  letter-spacing:.03em;
  font-size:13px;
  text-transform:uppercase;
  font-weight:600;
}

.stack-title{
  margin:0;
  color:var(--text);
  font-size:52px;
  line-height:1.02;
  letter-spacing:-.03em;
}

.stack-sub{
  margin:16px 0 0;
  color:var(--muted);
  font-size:20px;
  line-height:1.4;
  max-width:36ch;
}

.stack-stage{
  position:relative;
  min-height:620px;
}

.stack-card-swap-container{
  position:absolute;
  top:50%;
  bottom:auto;
  right:50%;
  width:360px;
  height:680px;
  transform:translate(50%, -54%);
  transform-origin:bottom right;
  perspective:900px;
  overflow:visible;
}

.stack-card-item{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  translate:0 -10.6%;
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:block;
  object-fit:cover;
  object-position:56% 61%;
  border:none;
  background:transparent;
  box-shadow:none;
}

@media (max-width: 1100px){
  .stack-showcase{
    grid-template-columns:1fr;
    min-height:auto;
    gap:8px;
    padding:40px 24px;
  }

  .stack-title{
    font-size:42px;
  }

  .stack-sub{
    font-size:18px;
  }

  .stack-stage{
    min-height:520px;
  }

  .stack-card-swap-container{
    position:relative;
    right:auto;
    bottom:auto;
    margin:0 auto;
    transform:scale(.86) translate(0, 8%);
  }
}

@media (max-width: 768px){
  .stack-section{
    padding-top:2px;
    padding-bottom:8px;
  }

  .stack-showcase{
    border-radius:28px;
    padding:32px 18px;
  }

  .stack-title{
    font-size:34px;
  }

  .stack-sub{
    font-size:16px;
  }

  .stack-stage{
    min-height:420px;
  }

  .stack-card-swap-container{
    transform:scale(.76) translate(0, 10%);
  }
}

@media (max-width: 480px){
  .stack-stage{
    min-height:330px;
  }

  .stack-card-swap-container{
    transform:scale(.64) translate(0, 12%);
  }
}

@media (max-width: 760px){
  .stack-showcase{
    padding:24px 16px;
    gap:12px;
  }

  .stack-copy{
    max-width:none;
  }

  .stack-stage{
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
  }

  .stack-card-swap-container{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:min(80vw, 320px);
    height:min(140vw, 560px);
    margin:0 auto;
    transform:translateX(-60px);
  }
}

/* Landing refresh: cleaner, less boxed */
.landing .section.divider{
  background:
    linear-gradient(180deg, rgba(47,107,255,.03), rgba(47,107,255,0));
  border-top:1px solid rgba(15,23,42,.04);
  border-bottom:none;
}

.landing .cards-minimal{
  gap:24px;
}

.landing .feature-line{
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:6px 0;
  position:relative;
}

.landing .feature-line::before{
  content:"";
  display:block;
  width:34px;
  height:2px;
  border-radius:999px;
  margin-bottom:14px;
  background:linear-gradient(90deg, rgba(47,107,255,.65), rgba(14,165,233,.35));
}

.landing .feature-line + .feature-line{
  border-left:1px solid var(--border);
  padding-left:24px;
}

.landing .feature-line h3{
  margin:0 0 8px;
  letter-spacing:-.02em;
}

.landing .feature-line p{
  margin:0;
  color:var(--muted);
}

.landing .cards-tilted{
  gap:18px;
  align-items:stretch;
}

.landing .cards-tilted .feature-line{
  position:relative;
  padding:0;
  min-height:0;
  perspective:800px;
  overflow:visible;
}

.landing .cards-tilted .feature-line::before{
  display:none;
}

.landing .cards-tilted .feature-line + .feature-line{
  border-left:none;
  padding-left:0;
}

.landing .cards-tilted .tilted-card-inner{
  position:relative;
  min-height:0;
  height:100%;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.76);
  box-shadow:var(--shadow-soft);
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  will-change:transform;
}

.landing .cards-tilted .feature-line:hover .tilted-card-inner{
  box-shadow:0 18px 46px rgba(15,23,42,.14);
}

.landing .cards-tilted .tilted-card-overlay{
  position:relative;
  height:auto;
  transform:translateZ(28px);
  will-change:transform;
}

.landing .cards-tilted .tilted-card-text{
  padding:18px 18px 16px;
}

.landing .cards-tilted .feature-line h3{
  margin:0 0 6px;
  letter-spacing:-.02em;
}

.landing .cards-tilted .feature-line p{
  margin:0;
  color:var(--muted);
}

.landing .cards-tilted .tilted-card-caption{
  pointer-events:none;
  position:absolute;
  left:0;
  top:0;
  border-radius:6px;
  background:#fff;
  padding:4px 10px;
  font-size:10px;
  color:#2d2d2d;
  opacity:0;
  z-index:5;
  transform:translate3d(0, 0, 0);
  transition:opacity .16s ease;
}

.landing .split{
  gap:34px;
  align-items:start;
}

.landing .calc-minimal,
.landing .how-panel{
  border:none;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
}

.landing .calc-minimal h3,
.landing .how-panel h3{
  margin:0 0 12px;
  letter-spacing:-.02em;
}

.landing .calc-minimal .form{
  gap:0;
  padding-top:10px;
  border-top:1px solid var(--border);
}

.landing .calc-minimal .field{
  padding:6px 0 10px;
}

.landing .calc-minimal .field + .field{
  border-top:none;
}

.landing .calc-minimal .result{
  margin-top:12px;
  padding:12px 0 0;
  border:none;
  border-top:1px solid var(--border);
  border-radius:0;
  background:transparent;
}

.landing .calc-minimal .result .big:first-child{
  color:var(--accent);
}

.landing .calc-minimal .disclaimer{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}

.landing .how-panel .how-timeline{
  position:relative;
  margin-top:8px;
  --timeline-gutter:34px;
  --timeline-line:2px;
  --timeline-dot:12px;
}

.landing .how-panel .how-timeline-line{
  position:absolute;
  left:calc((var(--timeline-gutter) - var(--timeline-line)) / 2);
  top:20px;
  bottom:20px;
  width:var(--timeline-line);
  border-radius:999px;
  background:rgba(15,23,42,.12);
  overflow:hidden;
}

.landing .how-panel .how-timeline-progress{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(47,107,255,.95), rgba(14,165,233,.85));
  transition:height .55s ease;
}

.landing .how-panel .how-timeline-step{
  position:relative;
  display:grid;
  grid-template-columns:var(--timeline-gutter) 1fr;
  column-gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-top:none;
  opacity:.5;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}

.landing .how-panel .how-timeline-step:last-of-type{
  border-bottom:none;
}

.landing .how-panel .how-timeline-dot{
  width:var(--timeline-dot);
  height:var(--timeline-dot);
  margin-top:2px;
  justify-self:center;
  border-radius:50%;
  background:#5f89ff;
  box-shadow:0 0 0 8px rgba(47,107,255,.12);
  transform:scale(.9);
  transition:transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.landing .how-panel .how-timeline-copy strong{
  display:block;
  font-size:14px;
}

.landing .how-panel .how-timeline-copy span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

.landing .how-panel .how-timeline-step.is-active{
  opacity:1;
  transform:translateY(0);
}

.landing .how-panel .how-timeline-step.is-active .how-timeline-dot{
  transform:scale(1);
  box-shadow:0 0 0 10px rgba(47,107,255,.18);
}

.landing .how-panel .h-eyebrow{
  margin-top:12px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
}

.landing .how-footnote{
  margin-top:12px;
}

.landing .cta-band{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  border:none;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:18px 0;
}

.landing .cta-band-title{
  margin:0 0 6px;
  letter-spacing:-.02em;
}

.landing .cta-band-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media (max-width: 920px){
  .landing .cards-minimal{
    gap:0;
  }

  .landing .feature-line{
    padding:16px 0;
  }

  .landing .feature-line + .feature-line{
    border-left:none;
    border-top:1px solid var(--border);
    padding-left:0;
  }

  .landing .split{
    gap:28px;
  }

  .landing .cards-tilted{
    gap:14px;
  }

  .landing .cards-tilted .feature-line{
    padding:0;
  }

  .landing .cards-tilted .feature-line + .feature-line{
    border-top:none;
    padding-left:0;
  }

  .landing .cards-tilted .tilted-card-inner{
    min-height:0;
  }
}

@media (max-width: 640px){
  .landing .cards-tilted .tilted-card-caption{
    display:none;
  }
}

footer{
  border-top:1px solid var(--border);
  margin-top:28px;
  padding:20px 0 26px;
  color:var(--muted);
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer-links{
  display:flex; gap:14px; flex-wrap:wrap;
}
.footer-links a{
  color:var(--muted); text-decoration:none;
}
.footer-links a:hover{color:var(--text)}
.sep{opacity:.6}

/* Subtle animations */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.show{
  opacity:1;
  transform:translateY(0);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0a0d14;
  --text:#eef2ff;
  --muted:#a2acbf;
  --border:rgba(226,232,240,.14);
  --card:rgba(16,23,37,.78);
  --shadow:0 18px 60px rgba(0,0,0,.38);
  --shadow-soft:0 10px 40px rgba(0,0,0,.28);
  --pill:rgba(96,165,250,.12);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 800px at 70% 10%, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(900px 600px at 10% 20%, rgba(14,165,233,.10), transparent 50%),
    radial-gradient(1100px 700px at 50% 120%, rgba(34,197,94,.06), transparent 60%),
    var(--bg);
}

html[data-theme="dark"] header.scrolled{
  background:rgba(10,13,20,.72);
  border-bottom:1px solid var(--border);
}

html[data-theme="dark"] .navlinks a:hover{
  background:rgba(226,232,240,.06);
  color:var(--text);
}

html[data-theme="dark"] .settings-toggle{
  color:var(--text);
}

html[data-theme="dark"] .theme-btn{
  color:var(--text);
}

html[data-theme="dark"] .menu-toggle{
  background:rgba(15,23,42,.68);
  color:var(--text);
  border-color:var(--border);
}

@media (max-width: 760px){
  html[data-theme="dark"] .nav-menu{
    background:rgba(10,13,20,.96);
    box-shadow:0 24px 56px rgba(0,0,0,.42);
  }

  html[data-theme="dark"] .nav-menu-download{
    background:#f1f5f9;
    color:#0f172a;
  }
}

html[data-theme="dark"] .settings-panel{
  background:rgba(15,23,42,.96);
  border-color:var(--border);
}

html[data-theme="dark"] .settings-option{
  background:rgba(15,23,42,.62);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .settings-option.is-active{
  background:var(--accent);
  border-color:transparent;
  box-shadow:none;
  color:#fff;
}

html[data-theme="dark"] .nav-menu .settings-panel{
  background:transparent;
}

html[data-theme="dark"] .btn{
  background:rgba(15,23,42,.72);
  color:var(--text);
  border-color:var(--border);
  box-shadow:var(--shadow-soft);
}

html[data-theme="dark"] .btn.primary{
  border-color:rgba(96,165,250,.28);
  background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.88));
  color:#fff;
}

html[data-theme="dark"] .phone{
  border-color:var(--border);
  background:rgba(16,23,37,.78);
}

html[data-theme="dark"] .phone-top{
  border-bottom:1px solid var(--border);
  background:rgba(16,23,37,.64);
}

html[data-theme="dark"] .pill{
  border-color:var(--border);
}

html[data-theme="dark"] .shot{
  border-color:var(--border);
  background:rgba(15,23,42,.75);
}

html[data-theme="dark"] .section.divider{
  background-color:rgba(255,255,255,.03);
}

html[data-theme="dark"] .landing .section.divider{
  background:
    linear-gradient(180deg, rgba(59,130,246,.08), rgba(59,130,246,0));
  border-top:1px solid rgba(226,232,240,.06);
  border-bottom:none;
}

@media (max-width: 760px){
  html[data-theme="dark"] .landing .section.divider{
    background:transparent;
    border-top:none;
  }
}

html[data-theme="dark"] .card{
  border-color:var(--border);
  background:var(--card);
  box-shadow:var(--shadow-soft);
}

html[data-theme="dark"] .stack-showcase{
  background:
    radial-gradient(600px 380px at 16% 20%, rgba(68,44,255,.22), transparent 70%),
    radial-gradient(920px 620px at 84% 76%, rgba(6,4,20,.90), rgba(3,2,13,.98)),
    #050312;
  border:1px solid rgba(148,163,184,.34);
}

html[data-theme="dark"] .landing .cards-tilted .tilted-card-inner{
  border-color:var(--border);
  background:rgba(15,23,42,.58);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}

html[data-theme="dark"] .landing .cards-tilted .feature-line:hover .tilted-card-inner{
  box-shadow:0 20px 48px rgba(0,0,0,.34);
}

html[data-theme="dark"] .landing .cards-tilted .tilted-card-caption{
  background:#e2e8f0;
  color:#0f172a;
}

html[data-theme="dark"] .kpi{
  border-color:var(--border);
  background:rgba(15,23,42,.58);
}

html[data-theme="dark"] .calc{
  border-color:var(--border);
  background:var(--card);
}

html[data-theme="dark"] .field input[type="range"]::-webkit-slider-runnable-track{
  background:linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--range-progress),
    rgba(226,232,240,.24) var(--range-progress),
    rgba(226,232,240,.24) 100%
  );
  box-shadow:inset 0 0 0 1px rgba(226,232,240,.18);
}

html[data-theme="dark"] .field input[type="range"]::-webkit-slider-thumb{
  border-color:#0a0d14;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

html[data-theme="dark"] .field input[type="range"]::-moz-range-track{
  background:rgba(226,232,240,.24);
  box-shadow:inset 0 0 0 1px rgba(226,232,240,.18);
}

html[data-theme="dark"] .field input[type="range"]::-moz-range-thumb{
  border-color:#0a0d14;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
}

html[data-theme="dark"] .result{
  border-color:rgba(96,165,250,.20);
  background:rgba(59,130,246,.10);
}

html[data-theme="dark"] .landing .how-panel .how-timeline-line{
  background:rgba(226,232,240,.18);
}

html[data-theme="dark"] .landing .how-panel .how-timeline-progress{
  background:linear-gradient(180deg, rgba(96,165,250,.98), rgba(56,189,248,.88));
}

html[data-theme="dark"] .landing .how-panel .how-timeline-dot{
  background:#78a9ff;
  box-shadow:0 0 0 8px rgba(96,165,250,.14);
}

html[data-theme="dark"] .landing .how-panel .how-timeline-step.is-active .how-timeline-dot{
  box-shadow:0 0 0 10px rgba(96,165,250,.18);
}

html[data-theme="dark"] .landing .calc-minimal{
  border:none;
  background:transparent;
  box-shadow:none;
}

html[data-theme="dark"] .landing .calc-minimal .result{
  border:none;
  border-top:1px solid var(--border);
  background:transparent;
}

[data-lang-section]{
  display:none;
}

html[lang="en"] [data-lang-section="en"],
html[lang="es"] [data-lang-section="es"]{
  display:block;
}

@media (max-width: 760px){
  .landing .section.divider{
    background:transparent !important;
    border-top:none !important;
    padding-top:12px;
    padding-bottom:0;
  }

  .landing .section.divider + .section{
    padding-top:0;
  }
}