:root{
  --bg:#f6fbff;
  --ink:#06111a;

  --mut: rgba(6,17,26,.68);
  --mut2: rgba(6,17,26,.52);

  --c1:#25d7ff;  /* cyan */
  --c2:#2bff88;  /* green */
  --c3:#5b7cff;  /* blue */
  --c4:#a1ffdf;  /* mint */

  --line: rgba(6,17,26,.12);
  --line2: rgba(6,17,26,.08);

  --shadow: 0 26px 70px rgba(6,17,26,.12);
  --shadow2: 0 14px 34px rgba(6,17,26,.10);

  --max: 1180px;
  --r2: 18px;
  --r3: 26px;
  --pill: 999px;

  /* tilt vars applied to phoneWrap */
  --rx: 0deg;
  --ry: 0deg;
  --sx: 50%;
  --sy: 35%;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible{
  outline: 2px solid rgba(37,215,255,.65);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ===== Boot ===== */
.boot{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:1; transition: opacity .55s ease; }
.is-boot .boot{ pointer-events:auto; }

.boot__wash{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 680px at 50% 40%, rgba(37,215,255,.22), transparent 60%),
    radial-gradient(860px 720px at 55% 60%, rgba(43,255,136,.16), transparent 62%),
    linear-gradient(180deg, rgba(246,251,255,1), rgba(246,251,255,.94));
}
.boot__scan{
  position:absolute; inset:-60% -20%;
  background: linear-gradient(120deg, transparent 0%, rgba(6,17,26,.04) 28%, rgba(6,17,26,.10) 45%, rgba(6,17,26,.04) 62%, transparent 82%);
  transform: translateX(-72%) rotate(12deg);
  opacity:0;
  animation: bootScan 1.1s ease forwards .10s;
}
@keyframes bootScan{
  0%{ transform: translateX(-72%) rotate(12deg); opacity:0; }
  20%{ opacity:.18; }
  100%{ transform: translateX(72%) rotate(12deg); opacity:0; }
}
.boot__card{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap: 12px;
  padding: 18px 20px; border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: 0 26px 80px rgba(6,17,26,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.boot__logo{
  width: 44px; height: 44px; border-radius: 14px; overflow:hidden;
  border: 1px solid rgba(6,17,26,.10);
  background: linear-gradient(135deg, rgba(37,215,255,.22), rgba(43,255,136,.18));
  box-shadow: 0 10px 22px rgba(6,17,26,.12);
  display:grid; place-items:center;
}
.boot__logo img{ width:100%; height:100%; object-fit:cover; }
.boot__txt{
  font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(6,17,26,.68);
}
.boot__bar{
  width: 220px; height: 10px; border-radius: 999px;
  background: rgba(6,17,26,.06); border: 1px solid rgba(6,17,26,.08);
  overflow:hidden;
}
.boot__bar i{
  display:block; height:100%; width: 0%;
  background: linear-gradient(90deg, rgba(43,255,136,.95), rgba(37,215,255,.95), rgba(91,124,255,.85));
  animation: bootFill 1.15s ease forwards .12s;
}
@keyframes bootFill{ to{ width: 100%; } }

.is-boot .wrap{ filter: blur(6px) saturate(115%); transform: scale(1.01); }
.wrap{ transition: filter .55s ease, transform .55s ease; }
body:not(.is-boot) .boot{ opacity:0; }

/* ===== Background ===== */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:-10; }
.bg__blob{
  position:absolute; inset:-10%;
  background:
    radial-gradient(700px 520px at 18% 22%, rgba(37,215,255,.22), transparent 62%),
    radial-gradient(820px 620px at 82% 18%, rgba(43,255,136,.18), transparent 62%),
    radial-gradient(980px 760px at 60% 86%, rgba(91,124,255,.14), transparent 66%),
    radial-gradient(720px 520px at 46% 54%, rgba(161,255,223,.24), transparent 68%);
  animation: blob 16s ease-in-out infinite alternate;
}
@keyframes blob{
  0%{ transform: translate3d(-1%,-1%,0) scale(1.02); }
  50%{ transform: translate3d( 1%, .7%,0) scale(1.06); }
  100%{ transform: translate3d(.6%, 1%,0) scale(1.03); }
}
.bg__rays{
  position:absolute; inset:0;
  opacity:.28;
  background: conic-gradient(from 220deg at 60% 40%, rgba(37,215,255,.18), rgba(43,255,136,.14), rgba(91,124,255,.14), rgba(37,215,255,.18));
  filter: blur(18px);
  -webkit-mask-image: radial-gradient(circle at 60% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,0) 76%);
          mask-image: radial-gradient(circle at 60% 42%, rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,0) 76%);
}
.bg__grain{
  position:absolute; inset:0;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
}

/* ===== Layout ===== */
.wrap{ max-width: var(--max); margin: 0 auto; padding: 18px 18px 52px; }

/* ===== Header ===== */
.head{
  position: sticky;
  top: 12px;
  z-index: 60;

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;

  padding: 10px 12px;
  border-radius: var(--pill);

  background: rgba(255,255,255,.74);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand{ justify-self:start; display:flex; align-items:center; gap: 12px; min-width: 260px; }
.brand__icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(37,215,255,.24), rgba(43,255,136,.18));
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: 0 10px 22px rgba(6,17,26,.10);
  display:grid; place-items:center;
}
.brand__icon img{ width:100%; height:100%; object-fit:cover; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{ font-weight: 950; letter-spacing:.2px; }
.brand__sub{ margin-top: 3px; font-size: 12px; color: var(--mut); }

/* Vector nav */
.vnav{
  justify-self:center;
  position: relative;
  display:flex;
  align-items:center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--pill);
  background: rgba(6,17,26,.04);
  border: 1px solid rgba(6,17,26,.08);
}
.vnav__link{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap: 8px;

  height: 40px;
  padding: 0 14px;
  border-radius: var(--pill);

  color: rgba(6,17,26,.70);
  font-weight: 900;
  font-size: 14px;

  transition: transform .18s ease, color .18s ease;
}
.vnav__link:hover{ transform: translateY(-1px); color: rgba(6,17,26,.92); }
.vnav__ico{ width: 18px; height: 18px; display:grid; place-items:center; }
.vnav__ico svg{ width:18px; height:18px; }
.vnav__pill{
  position:absolute;
  top: 4px;
  left: var(--x, 6px);
  width: var(--w, 92px);
  height: calc(100% - 8px);
  border-radius: var(--pill);
  z-index:1;
  background: linear-gradient(90deg, rgba(43,255,136,.34), rgba(37,215,255,.34), rgba(91,124,255,.22));
  border: 1px solid rgba(6,17,26,.08);
  box-shadow: 0 10px 22px rgba(6,17,26,.10);
  transition: left .22s ease, width .22s ease;
}
.vnav__link.is-on{ color: rgba(6,17,26,.92); }

/* Ready chip */
.chip{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--pill);
  background: rgba(6,17,26,.04);
  border: 1px solid rgba(6,17,26,.08);
}
.chip__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c2), var(--c1));
  box-shadow: 0 0 0 7px rgba(37,215,255,.12);
  animation: dot 2.2s ease-in-out infinite;
}
@keyframes dot{ 0%,100%{ transform: scale(1); opacity:.82; } 50%{ transform: scale(1.18); opacity:1; } }
.chip__tx{ font-size: 13px; font-weight: 900; color: rgba(6,17,26,.66); }

/* ===== Main ===== */
.main{
  min-height: calc(100vh - 110px);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  padding: 30px 0 10px;
  align-items:start;
}

/* Left */
.left{ padding: 6px 4px; }

.tag{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.tag__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 0 0 7px rgba(43,255,136,.12);
}
.tag__tx{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: var(--pill);
  background: rgba(6,17,26,.04);
  border: 1px solid rgba(6,17,26,.08);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  color: rgba(6,17,26,.62);
}

.h1{
  margin: 18px 0 0;
  font-size: 70px;
  line-height: 1.02;
  letter-spacing: -1.3px;
  font-weight: 980;
  color: rgba(6,17,26,.92);
}
.h1__grad{
  background: linear-gradient(90deg, rgba(43,255,136,1), rgba(37,215,255,1), rgba(91,124,255,1));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.p{ margin: 12px 0 0; max-width: 640px; color: var(--mut); font-size: 16px; line-height: 1.7; }

.stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.stat{
  padding: 14px 14px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: var(--shadow2);
  position: relative;
  overflow:hidden;
}
.stat::after{
  content:"";
  position:absolute;
  inset:-60% -20%;
  background: linear-gradient(110deg, transparent 0%, rgba(6,17,26,.06) 45%, transparent 80%);
  transform: translateX(-70%) rotate(12deg);
  opacity:.14;
  animation: sheen 6.2s ease-in-out infinite;
}
@keyframes sheen{
  0%{ transform: translateX(-70%) rotate(12deg); opacity:0; }
  16%{ opacity:.14; }
  100%{ transform: translateX(70%) rotate(12deg); opacity:0; }
}
.stat__top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.stat__top span{ font-size: 11px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; color: rgba(6,17,26,.62); }
.stat__top em{ font-style: normal; font-size: 12px; font-weight: 900; color: rgba(6,17,26,.50); }
.stat__val{ margin-top: 10px; font-size: 34px; font-weight: 980; letter-spacing: -.6px; color: rgba(6,17,26,.92); }
.stat__sub{ margin-top: 6px; font-size: 13px; color: rgba(6,17,26,.56); }

.lat{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: var(--r2);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: var(--shadow2);
}
.lat__top{ display:flex; justify-content:space-between; align-items:center; }
.lat__top b{ font-size: 12px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; color: rgba(6,17,26,.62); }
.lat__top span{ font-size: 12px; font-weight: 850; color: rgba(6,17,26,.52); }
.lat__svg{ margin-top: 10px; width:100%; height:64px; display:block; }
.lat__grid{ stroke: rgba(6,17,26,.10); stroke-width:1; fill:none; }
.lat__path{
  stroke: rgba(37,215,255,.95);
  stroke-width: 2.6;
  fill:none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(37,215,255,.18));
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.35s ease forwards, wobble 4.2s ease-in-out infinite 1.35s;
}
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes wobble{ 0%,100%{ opacity:.78; transform: translateY(0px);} 50%{ opacity:1; transform: translateY(-1px);} }
.lat__sub{ margin-top:10px; font-size:13px; color: rgba(6,17,26,.56); }

.cta{ margin-top: 14px; display:flex; flex-direction:column; align-items:flex-start; gap: 12px; }
.store{
  display:inline-flex;
  align-items:center;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: var(--shadow2);
  transition: transform .18s ease;
}
.store:hover{ transform: translateY(-2px); }
.fine{ font-size:13px; color: rgba(6,17,26,.56); }
.fine a{ color: rgba(6,17,26,.72); }
.fine a:hover{ color: rgba(6,17,26,.92); text-decoration: underline; }

/* ===== Right: promo block equals PHONE size ===== */
.right{
  display:flex;
  flex-direction:column;
  gap: 12px;
  align-items: flex-end;
}

.phoneWrap{
  position: relative;
  width: fit-content;
  transform-style: preserve-3d;
  transform: perspective(980px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s ease;
}

.halo{
  position:absolute;
  inset:-18%;
  z-index:0;
  background:
    radial-gradient(closest-side at 32% 28%, rgba(37,215,255,.22), transparent 62%),
    radial-gradient(closest-side at 70% 32%, rgba(43,255,136,.18), transparent 62%),
    radial-gradient(closest-side at 54% 80%, rgba(91,124,255,.14), transparent 68%);
  filter: blur(34px);
  opacity:.85;
  pointer-events:none;
}

.phone{
  position: relative;

  /* IMPORTANT: set this to your actual screenshot height (px) */
  --screenH: 680px;

  /* PHONE IS SHORTER than screenshot by 20px */
  height: calc(var(--screenH) - 20px);

  aspect-ratio: 9 / 19.5;
  border-radius: 34px;

  transform: translateZ(16px);
  filter: drop-shadow(0 26px 60px rgba(6,17,26,.22));
  z-index: 1;
}

@media (max-height: 760px){
  .phone{ height: min(calc(var(--screenH) - 20px), 620px); }
}

.phone__rim{
  position:absolute;
  inset:-2px;
  border-radius: 36px;
  background: linear-gradient(180deg, rgba(6,17,26,.10), rgba(6,17,26,.02));
  border: 1px solid rgba(6,17,26,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.40);
}

.phone__notch{
  position:absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 22px;
  border-radius: 999px;
  background: rgba(6,17,26,.72);
  border: 1px solid rgba(255,255,255,.30);
  z-index: 3;
}

.reveal{
  position:absolute;
  inset: 10px;
  border-radius: 28px;
  overflow:hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(6,17,26,.10);

  clip-path: inset(0 0 100% 0 round 28px);
  animation: revealIn .85s cubic-bezier(.2,.9,.2,1) forwards .15s;
}
@keyframes revealIn{ to{ clip-path: inset(0 0 0 0 round 28px); } }

.screen{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  opacity: 0;
  animation: screenPop .9s cubic-bezier(.2,.9,.2,1) forwards .20s;
}
@keyframes screenPop{ to{ opacity: 1; transform: scale(1.0); } }

.scan{
  position:absolute;
  inset:-30% -20%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, rgba(43,255,136,.12) 62%, transparent 82%);
  transform: translateX(-70%) rotate(12deg);
  opacity:0;
  animation: scanOnce 1.2s ease forwards .55s, scanLoop 7.8s ease-in-out infinite 1.8s;
}
@keyframes scanOnce{
  0%{ transform: translateX(-70%) rotate(12deg); opacity:0; }
  30%{ opacity:.28; }
  100%{ transform: translateX(70%) rotate(12deg); opacity:0; }
}
@keyframes scanLoop{
  0%{ transform: translateX(-80%) rotate(12deg); opacity:0; }
  18%{ opacity:.20; }
  100%{ transform: translateX(80%) rotate(12deg); opacity:0; }
}

/* UI hotspots */
.hot{
  position:absolute;
  inset: 10px;
  border-radius: 28px;
  pointer-events:none;
  z-index: 4;
}
.hot span{
  position:absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%,
    rgba(255,255,255,.55),
    rgba(37,215,255,.24) 36%,
    rgba(43,255,136,0) 72%);
  opacity:0;
  transform: scale(.84);
  animation: pulse 2.35s ease-in-out infinite;
}
@keyframes pulse{
  0%{ opacity:0; transform: scale(.84); }
  28%{ opacity:.95; }
  62%{ opacity:.24; transform: scale(1.20); }
  100%{ opacity:0; transform: scale(1.30); }
}

/* positions for your UI */
.hot__gear  { width:56px; height:56px; left: 6%;  top: 6%;  animation-delay:.08s; }
.hot__pro   { width:58px; height:58px; right: 7%; top: 6%;  animation-delay:.28s; }
.hot__timer { width:76px; height:62px; left: 50%; top: 17%; transform: translateX(-50%) scale(.84); animation-delay:.40s; }
.hot__center{ width:140px; height:140px; left: 50%; top: 45%; transform: translate(-50%,-50%) scale(.84); animation-delay:.14s; }
.hot__route { width:68px; height:58px; left: 10%; bottom: 16%; animation-delay:.58s; }
.hot__change{ width:76px; height:58px; right: 8%; bottom: 16%; animation-delay:.72s; }

.phone__shadow{
  position:absolute;
  left: 12%;
  right: 12%;
  bottom: -20px;
  height: 40px;
  background: radial-gradient(closest-side, rgba(6,17,26,.18), transparent 70%);
  filter: blur(10px);
  opacity:.45;
}

.spot{
  position:absolute;
  inset:-20%;
  background: radial-gradient(340px 260px at var(--sx) var(--sy),
    rgba(255,255,255,.42),
    rgba(37,215,255,.20) 35%,
    transparent 70%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.phoneWrap:hover .spot{ opacity: .90; }

/* caption */
.cap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(6,17,26,.10);
  box-shadow: var(--shadow2);
  color: rgba(6,17,26,.62);
  font-size: 13px;
  font-weight: 900;
}
.cap__dot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c2), var(--c1));
  box-shadow: 0 0 0 6px rgba(37,215,255,.12);
}

/* Footer */
.foot{
  margin-top: 18px;
  padding-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
  color: rgba(6,17,26,.55);
  font-size: 13px;
}
.foot a{ color: rgba(6,17,26,.68); }
.foot a:hover{ color: rgba(6,17,26,.92); text-decoration: underline; }
.foot__sep{ opacity:.6; }

/* Responsive */
@media (max-width: 980px){
  .main{ grid-template-columns: 1fr; }
  .right{ align-items:center; }
  .h1{ font-size: 52px; }
  .chip{ display:none; }
  .stats{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .h1{ font-size: 40px; }
  .vnav{ display:none; }
  .hot__gear, .hot__pro, .hot__timer, .hot__route, .hot__change{ display:none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg__blob, .chip__dot, .scan, .hot span, .lat__path, .stat::after, .boot__scan, .boot__bar i{
    animation: none !important;
  }
  .reveal{ clip-path: inset(0 0 0 0 round 28px) !important; }
  .screen{ opacity:1 !important; transform:none !important; }
  .phoneWrap{ transform:none !important; }
  .spot{ display:none !important; }
}

/* ===== Extra: small helpers ===== */
@keyframes dot{ 0%,100%{ transform: scale(1); opacity:.82; } 50%{ transform: scale(1.18); opacity:1; } }
@keyframes blob{ 0%{ transform: translate3d(-1%,-1%,0) scale(1.02); } 50%{ transform: translate3d(1%,.7%,0) scale(1.06); } 100%{ transform: translate3d(.6%,1%,0) scale(1.03); } }