:root {
  --phone-brand: #ff2448;
  --phone-violet: #7657ff;
  --phone-ink: #18151e;
  --phone-muted: #706c79;
  --phone-line: #e7e3eb;
  --phone-paper: #ffffff;
  --phone-soft: #f6f4f8;
  --phone-dark: #17121f;
  --phone-green: #15a36d;
  --phone-yellow: #f2a516;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--phone-soft);
  color: var(--phone-ink);
  font-family: var(--hotker-font);
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }

.phone-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px max(20px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid #ffffff8f;
  background: #ffffffed;
  backdrop-filter: blur(16px);
}
.phone-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--phone-brand);
  font-size: 27px;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -1.8px;
}
.phone-brand span {
  color: var(--phone-violet);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .13em;
}
.phone-site-header nav { display: flex; align-items: center; gap: 8px; }
.phone-site-header nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: #514d58;
  font-size: 13px;
  font-weight: 850;
}
.phone-site-header nav a[aria-current="page"] { background: #eee9ff; color: #5034d5; }
.phone-site-header nav a:focus-visible,
.phone-button:focus-visible,
.phone-categories a:focus-visible,
.phone-product-card a:focus-visible,
.phone-text-link:focus-visible {
  outline: 3px solid #7657ff45;
  outline-offset: 3px;
}

main { width: min(1120px, calc(100% - 36px)); margin: 22px auto 74px; }
.phone-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 17px;
  color: var(--phone-muted);
  font-size: 13px;
}

.phone-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 42px;
  overflow: hidden;
  padding: 62px 58px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 18%, #8f70ff60 0, transparent 28%),
    radial-gradient(circle at 66% 110%, #ff244844 0, transparent 35%),
    linear-gradient(135deg, #151019, #21172f 58%, #29213c);
  color: #fff;
  box-shadow: 0 28px 70px #1f162d25;
}
.phone-hero::before {
  position: absolute;
  z-index: -1;
  right: -65px;
  top: -90px;
  width: 330px;
  height: 330px;
  border: 1px solid #ffffff19;
  border-radius: 50%;
  box-shadow: 0 0 0 45px #ffffff08, 0 0 0 95px #ffffff05;
  content: "";
}
.phone-eyebrow {
  margin: 0 0 11px;
  color: var(--phone-brand);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .13em;
}
.phone-hero .phone-eyebrow { color: #c6baff; }
.phone-hero h1 {
  margin: 0;
  font-size: clamp(39px, 5.5vw, 65px);
  line-height: 1.07;
  letter-spacing: -.065em;
}
.phone-hero h1 em { color: #ff6680; font-style: normal; }
.phone-hero-copy > p:not(.phone-eyebrow) {
  max-width: 680px;
  margin: 20px 0 0;
  color: #d2cdd8;
  font-size: 16px;
  line-height: 1.75;
}
.phone-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.phone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 0 18px;
  border-radius: 14px;
  font-weight: 950;
}
.phone-button.primary { background: var(--phone-brand); color: #fff; }
.phone-button.secondary { border: 1px solid #ffffff2e; background: #ffffff10; color: #fff; }
.phone-hero-copy > small {
  display: block;
  max-width: 690px;
  margin-top: 22px;
  color: #aaa3b3;
  line-height: 1.6;
}
.phone-hero-panel {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  padding: 25px;
  border: 1px solid #ffffff22;
  border-radius: 24px;
  background: #ffffff0e;
  box-shadow: inset 0 1px #ffffff20;
  backdrop-filter: blur(8px);
}
.phone-hero-panel span,
.phone-hero-panel hr,
.phone-hero-panel b { grid-column: 1 / -1; }
.phone-hero-panel span { color: #a997ff; font-size: 10px; font-weight: 1000; letter-spacing: .12em; }
.phone-hero-panel strong { font-size: 18px; }
.phone-hero-panel i { color: #827a8c; font-style: normal; }
.phone-hero-panel hr { width: 100%; border: 0; border-top: 1px solid #ffffff1c; }
.phone-hero-panel b { color: #ff8498; font-size: 17px; }

.phone-search {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 32px));
  margin: -24px auto 0;
  padding: 18px;
  border: 1px solid var(--phone-line);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 15px 35px #24192e15;
}
.phone-search label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 900; }
.phone-search > div { display: flex; }
.phone-search input {
  min-width: 0;
  flex: 1;
  padding: 13px 14px;
  border: 1px solid var(--phone-line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  outline: none;
}
.phone-search input:focus { border-color: var(--phone-violet); box-shadow: 0 0 0 3px #7657ff18; }
.phone-search button {
  border: 0;
  border-radius: 0 12px 12px 0;
  padding: 0 18px;
  background: var(--phone-violet);
  color: #fff;
  font-weight: 900;
}

.phone-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.phone-categories a {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--phone-line);
  border-radius: 17px;
  background: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.phone-categories a:hover { transform: translateY(-2px); border-color: #cfc3ff; }
.phone-categories b { font-size: 15px; }
.phone-categories span { margin-top: 6px; color: var(--phone-muted); font-size: 11px; line-height: 1.45; }

.phone-section { padding-top: 74px; scroll-margin-top: 72px; }
.phone-section-heading { margin-bottom: 21px; }
.phone-section-heading.split { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.phone-section-heading h2,
.phone-calculator h2,
.phone-launch h2 {
  margin: 0;
  font-size: clamp(27px, 3.5vw, 38px);
  letter-spacing: -.045em;
}
.phone-section-heading > p,
.phone-section-heading.split > p {
  max-width: 520px;
  margin: 0;
  color: var(--phone-muted);
  line-height: 1.65;
}
.phone-explain-grid,
.phone-status-grid,
.phone-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.phone-explain-grid article,
.phone-status-grid article,
.phone-score-grid article {
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: #fff;
}
.phone-explain-grid article > span { color: var(--phone-violet); font-size: 12px; font-weight: 1000; }
.phone-explain-grid h3 { margin: 30px 0 10px; font-size: 20px; }
.phone-explain-grid p,
.phone-status-grid p,
.phone-score-grid p { margin: 0; color: var(--phone-muted); font-size: 14px; line-height: 1.7; }
.phone-status-grid article { position: relative; }
.status-dot {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-dot.ready { background: var(--phone-green); box-shadow: 0 0 0 5px #15a36d1b; }
.status-dot.pending { background: var(--phone-yellow); box-shadow: 0 0 0 5px #f2a5161b; }
.phone-status-grid small { color: var(--phone-muted); font-weight: 800; }
.phone-status-grid strong { display: block; margin: 30px 0 9px; font-size: 30px; }

.phone-deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.phone-deal-card {
  padding: 21px;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 30px #281b330a;
}
.phone-deal-card header > span,
.phone-deal-card header > small { color: var(--phone-muted); font-size: 11px; }
.phone-deal-card h3 { margin: 7px 0 5px; font-size: 20px; }
.phone-deal-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 18px 0; }
.phone-deal-card dl div { padding: 12px; border-radius: 13px; background: var(--phone-soft); }
.phone-deal-card dl .wide { grid-column: 1 / -1; }
.phone-deal-card dt { color: var(--phone-muted); font-size: 11px; }
.phone-deal-card dd { margin: 5px 0 0; font-size: 14px; font-weight: 900; }
.phone-deal-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phone-deal-card time { color: var(--phone-muted); font-size: 11px; }
.phone-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--phone-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}
.phone-score strong { color: #ff738b; font-size: 15px; }
.phone-score.pending { background: #efedf2; color: #6c6872; }
.phone-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin-top: 13px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #eee9ff;
  color: #625b72;
  font-size: 12px;
}
.phone-formula strong { color: #3f2ca5; }
.phone-empty {
  grid-column: 1 / -1;
  padding: 38px 20px;
  border: 1px dashed #c9c2d0;
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.phone-empty strong { display: block; }
.phone-empty p { margin: 8px 0 0; color: var(--phone-muted); line-height: 1.6; }

.phone-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.phone-product-card {
  overflow: hidden;
  border: 1px solid var(--phone-line);
  border-radius: 20px;
  background: #fff;
}
.phone-product-card a { display: flex; height: 100%; flex-direction: column; }
.phone-product-image {
  display: grid;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, #faf9fb, #eeeaf1);
}
.phone-product-image img { width: 100%; height: 100%; object-fit: contain; }
.phone-image-fallback { color: #b0a9b8; font-size: 22px; font-weight: 1000; font-style: italic; }
.phone-product-copy { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.phone-product-copy small { color: var(--phone-brand); font-size: 10px; font-weight: 950; letter-spacing: .06em; }
.phone-product-copy h3 { margin: 7px 0; font-size: 16px; line-height: 1.45; }
.phone-product-copy > span { color: var(--phone-muted); font-size: 11px; }
.phone-product-copy strong { margin-top: auto; padding-top: 17px; color: var(--phone-brand); font-size: 20px; }
.phone-product-copy time { margin-top: 8px; color: #9b96a0; font-size: 10px; }
.phone-text-link { display: inline-flex; margin-top: 17px; color: #5539db; font-weight: 900; }

.phone-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: 20px;
  margin-top: 74px;
  padding: 30px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 55px #25172f10;
}
.phone-calculator-copy > p:not(.phone-eyebrow) { color: var(--phone-muted); line-height: 1.65; }
.phone-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.phone-form-grid label { color: #55505d; font-size: 12px; font-weight: 850; }
.phone-form-grid input,
.phone-form-grid select {
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid var(--phone-line);
  border-radius: 11px;
  background: #fff;
  color: var(--phone-ink);
  outline: none;
}
.phone-form-grid input:focus,
.phone-form-grid select:focus { border-color: var(--phone-violet); box-shadow: 0 0 0 3px #7657ff16; }
.phone-form-actions { display: flex; gap: 8px; margin-top: 16px; }
.phone-form-actions button {
  min-height: 45px;
  border: 0;
  border-radius: 12px;
  padding: 0 17px;
  font-weight: 900;
}
.phone-form-actions button[type="submit"] { background: var(--phone-violet); color: #fff; }
.phone-form-actions button[type="reset"] { background: #efedf2; color: #57525d; }
.phone-calculator-result {
  align-self: stretch;
  padding: 24px;
  border-radius: 21px;
  background: var(--phone-dark);
  color: #fff;
}
.phone-calculator-result > span { color: #ad9cff; font-size: 10px; font-weight: 1000; letter-spacing: .12em; }
.phone-calculator-result h3 { margin: 10px 0 20px; font-size: 21px; line-height: 1.45; }
.phone-calculator-result dl { margin: 0; }
.phone-calculator-result dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid #ffffff14; }
.phone-calculator-result dt { color: #bcb5c4; font-size: 12px; }
.phone-calculator-result dd { margin: 0; color: #ff7890; font-size: 18px; font-weight: 1000; }
.phone-calculator-result p { color: #aaa3b3; font-size: 11px; line-height: 1.6; }
.phone-calculator-result ul { margin: 12px 0 0; padding-left: 18px; color: #d0cad5; font-size: 11px; line-height: 1.7; }
.phone-calculator-result[data-state="error"] { outline: 2px solid #ff718a; }

.phone-score-grid article { min-height: 180px; }
.phone-score-grid b { display: block; margin-bottom: 22px; font-size: 19px; }
.phone-score-grid small { display: block; margin-top: 16px; color: #755bd9; font-weight: 850; }

.phone-launch {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: center;
  margin-top: 74px;
  padding: 31px;
  border: 1px solid #d9d0ff;
  border-radius: 27px;
  background: linear-gradient(135deg, #fff, #f2eeff);
}
.phone-launch > div > p:not(.phone-eyebrow) { color: var(--phone-muted); line-height: 1.7; }
.phone-launch article { display: flex; flex-direction: column; gap: 9px; padding: 20px; border-radius: 18px; background: #fff; }
.phone-launch article span { color: #8066e8; font-size: 11px; font-weight: 900; }
.phone-launch article strong { font-size: 18px; }
.phone-launch article a { color: var(--phone-brand); font-weight: 900; }

.phone-method {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--phone-line);
  border-radius: 22px;
  background: var(--phone-line);
  list-style: none;
}
.phone-method li { min-height: 190px; padding: 23px; background: #fff; }
.phone-method span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #eee9ff; color: #593dd9; font-size: 12px; font-weight: 1000; }
.phone-method b { display: block; margin: 26px 0 8px; font-size: 18px; }
.phone-method p { margin: 0; color: var(--phone-muted); font-size: 13px; line-height: 1.65; }

footer { border-top: 1px solid var(--phone-line); background: #fff; }
footer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1120px, calc(100% - 36px));
  min-height: 92px;
  margin: auto;
  color: var(--phone-muted);
  font-size: 12px;
}
footer nav { display: flex; gap: 16px; }
footer a { font-weight: 850; }

@media (max-width: 900px) {
  .phone-hero { grid-template-columns: 1fr; }
  .phone-hero-panel { max-width: 430px; }
  .phone-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phone-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-calculator { grid-template-columns: 1fr; }
  .phone-method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .phone-site-header { min-height: 64px; padding: 10px 15px; }
  .phone-site-header nav a:first-child { display: none; }
  .phone-site-header nav a { padding: 9px 8px; font-size: 12px; }
  .phone-brand { font-size: 23px; }
  .phone-brand span { display: none; }
  main { width: min(100% - 24px, 1120px); margin-top: 16px; }
  .phone-hero { gap: 28px; padding: 42px 24px; border-radius: 25px; }
  .phone-hero h1 { letter-spacing: -.055em; }
  .phone-search { width: calc(100% - 20px); padding: 13px; }
  .phone-search button { padding: 0 13px; }
  .phone-section { padding-top: 54px; }
  .phone-section-heading.split { display: block; }
  .phone-section-heading.split > p { margin-top: 9px; }
  .phone-explain-grid,
  .phone-status-grid,
  .phone-score-grid,
  .phone-deal-grid { grid-template-columns: 1fr; }
  .phone-explain-grid article,
  .phone-status-grid article,
  .phone-score-grid article { min-height: 0; }
  .phone-deal-card footer { align-items: flex-start; flex-direction: column; }
  .phone-calculator { margin-top: 54px; padding: 21px; border-radius: 22px; }
  .phone-form-grid { grid-template-columns: 1fr; }
  .phone-launch { grid-template-columns: 1fr; margin-top: 54px; padding: 22px; }
  footer > div { align-items: flex-start; flex-direction: column; justify-content: center; gap: 13px; padding: 22px 0; }
}

@media (max-width: 460px) {
  .phone-actions { flex-direction: column; }
  .phone-button { width: 100%; }
  .phone-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-product-grid { gap: 9px; }
  .phone-product-copy { padding: 12px; }
  .phone-product-copy h3 { font-size: 14px; }
  .phone-product-copy strong { font-size: 17px; }
  .phone-deal-card dl { grid-template-columns: 1fr; }
  .phone-deal-card dl .wide { grid-column: auto; }
  .phone-method { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phone-categories a { transition: none; }
}