/* ==========================================================================
   DuoSmart — home.css: landing page only (loaded after site.css)
   ========================================================================== */

/* ---------- 1. hero ---------- */
.hero { position: relative; isolation: isolate; min-block-size: max(640px, min(100svh, 1080px)); display: flex; flex-direction: column; overflow: clip; }
.hero__stage { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__photo { position: absolute; inset: 0; }
.hero__photo .photo__img { object-position: 50% 38%; filter: saturate(1.05); }
.hero__photo .screen__content { filter: brightness(.86) saturate(1.08); }
.hero__spill { /* blue light the TV casts on the slatted wall */
  position: absolute; z-index: 1; inset-inline-start: 38%; inset-block-start: 22%; inline-size: 46%; block-size: 56%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 140, 255, .26), rgba(124, 92, 255, .1) 55%, transparent); filter: blur(30px); mix-blend-mode: screen;
}
html[dir="rtl"] .hero__spill { inset-inline-start: auto; inset-inline-end: 38%; }
.hero__photo .screen { z-index: 2; }
.hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 13, .96) 0%, rgba(5, 6, 13, .82) 24%, rgba(5, 6, 13, .28) 46%, rgba(5, 6, 13, 0) 62%),
    linear-gradient(180deg, rgba(5, 6, 13, .55) 0%, rgba(5, 6, 13, 0) 18%, rgba(5, 6, 13, 0) 62%, rgba(5, 6, 13, .9) 88%, #05060d 100%);
}
/* the photo is never mirrored; in RTL the copy moves to the right, so the shade moves with it */
html[dir="rtl"] .hero__shade { background:
    linear-gradient(270deg, rgba(5, 6, 13, .96) 0%, rgba(5, 6, 13, .82) 24%, rgba(5, 6, 13, .28) 46%, rgba(5, 6, 13, 0) 62%),
    linear-gradient(180deg, rgba(5, 6, 13, .55) 0%, rgba(5, 6, 13, 0) 18%, rgba(5, 6, 13, 0) 62%, rgba(5, 6, 13, .9) 88%, #05060d 100%); }
.hero__in { flex: 1; display: flex; align-items: center; padding-block: calc(var(--nav-h) + 48px) 40px; }
.hero__copy { max-inline-size: min(620px, 46vw); min-inline-size: 0; display: grid; gap: 26px; }
.hero__title { font-size: clamp(3rem, 1.2rem + 5.2vw, 6.6rem); }
.hero__title em { display: inline-block; padding-block-end: .06em; }
.hero__lead { max-inline-size: 30em; color: #c9cfe8; }
.hero__cta { --row: 14px; margin-block-start: 6px; }
.hero__gift { display: flex; align-items: center; gap: 12px; font-size: .93rem; color: var(--ink-2); }
.hero__gift strong { color: var(--gold-1); font-weight: 600; }
.hero__gift-txt { flex: 1; min-inline-size: 0; }
.hero__gift-ic { flex: none; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; color: #2a1405; background: var(--gold); box-shadow: 0 0 22px -4px rgba(255, 154, 92, .7); }
.hero__gift-ic .i { inline-size: 16px; block-size: 16px; stroke-width: 2; }
.hero__gift-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255, 210, 122, .5); text-underline-offset: 4px; }
.hero__gift-link:hover { text-decoration-color: var(--gold-1); }

/* "coming soon to" platform strip */
.hero__plats { position: relative; padding-block: 26px 34px; }
.plats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; }
.plats__list { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(22px, 3vw, 40px); margin: 0; padding: 0; color: rgba(236, 240, 255, .62); }
.plats__list li { display: flex; align-items: center; gap: 8px; transition: color .25s; }
.plats__list li:hover { color: #fff; }
.plats__list .plat-word { font-size: .98rem; }
.plats__box { padding-inline-start: clamp(22px, 3vw, 40px); border-inline-start: 1px solid var(--line-2); color: var(--ink); }
.plats__box img { inline-size: 20px; block-size: 20px; }

@media (max-width: 900px) {
  .hero { min-block-size: auto; }
  .hero__stage { position: relative; inset: auto; block-size: min(64svh, 560px); }
  .hero__photo .photo__img { object-position: 64% 40%; }
  .hero__shade { inset-block-end: auto; block-size: min(64svh, 560px); background: linear-gradient(180deg, rgba(5, 6, 13, .6) 0%, rgba(5, 6, 13, 0) 20%, rgba(5, 6, 13, 0) 52%, rgba(5, 6, 13, .8) 78%, #05060d 100%) !important; }
  .hero__in { padding-block: 0 8px; margin-block-start: -18svh; position: relative; }
  .hero__copy { max-inline-size: 640px; gap: 20px; }
  .plats { gap: 14px 24px; }
  .plats__box { padding-inline-start: 0; border: 0; }
}
@media (max-width: 520px) {
  .hero__stage, .hero__shade { block-size: 58svh; }
  .hero__title { font-size: clamp(2.7rem, 12.5vw, 3.6rem); }
  .hero__cta .btn { inline-size: 100%; }
  .hero__gift { align-items: flex-start; }
  .plats__list { gap: 16px 22px; }
}
/* desktop: push the TV away from the headline (photo is never mirrored; in RTL it moves the other way) */
@media (min-width: 901px) {
  .hero__photo { left: 9%; right: -9%; }
  html[dir="rtl"] .hero__photo { left: -26%; right: 26%; }
  .hero__copy { max-inline-size: min(650px, 45vw); }
  .hero__title { font-size: clamp(3rem, 1rem + 4.4vw, 5.9rem); }
}

/* ---------- 2. app showcase ---------- */
.show { overflow: clip; }
.show__tabs { inline-size: fit-content; max-inline-size: 100%; margin-inline: auto; }
.show__stage { position: relative; margin-block-start: clamp(36px, 5vw, 64px); padding-inline: clamp(0px, 2vw, 40px); }
.show__tv { inline-size: min(100%, 1140px, max(560px, (100svh - 230px) * 16 / 9)); margin-inline: auto; }
.show__bloom { position: absolute; z-index: -1; inset: 4% 8% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46, 230, 255, .2), rgba(124, 92, 255, .16) 50%, transparent 80%); filter: blur(60px); }
.show__stage::after { /* glossy floor line under the stand */
  content: ""; position: absolute; z-index: -1; inset-inline: 12%; inset-block-end: -6px; block-size: 70px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .22), transparent); filter: blur(16px); }
.show__img { opacity: 0; transform: scale(1.025); transition: opacity .9s var(--ease), transform 1.6s var(--ease-out); }
.show__img.is-on { opacity: 1; transform: none; }
.show__caps { max-inline-size: 660px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; min-block-size: 6.6em; }
.show__cap { display: grid; gap: 10px; animation: cap-in .6s var(--ease-out); }
.show__cap p { color: var(--ink-2); }
@keyframes cap-in { from { opacity: 0; transform: translateY(8px); } }
.show__tabs .tab.is-run .tab__bar { animation: tabbar var(--slide, 6s) linear forwards; }
@keyframes tabbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) { .show__tabs { inline-size: calc(100% + 2 * var(--gutter)); max-inline-size: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-radius: 0; background: none; box-shadow: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  html[dir="rtl"] .show__tabs { -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); }
  .show__tabs .tab { scroll-snap-align: start; flex: none; } }

/* ---------- 2b. every screen ---------- */
.screens__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.screens__item { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); background: #07080f; isolation: isolate; }
.screens__item--mac { aspect-ratio: 16 / 10.4; }
.screens__item--mac { grid-column: span 7; }
.screens__item--ipad { grid-column: span 5; }
.screens__item--phone { grid-column: span 7; display: grid; place-items: center; padding: clamp(36px, 5vw, 72px) clamp(20px, 5vw, 64px) 96px;
  background: radial-gradient(70% 80% at 50% 40%, rgba(124, 92, 255, .18), transparent 70%), linear-gradient(180deg, #0c1024, #070811); }
.screens__item--tv { grid-column: span 5; display: grid; align-content: center; padding: clamp(24px, 3vw, 44px); background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.screens__item--mac .photo__img { object-position: 60% 30%; }
.screens__item--ipad .photo__img { object-position: 4% 70%; }
/* the 16:9 guide on the 16:10 MacBook screen: letterboxed, never cropped (notch sits over the top bar) */
.screens__item--mac .screen__content { object-fit: contain; background: #05060d; }
.screens__item .photo__img { transition: transform 1.6s var(--ease-out); }
.screens__phone { inline-size: min(100%, 600px); }
/* ambient glow: the phone's own picture, blurred, lights the card (like a TV's ambient mode) */
.screens__item--phone::before { content: ""; position: absolute; z-index: -1; inset: -12%; background: url(/img/app/player-640.webp) center 60% / cover; filter: blur(48px) saturate(1.25); opacity: .38; }
.screens__item--phone::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(5, 6, 13, .85)); }
.notch { position: absolute; z-index: 4; inset-block-start: 0; left: 50%; transform: translateX(-50%); inline-size: 11.6%; block-size: 3.3%; background: #000; border-radius: 0 0 4px 4px; }
.screens__cap { position: absolute; z-index: 5; inset-inline: 0; inset-block-end: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 48px clamp(18px, 2vw, 28px) clamp(16px, 2vw, 24px); font-size: .93rem; color: var(--ink-2);
  background: linear-gradient(180deg, transparent, rgba(5, 6, 13, .85) 60%); }
.screens__cap strong { font: 600 1.05rem/1.2 var(--ff-display); color: var(--ink); }
.screens__list { list-style: none; margin: 0; padding: 0; display: grid; }
.screens__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 15px; border-block-end: 1px solid var(--line); color: var(--ink); }
.screens__list li:last-child { border: 0; }
.screens__list .plat { color: #e9ecff; }
.screens__os { font-size: .9rem; color: var(--ink-3); }
.screens__list .badge { margin-inline-start: auto; }
.screens__box { color: var(--ink); }
@media (max-width: 1000px) {
  .screens__item--mac, .screens__item--ipad, .screens__item--phone, .screens__item--tv { grid-column: 1 / -1; }
  .screens__item--ipad .photo__img { object-position: 6% 64%; }
}
@media (max-width: 1000px) { .screens__item--ipad { aspect-ratio: 16 / 10.4; } }
@media (max-width: 600px) { .screens__item.photo { aspect-ratio: 4 / 3.4; } .screens__item--mac .photo__img { object-position: 64% 40%; } }

/* ---------- 3. features bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.bento__card { grid-column: span 2; display: flex; flex-direction: column; }
.bento--guide { grid-column: span 4; }
.bento--half { grid-column: span 3; }
.bento__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border-block-end: 1px solid var(--line); }
.bento--guide .bento__media { aspect-ratio: 16 / 7.6; }
/* exact crops: --cx/--cy = crop origin and --cw = crop width, as fractions of the 16:9 screenshot.
   The media box's aspect-ratio must equal the crop's aspect. Physical left/top: screenshots never mirror. */
.bento__media img { position: absolute; left: 0; top: 0; inline-size: calc(100% / var(--cw, 1)); block-size: auto; max-inline-size: none;
  transform: translate(calc(var(--cx, 0) * -100%), calc(var(--cy, 0) * -100%)); transform-origin: 0 0; transition: transform 1.2s var(--ease-out); }
.bento__card:hover .bento__media img { transform: translate(calc(var(--cx, 0) * -100%), calc(var(--cy, 0) * -100%)) scale(1.025); }
.bento__media--fade-end img { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
/* "continue watching" fills whatever height the guide card next to it has */
.bento--resume .bento__media { flex: 1; aspect-ratio: auto; min-block-size: 220px; }
.bento--resume .bento__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 4% 20%; transform: none; }
.bento--resume:hover .bento__media img { transform: scale(1.025); }
@media (max-width: 640px) { /* phones: the whole screenshot, never a crop */
  .bento__media { aspect-ratio: 16 / 9 !important; }
  .bento__media img { --cx: 0; --cy: 0; --cw: 1; -webkit-mask-image: none; mask-image: none; }
}
.bento__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(5, 6, 13, .55)); }
.bento__card .card__body { flex: none; }
.feats__more { list-style: none; margin: clamp(22px, 3vw, 36px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.feats__more li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); font-size: .92rem; color: var(--ink-2); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.feats__more .i { color: var(--cyan); inline-size: 18px; block-size: 18px; }
@media (max-width: 1000px) { .bento__card, .bento--half { grid-column: span 3; } .bento--guide { grid-column: 1 / -1; } }
@media (max-width: 640px) { .bento__card, .bento--half, .bento--guide { grid-column: 1 / -1; } .bento--guide .bento__media { aspect-ratio: 16 / 9; } }

/* ---------- 4. boxes ---------- */
.boxes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(16px, 2vw, 26px); }
.prod { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px var(--line), var(--glass-hi); }
.prod__stage { --acc: 46, 230, 255; position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9.4; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 18%, rgba(var(--acc), .14), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(255, 255, 255, .05), transparent 70%), linear-gradient(180deg, #0d1022 0%, #07080f 62%, #0b0d18 100%); }
.prod--ultra .prod__stage { --acc: 143, 114, 255; }
.prod__stage::before { /* studio cyclorama: soft key light + horizon */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 255, .035) 61%, transparent 75%); }
.prod__img { position: relative; inline-size: 100%; transform: translateY(6%); transition: transform 1.2s var(--ease-out); }
.prod--pro .prod__img { inline-size: 92%; }
.prod:hover .prod__img { transform: translateY(3%) scale(1.03); }
.prod__body { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); flex: 1; align-content: start; }
.prod__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.prod__head .badge { gap: 7px; }
.prod__tier { color: var(--cyan); }
.prod--ultra .prod__tier { color: #a993ff; }
.prod__tag { color: var(--ink-2); }
.prod__price { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.2rem); }
.prod__amount small { font-size: .5em; letter-spacing: 0; }
.prod__gift { color: var(--ink); }
.prod__gift .i { color: var(--gold-1) !important; }
.prod__gift strong { color: var(--gold-1); font-weight: 600; }
.prod__cta { margin-block-start: auto; padding-block-start: 8px; }
.compare { margin-block-start: clamp(36px, 5vw, 64px); }
.compare__title { margin: 0; }
.compare__sum { display: flex; align-items: center; justify-content: center; gap: 10px; inline-size: fit-content; margin-inline: auto; padding: 12px 22px; border-radius: var(--r-pill); cursor: pointer; list-style: none; box-shadow: inset 0 0 0 1px var(--line-2); background: rgba(255, 255, 255, .03); transition: background .2s; }
.compare__sum::-webkit-details-marker { display: none; }
.compare__sum:hover { background: rgba(255, 255, 255, .07); }
.compare__sum .i { transition: transform .3s var(--ease); }
.compare[open] .compare__sum { margin-block-end: 18px; }
.compare[open] .compare__sum .i { transform: rotate(180deg); }
.compare__scroll { overflow-x: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, .02); }
.compare__table { inline-size: 100%; min-inline-size: 560px; border-collapse: collapse; font-size: .95rem; }
.compare__table th, .compare__table td { padding: 15px clamp(14px, 2vw, 24px); text-align: start; border-block-end: 1px solid var(--line); vertical-align: middle; }
.compare__table tbody tr:last-child > * { border: 0; }
.compare__table thead th { font: 600 1rem/1.2 var(--ff-display); color: var(--ink); }
.compare__table thead th:nth-child(2) { color: var(--cyan); } .compare__table thead th:nth-child(3) { color: #a993ff; }
.compare__table tbody th { font-weight: 500; color: var(--ink-3); inline-size: 32%; }
.compare__table td { color: var(--ink); }
.compare__yes { color: var(--ok); }
.compare__no { color: var(--ink-3); }
.compare__gold td, .compare__gold th { color: var(--gold-1) !important; }
.compare__price td { white-space: nowrap; }
.compare__price strong { font-family: var(--ff-brand); font-size: 1.1rem; margin-inline-end: 10px; }

/* ---------- 5. lifetime USP — the only place gold is used ---------- */
.life { overflow: clip; isolation: isolate; }
.life__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 34%, rgba(255, 154, 92, .16), transparent 70%), radial-gradient(700px 420px at 80% 60%, rgba(255, 95, 162, .1), transparent 70%),
    radial-gradient(600px 400px at 15% 75%, rgba(255, 210, 122, .08), transparent 70%), linear-gradient(180deg, transparent, rgba(30, 16, 10, .35) 50%, transparent); }
.life__sky::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 20%, rgba(255, 220, 160, .7), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255, 220, 160, .6), transparent),
    radial-gradient(1.5px 1.5px at 88% 38%, rgba(255, 200, 150, .5), transparent), radial-gradient(1px 1px at 33% 64%, rgba(255, 220, 160, .5), transparent),
    radial-gradient(1px 1px at 58% 82%, rgba(255, 220, 160, .45), transparent), radial-gradient(1.5px 1.5px at 6% 52%, rgba(255, 220, 160, .4), transparent); }
.life__head { max-inline-size: 980px; }
.life__title { font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5.6rem); }
.life__title em { display: inline-block; padding-block-end: .08em; }
.life__scene { position: relative; direction: ltr; aspect-ratio: 1000 / 520; margin-block: clamp(64px, 7vw, 96px) clamp(72px, 7vw, 100px); }
.life__tv--one { position: absolute; left: 0; top: 0; inline-size: 64%; }
.life__pad { position: absolute; right: 0; bottom: 4%; inline-size: 45%; z-index: 3; filter: drop-shadow(0 0 60px rgba(255, 154, 92, .2)); }
.life__spill { --spill: radial-gradient(closest-side, rgba(255, 170, 100, .42), rgba(255, 95, 162, .18) 55%, transparent); inset: -8% -6% -16%; }
.life__box { position: absolute; left: 17%; top: 66%; inline-size: 27%; z-index: 2; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); }
.life__box img { inline-size: 100%; }
.life__tag { position: absolute; inset-block-end: calc(100% + 14px); inset-inline-start: 0; display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 .9rem/1.2 var(--ff-display); color: var(--ink-2); white-space: nowrap; }
.life__tag--gold { inset-block-end: auto; inset-block-start: calc(100% + 16px); color: #ffe2b4; }
.life__tag-n { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; font-size: .8rem; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.life__tag--gold .life__tag-n { color: #2a1405; background: var(--gold); box-shadow: 0 0 20px -4px rgba(255, 154, 92, .7); }
html[dir="rtl"] .life__tag { direction: rtl; }
.life__beam { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; overflow: visible; }
.life__beam path { animation: beam 2.4s linear infinite; }
@keyframes beam { to { stroke-dashoffset: -44; } }
.life__stats { list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 190, 120, .18); box-shadow: 0 0 0 1px rgba(255, 190, 120, .18); }
.life__stats li { display: grid; gap: 6px; align-content: start; padding: clamp(20px, 2.4vw, 30px); background: #0b0a0f; color: var(--ink-2); font-size: .93rem; }
.life__num { font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem)/1.1 var(--ff-brand); letter-spacing: -.03em; }
/* the big gold words must fit one line in every language: shrink to the column width (longest word ~ --fit em) */
.life__stats { container-type: inline-size; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.life__num { white-space: nowrap; font-size: min(clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem), calc((100cqi / var(--cols, 4) - var(--padx, 62px)) / var(--fit, 5.4))); }
:lang(fr) .life__stats { --fit: 8.15; } :lang(de) .life__stats { --fit: 7.85; } :lang(pt) .life__stats { --fit: 7.9; }
:lang(tr) .life__stats { --fit: 7.75; } :lang(nl) .life__stats { --fit: 7.65; } :lang(es) .life__stats { --fit: 7.45; }
:lang(it) .life__stats { --fit: 7.15; } :lang(pl) .life__stats { --fit: 6.75; }
html[dir="rtl"] .life__num { letter-spacing: 0; }
.life__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.life__step { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 210, 122, .07), rgba(255, 255, 255, .015)); box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .2); }
.life__step p { color: var(--ink-2); font-size: .95rem; margin-block-start: 6px; }
.life__n { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; font: 700 .95rem/1 var(--ff-display); color: #2a1405; background: var(--gold); box-shadow: 0 0 24px -4px rgba(255, 154, 92, .6); }
.life__step { grid-template-rows: auto auto 1fr; }
.life__shot { align-self: end; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), var(--sh-1); }
.life__shot--box { object-position: 50% 58%; background: #07080c; }
.life__cta { display: flex; justify-content: center; margin-block-start: clamp(32px, 4vw, 48px); }
@media (max-width: 900px) {
  .life__scene { aspect-ratio: 1 / 1.02; }
  .life__tv--one { inline-size: 100%; }
  .life__pad { inline-size: 64%; bottom: 6%; }
  .life__box { inline-size: 46%; left: -3%; top: auto; bottom: 0; }
  .life__tag { font-size: .82rem; white-space: normal; }
    .life__beam { display: none; }
  .life__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); --cols: 2; }
  .life__steps { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .life__cta .btn { inline-size: 100%; white-space: normal; } }

/* ---------- 6. how it works ---------- */
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); counter-reset: how; position: relative; }
.how__step { display: grid; gap: 26px; align-content: start; }
.how__tv { inline-size: 100%; }
.how__txt { display: grid; gap: 10px; }
.how__txt p { color: var(--ink-2); }
.how__n { font: 800 .9rem/1 var(--ff-brand); letter-spacing: .04em; background: var(--duo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.how__note { display: flex; gap: 10px; align-items: flex-start; margin-block-start: clamp(32px, 4vw, 48px); padding: 16px 18px; max-inline-size: 760px; border-radius: 14px; font-size: .9rem; color: var(--ink-3); background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.how__note .i { color: var(--ink-2); margin-block-start: 2px; }
@media (max-width: 900px) { .how__steps { grid-template-columns: 1fr; gap: 48px; } .how__step { grid-template-columns: 1fr; } }
@media (min-width: 600px) and (max-width: 900px) { .how__step { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ---------- 7. manage from your phone ---------- */
.mng__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.mng__photo { aspect-ratio: 1.18; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.mng__photo .photo__img { object-position: 50% 50%; }
.matte { position: absolute; inset: 0; pointer-events: none; -webkit-mask: url(/img/photo/phone-tv-tvmask.png) var(--pos) / cover no-repeat; mask: url(/img/photo/phone-tv-tvmask.png) var(--pos) / cover no-repeat; }
.screen--bg .screen__content { filter: blur(var(--dof, 3px)) brightness(.85); }
.mng__copy .sec-head { margin-block-end: 28px; }
.mng__ticks { margin-block-end: 32px; }
.mng__ticks li { color: var(--ink); }
.mng__ticks li span { color: var(--ink-2); }
@media (max-width: 1000px) { .mng__grid { grid-template-columns: 1fr; } .mng__photo { aspect-ratio: 1.3; } }
@media (max-width: 600px) { .mng__photo { aspect-ratio: .95; } .mng__photo .photo__img { object-position: 18% 50%; } .mng__photo .matte { --pos: 18% 50% !important; } }
/* the HTML phone screen (390 x 845 CSS px, perspective.js size:'css') */
.pm { inline-size: 390px; block-size: 845px; padding: 70px 22px 26px; display: flex; flex-direction: column; gap: 14px; direction: ltr; text-align: left;
  font: 400 15px/1.35 var(--ff-body); color: var(--ink); background: radial-gradient(120% 50% at 100% 0%, rgba(124, 92, 255, .3), transparent 60%), linear-gradient(180deg, #0c1024, #05060d); }
.pm::after { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.pm__bar { display: flex; align-items: center; justify-content: space-between; }
.pm__bar::before { content: ""; position: absolute; left: 50%; top: 1.3%; inline-size: 31.8%; block-size: 4.3%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.pm__dot { inline-size: 34px; block-size: 34px; border-radius: 50%; background: linear-gradient(140deg, #2ee6ff, #7c5cff); }
.pm__h { font: 650 30px/1.1 var(--ff-display); letter-spacing: -.03em; margin-block-start: 8px; }
.pm__dev { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pm__dev b, .pm__row b { display: block; font-weight: 600; }
.pm__dev small, .pm__row small, .pm__field small { color: var(--ink-3); font-size: 12.5px; }
.pm__ic { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; color: var(--cyan); background: rgba(46, 230, 255, .12); }
.pm__ok { margin-left: auto; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 99px; color: #c9f7e2; background: rgba(62, 229, 154, .14); white-space: nowrap; }
.pm__list { display: grid; gap: 1px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.pm__row { display: grid; grid-template-columns: 1fr auto; padding: 13px 16px; background: #0d1124; }
.pm__row small { grid-column: 1; }
.pm__on { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 99px; color: #05060d; background: linear-gradient(100deg, #6ff1ff, #a993ff); }
.pm__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(255, 255, 255, .05); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.pm__tabs span { flex: 1; text-align: center; padding: 8px 0; border-radius: 99px; }
.pm__tabs .is-on { color: var(--ink); background: rgba(255, 255, 255, .1); }
.pm__field { display: grid; gap: 4px; padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pm__btn { margin-top: auto; padding: 15px; border-radius: 99px; text-align: center; font-weight: 700; color: #05060d; background: linear-gradient(100deg, #5ff0ff, #a993ff); }

/* ---------- 8. pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 2.4vw, 32px); }
.plan .ticks { flex: 1; font-size: .94rem; }
.plan__top { display: grid; gap: 8px; }
.plan__price { font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem); margin-block-start: 6px; }
/* "Free" word on the box card: shrink only when the translation is longer than "Gratis" (fr Gratuit, tr Ücretsiz) */
.plan__top { container-type: inline-size; }
.plan--box .plan__price > span { font-size: min(1em, 100cqi / var(--fit, 4)); }
:lang(fr) .plan--box .plan__price > span { --fit: 4.7; }
:lang(tr) .plan--box .plan__price > span { --fit: 5.3; }
.plan__per { font-size: .9rem; color: var(--ink-3); }
.plan--hot { box-shadow: inset 0 0 0 1.5px rgba(124, 92, 255, .55), var(--glass-hi), 0 30px 80px -30px rgba(124, 92, 255, .55); background: linear-gradient(180deg, rgba(124, 92, 255, .14), rgba(46, 230, 255, .03)); }
.plan__flag { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; }
.plan--box .ticks strong { color: var(--gold-1); font-weight: 600; }
.plans__note { margin-block-start: 28px; text-align: center; color: var(--ink-3); font-size: .93rem; }
.plans__note a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }

/* ---------- 9. partner network ---------- */
.partners { overflow: clip; isolation: isolate; }
.partners__glow { position: absolute; z-index: -1; inset: 10% -10% auto auto; inline-size: 70%; block-size: 70%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, .14), rgba(46, 230, 255, .05) 60%, transparent); filter: blur(40px); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.pillar .card__body { gap: 14px; }
.pn { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 72px); margin-block-start: clamp(40px, 6vw, 80px); align-items: start; }
.pn__side { display: grid; gap: 28px; position: sticky; inset-block-start: calc(var(--nav-h) + 32px); }
.pn__who { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pn__who li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: var(--r-pill); font-size: .9rem; color: var(--ink); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-2); }
.pn__who .i { color: var(--cyan); inline-size: 17px; block-size: 17px; }
.pn__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pn__steps li { position: relative; display: flex; gap: 16px; padding-block-end: 22px; }
.pn__steps li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 17px; inset-block: 38px 2px; inline-size: 1px; background: linear-gradient(180deg, rgba(124, 92, 255, .6), rgba(46, 230, 255, .1)); }
.pn__steps b { font: 600 1.05rem/1.3 var(--ff-display); }
.pn__steps p { color: var(--ink-2); font-size: .93rem; margin-block-start: 4px; }
.pn__n { flex: none; display: grid; place-items: center; inline-size: 35px; block-size: 35px; border-radius: 50%; font: 700 .9rem/1 var(--ff-display); color: #05060d; background: linear-gradient(140deg, #6ff1ff, #a993ff); }
.pn__login { color: var(--ink-3); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pn__formwrap { padding: clamp(22px, 3.4vw, 44px); border-radius: var(--r-xl); }
.pn__form .seg { display: flex; inline-size: 100%; }
.pn__form .chips > legend .opt, .field__label .opt { font-weight: 400; color: var(--ink-3); }
.pn__status:empty { display: none; }
.pn__done { display: grid; gap: 14px; justify-items: center; text-align: center; padding-block: 48px; }
.pn__done p { color: var(--ink-2); max-inline-size: 42ch; }
.pn__done-ic { display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 50%; color: var(--ok); background: rgba(62, 229, 154, .1); box-shadow: inset 0 0 0 1px rgba(62, 229, 154, .4), 0 0 50px -10px rgba(62, 229, 154, .5); }
.pn__done-ic .i { inline-size: 34px; block-size: 34px; }
@media (max-width: 1100px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) { .pn { grid-template-columns: 1fr; } .pn__side { position: static; } }
@media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- 10. FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq__head { position: sticky; inset-block-start: calc(var(--nav-h) + 32px); }
.faq__head .lead a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.faq__list { border-block-start: 1px solid var(--line); }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } .faq__head { position: static; } }
.faq { padding-block-end: calc(var(--sec-y) * .6); }
.pn__done:focus { outline: none; }

/* ---------- notify-me modal + showcase pause control ---------- */
.notify { max-inline-size: 520px; }
.notify .badge { margin-block-end: 14px; }
.notify .form { margin-block-start: 22px; display: grid; gap: 16px; }
.notify__done { display: grid; gap: 12px; justify-items: start; outline: none; }
.notify__done[hidden], .notify__form-wrap[hidden] { display: none; }
.notify__ok { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--duo); color: #05060d; box-shadow: var(--glow-duo); }
.notify__ok .i { inline-size: 26px; block-size: 26px; }
.show__ctrl { display: flex; justify-content: center; margin-block: 18px 0; }
.show__pause { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 500 .82rem/1 var(--ff-body); cursor: pointer; }
.show__pause:hover { color: var(--ink); background: rgba(255, 255, 255, .09); }
.show__pause .i { inline-size: 14px; block-size: 14px; }
.show__pause[aria-pressed="false"] .show__i-play, .show__pause[aria-pressed="false"] .show__play-t,
.show__pause[aria-pressed="true"] .show__i-pause, .show__pause[aria-pressed="true"] .show__pause-t { display: none; }

/* ---------- 404 page (404.html uses home.css for this block) ---------- */
.nf__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; min-block-size: 78vh; padding-block: calc(var(--nav-h) + 48px) 64px; }
.nf__tv { inline-size: 100%; }
.nf__tv .dev__screen img { filter: grayscale(.7) brightness(.35) blur(2px); }
.nf__noise { position: absolute; inset: 0; z-index: 1; opacity: .22; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, .6)); }
.nf__osd { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 4px; direction: ltr; }
.nf__code { font: 800 clamp(3rem, 1.5rem + 6vw, 6.5rem)/1 var(--ff-brand); letter-spacing: -.04em; background: var(--duo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf__sig { font: 600 .9rem/1 var(--ff-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); }
.nf__copy { display: grid; gap: 20px; justify-items: start; }
.nf__cta { flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .nf__in { grid-template-columns: 1fr; min-block-size: 0; } }

/* ---------- phones: shorter page (rails are in site.css §20) ---------- */
@media (max-width: 640px) {
  .screens__item--tv, .pn__who, .pn__side > .h3 { display: none; }
  .screens__item.photo { aspect-ratio: 4 / 4.2; }
  .screens__item--phone { padding: 28px 16px 84px; }
  .how__step { grid-template-columns: 42% minmax(0, 1fr); gap: 14px; align-items: center; }
  .how__txt { gap: 6px; } .how__txt .h3 { font-size: 1.15rem; } .how__txt p { font-size: .9rem; }
  .bento__card .card__body { padding: 18px; }
  .life__stats li { padding: 16px; } .life__stats { --padx: 34px; }
  .plan { min-block-size: 100%; }
}
@media (max-width: 640px) { .feats__more { gap: 8px; } .feats__more li { padding: 8px 12px; font-size: .82rem; gap: 7px; } .feats__more .i { inline-size: 15px; block-size: 15px; } }