/* Blacksite: home page sections. */
.scroll-trigger { position: absolute; top: 60px; left: 0; width: 100%; height: 1px; pointer-events: none; }
.gap60 { gap: 60px; }
.w284 { max-width: 284px; } .w364 { max-width: 364px; } .w390 { max-width: 390px; } .w463 { max-width: 463px; } .w475 { max-width: 475px; }
.w500 { max-width: 500px; } .w509 { max-width: 509px; } .w536 { max-width: 536px; } .w548 { max-width: 548px; } .w577 { max-width: 577px; }
.w727 { max-width: 727px; } .w746 { max-width: 746px; }
.title-block { width: 100%; }

/* ---------------- HERO ---------------- */
.hero { padding-top: 190px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #000 0%, #2f2c2a 67%); }
.hero-deco { position: absolute; z-index: 3; top: 0; left: 0; width: calc(100% + 20px); height: 100%; display: flex; flex-direction: column; align-items: center; overflow: clip; pointer-events: none; }
.hero-deco .wrap { width: 100%; height: calc(100% - 27px); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 200px; overflow: clip; }
.hero-deco img { width: 100%; height: auto; aspect-ratio: 1462 / 1014; object-fit: contain; flex: none; transform-origin: 50% 50%; }
.hero-overlay { position: absolute; z-index: 4; left: 0; right: 0; top: calc(100% - 429px); height: 442px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 83.35%); pointer-events: none; }
.hero-container { position: relative; z-index: 2; width: 100%; max-width: 1260px; padding: 0 30px; display: flex; flex-direction: column; align-items: center; }
.hero-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 120px; }
.hero-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.hero-text { width: 950px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 45px; }
.hero-titles { display: flex; flex-direction: column; align-items: center; gap: 25px; width: 100%; }
.hero-desc { max-width: 582px; text-align: center; }
.hero-bottom { width: 960px; max-width: 100%; display: flex; justify-content: center; align-items: center; }
.hero-shot { width: 100%; aspect-ratio: 1.4055636896046853; border-radius: 20px; --fb: rgba(255,255,255,.18); transform-origin: 50% 50%; }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

/* ---------------- BRANDS ---------------- */
.brands { padding: 55px 0 135px; }
.brands-inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.brands-title { font-size: 30px; line-height: 1.33333; text-align: center; max-width: 358px; }
.logo-wrap { position: relative; width: 100%; height: 26px; overflow: clip; display: flex; justify-content: center; }
.ticker { width: 100%; height: 100%; overflow: visible; display: flex; }
.ticker ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 51px; align-items: center; height: 100%; flex: none; will-change: transform; }
.ticker li { flex: none; height: 26px; }
.ticker li img { width: 100%; height: 100%; object-fit: cover; }
.fade { position: absolute; top: 0; height: 100%; width: 326px; pointer-events: none; }
.fade-r { right: 0; background: linear-gradient(92deg, rgba(0,0,0,0) 0%, #000 100%); }
.fade-l { left: 0; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0) 100%); }

/* ---------------- FEATURES ---------------- */
.feature-grid { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 20px; }
.feature-card { display: flex; flex-direction: column; gap: 30px; }
.feature-card .img-wrap { position: relative; width: 100%; aspect-ratio: 665 / 522; border-radius: 14px; background: var(--card); overflow: clip; }
.feature-card .art, .feature-card .ui { position: absolute; left: 50%; top: 50%; width: calc(var(--w) / 665 * 100%); aspect-ratio: var(--w) / var(--h); transform: translate(-50%, -50%) translateY(var(--ly, 0px)); }
.feature-card .art img, .feature-card .ui img { width: 100%; height: 100%; object-fit: cover; }
.feature-card .art.big { width: calc(346 / 665 * 100%); aspect-ratio: 346 / 549; transform: translate(-50%, -50%) translateY(var(--ly, 0px)) rotate(37deg); }
.feature-card .art.big img { object-fit: fill; }
.feature-card .card-text { max-width: 564px; display: flex; flex-direction: column; gap: 25px; }

/* ---------------- SERVICE ---------------- */
.service { padding: 130px 0 135px; }
.service .container { overflow: visible; }
.service-sticky { position: sticky; top: 100px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; z-index: 1; }
.card-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.service-stack { width: 100%; display: flex; gap: 18px; align-items: center; }
.service-card { flex: none; width: 450px; height: 438px; border-radius: 18px; background: var(--card); --fb: rgba(255,255,255,.18); padding: 41px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 147px; overflow: clip; }
.service-card .icon { width: 48px; height: 48px; }
.service-card .card-text { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.service-trigger { width: 100%; height: 1200px; }

/* ---------------- QA / STEPS ---------------- */
.qa { padding-bottom: 135px; }
.steps { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.steps-list { width: 485px; display: flex; flex-direction: column; gap: 35px; }
.step { position: relative; padding-bottom: 35px; cursor: pointer; overflow: hidden; }
.step::after, .acc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.step .step-body { height: 0; overflow: hidden; }
.step .step-body p { padding-top: 25px; max-width: 462px; }
.steps-media { position: relative; width: 831px; height: 678px; flex: none; border-radius: 24px; --fb: var(--line); }
.steps-media .pane { position: absolute; inset: 0; display: none; }
.steps-media .pane.is-open { display: block; }
.steps-media .bg { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.steps-media .ui { position: absolute; left: 50%; top: 50%; width: 48.01%; aspect-ratio: 399 / 279; transform: translate(-50%, -50%); object-fit: contain; }

/* ---------------- DASHBOARD ---------------- */
.dash { padding-bottom: 135px; }
.dash-bg { position: absolute; inset: 0; }
.dash-bg img { width: 100%; height: 100%; object-fit: cover; }
.dash .container { position: relative; z-index: 1; }
.dash-shot { width: 1050px; max-width: 100%; aspect-ratio: 1050 / 747; }
.dash-shot img { width: 100%; height: 100%; object-fit: contain; }
.dash-overlay { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 429px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 83.35%); pointer-events: none; }

/* ---------------- WHY ---------------- */
.why { padding-bottom: 135px; }
.why-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px 44px; overflow: clip; }
.why-card { display: flex; flex-direction: column; gap: 82px; align-items: flex-start; }
.why-card .icon { width: 60px; height: 60px; }
.why-card .card-text { display: flex; flex-direction: column; gap: 15px; }

/* ---------------- PRICING ---------------- */
.pricing { padding-bottom: 135px; }
.pricing-body { width: 925px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.toggle { position: relative; display: flex; gap: 8px; padding: 5px; border-radius: 50px; background: var(--card); --fb: var(--line-faint); }
.toggle-bg { position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: 112px; border-radius: 50px; background: var(--card-solid); }
.toggle-opt { position: relative; padding: 8.5px 24px; font-family: var(--body); font-size: 16px; line-height: 24px; color: var(--text); }
.price-stack { width: 100%; display: flex; justify-content: center; align-items: center; gap: 25px; overflow: clip; }
.price-card { width: 450px; flex: none; border-radius: 18px; background: var(--card); --fb: rgba(255,255,255,.18); padding: 41px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 37px; overflow: clip; }
.price-card .card-text { display: flex; flex-direction: column; gap: 25px; width: 100%; }
.price-content { width: 325px; display: flex; flex-direction: column; gap: 38px; }
.price-block { display: flex; flex-direction: column; gap: 10px; }
.price-stack-row { display: flex; align-items: flex-end; }
.price { font-family: var(--sans); font-weight: 600; font-size: 28px; line-height: 1.2857; color: var(--text); }
.per { font-family: var(--sans); font-size: 12px; line-height: 1.2; color: var(--text); }
.price-note { font-family: var(--body); font-size: 14px; line-height: 1.6; letter-spacing: -.02em; color: var(--text); }
.rule { width: 100%; height: 1px; background: var(--rule); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checks li { display: flex; align-items: center; gap: 7.69231px; height: 16px; font-family: var(--sans); font-size: 12px; line-height: 1.2; color: #fff; }
.checks li::before { content: ""; flex: none; width: 16px; height: 16px; background: url("../assets/img/8jIgVDkJg69UvoG1cZ3XyyNbiM.svg") center / cover no-repeat; }
.btn.wide { padding: 11px 26px 11px 28px; }

/* ---------------- FAQ ---------------- */
.faq-body { width: 737px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 45px; }
.faq-list { width: 100%; display: flex; flex-direction: column; gap: 23px; }
.acc { position: relative; width: 100%; padding-bottom: 23px; }
.acc-q { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; border-radius: 8px; }
.acc-q h3 { flex: 1; margin-right: 20px; font-family: var(--body-medium); font-weight: 500; font-size: 16px; line-height: 24px; color: #fff; }
.acc-q img { width: 12px; height: 24px; object-fit: contain; transition: transform .4s var(--tween); }
.acc.is-open .acc-q img { transform: rotate(180deg); }
.acc-a { height: 1px; overflow: hidden; opacity: 0; }
.acc-a p { max-width: 642px; padding-top: 12px; }
.more { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px; border-radius: 8px; background: var(--card); --fb: transparent; }

/* ---------------- FOOTER (home spacing) ---------------- */

/* ================= LAPTOP 1200–1439 ================= */
@media (max-width: 1439.98px) {
  .brands-title { font-size: 26px; }
  .service-card { height: 433px; }
  .steps-list { width: 418px; }
  .steps-media { width: 719px; height: 587px; }
  .why-grid { gap: 60px 64px; }
}

/* ================= TABLET 810–1199 ================= */
@media (max-width: 1199.98px) {
  .hero { padding: 140px 0 40px; }
  .hero-container { padding: 0 20px; }
  .hero-content { gap: 40px; }
  .hero-text { gap: 32px; }
  .hero-titles { gap: 16px; }
  .brands { padding: 40px 0 80px; }
  .brands-inner { gap: 40px; }
  .brands-title { font-size: 22px; max-width: 346px; }
  .fade { width: 180px; }
  .stack.gap60 { gap: 40px; }
  .feature-card .card-text { gap: 16px; }
  .service { padding: 80px 0; }
  .service-sticky { gap: 40px; }
  .service-stack { gap: 12px; }
  .service-card { width: 260px; height: 327px; border-radius: 12px; padding: 21px; gap: 50px; }
  .service-card .icon { width: 40px; height: 40px; }
  .service-card .card-text { gap: 16px; }
  .qa, .dash, .why, .pricing { padding-bottom: 80px; }
  .steps-list { width: 339px; gap: 24px; }
  .step { padding-bottom: 24px; }
  .step .step-body p { padding-top: 16px; }
  .steps-media { width: 400px; height: 372px; border-radius: 12px; }
  .steps-media .bg { border-radius: 12px; }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .why-card { gap: 12px; }
  .why-card .card-text { gap: 10px; }
  .pricing-body { gap: 30px; }
  .toggle { padding: 6px; }
  .toggle-opt { padding: 6px 16px; }
  .toggle-bg { top: 6px; left: 6px; height: calc(100% - 12px); width: 96px; }
  .price-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .price-card { width: auto; border-radius: 12px; padding: 16px; gap: 24px; }
  .price-content { width: 100%; gap: 20px; }
  .price { font-size: 24px; }
}

/* ================= PHONE < 810 ================= */
@media (max-width: 809.98px) {
  .hero { padding: 120px 0 30px; }
  .hero-container { padding: 0 16px; }
  .hero-content { gap: 30px; }
  .hero-top { gap: 30px; }
  .hero-text { gap: 24px; }
  .hero-titles { gap: 14px; }
  .hero-desc { max-width: 320px; }
  .hero .btn { padding: 11px 22px; }
  .brands { padding: 10px 0 60px; }
  .brands-inner { gap: 30px; }
  .brands-title { font-size: 20px; max-width: 260px; }
  .fade { width: 90px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature-card { gap: 20px; }
  .feature-card .img-wrap { border-radius: 10px; }
  .feature-card .card-text { gap: 12px; }
  .service { padding: 60px 0; }
  .service-sticky { position: relative; top: 0; gap: 30px; }
  .service-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .service-card { width: 100%; height: auto; min-height: 277px; }
  .service-trigger { display: none; }
  .qa, .dash, .why, .pricing { padding-bottom: 60px; }
  .steps { flex-direction: column; gap: 20px; }
  .steps-media { order: -1; width: 100%; height: auto; aspect-ratio: 350 / 286; }
  .steps-list { width: 100%; gap: 12px; }
  .step { padding-bottom: 12px; }
  .step .step-body p { padding-top: 12px; }
  .dash .stack.gap60 { gap: 30px; }
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 50px 20px; }
  .price-stack { grid-template-columns: minmax(0, 1fr); }
  .price { font-size: 20px; }
}

/* ---- phone/tablet refinements measured from the template ---- */
@media (max-width: 1199.98px) {
  .step h3 { font-size: 22px; }
}
@media (max-width: 809.98px) {
  .hero-deco { display: none; }
  .hero-overlay { top: auto; bottom: -5px; height: 156px; }
  .step h3 { font-size: 20px; }
  .why-card .icon { width: 48px; height: 48px; }
  .why-card .t-h4 { font-size: 20px; }
  .more { flex-direction: column; justify-content: center; gap: 24px; padding: 12px; --fb: rgba(255,255,255,.18); }
  .more .t-h4 { font-size: 20px; }
  .btn { padding: 11px 22px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hero-deco { display: none; }
  .hero-text { width: 618px; gap: 45px; }
  .hero-titles { gap: 12px; }
  .hero-desc { max-width: 430px; }
  .features .title-block .t-body { max-width: 353px; }
  .service .title-block { max-width: 368px; }
  .qa .title-block { max-width: 519px; } .qa .title-block .t-body, .dash .title-block .t-body { max-width: 356px; }
  .dash .title-block { max-width: 396px; }
  .why .title-block .t-body { max-width: 333px; }
  .why-card .t-body { max-width: 320px; }
}

/* ---- Blacksite content additions ---- */
[hidden] { display: none !important; }
.ticker li.brand { display: flex; align-items: center; gap: 8px; height: 26px; }
.ticker li.brand img { width: 24px; height: 24px; object-fit: contain; }
.ticker li.brand span { font-family: var(--sans); font-weight: 500; font-size: 20px; line-height: 26px; color: rgba(255,255,255,.6); white-space: nowrap; }
.ticker li.brand .spy { font-weight: 600; letter-spacing: .02em; border: 1.5px solid rgba(255,255,255,.6); border-radius: 5px; font-size: 12px; line-height: 18px; padding: 0 5px; }
.steps-media .ui.glass { position: absolute; left: 50%; top: 50%; width: 48.01%; aspect-ratio: 399 / 279; transform: translate(-50%, -50%); }
.feature-card .ui.glass { pointer-events: none; }
.feature-card .ui.glass .g, .steps-media .ui.glass .g { justify-content: space-between; }
.dash-shot { border-radius: 20px; overflow: hidden; position: relative; }
.dash-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
.dash-shot img { object-fit: cover; }