/* Audex home page (2026-10-28 redesign, "Direction 1"): light, bento, screenshot-led.
   Uses the site tokens from styles.css; only the home page loads this file. */

.home{ --ink:#16151B; --ink-2:#4D4A55; --line:#E3DFD8; --dark:#16151B; --dark-card:#1E1C23; --dark-text:#B9B6C2; }
.home h1,.home h2,.home h3,.home p,.home figure{ margin:0; }
.home img{ max-width:100%; height:auto; }
.home .wrap{ max-width:1248px; }

.h-kicker{ font:600 13px/1.3 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--coral); }
.h-kicker-light{ color:var(--coral-bright); }
.h-kicker-ink{ color:var(--ink); }
:lang(ar) .h-kicker{ letter-spacing:0; }

/* Hero */
.h-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:48px; padding-top:40px; padding-bottom:32px; }
.h-hero-copy{ flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:26px; }
.h-badge{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; padding:8px 14px 8px 8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:600; }
.h-badge-new{ padding:4px 10px; border-radius:999px; background:var(--coral-bright); color:var(--ink); }
.h-hero h1{ font-size:clamp(44px,6.4vw,84px); line-height:.98; letter-spacing:-.045em; font-weight:800; color:var(--ink); }
:lang(ar) .h-hero h1{ letter-spacing:0; line-height:1.2; }
.h-accent{ color:var(--coral); }
.h-lede{ max-width:560px; font-size:19px; line-height:1.55; color:var(--ink-2); }
.h-cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.h-cta-row .play-badge img{ height:56px; width:auto; }
.h-price-note{ font-size:15px; color:var(--ink-2); }
.h-price-note b{ color:var(--ink); }
.h-hero-visual{ flex:1 1 380px; min-width:0; display:flex; justify-content:center; align-items:flex-end; padding-bottom:12px; }
.h-phone{ width:270px; padding:10px; border-radius:40px; background:var(--dark); box-shadow:0 40px 80px -40px rgba(22,21,27,.55); }
.h-phone img{ display:block; width:100%; border-radius:30px; }
.h-watch{ width:150px; height:150px; padding:8px; border-radius:50%; background:var(--dark); margin-inline-start:-46px; margin-bottom:30px; box-shadow:0 30px 60px -30px rgba(22,21,27,.6); }
.h-watch img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* Works with */
.h-works{ padding-top:16px; padding-bottom:56px; }
.h-works-box{ background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px 28px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; }
.h-works-box .h-kicker{ font-size:13px; color:#5F5C66; }
.h-logos{ display:contents; list-style:none; }
.h-logos li{ display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }
.h-logos img{ width:26px; height:26px; border-radius:6px; }
.h-works-more{ font-size:15px; color:#5F5C66; }

/* Section heads */
.h-section{ padding-top:24px; padding-bottom:72px; display:flex; flex-direction:column; gap:28px; }
.h-section-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 40px; }
.h-section-head h2{ max-width:640px; font-size:clamp(32px,4vw,48px); line-height:1.05; letter-spacing:-.035em; font-weight:800; }
.h-section-head p{ max-width:400px; font-size:16px; line-height:1.55; color:var(--ink-2); }
:lang(ar) .h-section-head h2{ letter-spacing:0; line-height:1.25; }

/* Bento */
.h-bento{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
@media (min-width:720px){ .h-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .h-bento{ grid-template-columns:minmax(0,.9fr) repeat(2,minmax(0,1fr)); } }
.h-card{ border-radius:26px; padding:28px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.h-card h3{ font-size:22px; line-height:1.2; font-weight:700; }
.h-card p{ font-size:15px; line-height:1.55; color:var(--ink-2); }
.h-card .h-kicker{ font-size:13px; color:var(--coral); }
.h-card .h-kicker-light{ color:var(--coral-bright); }
.h-card .h-kicker-ink{ color:var(--ink); }
.h-card-muted .h-kicker{ color:#A8321A; }
.h-card-dark{ background:var(--dark); color:#F4F3F6; padding:30px 30px 0; gap:14px; }
.h-card-dark h3{ font-size:28px; line-height:1.15; letter-spacing:-.02em; color:#F4F3F6; }
.h-card-dark p{ color:var(--dark-text); }
.h-card-tall{ grid-row:span 2; }
@media (max-width:719px){ .h-card-tall{ grid-row:auto; } }
.h-card-shot{ margin-top:auto; padding-top:12px; display:flex; justify-content:center; }
.h-card-shot img{ display:block; width:78%; max-width:300px; border-radius:24px 24px 0 0; border:8px solid #2A2830; border-bottom:none; }
.h-card-split{ background:var(--surface); border:1px solid var(--line); flex-direction:row; align-items:center; gap:20px; }
.h-card-split > div{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px; }
.h-mini-shot{ width:108px; flex:none; border-radius:16px; border:5px solid var(--dark); }
.h-card-accent{ background:var(--coral-bright); color:var(--ink); justify-content:space-between; gap:8px; }
.h-stat{ display:flex; align-items:baseline; gap:12px; }
.h-stat b{ font-size:64px; line-height:1; letter-spacing:-.04em; font-weight:800; }
.h-card .h-stat span{ font-size:17px; font-weight:600; line-height:1.3; color:var(--ink); }
.h-card-muted{ background:var(--surface-variant); justify-content:space-between; }
@media (max-width:420px){ .h-card-split{ flex-direction:column; align-items:flex-start; } .h-mini-shot{ width:140px; } }

/* Devices */
.h-devices{ background:var(--dark); color:#F4F3F6; }
.h-devices > .wrap{ padding-top:80px; padding-bottom:80px; display:flex; flex-direction:column; gap:36px; }
.h-devices .h-section-head h2{ color:#F4F3F6; }
.h-devices .h-section-head p{ color:var(--dark-text); }
.h-screens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:18px; }
.h-screens figure{ background:var(--dark-card); border-radius:22px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.h-screens img{ display:block; width:100%; border-radius:12px; }
.h-screens figcaption{ font-size:15px; }
.h-screens figcaption b{ font-weight:600; }
.h-screens figcaption span{ display:block; margin-top:2px; color:var(--dark-text); font-size:14px; }
.h-device-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.h-device{ background:var(--dark-card); border-radius:22px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.h-device h3{ font-size:17px; font-weight:700; color:#F4F3F6; }
.h-device p{ font-size:14px; line-height:1.5; color:var(--dark-text); }
.h-icon{ width:44px; height:44px; margin-bottom:6px; border-radius:12px; background:rgba(255,122,77,.16); display:flex; align-items:center; justify-content:center; }
.h-icon svg{ width:24px; height:24px; fill:var(--coral-bright); }

/* Promise */
.h-promise{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; padding-top:80px; }
.h-promise h2{ font-size:34px; line-height:1.1; letter-spacing:-.03em; font-weight:800; }
:lang(ar) .h-promise h2{ letter-spacing:0; }
.h-point{ display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:2px solid var(--ink); }
.h-point h3{ font-size:17px; font-weight:700; }
.h-point p{ font-size:15px; line-height:1.55; color:var(--ink-2); }

/* Pricing and FAQ */
.h-pricing{ display:flex; flex-wrap:wrap; align-items:stretch; gap:28px; padding-bottom:80px; }
.h-price-card{ flex:1 1 360px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:36px; display:flex; flex-direction:column; gap:18px; }
.h-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.h-price .price-figure{ font-size:72px; line-height:1; letter-spacing:-.05em; font-weight:800; color:var(--ink); }
.h-price .price-figure sup{ font-size:.45em; vertical-align:super; letter-spacing:0; }
.h-price span{ font-size:17px; color:var(--ink-2); }
.h-plus{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.5; }
.h-plus li{ display:flex; gap:10px; }
.h-plus li::before{ content:"+"; color:var(--coral); font-weight:800; }
.h-btn{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border-radius:999px; background:var(--fill); color:var(--on-fill); font-weight:600; font-size:16px; }
.h-btn:hover{ background:#A8321A; }
.h-faq{ flex:999 1 480px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.h-faq h2{ margin-bottom:8px; font-size:34px; letter-spacing:-.03em; font-weight:800; }
:lang(ar) .h-faq h2{ letter-spacing:0; }
.h-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 22px; }
.h-faq summary{ font-size:16px; font-weight:600; cursor:pointer; }
.h-faq details p{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--ink-2); }
.h-faq a,.h-more a{ color:var(--coral); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.h-more{ margin-top:4px; font-size:15px; }

/* Final call to action */
.h-final{ padding-bottom:64px; }
.h-final-box{ background:var(--fill); color:var(--on-fill); border-radius:32px; padding:56px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.h-final-box h2{ font-size:clamp(32px,4.4vw,56px); line-height:1; letter-spacing:-.04em; font-weight:800; color:var(--on-fill); }
:lang(ar) .h-final-box h2{ letter-spacing:0; line-height:1.2; }
.h-final-box .play-badge img{ height:60px; width:auto; }

.home a:focus-visible,.home summary:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:8px; }