/* Ahenk — global multilingual site. Single stylesheet, logical properties, [dir="rtl"] aware. */
:root{
  --brand:#c77bbc; --brand-strong:#a75a9b; --brand-deep:#7d3f74; --violet:#8f7ad6;
  --grad:linear-gradient(135deg,#c77bbc 0%,#8f7ad6 100%);
  --bg:#fbf8fb; --bg-soft:#f5eef6; --surface:#ffffff; --text:#2b2030; --muted:#6d5c72;
  --line:#eadcec; --chip:#f6eef7; --shadow:0 4px 14px rgba(125,63,116,.06);
  --ring:rgba(199,123,188,.35);
  --radius:16px; --radius-sm:12px; --radius-pill:14px;
  --font-body:"Figtree",system-ui,sans-serif; --font-head:"Bricolage Grotesque",var(--font-body);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#161020; --bg-soft:#1e1529; --surface:#251a31; --text:#f4ecf6; --muted:#b7a6c1;
  --line:#3a2b47; --chip:#2d2039; --shadow:0 5px 16px rgba(0,0,0,.22); color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#161020; --bg-soft:#1e1529; --surface:#251a31; --text:#f4ecf6; --muted:#b7a6c1;
    --line:#3a2b47; --chip:#2d2039; --shadow:0 5px 16px rgba(0,0,0,.22); color-scheme:dark;
  }
}
html[lang="ar"]{ --font-body:"Alexandria",system-ui,sans-serif; --font-head:"Alexandria",var(--font-body); }

html[lang="ar"] h1, html[lang="ar"] h2{font-weight:700; letter-spacing:0}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; max-width:100%; overflow-x:clip}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  width:100%; max-width:100%; overflow-x:clip;
}
img,svg{display:block; max-width:100%}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; line-height:1.14; margin:0 0 .5em; text-wrap:balance; letter-spacing:-.015em}
h1{font-weight:800; letter-spacing:-.025em}
h2{font-weight:800}
p{margin:0 0 1em; text-wrap:pretty}
a{color:var(--brand-strong); text-decoration:none}
a:hover{color:var(--brand-deep)}
[data-theme="dark"] a, :root:not([data-theme]) a{ }
:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:6px}
.container{max-width:1180px; margin-inline:auto; padding-inline:24px}
.section{padding-block:88px}
#features.section,#ozellikler.section,#features + .section,#ozellikler + .section{padding-block-start:40px}
.section-alt{background:var(--bg-soft)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-strong);
  background:var(--chip); border:1px solid var(--line); border-radius:8px; padding:7px 16px; margin-block-end:18px;
}
.section-head{max-width:640px; margin-block-end:48px}
.section-head h2{font-size:clamp(28px,4vw,40px)}
.section-head p{color:var(--muted); font-size:18px}
.center{margin-inline:auto; text-align:center}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.2;
  border-radius:var(--radius-pill); padding:14px 28px; border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  text-align:center; min-height:48px;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 3px 10px rgba(199,123,188,.25)}
.btn-primary:hover{background:color-mix(in oklab, var(--brand) 93%, black); color:#fff; box-shadow:0 4px 12px rgba(199,123,188,.3)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand-strong)}
.btn svg{flex:none; width:19px; height:19px}

/* Store badges */
.store-buttons{display:flex; flex-wrap:wrap; gap:14px}
.store-btn{
  display:inline-flex; align-items:center; gap:12px; padding:11px 20px; min-height:56px;
  background:var(--text); color:var(--bg); border-radius:var(--radius-pill); transition:transform .18s ease, opacity .18s ease;
}
.store-btn:hover{transform:translateY(-2px); color:var(--bg); opacity:.92}
.store-btn svg{width:26px; height:26px; flex:none}
.store-btn .s-label{display:flex; flex-direction:column; text-align:start; line-height:1.15}
.store-btn .s-small{font-size:11px; opacity:.75}
.store-btn .s-big{font-family:var(--font-head); font-weight:700; font-size:16px; direction:ltr}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in oklab, var(--bg) 82%, transparent); border-block-end:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:18px; min-height:72px}
.logo{display:flex; align-items:center; gap:10px; margin-inline-end:auto}
.logo img{height:34px; width:auto}
.logo-mask{display:inline-block; width:136px; height:34px; background:var(--brand); -webkit-mask:url("../images/logo-white.png") no-repeat center / contain; mask:url("../images/logo-white.png") no-repeat center / contain}
[data-theme="dark"] .logo-mask{background:#fff}
.logo-mask-footer{width:120px; height:30px; margin-block-end:14px}
.logo-mask-sm{width:104px; height:26px; flex:none}
.main-nav{display:flex; gap:4px}
.main-nav a{
  color:var(--text); font-weight:600; font-size:15px; padding:9px 14px; border-radius:10px;
}
.main-nav a:hover{background:var(--chip); color:var(--brand-strong)}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex; align-items:center; gap:6px; color:var(--text); font-weight:600; font-size:15px; padding:9px 14px; border-radius:10px; background:none; border:0; cursor:pointer; font-family:inherit; line-height:inherit}
.nav-drop-btn:hover{background:var(--chip); color:var(--brand-strong)}
.nav-drop-btn svg{width:14px; height:14px; transition:transform .2s ease}
.nav-drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-drop-menu{position:absolute; inset-inline-start:0; inset-block-start:calc(100% + 8px); min-width:230px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:10px; display:none; z-index:70}
.nav-drop-menu.open{display:block}
.nav-drop-menu a{display:block; padding:11px 14px; border-radius:8px; color:var(--text); font-weight:600; font-size:15px}
.nav-drop-menu a:hover{background:var(--chip); color:var(--brand-strong)}
.header-actions{display:flex; align-items:center; gap:10px}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:10px;
  padding:8px 12px; cursor:pointer; font:inherit; font-weight:600; font-size:14px;
  transition:border-color .18s ease, background-color .18s ease;
}
.icon-btn:hover{border-color:var(--brand)}
.icon-btn svg{width:19px; height:19px}
.header-cta{padding:11px 22px; min-height:44px; font-size:15px}
.menu-btn{display:none}
/* Theme switch */
.theme-switch{position:relative; width:54px; height:30px; border-radius:9px; border:1px solid var(--line); background:var(--bg-soft); cursor:pointer; padding:0; flex:none; transition:border-color .18s ease}
.theme-switch:hover{border-color:var(--brand)}
.theme-switch .ts-knob{position:absolute; inset-block-start:3px; inset-inline-start:3px; width:22px; height:22px; border-radius:6px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .22s ease}
.theme-switch svg{width:14px; height:14px}
[data-theme="dark"] .theme-switch .ts-knob{transform:translateX(24px)}
html[dir="rtl"][data-theme="dark"] .theme-switch .ts-knob{transform:translateX(-24px)}
.theme-icon-dark{display:none}
[data-theme="dark"] .theme-icon-light{display:none}
[data-theme="dark"] .theme-icon-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .theme-icon-light{display:none}
  :root:not([data-theme]) .theme-icon-dark{display:block}
  :root:not([data-theme]) .theme-switch .ts-knob{transform:translateX(24px)}
  html[dir="rtl"]:not([data-theme]) .theme-switch .ts-knob{transform:translateX(-24px)}
  :root:not([data-theme]) .logo-mask{background:#fff}
}

/* Language picker */
.lang-picker{position:relative}
.lang-menu{
  position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 10px); min-width:210px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow); padding:8px; display:none; z-index:70; max-height:min(72vh,560px); overflow-y:auto;
}
.lang-menu.open{display:block}
.lang-menu a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:8px;
  color:var(--text); font-weight:600; font-size:15px;
}
.lang-menu a:hover{background:var(--chip); color:var(--brand-strong)}
.lang-menu a[aria-current="true"]{background:var(--chip); color:var(--brand-strong)}
.lang-menu a[aria-current="true"]::after{content:"✓"; margin-inline-start:auto; color:var(--brand-strong)}
.lang-badge{
  flex:none; width:30px; height:22px; border-radius:4px; overflow:hidden; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:.04em;
  background:var(--chip); color:var(--brand-deep); border:1px solid var(--line);
}
.lang-badge img{width:100%; height:100%; object-fit:cover}
.lang-badge-txt{background:var(--grad); color:#fff; border:0; letter-spacing:.06em}
@media (max-width:720px){
  .lang-menu{
    position:fixed; inset-inline:0; inset-block-end:0; inset-block-start:auto; min-width:0;
    border-radius:16px 16px 0 0; padding:14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 24px rgba(0,0,0,.16);
  }
  .lang-menu::before{content:""; display:block; width:44px; height:5px; border-radius:99px; background:var(--line); margin:0 auto 12px}
  .lang-menu a{padding:14px 12px; font-size:17px}
}
.scrim{position:fixed; inset:0; background:rgba(20,10,25,.45); z-index:65; border:0; padding:0; display:none; width:100%; cursor:default}
.scrim.open{display:block}

/* Mobile nav */
@media (max-width:920px){
  .main-nav{
    position:fixed; inset-block:0; inset-inline-end:0; z-index:80; width:min(320px,86vw);
    background:var(--surface); flex-direction:column; gap:6px; padding:88px 22px 22px;
    box-shadow:var(--shadow); transform:translateX(110%); transition:transform .28s ease;
  }
  [dir="rtl"] .main-nav{transform:translateX(-110%)}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{font-size:18px; padding:13px 16px}
  .nav-drop-btn{font-size:18px; padding:13px 16px; width:100%; justify-content:flex-start}
  .nav-drop-menu{position:static; box-shadow:none; border:0; padding:0; padding-inline-start:14px; min-width:0}
  .nav-drop-menu a{font-size:17px}
  .menu-btn{display:inline-flex}
  .header-cta{display:none}
}

/* Hero */
.hero{position:relative; overflow-x:clip; overflow-y:visible; padding-block:0; min-height:100vh}
.hero .hero-grid{position:sticky; inset-block-start:0; min-height:100vh; align-content:start; padding-block:28px 32px}
.hero::before{
  content:""; position:absolute; inset-block-start:-220px; inset-inline-end:-180px; width:640px; height:640px;
  background:radial-gradient(circle, rgba(199,123,188,.22), transparent 65%); pointer-events:none; z-index:-1;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,56px); margin-block-end:20px}
.hero-lead{font-size:19px; color:var(--muted); max-width:34em; margin-block-end:30px}
.hero-note{margin-block-start:18px; font-size:13.5px; color:var(--muted)}
.city-chips{display:flex; flex-wrap:wrap; gap:10px; margin-block-start:34px}
.city-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 14px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.city-chip:hover{transform:translateY(-2px); border-color:color-mix(in oklab,var(--brand) 42%,var(--line)); box-shadow:0 5px 14px rgba(125,63,116,.08)}
.city-chip .city-flag{font-size:16px; line-height:1; filter:saturate(1.05)}

/* Pixel-matched, live app discovery screen (644 × 1378 reference grid). */
.phone-img{position:relative; z-index:2; width:320px; height:auto; filter:drop-shadow(0 14px 24px rgba(125,63,116,.18))}
.phone-ui{
  position:relative; isolation:isolate; container-type:inline-size; flex:none;
  width:320px; max-width:100%; aspect-ratio:644/1378; overflow:hidden;
  color:#260826; color-scheme:light; direction:ltr; font-family:"Figtree",system-ui,sans-serif;
  border-radius:10.5% / 5.2%; background:#080808; user-select:none; -webkit-tap-highlight-color:transparent;
}
.phone-ui::before{
  content:""; position:absolute; z-index:20; pointer-events:none; inset:.65cqw; border:.62cqw solid rgba(223,218,211,.88);
  border-radius:9.8cqw; box-shadow:inset 0 0 0 .4cqw rgba(20,18,17,.9),inset 0 0 1.15cqw rgba(255,255,255,.48),0 0 .45cqw rgba(77,66,56,.38);
}
html[lang="ar"] .phone-ui,.phone-ui[data-app-locale="ar"]{font-family:"Alexandria",system-ui,sans-serif}
.phone-ui *{box-sizing:border-box}
.phone-ui button{font:inherit; color:inherit; appearance:none; -webkit-appearance:none}
.phone-ui svg{width:100%; height:100%; max-width:none; overflow:visible}
.phone-ui .app-device-reference,
.phone-ui .app-source-image{
  position:absolute; display:block; width:100cqw; max-width:none; height:auto; aspect-ratio:644/1378;
}
.phone-ui .app-device-reference{inset:0; z-index:0; pointer-events:none}
.phone-ui .app-screen{
  position:absolute; z-index:1; left:4.2cqw; top:4.8cqw; width:91.7cqw; height:204.2cqw;
  overflow:hidden; border-radius:8.5cqw; background:#fff9ff;
  box-shadow:inset 0 0 0 .2cqw rgba(84,66,84,.08);
}
.phone-ui .app-status{position:absolute; inset:0; z-index:8; font-weight:700; color:#150b19}
.phone-ui .app-time{position:absolute; left:6.7cqw; top:2.5cqw; font-size:3.55cqw; line-height:1}
.phone-ui .app-camera{
  position:absolute; left:43.9cqw; top:2.5cqw; width:4.3cqw; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 54% 42%,#81988f 0 8%,#101516 12% 31%,#07090a 34% 54%,#343d3b 57% 66%,#080909 69%);
  box-shadow:0 0 0 .25cqw #101010,0 .2cqw .45cqw rgba(0,0,0,.38);
}
.phone-ui .app-system-icons{position:absolute; right:4.4cqw; top:2.25cqw; display:flex; align-items:center; gap:1.15cqw; height:4cqw}
.phone-ui .app-cell{display:flex; align-items:flex-end; gap:.45cqw; height:2.9cqw}
.phone-ui .app-cell i{display:block; width:.9cqw; border-radius:.3cqw .3cqw 0 0; background:#160d1b}
.phone-ui .app-cell i:nth-child(1){height:1.05cqw}.phone-ui .app-cell i:nth-child(2){height:1.65cqw}.phone-ui .app-cell i:nth-child(3){height:2.25cqw}.phone-ui .app-cell i:nth-child(4){height:2.9cqw}
.phone-ui .app-wifi{width:4cqw; height:3.2cqw}
.phone-ui .app-battery{position:relative; width:5.6cqw; height:2.8cqw; border:.45cqw solid #1b1020; border-radius:.65cqw; padding:.35cqw}
.phone-ui .app-battery::before{content:""; display:block; width:100%; height:100%; border-radius:.2cqw; background:#321237}
.phone-ui .app-battery::after{content:""; position:absolute; right:-.95cqw; top:.6cqw; width:.55cqw; height:1.25cqw; border-radius:0 .35cqw .35cqw 0; background:#1b1020}
.phone-ui .app-topbar{position:absolute; left:2.2cqw; right:2.2cqw; top:10.9cqw; height:13.8cqw; z-index:6; display:flex; align-items:center}
.phone-ui .app-profile-thumb{
  position:relative; width:12.4cqw; height:12.4cqw; flex:none; overflow:hidden; border-radius:50%;
  background:#efb0d4; box-shadow:0 0 0 .25cqw rgba(199,123,188,.12);
}
.phone-ui .app-profile-thumb .app-source-image{left:-6.2cqw; top:-15.7cqw}
.phone-ui .app-round-button{
  position:absolute; top:.1cqw; width:12.35cqw; height:12.35cqw; padding:3.6cqw; border:.35cqw solid #d8cbd9;
  border-radius:50%; background:#fffaff; box-shadow:0 .25cqw .7cqw rgba(84,42,82,.05); cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.phone-ui .app-round-button:hover{transform:translateY(-.5cqw)}
.phone-ui .app-round-button:active{transform:scale(.92)}
.phone-ui .app-favorite{right:14.9cqw; color:#5a1059}
.phone-ui .app-filter{right:0; color:#4a104a; padding:3.2cqw}
.phone-ui .app-favorite .heart-dot{fill:#ef69c1; stroke:#fff; stroke-width:1.2}
.phone-ui .app-favorite.is-on{background:#fce4f7; border-color:#df8ad0}
.phone-ui .app-tabs{
  position:absolute; z-index:5; left:2.1cqw; right:2.1cqw; top:29.2cqw; height:11.45cqw;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:.7cqw; border-radius:4.5cqw; background:#fbe7f8;
}
.phone-ui .app-tab{
  height:100%; min-width:0; padding:0 1cqw; border:0; border-radius:4cqw; background:transparent;
  font-weight:750; font-size:3.8cqw; line-height:1; letter-spacing:-.08cqw; white-space:nowrap; cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease;
}
.phone-ui .app-tab[aria-selected="true"]{background:#fff; box-shadow:0 .35cqw 1.1cqw rgba(110,63,107,.05); color:#370b37}
.phone-ui .app-card-stack{
  position:absolute; z-index:3; left:2.15cqw; right:2.15cqw; top:44.8cqw; height:127.6cqw;
}
.phone-ui .app-card-stack::before,.phone-ui .app-card-stack::after{
  content:""; position:absolute; left:4cqw; right:4cqw; top:0; height:127.6cqw; border-radius:7cqw; background:#fff;
  box-shadow:0 1cqw 3cqw rgba(92,50,91,.055); z-index:-1;
}
.phone-ui .app-card-stack::before{translate:0 6.7cqw; opacity:.84}
.phone-ui .app-card-stack::after{translate:0 10.2cqw; left:7cqw; right:7cqw; opacity:.6}
.phone-ui .app-card{
  position:absolute; inset:0; overflow:hidden; border-radius:7.2cqw; background:#fff;
  box-shadow:0 .8cqw 2.8cqw rgba(80,37,78,.055); transform-origin:50% 82%; will-change:transform,opacity;
}
.phone-ui .app-profile-photo{
  position:absolute; left:2.15cqw; right:2.15cqw; top:2.15cqw; height:98.15cqw; overflow:hidden;
  border-radius:6cqw; background:#5e455c; cursor:grab; touch-action:pan-y;
}
.phone-ui .app-profile-photo:active{cursor:grabbing}
.phone-ui .app-profile-photo .app-source-image{left:-8.2cqw; top:-51.7cqw}
.phone-ui .app-profile-photo .app-profile-asset{position:absolute; inset:0; z-index:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 38%}
.phone-ui .app-profile-photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,transparent 0 48%,rgba(81,13,77,.12) 58%,rgba(80,10,75,.72) 72%,rgba(74,6,70,.98) 79%,#4b0548 100%);
}
.phone-ui .app-distance{
  position:absolute; z-index:3; left:4.15cqw; top:4cqw; min-width:30cqw; height:10.7cqw; display:flex; align-items:center; justify-content:center;
  padding:0 2.4cqw; border:.22cqw solid rgba(255,255,255,.28); border-radius:5.35cqw; background:#91858f;
  box-shadow:0 .6cqw 1.5cqw rgba(38,19,38,.25); color:#fff; font-size:3.65cqw; line-height:1; white-space:nowrap;
}
.phone-ui .app-match{
  position:absolute; z-index:3; right:4.1cqw; top:4cqw; width:13.6cqw; height:13.6cqw; display:grid; place-items:center;
  border-radius:50%; background:conic-gradient(#fff 0 80%,rgba(255,255,255,.42) 80%); filter:drop-shadow(0 .4cqw .8cqw rgba(30,15,28,.2));
}
.phone-ui .app-match::before{content:""; position:absolute; inset:1.25cqw; border-radius:50%; background:#8d7569}
.phone-ui .app-match span{position:relative; z-index:1; color:#fff; font-size:3.25cqw; font-weight:600}
.phone-ui .app-card-scroll{position:absolute; z-index:3; right:3.9cqw; top:41.2cqw; width:1.55cqw; height:17cqw; border-radius:2cqw; background:rgba(240,231,236,.48)}
.phone-ui .app-card-scroll::before{content:""; position:absolute; inset:0 0 auto; height:8.7cqw; border-radius:2cqw; background:#fff; box-shadow:0 .3cqw .8cqw rgba(42,18,40,.12)}
.phone-ui .app-socials{position:absolute; z-index:3; left:0; right:0; bottom:23.1cqw; display:flex; align-items:center; justify-content:center; gap:5.2cqw; color:#fff}
.phone-ui .app-socials svg{width:5.4cqw; height:5.4cqw; filter:drop-shadow(0 .25cqw .2cqw rgba(39,12,37,.45))}
.phone-ui .app-profile-copy{position:absolute; z-index:3; left:2cqw; right:2cqw; bottom:5.5cqw; color:#fff; text-align:center; text-shadow:0 .25cqw .45cqw rgba(42,12,40,.35)}
.phone-ui .app-profile-name{display:block; margin:0; font-family:"Figtree",system-ui,sans-serif; font-size:5.55cqw; font-weight:800; line-height:1.08; letter-spacing:-.14cqw; white-space:nowrap}
.phone-ui .app-location{display:block; margin-top:2.1cqw; font-size:3.35cqw; font-weight:500; line-height:1; letter-spacing:.6cqw; text-transform:uppercase; white-space:nowrap}
html[lang="ar"] .phone-ui .app-tab,.phone-ui[data-app-locale="ar"] .app-tab{font-size:3.2cqw; letter-spacing:0}
html[lang="ar"] .phone-ui .app-location,.phone-ui[data-app-locale="ar"] .app-location{font-size:3cqw; letter-spacing:0; text-transform:none}
html[lang="fr"] .phone-ui .app-tab,.phone-ui[data-app-locale="fr"] .app-tab{font-size:3.15cqw}
.phone-ui .app-swipe-stamp{
  position:absolute; z-index:5; top:19cqw; padding:1.1cqw 2.2cqw; border:.7cqw solid currentColor; border-radius:1.5cqw;
  background:rgba(255,255,255,.9); font-size:4.5cqw; font-weight:900; line-height:1; letter-spacing:.25cqw; text-transform:uppercase;
  opacity:0; pointer-events:none; box-shadow:0 .6cqw 1.6cqw rgba(31,16,30,.18);
}
.phone-ui .app-stamp-pass{left:4cqw; color:#86205f; rotate:-11deg}
.phone-ui .app-stamp-like{right:4cqw; color:#b648a5; rotate:11deg}
.phone-ui .app-actions{position:absolute; left:0; right:0; bottom:5.8cqw; height:15cqw; display:flex; align-items:center; justify-content:center; gap:7.8cqw}
.phone-ui .app-action{
  width:14.8cqw; height:14.8cqw; display:grid; place-items:center; padding:4.2cqw; border:0; border-radius:50%; background:#fff;
  color:#4a064a; box-shadow:0 .9cqw 3cqw rgba(87,36,84,.11); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;
}
.phone-ui .app-action:hover{transform:translateY(-.8cqw); box-shadow:0 1.3cqw 3.2cqw rgba(87,36,84,.16)}
.phone-ui .app-action:active{transform:scale(.91)}
.phone-ui .app-action-star{background:#561153; color:#fff; box-shadow:0 0 0 .3cqw #fff,0 .9cqw 3cqw rgba(87,36,84,.16)}
.phone-ui .app-action-like{background:#dd78cf; color:#fff}
.phone-ui .app-bottom-nav{
  position:absolute; z-index:5; left:4.2cqw; right:4.2cqw; bottom:3cqw; height:16.8cqw;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; padding:1.8cqw 2.3cqw; border-radius:8.5cqw;
  background:#fff; box-shadow:0 .8cqw 2.2cqw rgba(96,56,95,.07);
}
.phone-ui .app-nav-button{
  position:relative; width:10.2cqw; height:10.2cqw; display:grid; place-items:center; justify-self:center;
  padding:1.9cqw; border:0; border-radius:50%; background:transparent; color:#8d5689; cursor:pointer; transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.phone-ui .app-nav-button:hover{transform:translateY(-.4cqw)}
.phone-ui .app-nav-button[aria-current="page"]{background:#dd78cf; color:#fff; box-shadow:0 .4cqw 1cqw rgba(194,91,178,.24)}
.phone-ui .app-nav-button.app-nav-add{padding:2.5cqw}
.phone-ui .app-filter-panel{
  position:absolute; z-index:7; left:8cqw; right:8cqw; top:26cqw; padding:4cqw; border-radius:4cqw; background:rgba(255,250,255,.97);
  box-shadow:0 2cqw 6cqw rgba(65,25,63,.18); opacity:0; translate:0 -2cqw; pointer-events:none;
  transition:opacity .2s ease,translate .2s ease; text-align:center; font-size:3.3cqw; font-weight:700;
}
.phone-ui.is-filtering .app-filter-panel{opacity:1; translate:0 0}
.phone-ui.is-reacting .app-card{animation:app-card-react .34s ease}
@keyframes app-card-react{50%{transform:translateY(-1.4cqw) scale(.985)}100%{transform:none}}
.scenario-img{width:min(340px,100%); height:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); position:relative; z-index:1; background:#fff}
.scenario-img.wide{width:min(440px,100%); border:0; box-shadow:none; background:transparent; border-radius:0}

/* Phone mockup + floating cards */
.hero-visual{position:relative; display:flex; justify-content:center; min-height:560px; will-change:transform}
.phone{
  position:relative; width:290px; height:588px; border-radius:36px; background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow); padding:14px; z-index:2;
}
.phone::before{content:""; position:absolute; inset-block-start:14px; inset-inline-start:50%; translate:-50% 0;
  width:104px; height:26px; border-radius:99px; background:var(--bg); z-index:3}
[dir="rtl"] .phone::before{translate:50% 0}
.phone-screen{
  height:100%; border-radius:26px; background:var(--bg-soft); overflow:hidden; display:flex; flex-direction:column;
}
.chat-head{display:flex; align-items:center; gap:10px; padding:40px 16px 12px; border-block-end:1px solid var(--line); background:var(--surface)}
.chat-head .avatar{width:36px; height:36px}
.chat-head b{font-family:var(--font-head); font-size:14.5px}
.chat-head span{display:block; font-size:11.5px; color:var(--brand-strong)}
.chat-body{flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:78%; padding:10px 14px; font-size:13.5px; line-height:1.45; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.bubble.me{align-self:flex-end; background:var(--grad); color:#fff; border:0; border-end-end-radius:4px}
.bubble.them{align-self:flex-start; border-end-start-radius:4px}
.chat-tags{display:flex; gap:6px; padding:0 14px 8px; flex-wrap:wrap}
.chat-tags span{font-size:11px; font-weight:600; color:var(--brand-deep); background:var(--chip); border-radius:6px; padding:4px 10px}
[data-theme="dark"] .chat-tags span{color:#e5c8e0}
.chat-input{margin:0 12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-size:13px; color:var(--muted)}
.avatar{width:44px; height:44px; border-radius:12px; overflow:hidden; background:var(--chip); flex:none}
.avatar img{width:100%; height:100%; object-fit:cover}
.float-card{
  position:absolute; z-index:3; display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px;
  box-shadow:var(--shadow); animation:floaty 6s ease-in-out infinite;
}
.float-card b{font-family:var(--font-head); font-size:14px; display:block}
.float-card small{color:var(--muted); font-size:12px; display:flex; align-items:center; gap:5px}
.float-card small img{width:15px; height:11px; border-radius:2px}
.fc-1{inset-block-start:64px; inset-inline-start:0}
@media (max-width:1180px){
  .fc-1{inset-block-start:auto; inset-block-end:270px; inset-inline-start:-8px}
  .fc-2{inset-inline-end:-8px}
}
.fc-2{inset-block-end:130px; inset-inline-end:0; animation-delay:-2s}
.fc-3{inset-block-end:20px; inset-inline-start:14px; animation-delay:-4s}
.freq-ring{
  position:absolute; inset-block-start:50%; inset-inline-start:50%; translate:-50% -50%;
  border:1.5px solid var(--ring); border-radius:50%; z-index:1; animation:pulse 5s ease-out infinite;
}
[dir="rtl"] .freq-ring{translate:50% -50%}
.fr-1{width:420px; height:420px}
.fr-2{width:560px; height:560px; animation-delay:-1.6s}
.fr-3{width:700px; height:700px; animation-delay:-3.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%{opacity:.55; scale:.92}70%{opacity:0}100%{opacity:0; scale:1.06}}

/* Feature cards around the device */
.features-grid{display:grid; grid-template-columns:1fr minmax(250px,320px) 1fr; gap:22px; align-items:stretch}
.features-grid > .feature-card:nth-child(-n+3){grid-column:1}
.features-grid > .feature-card:nth-child(5){grid-column:3; grid-row:1}
.features-grid > .feature-card:nth-child(6){grid-column:3; grid-row:2}
.features-grid > .feature-card:nth-child(7){grid-column:3; grid-row:3}
.features-phone{grid-column:2; grid-row:1/4; display:flex; align-items:center; justify-content:center; padding-inline:8px}
.features-phone > .phone-ui{width:100%; max-width:300px; height:auto; filter:drop-shadow(0 14px 24px rgba(125,63,116,.16))}
.feature-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklab, var(--brand) 45%, var(--line))}
.feature-icon{
  width:52px; height:52px; border-radius:12px; background:var(--chip); color:var(--brand-strong);
  display:flex; align-items:center; justify-content:center; margin-block-end:18px;
}
.feature-icon svg{width:26px; height:26px}
.feature-card h3{font-size:20px}
.feature-card p{color:var(--muted); font-size:15.5px; margin:0}

/* World rhythm / globe */
.world{position:relative; overflow:hidden}
.world-stage{position:relative; max-width:860px; margin-inline:auto; margin-block-start:26px; aspect-ratio:16/10}
.globe-svg{position:absolute; inset:0; width:100%; height:100%}
.orbit-dot{transform-origin:center}
.world-node{
  position:absolute; display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:6px 13px 6px 7px; box-shadow:var(--shadow);
  font-size:13px; font-weight:600; opacity:0; translate:0 12px; transition:opacity .5s ease, translate .5s ease;
}
[dir="rtl"] .world-node{padding:6px 7px 6px 13px}
.world-node.on{opacity:1; translate:0 0}
.world-node .avatar{width:30px; height:30px}
.world-node img.flag{width:16px; height:12px; border-radius:2.5px}
.world-node small{color:var(--muted); font-weight:500}
.greeting{
  position:absolute; font-family:var(--font-head); font-weight:700; color:var(--brand-strong);
  font-size:clamp(15px,2vw,20px); opacity:0; transition:opacity .6s ease;
}
.greeting.on{opacity:.9}
.interest-tag{
  position:absolute; font-size:12.5px; font-weight:600; color:var(--brand-deep); background:var(--chip);
  border:1px solid var(--line); border-radius:8px; padding:5px 12px; opacity:0; transition:opacity .5s ease;
}
[data-theme="dark"] .interest-tag{color:#e5c8e0}
.interest-tag.on{opacity:1}

/* Scenario (discovery) blocks */
.scenarios{display:grid; gap:26px}
.scenario{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); padding:44px;
  overflow:hidden; position:relative;
}
.scenario:nth-child(2){grid-template-columns:.9fr 1.1fr}
.scenario:nth-child(2) .scenario-text{order:2}
.scenario:nth-child(3){grid-template-columns:1.05fr .95fr}
.scenario h3{font-size:clamp(22px,2.6vw,28px)}
.scenario p{color:var(--muted); margin:0; font-size:16.5px}
.scenario-visual{position:relative; min-height:220px; display:flex; align-items:center; justify-content:center}
.near-ring{position:absolute; border:1.5px dashed var(--ring); border-radius:50%}
.nr-1{width:150px; height:150px}
.nr-2{width:240px; height:240px}
.sc-avatars{display:flex; align-items:center}
.sc-avatars .avatar{width:56px; height:56px; border:3px solid var(--surface)}
.sc-avatars .avatar + .avatar{margin-inline-start:-14px}
.sc-badges{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-block-start:18px}
.sc-badges span{font-size:12.5px; font-weight:600; background:var(--chip); color:var(--brand-deep); border-radius:7px; padding:5px 12px}
[data-theme="dark"] .sc-badges span{color:#e5c8e0}
.freq-line{width:100%; max-width:420px}
.pair{display:flex; align-items:center; gap:0; justify-content:center; width:100%}
.pair .avatar{width:62px; height:62px; z-index:1}
.pair svg{flex:1; max-width:280px; height:44px}

/* Interests */
.interests-cloud{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:820px; margin-inline:auto}
.interest-pill{
  display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:11px 20px; font-weight:600; font-size:15px; transition:transform .18s ease, border-color .18s ease;
}
.interest-pill:hover{transform:translateY(-2px); border-color:var(--brand)}
.interest-pill svg{width:18px; height:18px; color:var(--brand-strong)}
.interest-pill small{font-weight:500; color:var(--muted); font-size:12.5px}
.interest-note{text-align:center; color:var(--muted); font-size:13.5px; margin-block-start:26px}

/* How it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:step}
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px 28px}
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--brand-strong);
  background:var(--chip); border-radius:8px; padding:5px 13px; display:inline-block; margin-block-end:16px;
}
.step h3{font-size:19px}
.step p{color:var(--muted); font-size:15px; margin:0}

/* Search-focused dating guide: useful editorial content, not hidden SEO copy */
.dating-guide{position:relative; overflow:hidden}
.dating-guide::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  inset-block-start:-300px; inset-inline-end:-260px; background:radial-gradient(circle,var(--ring),transparent 68%); pointer-events:none;
}
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.guide-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; box-shadow:var(--shadow);
}
.guide-card h3{font-size:21px; margin-block-end:12px}
.guide-card p{color:var(--muted); font-size:15.5px}
.guide-card p:last-child{margin-block-end:0}
.guide-card a{font-weight:700}

/* Search intent hub and long-form editorial guides */
.seo-topic-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
.seo-topic-card{
  display:flex; flex-direction:column; align-items:flex-start; min-height:230px; padding:30px 28px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.seo-topic-card h3{font-size:23px; margin-block-end:12px}
.seo-topic-card h3 a{color:var(--text)}
.seo-topic-card h3 a:hover{color:var(--brand-strong)}
.seo-topic-card p{color:var(--muted); font-size:15.5px}
.seo-topic-card .text-link{margin-block-start:auto; font-weight:750}
.guide-main{background:var(--bg)}
.guide-hero{position:relative; overflow:hidden; padding-block:54px 68px; background:var(--bg-soft); border-block-end:1px solid var(--line)}
.guide-hero::after{content:""; position:absolute; width:520px; height:520px; inset-block-start:-320px; inset-inline-end:-180px; border-radius:50%; background:radial-gradient(circle,var(--ring),transparent 68%); pointer-events:none}
.guide-hero-inner{position:relative; z-index:1; max-width:940px}
.guide-hero h1{max-width:850px; font-size:clamp(36px,5.4vw,62px); margin-block-end:20px}
.guide-lead{max-width:800px; color:var(--muted); font-size:clamp(18px,2.2vw,21px); line-height:1.65}
.breadcrumbs{margin-block-end:30px; font-size:13.5px}
.breadcrumbs ol{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; padding:0; list-style:none}
.breadcrumbs li{display:inline-flex; align-items:center; color:var(--muted)}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-inline-start:8px; color:color-mix(in oklab,var(--muted) 45%,transparent)}
.breadcrumbs a{font-weight:650}
.article-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-block-start:27px; color:var(--muted); font-size:13.5px}
.article-meta span{display:inline-flex; align-items:center; gap:8px}
.article-meta span:not(:first-child)::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--brand); margin-inline-end:8px}
.article-layout{display:grid; grid-template-columns:minmax(0,780px) minmax(240px,300px); justify-content:space-between; gap:64px; padding-block:64px 96px}
.article-body{min-width:0; font-size:17.5px; line-height:1.78}
.article-body > section{scroll-margin-top:92px; margin-block:0 58px}
.article-body h2{font-size:clamp(26px,3.2vw,34px); margin-block-end:18px}
.article-body h3{font-size:20px; margin-block-end:10px}
.article-body p{color:color-mix(in oklab,var(--text) 85%,var(--muted)); margin-block-end:18px}
.article-body a{font-weight:700; text-decoration:underline; text-decoration-color:color-mix(in oklab,var(--brand) 45%,transparent); text-underline-offset:3px}
.article-toc{margin-block-end:54px; padding:27px 30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.article-toc h2{font-size:18px; margin-block-end:14px}
.article-toc ol{margin:0; padding-inline-start:22px; columns:2; column-gap:36px}
.article-toc li{break-inside:avoid; padding:4px 0; color:var(--brand-strong); font-size:14.5px}
.article-toc a{color:var(--text); text-decoration:none; font-weight:600}
.article-toc a:hover{color:var(--brand-strong)}
.article-table-wrap{overflow-x:auto; margin-block:24px 32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.article-table{width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; line-height:1.5}
.article-table th,.article-table td{padding:16px 18px; text-align:start; vertical-align:top; border-block-end:1px solid var(--line)}
.article-table th{font-family:var(--font-head); color:var(--text); background:var(--bg-soft); font-size:14px}
.article-table td{color:var(--muted)}
.article-table tbody tr:last-child td{border-block-end:0}
.article-callout,.article-disclosure{padding:22px 24px; margin-block:26px; border-inline-start:4px solid var(--brand); border-radius:0 var(--radius-sm) var(--radius-sm) 0; background:var(--chip); color:var(--text)}
[dir="rtl"] .article-callout,[dir="rtl"] .article-disclosure{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.article-checklist,.article-steps{display:grid; gap:12px; margin:24px 0 30px; padding:0; list-style:none; counter-reset:article-step}
.article-checklist li,.article-steps li{position:relative; padding:14px 18px 14px 52px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted)}
.article-checklist li::before{content:"✓"; position:absolute; left:18px; top:14px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--chip); color:var(--brand-strong); font-weight:900}
.article-steps li{counter-increment:article-step}
.article-steps li::before{content:counter(article-step); position:absolute; left:17px; top:14px; display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:var(--brand); color:#fff; font-size:13px; font-weight:800}
.signal-grid,.topic-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-block:24px 30px}
.signal-grid article,.topic-grid article,.example-list{padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.signal-grid ul{margin:0; padding-inline-start:20px; color:var(--muted); font-size:15.5px}
.signal-grid li{margin-block-end:8px}
.topic-grid p,.example-list p{font-size:15.5px; margin-block-end:12px}
.topic-grid p:last-child,.example-list p:last-child{margin-block-end:0}
.article-faq .faq{max-width:none; margin:0}
.article-disclosure{margin-block:20px 0; font-size:14px; color:var(--muted); border-inline-start-color:var(--violet)}
.article-aside{min-width:0}
.article-aside > * + *{margin-block-start:18px}
.aside-card{padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
.article-aside .aside-card:first-child{position:sticky; top:94px}
.aside-card h2{font-size:18px; margin-block-end:11px}
.aside-card p{color:var(--muted); font-size:14px; line-height:1.55}
.aside-card ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.aside-card li + li{border-block-start:1px solid var(--line); padding-block-start:12px}
.aside-card a{font-size:14px; font-weight:700}
.aside-cta .logo-mask{margin-block-end:18px}
.aside-cta .btn{width:100%; padding-inline:14px; font-size:14px; text-decoration:none}
.aside-safety{border-color:color-mix(in oklab,var(--brand) 38%,var(--line)); background:var(--chip)}

/* FAQ */
.faq{max-width:760px; margin-inline:auto}
.faq details{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); margin-block-end:12px; overflow:hidden}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; justify-content:space-between;
  font-family:var(--font-head); font-weight:700; font-size:17px; padding:19px 22px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; flex:none; width:11px; height:11px; border-inline-end:2.5px solid var(--brand-strong);
  border-block-end:2.5px solid var(--brand-strong); transform:rotate(45deg); transition:transform .2s ease; margin-block-start:-4px;
}
.faq details[open] summary::after{transform:rotate(225deg); margin-block-start:4px}
.faq details p{padding:0 22px 20px; color:var(--muted); margin:0; font-size:15.5px}

/* Download band */
.dl-band{
  background:var(--grad); border-radius:calc(var(--radius) + 6px); color:#fff; text-align:center;
  padding:64px 32px; position:relative; overflow:hidden;
}
.dl-band::before,.dl-band::after{content:""; position:absolute; border:1.5px solid rgba(255,255,255,.25); border-radius:50%}
.dl-band::before{width:340px; height:340px; inset-block-start:-170px; inset-inline-start:-120px}
.dl-band::after{width:280px; height:280px; inset-block-end:-150px; inset-inline-end:-90px}
.dl-band h2{font-size:clamp(26px,3.4vw,38px); color:#fff}
.dl-band p{color:rgba(255,255,255,.88); max-width:34em; margin-inline:auto}
.dl-band .store-buttons{justify-content:center; margin-block-start:28px; position:relative; z-index:1}
.dl-band .store-btn{background:#fff; color:#3a2340}
.dl-band .store-btn:hover{color:#3a2340}

/* Footer */
.site-footer{border-block-start:1px solid var(--line); background:var(--bg-soft); padding-block:56px 34px}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px; margin-block-end:40px}
.footer-brand img{height:30px; width:auto; margin-block-end:14px}
.footer-brand p{color:var(--muted); font-size:14.5px; max-width:26em}
.site-footer h4{font-size:14px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-block-end:14px}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.site-footer ul a{color:var(--text); font-size:15px; font-weight:500}
.site-footer ul a:hover{color:var(--brand-strong)}
.footer-langs a{display:inline-flex; align-items:center; gap:8px}
.footer-langs .lang-badge{width:26px; height:19px; font-size:10px}
.footer-bottom{
  border-block-start:1px solid var(--line); padding-block-start:22px; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between; color:var(--muted); font-size:13.5px;
}
.footer-globe{display:inline-flex; align-items:center; gap:8px}
.footer-globe svg{width:16px; height:16px; color:var(--brand-strong)}

/* Sticky mobile download CTA */
.sticky-dl{
  position:fixed; inset-inline:14px; inset-block-end:14px; z-index:55; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow);
  padding:12px 14px; align-items:center; gap:12px;
}
.sticky-dl.show{display:flex}
.sticky-dl img{height:26px; width:auto}
.sticky-dl p{margin:0; font-size:13.5px; font-weight:600; flex:1}
.sticky-dl .btn{padding:10px 18px; min-height:40px; font-size:14px}
@media (min-width:721px){.sticky-dl.show{display:none}}

/* Store modal */
.store-modal{
  border:0; border-radius:var(--radius); background:var(--surface); color:var(--text);
  padding:34px 30px; width:min(430px,calc(100vw - 32px)); box-shadow:var(--shadow);
}
.store-modal::backdrop{background:rgba(20,10,25,.5); backdrop-filter:blur(3px)}
.store-modal h3{font-size:22px; margin-block-end:6px}
.store-modal .recommended{font-size:13px; font-weight:700; color:var(--brand-strong); background:var(--chip); border-radius:7px; padding:4px 12px; display:inline-block; margin-block-end:16px}
.store-modal .store-buttons{flex-direction:column; align-items:stretch}
.store-modal .store-btn{justify-content:center}
.store-modal .store-btn.dim{opacity:.55}
.modal-close{
  position:absolute; inset-block-start:14px; inset-inline-end:14px; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-soft); color:var(--muted); cursor:pointer; font-size:17px; line-height:1;
}
.modal-close:hover{color:var(--text)}

/* Language suggestion banner */
.lang-suggest{
  position:fixed; inset-inline:14px; inset-block-end:14px; z-index:58; display:none; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:14px 18px;
  max-width:440px; margin-inline-start:auto;
}
.lang-suggest.show{display:flex}
.lang-suggest p{margin:0; font-size:14.5px; font-weight:600; flex:1}
.lang-suggest .btn{padding:9px 18px; min-height:38px; font-size:14px}
.lang-suggest .dismiss{background:none; border:0; color:var(--muted); cursor:pointer; font-size:17px; padding:6px}

/* Legal / subpage layout */
.page-hero{padding-block:72px 44px; background:var(--bg-soft)}
.page-hero h1{font-size:clamp(30px,4vw,44px)}
.page-hero p{color:var(--muted); font-size:17.5px; max-width:40em; margin:0}
.prose{max-width:760px; padding-block:56px 88px}
.prose h2{font-size:24px; margin-block-start:1.8em}
.prose h3{font-size:19px; margin-block-start:1.5em}
.prose ul{padding-inline-start:1.3em; color:var(--text)}
.prose li{margin-block-end:.45em}
.prose p{color:var(--text)}
.prose .updated{color:var(--muted); font-size:14px}
.notice{
  background:var(--chip); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 20px; font-size:14.5px; color:var(--muted); margin-block-end:34px;
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; padding-block:56px 88px; max-width:960px}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px}
.contact-card h2{font-size:20px}
.contact-card p{color:var(--muted); font-size:15.5px}
.contact-card .feature-icon{margin-block-end:16px}
.contact-mail{font-family:var(--font-head); font-weight:700; font-size:19px; word-break:break-all}

/* Reveal animation */
.reveal{opacity:0; translate:0 26px; transition:opacity .7s ease, translate .7s ease}
.reveal.in{opacity:1; translate:0 0}

/* RTL specifics */
[dir="rtl"] .faq summary::after{border-inline-end:0; border-inline-start:2.5px solid var(--brand-strong); transform:rotate(-45deg)}
[dir="rtl"] .faq details[open] summary::after{transform:rotate(135deg)}
[dir="rtl"] .hero::before{inset-inline-end:auto; inset-inline-start:-180px}
.flip-rtl{transition:transform .2s ease}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}

/* Theme-dependent imagery */
.only-dark{display:none}
[data-theme="dark"] .only-light{display:none}
[data-theme="dark"] .only-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .only-light{display:none}
  :root:not([data-theme]) .only-dark{display:block}
}

/* Globe orbit */
.orbit{animation:spin 46s linear infinite; transform-origin:center; transform-box:fill-box}
.orbit-slow{animation-duration:70s; animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.arc{stroke-dasharray:6 8; animation:dashmove 3.2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-28}}

/* Staggered reveal for card grids */
.features-grid .reveal:nth-child(2),.steps .reveal:nth-child(2){transition-delay:.1s}
.features-grid .reveal:nth-child(3),.steps .reveal:nth-child(3){transition-delay:.2s}
.features-grid .reveal:nth-child(4){transition-delay:.05s}
.features-grid .reveal:nth-child(5){transition-delay:.15s}
.features-grid .reveal:nth-child(6){transition-delay:.25s}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; translate:0 0}
  .float-card{animation:none}
  .freq-ring{animation:none; opacity:.25}
}

/* Legacy fallback: prevent decorative hero layers from widening the viewport. */
@supports not (overflow-x:clip){
  html,body,.hero{overflow-x:hidden}
}

/* Responsive */
@media (max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid > .feature-card:nth-child(-n+3),.features-grid > .feature-card:nth-child(5),.features-grid > .feature-card:nth-child(6),.features-grid > .feature-card:nth-child(7){grid-column:auto; grid-row:auto}
  .features-phone{display:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .guide-grid{grid-template-columns:1fr 1fr}
  .article-layout{grid-template-columns:minmax(0,1fr) 250px; gap:36px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .hero{min-height:auto; overflow:hidden}
  .hero .hero-grid{position:static; min-height:0; padding-block:64px 80px}
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero-visual{min-height:auto}
  .fr-2,.fr-3{display:none}
  .scenario,.scenario:nth-child(2),.scenario:nth-child(3){grid-template-columns:1fr; padding:32px 26px; gap:28px}
  .scenario:nth-child(2) .scenario-text{order:0}
  .section{padding-block:64px}
  .article-layout{grid-template-columns:1fr; padding-block-start:48px}
  .article-aside{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .article-aside > * + *{margin-block-start:0}
  .article-aside .aside-card:first-child{position:static}
  .article-aside .aside-safety{grid-column:1/-1}
}
@media (max-width:640px){
  .features-grid,.steps,.guide-grid,.seo-topic-grid,.signal-grid,.topic-grid{grid-template-columns:1fr}
  .features-grid > .feature-card{grid-column:auto; grid-row:auto}
  .phone-img{width:260px}
  .footer-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(30px,8.5vw,38px)}
  .float-card{padding:9px 12px}
  .float-card b{font-size:12.5px}
  .contact-grid{grid-template-columns:1fr}
  .world-stage{aspect-ratio:4/5}
  .guide-hero{padding-block:38px 48px}
  .guide-hero h1{font-size:clamp(32px,10vw,44px)}
  .article-layout{padding-block:38px 72px}
  .article-body{font-size:16.5px}
  .article-toc ol{columns:1}
  .article-aside{grid-template-columns:1fr}
  .article-aside .aside-safety{grid-column:auto}
  .article-meta span:not(:first-child)::before{display:none}
  .article-meta{display:grid; gap:4px}
  .article-checklist li,.article-steps li{padding-inline-end:14px}
}
