/**
 * @file home.css
 * @brief Home page sections of the ColocApp website (hero, steps, features,
 *        gallery, premium, FAQ, final call to action). Loaded after site.css.
 */

/* === Hero === */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); padding: 56px 0 0; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; pointer-events: none; }
.hero::before { width: 420px; height: 420px; inset-inline-start: -140px; top: -120px; background: var(--blob-a); }
.hero::after { width: 520px; height: 520px; inset-inline-end: -160px; bottom: -200px; background: var(--blob-b); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: end; }
.hero .copy { padding-bottom: 72px; }
.hero .pill { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--hero-ink); }
.hero h1 { font-size: clamp(40px, 7vw, 72px); margin: 18px 0 18px; }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
.hero .lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--hero-muted); max-width: 34em; }
.hero .fine { margin: 18px 0 0; font-size: 14px; color: var(--hero-muted); }
.hero .phones { position: relative; display: flex; justify-content: center; gap: 0; min-height: 100%; }
.hero .phones img { width: min(300px, 46%); border-radius: 30px 30px 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.hero .phones img + img { margin-inline-start: -6%; transform: translateY(48px); }
@media (max-width: 860px) {
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .copy { padding-bottom: 8px; }
  .hero .phones img { width: min(250px, 48%); }
}

/* === Proof band === */
.proof { padding: 28px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.proof ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.proof strong { display: block; font: 800 28px/1.1 var(--display); color: var(--primary); }
.proof span { font-size: 14px; color: var(--muted); }
@media (max-width: 720px) { .proof ul { grid-template-columns: 1fr 1fr; } }

/* === Generic section === */
section.block { padding: 88px 0 0; }
.head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.head h2 { font-size: clamp(30px, 5vw, 46px); margin: 10px 0 14px; }
.head p { color: var(--muted); font-size: 18px; }

/* === How it works === */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: how; }
.how li { counter-increment: how; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); }
.how li::before { content: counter(how); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: var(--on-primary); font: 800 21px/1 var(--display); margin-bottom: 16px; }
.how h3 { font-size: 21px; margin-bottom: 8px; }
.how p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } }

/* === Feature rows === */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 0; }
.feature + .feature { border-top: 1px solid var(--line); }
.feature:nth-of-type(even) .media { order: 2; }
.feature h3 { font-size: clamp(26px, 3.6vw, 36px); margin: 10px 0 14px; }
.feature p { color: var(--muted); font-size: 18px; }
.feature .media { display: flex; justify-content: center; gap: 16px; align-items: flex-start; }
.feature .media img.shot { width: min(300px, 70%); border-radius: 28px; box-shadow: var(--shadow); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-inline-start: 32px; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%230040DD' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
@media (prefers-color-scheme: dark) {
  .ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FFD8A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--secondary-container); color: var(--on-secondary-container); }
.chips li.alt { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.badge { display: inline-block; vertical-align: middle; font: 600 12px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--secondary-container); color: var(--on-secondary-container); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
  .feature:nth-of-type(even) .media { order: 0; }
}

/* === Mock cards (HTML replicas of in-app cards, real app wording) === */
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px 18px 14px; box-shadow: var(--shadow); width: min(300px, 100%); font-size: 15px; }
.mock .mt { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 18px/1.2 var(--display); margin-bottom: 10px; }
.mock .tag { font: 600 13px/1 var(--ui); padding: 6px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.mock .lbl { color: var(--primary); font: 700 16px/1.2 var(--display); margin: 12px 0 8px; }
.mock ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: m; }
.mock ol li { counter-increment: m; position: relative; padding-inline-start: 34px; line-height: 1.35; }
.mock ol li::before { content: counter(m); position: absolute; inset-inline-start: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); font: 700 13px/24px var(--display); text-align: center; }
.mock .chips { margin: 0; }
.mock .chips li { font-size: 13px; padding: 5px 10px; }
.mock .foot { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.widget { width: min(250px, 100%); border-radius: 28px; padding: 18px; }
.widget .row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.widget .row:first-of-type { border-top: 0; }
.widget .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.widget .dot.done { background: var(--primary); border-color: var(--primary); }
.widget .pts { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--on-secondary-container); background: var(--secondary-container); padding: 3px 7px; border-radius: 8px; }

/* === "More" grid === */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); overflow: hidden; }
.tile h3 { font-size: 21px; margin: 0 0 8px; }
.tile p { color: var(--muted); margin: 0; }
.tile .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--primary-container); color: var(--on-primary-container); margin-bottom: 14px; }
.tile .ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile.photo { padding: 0; display: flex; flex-direction: column; }
.tile.photo img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.tile.photo div { padding: 20px 24px 24px; }
.tile.wide { grid-column: span 2; }
@media (max-width: 860px) { .grid { grid-template-columns: 1fr; } .tile.wide { grid-column: auto; } }

/* === Screenshot gallery (scrolls inside its own box, never the page) === */
.gallery { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 16px 24px; margin: 0 auto; max-width: 1120px; list-style: none; }
.gallery li { flex: 0 0 auto; scroll-snap-align: center; }
.gallery img { width: 240px; border-radius: 26px; box-shadow: var(--shadow); }

/* === Premium === */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.plan.hi { border: 2px solid var(--primary); }
.plan h3 { font-size: 24px; margin-bottom: 14px; }
.small-print { max-width: 860px; margin: 16px auto 0; color: var(--muted); font-size: 14px; text-align: center; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

/* === FAQ === */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding-block: 18px; padding-inline: 0 32px; position: relative; font: 700 18px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 14px; font: 700 26px/1 var(--ui); color: var(--primary); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 0 0 18px; }

/* === Final call to action === */
.cta { margin-top: 88px; }
.cta .box { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-ink); border-radius: 32px; padding: 56px 32px; text-align: center; border: 1px solid var(--line); }
.cta h2 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 12px; }
.cta h2 em { font-style: normal; color: var(--hero-accent); }
.cta p { color: var(--hero-muted); font-size: 18px; }
.cta .stores { justify-content: center; }
.cta img.icon { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 18px; }

/* === Arabic (dir="rtl"): no letter-spacing on Arabic script === */
:lang(ar) .badge, :lang(ar) .proof strong, :lang(ar) .mock .mt { letter-spacing: 0; }
:lang(ar) .hero h1 { line-height: 1.3; }