/* Roundo — typography. One pairing: Estedad for Persian, Manrope for Latin. Both open-licensed and self-hosted.
   Titles are thin and large; nothing is serif or italic — the brand stays minimal. */
@font-face { font-family: Estedad; src: url(../fonts/Estedad.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url(../fonts/Manrope.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }
:root {
  --sans: Estedad, Vazirmatn, 'Segoe UI', Tahoma, sans-serif; --display: Estedad, Vazirmatn, sans-serif;
  --latin: Manrope, 'Segoe UI', system-ui, sans-serif; --serif: var(--latin);
}
body { font-family: var(--sans); }
[dir=ltr] body { font-family: var(--latin), var(--sans); }
[dir=rtl] :is(.hero h1, .loops-text h2, .sec.big h1, .sec h2, .banner h2, .brand-names a, .ai-card h2, .d-side h1, .a-card h1, .me-head h1, .blogo, .ring b, .mb-tray h1, .collections b, .modal h2, .score b, .stats b, .kpi b, .price) { font-family: var(--display); font-weight: 200; }
[dir=ltr] :is(.hero h1, .loops-text h2, .sec.big h1, .sec h2, .banner h2, .brand-names a, .ai-card h2, .d-side h1, .a-card h1, .me-head h1, .blogo, .ring b, .mb-tray h1, .collections b, .modal h2, .score b, .stats b, .kpi b) { font-family: var(--latin); font-weight: 200; font-style: normal; letter-spacing: -.035em; }
[dir=ltr] .hero h1 { line-height: 1.06; }
[dir=ltr] .rot em { font-style: normal; }
[dir=ltr] :is(.loops-text h2, .sec.big h1) { line-height: 1.04; }
[dir=ltr] .eyebrow { letter-spacing: .16em; font-size: 11.5px; }

/* ---------- wordmark: one ring, lowercase, light ---------- */
.logo { gap: 9px; font: 400 19px/1 var(--latin); letter-spacing: .01em; }
.logo b { font-weight: 400; }
.mark { width: 19px; height: 19px; stroke-width: 1.5; }
.mark circle { transform-origin: 12px 12px; transition: transform .6s var(--ease); }
.logo:hover .mark circle:nth-child(n) { transform: scale(.72); }
#intro svg { width: min(34vw, 150px); stroke-width: .7; animation: none; }
#intro b { font: 300 clamp(26px, 4vw, 40px)/1 var(--latin); letter-spacing: .02em; }
.rings-core { font: 400 12px var(--latin); letter-spacing: .3em; text-transform: uppercase; }
.badge-ring text { font: 500 11.5px var(--latin); letter-spacing: .26em; }
.foot-mark { font: 200 clamp(90px, 22vw, 340px)/.8 var(--latin); letter-spacing: -.05em; margin-bottom: -.06em; }

/* ---------- living wordmark: the o's are rings, a dot keeps circling the first one ---------- */
.wm { display: inline-flex; align-items: baseline; direction: ltr; font: 500 23px/1 var(--latin); letter-spacing: .05em; }
.wm .o { position: relative; display: inline-block; width: .56em; height: .56em; margin: 0 .09em 0 .07em; border: .08em solid currentColor; border-radius: 50%; transition: scale .6s var(--ease); }
.wm .o.live::after { content: ''; position: absolute; inset: -.2em; border-radius: 50%; background: radial-gradient(circle at 50% .16em, currentColor .085em, transparent .1em); animation: spin 7s linear infinite; }
.logo:hover .wm .o.live::after { animation-duration: 1.1s; }
.logo:hover .wm .o { scale: 1.12; }
.nav .wm .o { animation: wm-pulse .9s var(--ease); }
.nav .wm .o.live::after { animation-duration: .9s; }
@keyframes wm-pulse { 35% { scale: .55; } 70% { scale: 1.15; } }
#intro b.wm { display: inline-flex; font: 400 clamp(30px, 4.6vw, 46px)/1 var(--latin); letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .wm .o.live::after { animation: none; } }