/* SmartphonesNetwork homepage v2
   Editorial Swiss-minimal (UI UX Pro Max: "tech news magazine product reviews"),
   Newsreader headlines + Roboto text, dark by default, light via the toggle.
   Scoped to body.home-v2 so no other page is affected. */

body.home-v2 {
  --v2-bg: #0b0f19;
  --v2-surface: #111827;
  --v2-raised: #161f31;
  --v2-line: rgba(255, 255, 255, 0.09);
  --v2-line-strong: rgba(255, 255, 255, 0.18);
  --v2-text: #f1f5f9;
  --v2-text-2: #b4bfcf;
  --v2-text-3: #8a96a8;
  --v2-red: #f87171;
  --v2-blue: #60a5fa;
  --v2-cta: #2563eb;
  --v2-cta-hover: #1d4ed8;
  --v2-tg: #229ed9;
  --v2-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --v2-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v2-radius: 12px;
  --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: var(--v2-sans);
  font-size: 16px;
  line-height: 1.6;
}

[data-theme="light"] body.home-v2 {
  --v2-bg: #ffffff;
  --v2-surface: #f8fafc;
  --v2-raised: #ffffff;
  --v2-line: rgba(15, 23, 42, 0.10);
  --v2-line-strong: rgba(15, 23, 42, 0.22);
  --v2-text: #0f172a;
  --v2-text-2: #334155;
  --v2-text-3: #475569;
  --v2-red: #b91c1c;
  --v2-blue: #1d4ed8;
  --v2-cta: #1d4ed8;
  --v2-cta-hover: #1e40af;
}

/* ---------- Basics ---------- */
.home-v2 main h1,
.home-v2 main h2,
.home-v2 main h3 {
  font-family: var(--v2-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-text);
}

.home-v2 main a { color: inherit; text-decoration: none; }

.home-v2 a:focus-visible,
.home-v2 button:focus-visible,
.home-v2 input:focus-visible {
  outline: 2px solid var(--v2-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.home-v2 .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;
}

.home-v2 .skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 200;
  background: var(--v2-cta); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 500; transition: top 0.2s var(--v2-ease);
}
.home-v2 .skip-link:focus { top: 12px; }

/* Kicker line: label in red, metadata in muted grey */
.home-v2 .kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-family: var(--v2-sans); font-size: 0.75rem; line-height: 1.3;
  margin-bottom: 10px;
}
.home-v2 .kicker-label {
  color: var(--v2-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
}
.home-v2 .kicker-label.kicker-tg { color: var(--v2-tg); }
.home-v2 .kicker-meta { color: var(--v2-text-3); }
.home-v2 .kicker-meta::before { content: "\00b7"; margin-right: 10px; }

.home-v2 .byline { color: var(--v2-text-3); font-size: 0.85rem; margin: 0; }

/* ---------- Buttons ---------- */
.home-v2 .btn-v2 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--v2-cta); color: #fff; cursor: pointer;
  font-family: var(--v2-sans); font-size: 0.95rem; font-weight: 500;
  transition: background-color 0.2s ease;
}
.home-v2 .btn-v2:hover { background: var(--v2-cta-hover); }
.home-v2 .btn-v2.btn-tg { background: var(--v2-tg); color: #0b0f19; }
.home-v2 .btn-v2.btn-tg:hover { background: #4ab3e4; }

/* ---------- Deals radar ---------- */
.home-v2 .radar {
  border-bottom: 1px solid var(--v2-line);
  background: var(--v2-surface);
}
.home-v2 .radar-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding-top: 14px;
}
.home-v2 .radar-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.home-v2 .radar-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: v2-pulse 2s infinite;
}
@keyframes v2-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.home-v2 .radar-note { font-size: 0.8rem; color: var(--v2-text-3); }
.home-v2 .radar-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.home-v2 .radar-track {
  display: flex; gap: 12px; overflow-x: auto; padding: 12px 0 16px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
  scrollbar-color: var(--v2-line-strong) transparent;
}
.home-v2 .radar-track::-webkit-scrollbar { height: 6px; }
.home-v2 .radar-track::-webkit-scrollbar-track { background: transparent; }
.home-v2 .radar-track::-webkit-scrollbar-thumb { background: var(--v2-line-strong); border-radius: 3px; }
.home-v2 .radar-loading { font-size: 0.85rem; color: var(--v2-text-3); }
.home-v2 .radar-item {
  flex: 0 0 240px; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--v2-line); border-radius: 10px;
  background: var(--v2-bg); color: var(--v2-text); text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.home-v2 .radar-item:hover { border-color: var(--v2-line-strong); }
.home-v2 .radar-title {
  font-size: 0.82rem; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-v2 .radar-meta { font-size: 0.75rem; color: var(--v2-blue); }

/* ---------- Lead story + top stories ---------- */
.home-v2 .hv-hero {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px; padding-top: 40px; padding-bottom: 56px;
}
.home-v2 .lead-media {
  display: block; overflow: hidden; border-radius: var(--v2-radius);
  border: 1px solid var(--v2-line); background: var(--v2-surface);
  aspect-ratio: 16 / 9;
}
.home-v2 .lead-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s var(--v2-ease);
}
.home-v2 .lead:hover .lead-media img { transform: scale(1.02); }
.home-v2 .lead-body { padding-top: 22px; max-width: 46rem; }
.home-v2 .lead-title {
  font-size: clamp(2rem, 1.35rem + 2.3vw, 3.1rem);
  line-height: 1.08; margin: 0 0 14px;
}
.home-v2 .lead-title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.3s var(--v2-ease); }
.home-v2 .lead-title a:hover { background-size: 100% 1px; }
.home-v2 .lead-dek { font-size: 1.1rem; line-height: 1.6; color: var(--v2-text-2); margin: 0 0 14px; }

.home-v2 .rail-title {
  font-family: var(--v2-sans) !important; font-size: 0.8rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-top: 12px; margin: 0 0 4px; border-top: 2px solid var(--v2-text);
}
.home-v2 .ts-list { list-style: none; margin: 0; padding: 0; }
.home-v2 .ts-list li { border-bottom: 1px solid var(--v2-line); }
.home-v2 .ts-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 96px; gap: 14px;
  align-items: start; padding: 16px 0; min-height: 44px;
}
.home-v2 .ts-num {
  font-family: var(--v2-serif); font-size: 1.6rem; line-height: 1; color: var(--v2-text-3);
  font-variant-numeric: tabular-nums; padding-top: 2px;
}
.home-v2 .ts-text .kicker { margin-bottom: 6px; }
.home-v2 .ts-title {
  display: block; font-family: var(--v2-serif); font-size: 1.12rem; font-weight: 600;
  line-height: 1.25; color: var(--v2-text);
}
.home-v2 .ts-item:hover .ts-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home-v2 .ts-thumb {
  width: 96px; height: 54px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--v2-line); display: block;
}

/* ---------- Sections ---------- */
.home-v2 .hv-section { padding-top: 56px; padding-bottom: 56px; }
.home-v2 .hv-section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 8px 24px; margin-bottom: 28px; padding-top: 14px; border-top: 2px solid var(--v2-text);
}
.home-v2 .hv-h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.15; margin: 0; }
.home-v2 .hv-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--v2-blue) !important; font-weight: 500; font-size: 0.95rem;
}
.home-v2 .hv-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Story grid */
.home-v2 .story-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px;
}
.home-v2 .story { position: relative; display: flex; flex-direction: column; }
.home-v2 .story-media {
  overflow: hidden; border-radius: 10px; border: 1px solid var(--v2-line);
  background: var(--v2-surface); aspect-ratio: 16 / 9; margin-bottom: 16px;
}
.home-v2 .story-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--v2-ease);
}
.home-v2 .story:hover .story-media img { transform: scale(1.04); }
.home-v2 .story-title { font-size: 1.32rem; line-height: 1.22; margin: 0 0 10px; }
.home-v2 .story-title a::after { content: ""; position: absolute; inset: 0; }
.home-v2 .story:hover .story-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home-v2 .story-dek {
  color: var(--v2-text-2); font-size: 0.97rem; line-height: 1.55; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Head to head band */
.home-v2 .hv-band {
  background: var(--v2-surface); border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line);
  padding: 56px 0;
}
.home-v2 .hv-band .hv-section-head .kicker { margin-bottom: 6px; }
.home-v2 .h2h-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-v2 .h2h {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--v2-raised); border: 1px solid var(--v2-line); border-radius: var(--v2-radius);
  transition: border-color 0.2s ease;
}
.home-v2 .h2h:hover { border-color: var(--v2-line-strong); }
.home-v2 .h2h-pair { font-family: var(--v2-serif); font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.home-v2 .h2h-vs { font-style: italic; font-weight: 500; color: var(--v2-text-3); }
.home-v2 .h2h-hook { color: var(--v2-text-2); font-size: 0.95rem; line-height: 1.55; flex: 1; }
.home-v2 .h2h-cta { color: var(--v2-blue); font-weight: 500; font-size: 0.92rem; }

/* Signup */
.home-v2 .signup {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--v2-line); border-radius: 16px; overflow: hidden; background: var(--v2-surface);
}
.home-v2 .signup-col { padding: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.home-v2 .signup-col + .signup-col { border-left: 1px solid var(--v2-line); }
.home-v2 .signup-col .kicker { margin-bottom: 0; }
.home-v2 .signup-col .hv-h2 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem); }
.home-v2 .signup-text { color: var(--v2-text-2); margin: 0 0 6px; max-width: 34rem; }
.home-v2 .signup-form { display: flex; gap: 10px; width: 100%; max-width: 30rem; margin: 0; }
.home-v2 .signup-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--v2-line-strong); border-radius: 8px;
  background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-sans); font-size: 1rem;
}
.home-v2 .signup-form input::placeholder { color: var(--v2-text-3); }
.home-v2 .fineprint { font-size: 0.8rem; color: var(--v2-text-3); margin: 0; }
.home-v2 .fineprint a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Motion: initial state before animations take over ---------- */
html.motion-pending .home-v2 [data-reveal],
html.motion-pending .home-v2 .lead-body > * {
  opacity: 0;
  transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
  .home-v2 *, .home-v2 *::before, .home-v2 *::after { transition: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .home-v2 .hv-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .home-v2 .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2 .h2h-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home-v2 .signup { grid-template-columns: minmax(0, 1fr); }
  .home-v2 .signup-col + .signup-col { border-left: 0; border-top: 1px solid var(--v2-line); }
  .home-v2 .h2h-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .home-v2 .container { padding-left: 16px; padding-right: 16px; }
  .home-v2 .hv-hero { padding-top: 24px; padding-bottom: 40px; }
  .home-v2 .hv-section { padding-top: 40px; padding-bottom: 40px; }
  .home-v2 .hv-band { padding: 40px 0; }
  .home-v2 .story-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-v2 .ts-item { grid-template-columns: auto minmax(0, 1fr) 80px; gap: 12px; }
  .home-v2 .ts-thumb { width: 80px; height: 45px; }
  .home-v2 .signup-col { padding: 24px 20px; }
  .home-v2 .signup-form { flex-direction: column; }
  .home-v2 .signup-form .btn-v2 { width: 100%; }
}

/* ---------- Designed covers (brand colour + device name) ----------
   Used instead of photos until official press images are cleared.
   Pure CSS, no image requests. Sizes scale with the card via container units. */
.home-v2 .cv {
  position: relative; display: block; width: 100%; height: 100%;
  container-type: inline-size; overflow: hidden; isolation: isolate;
  color: #fff; background: #1f2937;
  transition: transform 0.6s var(--v2-ease);
}
.home-v2 .cv::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.16; mix-blend-mode: overlay;
}
.home-v2 .cv:not(.cv-split)::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 9%; top: 16%; width: 25%; aspect-ratio: 9 / 19.5;
  border: 1.5px solid rgba(255, 255, 255, 0.26); border-radius: 15% / 7%;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: rotate(-9deg);
}
.home-v2 .cv > * { position: relative; z-index: 1; }
.home-v2 .cv-kind {
  position: absolute; top: 5.5cqi; left: 6cqi;
  font: 500 clamp(0.6rem, 2.9cqi, 0.9rem)/1 var(--v2-sans);
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
}
.home-v2 .cv-score {
  position: absolute; top: 4.5cqi; right: 5cqi;
  font: 600 clamp(0.85rem, 4.6cqi, 1.6rem)/1 var(--v2-serif);
  padding: 0.32em 0.6em; border-radius: 999px;
  background: rgba(255, 255, 255, 0.95); color: #0b0f19;
}
.home-v2 .cv-label {
  position: absolute; left: 6cqi; bottom: 6cqi; max-width: 64%;
  font: 600 clamp(1.05rem, 9.6cqi, 4.9rem)/0.98 var(--v2-serif);
  letter-spacing: -0.015em; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

/* Brand tones */
.home-v2 .cv-apple {
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(75% 70% at 10% 105%, rgba(125, 150, 190, 0.28), transparent 62%),
    linear-gradient(160deg, #46464d 0%, #1d1d21 58%, #0e0e11 100%);
}
.home-v2 .cv-samsung {
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(147, 170, 255, 0.42), transparent 55%),
    linear-gradient(160deg, #2a47e0 0%, #142792 55%, #0a1550 100%);
}
.home-v2 .cv-google {
  background:
    linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%) left bottom / 100% 4px no-repeat,
    radial-gradient(110% 85% at 88% 0%, rgba(160, 196, 255, 0.2), transparent 55%),
    linear-gradient(160deg, #2b3542 0%, #161c24 58%, #0d1116 100%);
}
.home-v2 .cv-nothing {
  background:
    linear-gradient(to top, rgba(5, 5, 5, 0.96) 22%, rgba(5, 5, 5, 0) 68%),
    radial-gradient(circle, rgba(255, 255, 255, 0.24) 1.1px, transparent 1.6px) 0 0 / 11px 11px,
    #060606;
}
.home-v2 .cv-nothing .cv-kind::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.6em;
  border-radius: 50%; background: #e3242b; vertical-align: 0.05em;
}
.home-v2 .cv-neutral {
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(196, 181, 253, 0.32), transparent 55%),
    linear-gradient(160deg, #5b2bb8 0%, #33287f 55%, #1b1a46 100%);
}

/* Head-to-head split */
.home-v2 .cv-split { display: grid; grid-template-columns: 1fr 1fr; }
.home-v2 .cv-half { position: relative; display: block; height: 100%; }
.home-v2 .cv-half + .cv-half { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14); }
.home-v2 .cv-half-label {
  position: absolute; left: 12cqi; right: 6cqi; bottom: 6cqi;
  font: 600 clamp(0.9rem, 6.4cqi, 3rem)/1 var(--v2-serif);
  letter-spacing: -0.01em; text-wrap: balance;
}
.home-v2 .cv-half:first-child .cv-half-label { left: 6cqi; right: 12cqi; }
.home-v2 .cv-split .cv-vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 13cqi; height: 13cqi; min-width: 30px; min-height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: #fff; color: #0b0f19;
  font: italic 600 clamp(0.8rem, 4.8cqi, 1.6rem)/1 var(--v2-serif);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Cover in the image slots */
.home-v2 .lead:hover .lead-media .cv { transform: scale(1.02); }
.home-v2 .story:hover .story-media .cv { transform: scale(1.04); }
.home-v2 span.ts-thumb { overflow: hidden; }

/* Tiny covers (top-stories thumbnails): name only */
.home-v2 .ts-thumb .cv::after { display: none; }
@container (max-width: 170px) {
  .home-v2 .cv-kind, .home-v2 .cv-score, .home-v2 .cv-half-label { display: none; }
  .home-v2 .cv-label {
    left: 7px; bottom: 6px; max-width: calc(100% - 14px);
    font-size: 11.5px; line-height: 1.02; letter-spacing: 0; text-shadow: none;
  }
  .home-v2 .cv-split .cv-vs { min-width: 0; min-height: 0; width: 20px; height: 20px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-v2 .lead:hover .lead-media .cv, .home-v2 .story:hover .story-media .cv { transform: none; }
}
.home-v2 .cv-honor {
  background:
    radial-gradient(110% 85% at 88% 0%, rgba(120, 230, 230, 0.34), transparent 55%),
    linear-gradient(160deg, #0f8a96 0%, #0a4f5f 55%, #062a38 100%);
}

/* WhatsApp follow button next to Telegram (16 Oct 2026) */
.home-v2 .signup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-v2 .btn-v2.btn-wa { background: #25D366; color: #0b0f19; }
.home-v2 .btn-v2.btn-wa:hover { background: #4be08a; }