/* ---------------------------------------------------------
   Dark Glass + Gold Theme
--------------------------------------------------------- */
:root{
  --bg: #07080b;
  --bg2: #0a0b10;
  --panel: rgba(18, 19, 26, 0.55);
  --panel-strong: rgba(10, 11, 16, 0.86);
  --text: rgba(255,255,255,.88);
  --text-dim: rgba(255,255,255,.66);
  --muted: rgba(255,255,255,.12);

  --gold-1: #fff2c9;
  --gold-2: #f7d27b;
  --gold-3: #f2b94b;
  --gold-4: #ffd98e;

  --shadow-xl: 0 22px 80px rgba(0,0,0,.62);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  --shadow-md: 0 12px 30px rgba(0,0,0,.45);

  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --container: 1240px;
  --container-wide: 1400px;

  --border-soft: 1px solid rgba(255, 217, 142, .14);
  --border-strong: 1px solid rgba(255, 217, 142, .22);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1100px 700px at 18% -10%, rgba(242, 185, 75, .18), transparent 60%),
              radial-gradient(900px 700px at 90% 10%, rgba(120, 155, 255, .10), transparent 55%),
              radial-gradient(1000px 800px at 52% 115%, rgba(255, 217, 142, .12), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
button, input{ font: inherit; color: inherit; }
kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.container{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}
.container--wide{
  width: min(var(--container-wide), calc(100% - 48px));
  margin-inline: auto;
}
.container--showcase{
  width: min(1700px, calc(100% - 56px)); /* almost full width w/ left-right margin */
  margin-inline: auto;
}

/* Ambient layer */
.bg-aurora{
  position: fixed;
  /* Cover the whole viewport so the glow never "cuts" into sections */
  inset: -180px;
  pointer-events: none;
  filter: blur(32px);
  opacity: .65;
  background:
    radial-gradient(closest-side at 22% 58%, rgba(242, 185, 75, .22), transparent 60%),
    radial-gradient(closest-side at 75% 30%, rgba(86, 140, 255, .16), transparent 65%),
    radial-gradient(closest-side at 56% 80%, rgba(255, 217, 142, .14), transparent 70%);
  z-index: 0;
}

/* ---------------------------------------------------------
   Gold text (glassy)
--------------------------------------------------------- */
.goldText{
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(255, 242, 201, .92) 0%,
    rgba(247, 210, 123, .96) 22%,
    rgba(255, 255, 255, .92) 46%,
    rgba(242, 185, 75, .98) 70%,
    rgba(255, 217, 142, .92) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 18px rgba(242, 185, 75, .20),
    0 0 42px rgba(242, 185, 75, .12);
}

.goldText::after{
  content: "";
  display: inline-block;
  width: 0;
}

/* ---------------------------------------------------------
   Header / Nav
--------------------------------------------------------- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(135%);
  background: linear-gradient(180deg, rgba(10, 11, 16, .82), rgba(10, 11, 16, .58));
  border-bottom: 1px solid rgba(255, 217, 142, .10);
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 217, 142, .22);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  filter: drop-shadow(0 0 18px rgba(242, 185, 75, .20));
}
.brand__name{
  font-weight: 700;
  letter-spacing: .2px;
}

.navToggle{
  display: none;
  width: 46px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 19, 26, .40);
  backdrop-filter: blur(12px);
  cursor: pointer;
  position: relative;
}
.navToggle span{
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: rgba(255,255,255,.82);
  border-radius: 999px;
  transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.navToggle span:nth-child(1){ top: 12px; }
.navToggle span:nth-child(2){ top: 19px; }
.navToggle span:nth-child(3){ top: 26px; }

.nav{
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.searchPill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 19, 26, .42);
  backdrop-filter: blur(14px) saturate(140%);
  color: rgba(255,255,255,.82);
  cursor: pointer;
}
.searchPill:hover{
  border-color: rgba(255, 217, 142, .22);
  box-shadow: 0 0 0 3px rgba(242, 185, 75, .08);
}
.searchPill__icon{
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.66);
  border-radius: 50%;
  position: relative;
}
.searchPill__icon::after{
  content:"";
  position:absolute;
  width: 7px; height: 2px;
  background: rgba(255,255,255,.66);
  right: -6px; bottom: -5px;
  transform: rotate(45deg);
  border-radius: 999px;
}
.searchPill__kbd{
  margin-left: 2px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10, 11, 16, .55);
  color: rgba(255,255,255,.72);
}

.nav__links{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__item{
  position: relative;
}
.nav__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: rgba(255,255,255,.84);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.nav__link--plain{
  padding: 10px 14px;
}
.nav__link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255, 217, 142, .14);
  color: rgba(255, 242, 201, .94);
}
.chev{
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  margin-top: -2px;
  opacity: .85;
}

.nav__actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  overflow: hidden;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dropdown - fixed visibility */
.dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(10, 11, 16, .90);
  border: 1px solid rgba(255, 217, 142, .16);
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav__item.is-open > .dropdown{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown__link{
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dropdown__link:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255, 217, 142, .18);
  color: rgba(255, 242, 201, .95);
}

/* ---------------------------------------------------------
   Buttons (glassy gold)
--------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 19, 26, .42);
  backdrop-filter: blur(14px) saturate(140%);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.btn:active{ transform: translateY(1px); }
.btn__icon{ width: 18px; height: 18px; opacity: .92; }
.btn__icon--linux{ transform: scale(2); transform-origin: center; }

.btn--xl{ padding: 14px 18px; border-radius: 16px; }

.btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.btn--ghost:hover{
  border-color: rgba(255, 217, 142, .16);
  box-shadow: 0 0 0 3px rgba(242, 185, 75, .08);
}

.btn--login{
  border: 1px solid rgba(255, 217, 142, .55);
  color: rgba(10, 11, 16, .94);
  background:
    radial-gradient(120% 180% at 20% -20%, rgba(255,255,255,.55), transparent 58%),
    radial-gradient(120% 160% at 90% 10%, rgba(242, 185, 75, .55), transparent 55%),
    linear-gradient(135deg, rgba(255, 242, 201, .98), rgba(247, 210, 123, .92) 42%, rgba(242, 185, 75, .92));
  box-shadow:
    0 0 0 1px rgba(255, 242, 201, .18) inset,
    0 18px 40px rgba(0,0,0,.45),
    0 0 24px rgba(242, 185, 75, .22);
  text-shadow: none;
}

.btn--login::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 28%,
    rgba(255, 242, 201, .38) 50%,
    rgba(242,185,75,.42) 72%,
    transparent 100%);
  transform: translateX(-60%) rotate(10deg);
  filter: blur(12px);
  opacity: .0;
  transition: opacity .22s ease, transform .55s ease;
}

.btn--login:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 242, 201, .22) inset,
    0 22px 50px rgba(0,0,0,.52),
    0 0 34px rgba(242,185,75,.28);
}

.btn--login:hover::before{
  opacity: 1;
  transform: translateX(20%) rotate(10deg);
}

.btn--login:active{
  transform: translateY(0px);
}

.btn--glass{
  background: rgba(18, 19, 26, .40);
  border-color: rgba(255,255,255,.10);
}
.btn--glass:hover{
  border-color: rgba(255, 217, 142, .18);
  box-shadow: 0 0 0 3px rgba(242, 185, 75, .08), 0 16px 40px rgba(0,0,0,.35);
}

/* Primary: glass + gold glow + subtle shimmer */
.btn--primary{
  border: 1px solid rgba(255, 217, 142, .30);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255, 242, 201, .20), transparent 55%),
    radial-gradient(140% 120% at 110% 20%, rgba(242, 185, 75, .18), transparent 60%),
    linear-gradient(180deg, rgba(18, 19, 26, .55), rgba(10, 11, 16, .35));
  box-shadow:
    0 0 0 1px rgba(255, 217, 142, .10) inset,
    0 20px 50px rgba(0,0,0,.40);
}

.btn--primary::before{
  content:"";
  position:absolute;
  inset: -40%;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 242, 201, .16) 24%,
      rgba(255,255,255,.18) 50%,
      rgba(242, 185, 75, .14) 74%,
      transparent 100%);
  transform: translateX(-60%) rotate(10deg);
  filter: blur(10px);
  opacity: .0;
  transition: opacity .2s ease, transform .6s ease;
}

.btn--primary::after{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 217, 142, .32), rgba(255,255,255,.06), rgba(255, 217, 142, .18));
  opacity: .10;
  mix-blend-mode: screen;
}

.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 217, 142, .14) inset,
    0 0 0 3px rgba(242, 185, 75, .08),
    0 26px 70px rgba(0,0,0,.58);
}
.btn--primary:hover::before{
  opacity: 1;
  transform: translateX(60%) rotate(10deg);
}

.btn--primary .btn__icon{
  filter: drop-shadow(0 0 18px rgba(242, 185, 75, .22));
}

/* ---------------------------------------------------------
   Modal (Search)
--------------------------------------------------------- */
.modal[hidden]{ display: none; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
}
.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position: relative;
  width: min(720px, calc(100% - 34px));
  border-radius: 20px;
  background: rgba(10, 11, 16, .90);
  border: 1px solid rgba(255, 217, 142, .18);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  padding: 16px;
}
.modal__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.modal__title{
  font-weight: 700;
}
.iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.iconBtn:hover{
  border-color: rgba(255, 217, 142, .18);
  box-shadow: 0 0 0 3px rgba(242, 185, 75, .08);
}
.modal__input{
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18, 19, 26, .35);
  outline: none;
}
.modal__input:focus{
  border-color: rgba(255, 217, 142, .26);
  box-shadow: 0 0 0 4px rgba(242, 185, 75, .10);
}

/* Fix Chrome/Safari autofill yellow background */
.modal__input:-webkit-autofill,
.modal__input:-webkit-autofill:hover,
.modal__input:-webkit-autofill:focus,
.modal__input:-webkit-autofill:active{
  -webkit-text-fill-color: rgba(255,255,255,.88) !important;
  caret-color: rgba(255,255,255,.88);
  -webkit-box-shadow: 0 0 0 1000px rgba(18, 19, 26, .35) inset !important;
  box-shadow: 0 0 0 1000px rgba(18, 19, 26, .35) inset !important;
  border: 1px solid rgba(255,255,255,.12);
  transition: background-color 9999s ease-in-out 0s;
}

.modal__hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position: relative;
  z-index: 1;
  padding: 44px 0 34px;
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 19, 26, .35);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.74);
  margin-bottom: 14px;
}
.pill .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(242, 185, 75, .95);
  box-shadow: 0 0 0 4px rgba(242, 185, 75, .12), 0 0 20px rgba(242, 185, 75, .22);
}
.hero__title{
  font-size: clamp(34px, 3.5vw, 56px);
  line-height: 1.08;
  margin: 0 0 10px;
  letter-spacing: -0.4px;
}
.hero__title .goldText{ padding-bottom: .08em; }
.hero__subtitle{
  margin: 0 0 18px;
  color: rgba(255,255,255,.70);
  font-size: 16px;
  line-height: 1.6;
  max-width: 58ch;
}


.hero__fineprint{
  margin: 0 0 14px;
  max-width: 66ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.58);
}

.hero__cta{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
}
.hero__cta .btn{ width: 100%; }

.hero__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.metaCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 19, 26, .30);
  backdrop-filter: blur(12px);
  padding: 12px 12px;
  box-shadow: 0 16px 46px rgba(0,0,0,.30);
}
.metaCard__k{
  display:block;
  font-weight: 700;
  color: rgba(255, 242, 201, .88);
  text-shadow: 0 0 18px rgba(242, 185, 75, .12);
  margin-bottom: 4px;
}
.metaCard__v{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.68);
}

/* Hero visual */
.glassCard{
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  background: rgba(10, 11, 16, .55);
  border: 1px solid rgba(255, 217, 142, .14);
  box-shadow: 0 26px 80px rgba(0,0,0,.65);
  backdrop-filter: blur(20px) saturate(150%);
}
.glassCard::before{
  content:"";
  position:absolute;
  inset: -2px;
  background: linear-gradient(135deg,
    rgba(255, 242, 201, .20),
    rgba(255, 217, 142, .08),
    rgba(86, 140, 255, .06),
    rgba(242, 185, 75, .18));
  opacity: .55;
  filter: blur(20px);
  pointer-events: none;
}
.glassCard__top, .glassCard__bottom{
  position: relative;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 12px 14px;
}
.glassCard__top{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.glassCard__label{
  margin-left: 10px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.traffic{
  width: 10px; height: 10px;
  border-radius: 999px;
  opacity: .9;
}
.traffic--red{ background: #ff5f57; }
.traffic--yellow{ background: #febc2e; }
.traffic--green{ background: #28c840; }

.glassCard__body{
  position: relative;
  padding: 18px;
}
.heroShot{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.2);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.timelapse{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255, 242, 201, .08), transparent 55%),
    rgba(0,0,0,.22);
  box-shadow: 0 22px 60px rgba(0,0,0,.58);
  overflow: hidden;
}

.timelapse::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(242,185,75,.12), transparent 55%),
    radial-gradient(110% 120% at 90% 20%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode: screen;
  opacity: .55;
}

.timelapse__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity .55s ease;
  user-select:none;
  -webkit-user-drag:none;
}

.timelapse__img.is-active{
  opacity: 1;
}

.chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
}
.chip--gold{
  border-color: rgba(255, 217, 142, .18);
  background: rgba(242, 185, 75, .08);
  color: rgba(255, 242, 201, .90);
  box-shadow: 0 0 18px rgba(242, 185, 75, .10) inset;
}


/* ---------------------------------------------------------
   Features (interactive showcase)
--------------------------------------------------------- */
.features{
  position: relative;
  padding: 80px 0 86px;
  z-index: 1;
}
.features::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(242, 185, 75, .12), transparent 62%),
    radial-gradient(closest-side at 82% 74%, rgba(86, 140, 255, .10), transparent 66%);
  opacity: .90;
}

.features__header{
  position: relative;
  text-align: center;
  max-width: 980px;
  margin: 0 auto 26px;
}
.pill--features{
  margin-inline: auto;
}
.features__title{
  margin: 12px 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.features__subtitle{
  margin: 0 auto;
  max-width: 72ch;
  color: rgba(255,255,255,.70);
  line-height: 1.7;
}
.features__fineprint{
  margin: 18px auto 0;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.56);
  max-width: 88ch;
}

/* ---------------------------------------------------------
   Feature section: subtle scroll-reveal (Apple-like)
--------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .js .features .features__header{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .70s ease, transform .80s cubic-bezier(.2,.8,.2,1);
  }
  .js .features .featureCard{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .60s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  }
  .js .features .featureStage{
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity .70s ease, transform .85s cubic-bezier(.2,.8,.2,1);
  }
  .js .features .featureBullets{
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .60s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  }

  .js .features.is-inview .features__header{
    opacity: 1;
    transform: none;
  }
  .js .features.is-inview .featureCard{
    opacity: 1;
    transform: none;
  }
  .js .features.is-inview .featureCard:nth-child(1){ transition-delay: .05s; }
  .js .features.is-inview .featureCard:nth-child(2){ transition-delay: .10s; }
  .js .features.is-inview .featureCard:nth-child(3){ transition-delay: .15s; }
  .js .features.is-inview .featureCard:nth-child(4){ transition-delay: .20s; }

  .js .features.is-inview .featureStage{
    opacity: 1;
    transform: none;
    transition-delay: .12s;
  }
  .js .features.is-inview .featureBullets{
    opacity: 1;
    transform: none;
    transition-delay: .20s;
  }
}



.featureShow{
  position: relative;
  display: grid;
  /* Preview (left) + cards (right) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 22px;
  /* Important: stretch columns so the preview can fill the full section height */
  align-items: stretch;
}
.featureShow__list{
  display: grid;
  gap: 12px;
  /* Cards on the right */
  order: 2;
}

.featureShow__stage{
  /* Preview on the left */
  order: 1;
  height: 100%;
}


@media (min-width: 981px){
  .featureShow__stage{
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.featureCard{
  text-align: left;
  border-radius: 18px;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,242,201,.12), transparent 52%),
    rgba(18, 19, 26, .30);
  backdrop-filter: blur(16px) saturate(150%);
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}

.featureCard::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255, 242, 201, .22) 28%,
      rgba(242, 185, 75, .16) 55%,
      transparent 100%);
  filter: blur(14px);
  transform: translateX(-70%) rotate(8deg);
  opacity: 0;
  transition: opacity .2s ease, transform .6s ease;
}

.featureCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,217,142,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 3px rgba(242,185,75,.08);
}
.featureCard:hover::before{
  opacity: 1;
  transform: translateX(40%) rotate(8deg);
}

.featureCard.is-active{
  border-color: rgba(255,217,142,.35);
  box-shadow:
    0 0 0 1px rgba(255,217,142,.14) inset,
    0 30px 80px rgba(0,0,0,.60),
    0 0 34px rgba(242,185,75,.16);
}

.featureCard__top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.featureCard__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  color: rgba(255, 242, 201, .92);
  background:
    radial-gradient(120% 160% at 20% 10%, rgba(255,255,255,.12), transparent 55%),
    rgba(10, 11, 16, .55);
  border: 1px solid rgba(255,217,142,.16);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.featureCard__title{
  font-weight: 750;
  color: rgba(255,255,255,.92);
}
.featureCard__desc{
  color: rgba(255,255,255,.70);
  line-height: 1.5;
  margin: 0 0 10px;
  font-size: 14px;
}
.featureCard__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,11,16,.38);
  color: rgba(255,242,201,.86);
  text-shadow: 0 0 16px rgba(242,185,75,.12);
}

.featureShow__stage{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.featureStage{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(10, 11, 16, .55);
  border: 1px solid rgba(255, 217, 142, .14);
  box-shadow:
    0 34px 90px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,217,142,.10) inset;
  backdrop-filter: blur(18px) saturate(150%);
  /* Fill the available column height so we never get an empty block under the preview */
  flex: 1;
  height: 100%;
  min-height: 420px;
}
.featureStage::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg,
    rgba(255, 242, 201, .18),
    rgba(255, 217, 142, .06),
    rgba(86, 140, 255, .06),
    rgba(242, 185, 75, .14));
  opacity: .65;
  filter: blur(22px);
  pointer-events: none;
}
.featureStage__img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .35s ease, transform .45s ease;
}
.featureStage__img.is-active{
  opacity: 1;
  transform: scale(1.0);
}
.featureStage__shine{
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), rgba(242,185,75,.14), transparent);
  filter: blur(16px);
  transform: translateX(-55%) rotate(10deg);
  opacity: .22;
  pointer-events:none;
}

/* ---------------------------------------------------------
   Feature stage hotspots (gold callouts)
--------------------------------------------------------- */
.featureHotspots{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hotspot{
  position: absolute;
  transform: translate(-50%, -50%) translateY(10px) scale(.985);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity .55s ease, transform .80s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}

.features.is-inview .hotspot{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.hotspot__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(242,185,75,.98));
  box-shadow:
    0 0 0 7px rgba(242,185,75,.10),
    0 0 26px rgba(242,185,75,.22),
    0 0 60px rgba(242,185,75,.16);
}

@media (prefers-reduced-motion: no-preference){
  .hotspot__dot{
    animation: hotspot-pulse 1.9s ease-out infinite;
    animation-delay: calc(var(--i, 0) * -0.35s);
  }
}

.hotspot__label{
  position: relative;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,217,142,.26);
  background: rgba(10,11,16,.36);
  backdrop-filter: blur(14px) saturate(160%);
  color: rgba(255,242,201,.95);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .22px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,217,142,.10) inset;
  overflow: hidden;
  white-space: nowrap;
}

.hotspot__label::after{
  content:"";
  position:absolute;
  inset:-70% -60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 242, 201, .26) 30%,
    rgba(242, 185, 75, .18) 55%,
    transparent 100%);
  filter: blur(16px);
  transform: translateX(-40%) rotate(12deg);
  opacity: .0;
}

.features.is-inview .hotspot__label::after{
  opacity: .65;
}

@media (prefers-reduced-motion: no-preference){
  .features.is-inview .hotspot__label::after{
    animation: hotspot-shine 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.7s);
  }
  .features.is-inview .hotspot__label{
    animation: hotspot-float 4.8s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.65s);
  }
}

@keyframes hotspot-pulse{
  0%   { box-shadow: 0 0 0 7px rgba(242,185,75,.12), 0 0 26px rgba(242,185,75,.22), 0 0 60px rgba(242,185,75,.16); }
  55%  { box-shadow: 0 0 0 13px rgba(242,185,75,.02), 0 0 36px rgba(242,185,75,.28), 0 0 70px rgba(242,185,75,.18); }
  100% { box-shadow: 0 0 0 7px rgba(242,185,75,.12), 0 0 26px rgba(242,185,75,.22), 0 0 60px rgba(242,185,75,.16); }
}

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

@keyframes hotspot-shine{
  0%   { transform: translateX(-45%) rotate(12deg); }
  50%  { transform: translateX(35%) rotate(12deg); }
  100% { transform: translateX(-45%) rotate(12deg); }
}



.featureBullets{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 19, 26, .30);
  backdrop-filter: blur(16px) saturate(150%);
  padding: 16px 16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.48);
}
.featureBullets ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
}
.featureBullets li{
  color: rgba(255,255,255,.74);
  line-height: 1.6;
}
.featureBullets .muted{
  color: rgba(255,255,255,.55);
}
.featureBullets__panel{ display:none; }
.featureBullets__panel.is-active{ display:block; }


/* ---------------------------------------------------------
   Showcase (Compare)
--------------------------------------------------------- */
.showcase{
  position: relative;
  z-index: 1;
  padding: 44px 0 34px;
}
.showcase__header{
  margin-bottom: 3rem;
  text-align: center;
}
.showcase__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.6px;
  line-height: 1.12;
}
.showcase__subtitle{
  margin: 0 auto;
  max-width: 68ch;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}

/* nearly full page component */
.compare{
  position: relative;
}
.compare__frame{
  position: relative;
  height: clamp(420px, 58vh, 660px); /* match hero section scale */
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 34px 110px rgba(0,0,0,.72);
  background: rgba(10, 11, 16, .60);
  isolation: isolate;
}

/* Professional layered border */
.compare__frame::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 242, 201, .36),
    rgba(255, 217, 142, .10),
    rgba(86, 140, 255, .08),
    rgba(242, 185, 75, .26)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .95;
}

.compare__frame::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 1px 0 rgba(0,0,0,.35) inset;
  pointer-events: none;
}

.compare__img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  user-select: none;
  -webkit-user-drag: none;
}

.compare__img--night{ object-position: center; transform: none; }
.compare__img--day{ object-position: center; transform: none; }

.compare__overlay{
  position:absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  border-right: 1px solid rgba(255, 217, 142, .20);
}
.compare__range{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.compare__handle{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 242, 201, .22), transparent 55%),
    radial-gradient(120% 120% at 90% 70%, rgba(242, 185, 75, .18), transparent 55%),
    rgba(10, 11, 16, .72);
  border: 1px solid rgba(255, 217, 142, .22);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    0 0 0 1px rgba(255, 217, 142, .10) inset,
    0 22px 70px rgba(0,0,0,.65),
    0 0 36px rgba(242, 185, 75, .14);
  display: grid;
  place-items: center;
  pointer-events: none; /* drag uses range */
}
.compare__handleInner{
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.arrow{
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(0 0 14px rgba(242, 185, 75, .18));
}
.arrow--l{
  border-right: 10px solid rgba(255, 242, 201, .92);
  opacity: .92;
}
.arrow--r{
  border-left: 10px solid rgba(255, 242, 201, .92);
  opacity: .92;
}

/* Badges */
.compare__badge{
  position:absolute;
  top: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  background: rgba(10, 11, 16, .58);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(150%);
  z-index: 3;
}
.compare__badge--left{ left: 18px; }
.compare__badge--right{ right: 18px; }

/* Extra glow / shine layer */
.compare__shine{
  position:absolute;
  inset: -30%;
  background:
    radial-gradient(closest-side at 30% 10%, rgba(255, 242, 201, .12), transparent 55%),
    radial-gradient(closest-side at 110% 70%, rgba(242, 185, 75, .08), transparent 60%);
  pointer-events: none;
  filter: blur(20px);
  opacity: .85;
  z-index: 1;
}

/* ---------------------------------------------------------
   Footer (professional)
--------------------------------------------------------- */
.footer{
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

.footer__top{
  border-top: 1px solid rgba(255, 217, 142, .10);
  background: rgba(10, 11, 16, .62);
  backdrop-filter: blur(16px) saturate(150%);
}
.footer__top::before{
  content:"";
  display:block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 142, .22), transparent);
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.05fr 1.45fr;
  gap: 24px;
  padding: 28px 0;
}

.footerBrand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footerBrand__logo{
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 16px rgba(242, 185, 75, .20));
}
.footerBrand__name{
  font-weight: 800;
  letter-spacing: .2px;
}
.footerBrand__tag{
  color: rgba(255,255,255,.64);
  font-size: 13px;
  margin-top: 2px;
}

.footer__note{
  margin-top: 12px;
  color: rgba(255,255,255,.62);
  line-height: 1.6;
  font-size: 13px;
  max-width: 50ch;
}

.footer__social{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}
.social{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.social:hover{
  transform: translateY(-1px);
  border-color: rgba(255, 217, 142, .18);
  box-shadow: 0 0 0 3px rgba(242, 185, 75, .08), 0 18px 50px rgba(0,0,0,.45);
}
.social__icon{
  width: 16px; height: 16px;
  opacity: .9;
  position: relative;
}
.social__icon--x{
  background: linear-gradient(180deg, rgba(255, 242, 201, .92), rgba(242, 185, 75, .85));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23 22h-6.6l-5.2-6.6L5.4 22H2.3l7.4-8.5L1 2h6.8l4.7 6L18.9 2Zm-1.2 18h1.7L7.2 3.9H5.4L17.7 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9 2H22l-6.8 7.8L23 22h-6.6l-5.2-6.6L5.4 22H2.3l7.4-8.5L1 2h6.8l4.7 6L18.9 2Zm-1.2 18h1.7L7.2 3.9H5.4L17.7 20Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.social__icon--yt{
  background: linear-gradient(180deg, rgba(255, 242, 201, .92), rgba(242, 185, 75, .85));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.3V8.7l6 3.3-6 3.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.7 4.6 12 4.6 12 4.6s-5.7 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.8.5 7.5.5 7.5.5s5.7 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.3V8.7l6 3.3-6 3.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.social__icon--tg{
  background: linear-gradient(180deg, rgba(255, 242, 201, .92), rgba(242, 185, 75, .85));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8 4.6 18.8 20c-.2 1.1-.8 1.4-1.6.9l-4.5-3.3-2.2 2.1c-.2.2-.4.4-.8.4l.3-4.8L19 7.7c.4-.4-.1-.6-.7-.2l-11 6.9L2.6 13c-1-.3-1-.9.2-1.4L20.6 4.4c.9-.3 1.7.2 1.2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.8 4.6 18.8 20c-.2 1.1-.8 1.4-1.6.9l-4.5-3.3-2.2 2.1c-.2.2-.4.4-.8.4l.3-4.8L19 7.7c.4-.4-.1-.6-.7-.2l-11 6.9L2.6 13c-1-.3-1-.9.2-1.4L20.6 4.4c.9-.3 1.7.2 1.2.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.social__icon--ig{
  background: linear-gradient(180deg, rgba(255, 242, 201, .92), rgba(242, 185, 75, .85));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-5 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.2-.8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-5 4a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm5.2-.8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.footer__cols{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-content: start;
}
.footerCol h3{
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(255, 242, 201, .88);
  text-shadow: 0 0 16px rgba(242, 185, 75, .10);
}
.footerCol a{
  display:block;
  padding: 8px 0;
  color: rgba(255,255,255,.70);
  border-radius: 10px;
}
.footerCol a:hover{
  color: rgba(255, 242, 201, .92);
  text-shadow: 0 0 18px rgba(242, 185, 75, .12);
}

.footer__bottom{
  background: rgba(8, 9, 12, .80);
  border-top: 1px solid rgba(255,255,255,.08);
}
.footerBottom{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0 18px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.footerBottom__links{
  display:flex;
  gap: 14px;
}
.footerBottom__links a:hover{
  color: rgba(255, 242, 201, .90);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
.mobileNav{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.mobileNav.is-open{ display: block; }
.mobileNav__panel{
  position:absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  border-radius: 22px;
  background: rgba(10, 11, 16, .92);
  border: 1px solid rgba(255, 217, 142, .16);
  box-shadow: 0 30px 90px rgba(0,0,0,.75);
  padding: 14px;
}
.mobileNav__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mobileNav__title{
  font-weight: 800;
}
.searchPill--mobile{
  width: 100%;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mobileNav__links{
  display:grid;
  gap: 10px;
}
.mobileGroup{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.mobileGroup summary{
  cursor: pointer;
  color: rgba(255,255,255,.86);
  font-weight: 650;
}
.mobileGroup a{
  display:block;
  padding: 8px 0 0;
  color: rgba(255,255,255,.68);
}
.mobileGroup a:hover{ color: rgba(255, 242, 201, .92); }

.mobileLink{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.mobileLink:hover{
  border-color: rgba(255, 217, 142, .18);
  color: rgba(255, 242, 201, .92);
}

.mobileNav__actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
}
.mobileNav__actions .btn{
  flex: 1;
}

/* Responsive breakpoint */
@media (max-width: 980px){
  .featureShow{ grid-template-columns: 1fr; }
  .featureShow__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .navToggle{ display: inline-block; }
  .nav{ display: none; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ order: -1; }
  .hero{ padding-top: 26px; }
  .hero__meta{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .hero__cta{ grid-template-columns: 1fr; }
  .hero__cta .btn{ width: 94%; margin-inline: 3%; }
  .featureShow{ grid-template-columns: 1fr; }
  .featureShow__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .container--showcase{ width: calc(100% - 28px); }
  .compare__frame{ border-radius: 20px; }
  .compare__frame::before, .compare__frame::after{ border-radius: 20px; }
  .compare__handle{ width: 56px; height: 56px; border-radius: 16px; }
  .featureShow__list{ grid-template-columns: 1fr; }
}

.avatar--hidden{ display: none; }


/* ---------------------------------------------------------
   Roadmap (premium timeline)
--------------------------------------------------------- */
.roadmap{
  position: relative;
  z-index: 1;
  padding: 86px 0 96px;
}
.roadmap::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 25%, rgba(242, 185, 75, .10), transparent 60%),
    radial-gradient(closest-side at 84% 40%, rgba(120, 155, 255, .10), transparent 62%);
  opacity: .9;
}
.roadmap__header{
  position: relative;
  text-align: center;
  margin-bottom: 34px;
}
.pill--roadmap{
  border-color: rgba(255, 217, 142, .16);
  background: rgba(242, 185, 75, .06);
}
.roadmap__title{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: -0.6px;
  line-height: 1.12;
}
.roadmap__subtitle{
  margin: 0 auto;
  max-width: 76ch;
  color: rgba(255,255,255,.72);
  line-height: 1.72;
}

.roadmapTimeline{
  position: relative;
  margin-top: 30px;
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  gap: 18px;
}

.roadmapRail{
  position:absolute;
  left: 56px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.00),
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.08) 82%,
    rgba(255,255,255,.00)
  );
  z-index: 0;
}
.roadmapRail__fill{
  position:absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(242,185,75,.00),
    rgba(242,185,75,.55) 18%,
    rgba(255,217,142,.95) 55%,
    rgba(120,155,255,.22) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 217, 142, .10),
    0 0 26px rgba(242, 185, 75, .22),
    0 0 60px rgba(242, 185, 75, .12);
  transition: height .9s cubic-bezier(.2,.8,.2,1);
}

.roadmapItem{
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: start;
  z-index: 1;
}
.roadmapNode{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}
.roadmapNode__ring{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(242, 185, 75, .55), rgba(120, 155, 255, .18));
  padding: 1px;
  position: relative;
  box-shadow: 0 16px 45px rgba(0,0,0,.55);
}
.roadmapNode__ring::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  background: rgba(10, 11, 16, .70);
  backdrop-filter: blur(14px) saturate(150%);
}
.roadmapNode__num{
  position: relative;
  z-index: 1;
  display:flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255, 217, 142, .95);
  text-shadow: 0 0 22px rgba(242, 185, 75, .22);
}

.badge{
  display: inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
  backdrop-filter: blur(12px) saturate(150%);
}
.badge--now{
  border-color: rgba(255, 217, 142, .20);
  background: rgba(242, 185, 75, .10);
  color: rgba(255, 217, 142, .95);
  box-shadow: 0 0 22px rgba(242, 185, 75, .14);
}
.badge--next{
  border-color: rgba(255, 217, 142, .16);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
}
.badge--plan{
  border-color: rgba(120, 155, 255, .18);
  background: rgba(120, 155, 255, .08);
  color: rgba(210, 226, 255, .88);
}
.badge--later{
  border-color: rgba(255,255,255,.10);
  background: rgba(10, 11, 16, .34);
  color: rgba(255,255,255,.66);
}

.roadmapCard{
  position: relative;
  border-radius: calc(var(--radius-xl) - 2px);
  border: var(--border-soft);
  background: rgba(18, 19, 26, .48);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
  overflow: hidden;
}
.roadmapCard::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 22% 12%, rgba(255, 217, 142, .14), transparent 60%),
    radial-gradient(closest-side at 88% 18%, rgba(120, 155, 255, .10), transparent 55%),
    linear-gradient(135deg, rgba(255, 217, 142, .12), rgba(255,255,255,.02));
  opacity: .9;
}
.roadmapCard::after{
  content:"";
  position:absolute;
  inset: -45%;
  pointer-events:none;
  background: radial-gradient(closest-side at 35% 10%, rgba(255, 242, 201, .22), transparent 60%);
  opacity: .55;
  transform: rotate(-12deg);
}
.roadmapCard__top{
  position: relative;
  z-index: 1;
  display:flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.roadmapCard__title{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.roadmapCard__meta{
  font-size: 13px;
  color: rgba(255,255,255,.64);
}

.roadmapCard__list{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  font-size: 14px;
}
.roadmapCard__list li{
  position: relative;
  padding-left: 16px;
}
.roadmapCard__list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(242, 185, 75, .85);
  box-shadow: 0 0 0 4px rgba(242, 185, 75, .12), 0 0 18px rgba(242, 185, 75, .14);
}

.roadmap__note{
  position: relative;
  margin: 18px auto 0;
  max-width: 78ch;
  color: rgba(255,255,255,.64);
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}
.roadmap__noteDot{
  display:inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(242, 185, 75, .92);
  box-shadow: 0 0 0 4px rgba(242, 185, 75, .12), 0 0 22px rgba(242, 185, 75, .16);
  margin-right: 8px;
  transform: translateY(-1px);
}

/* Reveal */
.js .roadmap .roadmapItem{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .75s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0s);
}
.js .roadmap.is-inview .roadmapItem{
  opacity: 1;
  transform: none;
}
.roadmapItem.is-active .roadmapNode__ring{
  box-shadow:
    0 18px 55px rgba(0,0,0,.6),
    0 0 0 1px rgba(255, 217, 142, .14),
    0 0 30px rgba(242, 185, 75, .16);
}

/* Responsive */
@media (max-width: 900px){
  .roadmapTimeline{ max-width: 100%; }
  .roadmapItem{ grid-template-columns: 92px 1fr; gap: 16px; }
  .roadmapRail{ left: 46px; }
}
@media (max-width: 560px){
  .roadmap{ padding: 74px 0 84px; }
  .roadmapItem{ grid-template-columns: 78px 1fr; }
  .roadmapRail{ left: 39px; }
  .roadmapCard{ padding: 16px 16px; border-radius: 20px; }
}