/* home.css — see DESIGN.md */
:root { --night: oklch(0.17 0.02 255); --night-2: oklch(0.215 0.022 255); --night-line: oklch(1 0 0 / .12); --gold: oklch(0.8 0.1 80); --gold-hi: oklch(0.86 0.09 82); --gold-ink: oklch(0.5 0.1 70); --on-night: oklch(0.96 0.012 85); --on-night-soft: oklch(0.84 0.012 250); --on-night-muted: oklch(0.72 0.015 250); --sand: oklch(0.962 0.014 75); }
.home .h-title, .home .courses-title, .home .method-title, .home .contact-title { font: 400 clamp(40px, 6.2vw, 80px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -0.025em; text-wrap: balance; }
.home h2 em { font-style: italic; color: var(--gold-ink); background: linear-gradient(currentColor, currentColor) 0 94% / 0% 1.5px no-repeat; transition: background-size 1.4s var(--ease-p3) .25s; }
.home h2.is-in em, html:not(.js) .home h2 em { background-size: 100% 1.5px; }
.home .h-price h2 em, .home .method h2 em, .home .contact h2 em, .home .h-tile--dark h3 em { color: var(--gold); }
.h-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.h-head { max-width: 760px; margin: 0 0 56px; }
.h-lead { margin: 20px 0 0; max-width: 560px; font-size: clamp(18px, 1.9vw, 21px); font-weight: 300; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.ic { width: 24px; height: 24px; flex: none; }
.home .magnetic-label { display: inline-flex; align-items: center; gap: 10px; }
.ic-arrow { width: 18px; height: 18px; transition: transform .5s var(--ease-p3); }
.btn:hover .ic-arrow { transform: translateX(4px); }
.btn-gold { background: var(--gold); color: var(--night); box-shadow: 0 12px 30px -14px oklch(0.8 0.1 80 / .7); }
.btn-gold:hover { background: var(--gold-hi); color: var(--night); }
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, oklch(1 0 0 / .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--ease-p3); }
.btn-shine:hover::after { transform: translateX(120%); }
.btn-wa { background: oklch(1 0 0 / .08); color: #fff; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .18); }
.btn-wa:hover { background: oklch(1 0 0 / .14); color: #fff; }
.btn-wa .ic { width: 20px; height: 20px; color: oklch(0.78 0.15 150); }
.home .btn-primary:not(.hx .btn-primary) { box-shadow: 0 12px 30px -16px oklch(0.22 0.014 55 / .6); }
.hx-guarantee { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 15px; color: var(--on-night-soft); }
.hx-guarantee .ic { width: 20px; height: 20px; color: var(--gold); }
.hx-guarantee b { color: var(--on-night); font-weight: 600; }
.apps { display: flex; flex-wrap: wrap; align-items: center; margin: 20px 0 0; }
.apps--center { justify-content: center; margin-top: 18px; }
.apps-label { font-size: 13px; font-weight: 600; color: var(--on-night-muted); margin-right: 2px; }
.app { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--on-night); transition: color .4s var(--ease-p3); }
.apps { gap: 10px 20px; }
.app:hover { color: var(--gold); }
.app-logo { width: 20px; height: 20px; display: grid; place-items: center; flex: none; }
.app-logo img { width: 20px; height: 20px; object-fit: contain; transition: transform .5s var(--ease-p3); }
.app:hover .app-logo img { transform: scale(1.1); }
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s var(--ease-p3); background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), oklch(0.8 0.1 80 / .18), transparent 60%); }
[data-spot]:hover::before { opacity: 1; }
.h-trust { background: var(--night); color: var(--on-night); padding: 40px 0 64px; }
.h-trust-inner { display: flex; flex-direction: column; gap: 24px; }
.h-trust-lead { margin: 0; font: italic 400 21px/1.3 "Newsreader", Georgia, serif; color: var(--on-night-soft); text-wrap: balance; }
.h-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--night-line); border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--night-line); }
.h-trust-list li { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--night); transition: background-color .5s var(--ease-p3); }
.h-trust-list li:hover { background: var(--night-2); }
.h-trust-list .ic { width: 28px; height: 28px; color: var(--gold); transition: transform .6s var(--ease-p3); }
.h-trust-list li:hover .ic { transform: scale(1.1); }
.h-trust-list b { display: block; font-size: 16px; font-weight: 650; color: var(--on-night); }
.h-trust-list small { font-size: 13px; color: var(--on-night-muted); }
@media (min-width: 960px) {
  .h-trust-inner { flex-direction: row; align-items: center; gap: 48px; }
  .h-trust-lead { flex: none; max-width: 230px; }
  .h-trust-list { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.h-meet { background: var(--ivory); padding: 112px 0; }
.h-meet-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.h-meet-bio { margin-top: 32px; display: flex; flex-direction: column; gap: 18px; max-width: 580px; }
.h-meet-bio p { margin: 0; font-size: clamp(18px, 1.8vw, 20px); font-weight: 300; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.h-sign { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.h-sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.h-sign b { display: block; font: italic 400 24px/1.1 "Newsreader", Georgia, serif; }
.h-sign small { font-size: 13px; color: var(--muted); }
.h-langs { margin-top: 36px; }
.h-meet-pro { padding: 32px 28px; border-radius: 28px; }
.h-pro-title { margin: 0; font: 400 clamp(30px, 3.4vw, 42px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.02em; text-wrap: balance; }
.h-pro-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.h-pro-list { list-style: none; margin: 24px 0 0; padding: 0; }
.h-pro-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--hairline-soft); }
.h-pro-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--night); color: var(--gold); transition: transform .7s var(--ease-p3); }
.h-pro-list li:hover .h-pro-ic { transform: rotate(-6deg) scale(1.06); }
.h-pro-list h4 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; }
.h-pro-list p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
@media (min-width: 960px) {
  .h-meet { padding: 160px 0; }
  .h-meet-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: start; }
  .h-meet-pro { padding: 40px; position: sticky; top: 104px; }
}
.home .story { margin: 0; border-radius: 0; background: var(--sand); }
.home .method { background: var(--night); color: var(--on-night); }
.home .method-title { color: var(--on-night); }
.home .method-lead { color: var(--on-night-soft); }
.home .method-hint { color: var(--on-night-muted); }
.home .method-hint i { background: var(--night-line); }
.home .method-hint i::after { background: var(--gold); }
.home .m-card { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--night-2), oklch(0.19 0.02 255)); box-shadow: inset 0 0 0 1px var(--night-line), 0 40px 80px -40px oklch(0 0 0 / .7); }
.home .m-card::after { content: ""; position: absolute; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .12), transparent 65%); pointer-events: none; }
.home .m-icon { background: var(--gold); color: var(--night); border-radius: 22px; box-shadow: 0 16px 36px -16px oklch(0.8 0.1 80 / .7); }
.home .m-num { color: var(--gold); }
.home .m-title { color: var(--on-night); font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.home .m-desc { color: var(--on-night-soft); }
.home .m-progress { background: var(--night-line); }
.home .m-progress i { background: var(--gold); }
@media (min-width: 900px) {
  .home .is-horizontal .m-step { width: min(420px, 32vw); height: auto; align-self: center; }
  .home .is-horizontal .m-card { justify-content: flex-start; gap: 14px; padding: 36px; min-height: 360px; }
  .home .is-horizontal .m-row { margin-bottom: 36px; }
  .home .m-icon { width: 64px; height: 64px; border-radius: 20px; }
  .home .m-icon svg { width: 34px; height: 34px; }
}
.h-incl { background: var(--ivory); padding: 112px 0; }
.h-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.h-tile { overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--canvas); border-radius: 24px; box-shadow: var(--shadow-1); translate: 0 0; transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.h-tile:hover { translate: 0 -6px; box-shadow: var(--shadow-2); }
.h-tile-ic { width: 52px; height: 52px; border-radius: 16px; flex: none; display: grid; place-items: center; margin-bottom: 12px; background: oklch(0.8 0.1 80 / .18); color: var(--gold-ink); }
.h-tile:hover .h-tile-ic { transform: rotate(-6deg) scale(1.06); background: var(--night); color: var(--gold); }
.h-tile h3 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.h-tile p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.h-tile--hero h3 { font: 400 clamp(30px, 3.4vw, 46px)/1.06 "Newsreader", Georgia, serif; letter-spacing: -0.02em; }
.h-tile--hero p { font-size: 18px; max-width: 440px; }
.h-ladder { list-style: none; margin: auto 0 0; padding: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.h-ladder li { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-full); background: var(--canvas-soft); font-size: 14px; font-weight: 600; transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3); }
.h-ladder li .ic { width: 16px; height: 16px; color: var(--gold-ink); }
.h-ladder li.is-on { background: var(--night); color: var(--on-night); }
.h-ladder li.is-on .ic { color: var(--gold); }
.h-ladder li.sep { background: none; padding: 0; height: auto; }
.h-ladder li.sep .ic { color: var(--faint); }
.h-tile--dark { background: var(--night); box-shadow: 0 34px 70px -34px oklch(0.17 0.02 255 / .7); }
.h-tile--dark h3 { font: 400 clamp(28px, 3vw, 40px)/1.1 "Newsreader", Georgia, serif; color: var(--on-night); }
.h-tile--dark p { color: var(--on-night-soft); margin-top: 8px; max-width: 560px; }
.h-tile--dark .h-tile-ic { background: oklch(0.8 0.1 80 / .14); color: var(--gold); }
.h-tile-glyph { position: absolute; z-index: -1; right: -12px; bottom: -64px; pointer-events: none; user-select: none; font: 500 220px/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .28); }
@media (min-width: 720px) {
  .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-tile--hero, .h-tile--dark { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .h-incl { padding: 160px 0; }
}
@media (min-width: 1040px) {
  .h-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .h-tile--hero { grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 40px; }
  .h-tile--dark { flex-direction: row; align-items: center; gap: 28px; padding: 40px 44px; }
  .h-tile--dark .h-tile-ic { margin: 0; width: 64px; height: 64px; border-radius: 20px; }
}
.home .dcourses { padding-bottom: 112px; }
.home .dc { border-color: transparent; box-shadow: var(--shadow-1); }
.home .dc:hover { box-shadow: 0 0 0 6px oklch(0.8 0.1 80 / .1), var(--shadow-2); }
.home .dc::before { background: linear-gradient(135deg, oklch(0.8 0.1 80), oklch(0.6 0.1 70), oklch(0.8 0.1 80 / .25), oklch(0.8 0.1 80)); }
.dc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dc-top .dc-num { margin: 0; }
.dc-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--night); color: var(--gold); transition: transform .7s var(--ease-p3); }
.dc:hover .dc-ic { transform: rotate(-6deg) scale(1.06); }
.home .dc-name { font: 400 clamp(28px, 2.8vw, 34px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -0.015em; }
.dc-more { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 20px; padding-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hairline); transition: border-color .3s; }
.dc-more:hover { color: var(--ink); border-color: var(--ink); }
.dc-more .ic { width: 16px; height: 16px; transition: transform .5s var(--ease-p3); }
.dc-more:hover .ic { transform: translateX(4px); }
.home .dc.is-open .dc-toggle { background: var(--night); }
@media (min-width: 900px) {
  .home .dcourses { padding-bottom: 160px; }
}
.home .first { background: var(--ivory); padding-bottom: 112px; }
.home .fl-card { background: var(--canvas); box-shadow: var(--shadow-1); transition: box-shadow .7s var(--ease-p3); }
.home .fl-card:hover { box-shadow: var(--shadow-2); }
.home .fl-title { font: 400 clamp(28px, 3vw, 38px)/1.08 "Newsreader", Georgia, serif; }
.home .fl-draw { background: var(--gold-ink); }
.home .fl-step.is-active .fl-dot { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 6px oklch(0.8 0.1 80 / .2); }
.h-cta-row { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 72px; text-align: center; }
.h-cta-row p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.h-cta-row p .ic { width: 18px; height: 18px; color: var(--gold-ink); }
@media (min-width: 900px) {
  .home .first { padding-bottom: 160px; }
}
.h-price { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--on-night); padding: 112px 0; }
.h-price .hx-grain { z-index: -1; }
.h-price-glyph { position: absolute; z-index: -1; left: -3vw; bottom: -8%; pointer-events: none; user-select: none; will-change: transform; font: 500 clamp(220px, 34vw, 540px)/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .2); }
.h-price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
.h-price .h-title { color: var(--on-night); }
.h-price .h-lead { color: var(--on-night-soft); }
.h-guarantees { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.h-guarantees li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.h-g-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: oklch(0.8 0.1 80 / .14); color: var(--gold); }
.h-g-ic .ic { width: 22px; height: 22px; }
.h-guarantees b { display: block; font-size: 17px; font-weight: 650; color: var(--on-night); }
.h-guarantees small { font-size: 15px; color: var(--on-night-muted); }
.h-seal { position: relative; width: 148px; height: 148px; margin-top: 44px; color: var(--gold); }
.h-seal-ring { width: 100%; height: 100%; overflow: visible; animation: seal-spin 30s linear infinite; }
.h-seal text { font: 600 12.5px var(--font); letter-spacing: .1em; text-transform: uppercase; fill: currentColor; }
.h-seal-c { position: absolute; inset: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--night); font: italic 400 28px/1 "Newsreader", Georgia, serif; box-shadow: 0 0 44px -6px oklch(0.8 0.1 80 / .6); }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.h-plan { overflow: hidden; padding: 32px 28px 28px; border-radius: 28px; background: linear-gradient(180deg, oklch(0.245 0.022 255), oklch(0.2 0.02 255)); box-shadow: inset 0 0 0 1px var(--night-line), 0 50px 100px -50px oklch(0 0 0 / .8); }
.h-plan::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.h-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.h-plan-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--on-night-soft); }
.h-plan-badge { height: 28px; padding: 0 12px; border-radius: var(--r-full); display: inline-flex; align-items: center; background: oklch(0.8 0.1 80 / .16); color: var(--gold); font-size: 12px; font-weight: 600; }
.h-plan-price { margin: 20px 0 0; display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.h-cur { align-self: flex-start; margin-top: 12px; font: 400 40px/1 "Newsreader", Georgia, serif; color: var(--gold); }
.h-plan-price b { font: 400 clamp(92px, 11vw, 136px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; display: inline-block; padding: .06em .04em 0 0; margin: -.1em 0 -.08em; background: linear-gradient(180deg, var(--on-night) 35%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-per { margin-left: 8px; font-size: 17px; color: var(--on-night-muted); }
.h-plan-note { margin: 14px 0 0; font-size: 15px; color: var(--on-night-soft); }
.h-plan-list { list-style: none; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--night-line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.h-plan-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; color: var(--on-night); }
.h-plan-list .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--gold); }
.h-plan-cta { width: 100%; margin-top: 30px; }
.h-plan-fine { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--on-night-muted); }
@media (min-width: 640px) {
  .h-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .h-price { padding: 160px 0; }
  .h-price-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; }
  .h-plan { padding: 44px 44px 36px; }
}
.home .t-head { margin-bottom: 40px; }
.home .t-card { border-color: transparent; box-shadow: var(--shadow-1); }
.home .t-card:hover { box-shadow: var(--shadow-2); }
.home .t-after { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1.35; }
.home .t-after .t-tag { font-family: var(--font); }
.home .locs { background: var(--ivory); padding-bottom: 112px; }
.home .loc { background: var(--canvas); border-color: transparent; box-shadow: var(--shadow-1); }
.home .loc:hover { border-color: oklch(0.8 0.1 80 / .55); }
.home .loc-name { font: 400 clamp(28px, 2.6vw, 32px)/1.08 "Newsreader", Georgia, serif; }
.loc-flags { display: flex; gap: 4px; flex-wrap: wrap; }
.loc-flags img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(20,20,20,.08); }
@media (min-width: 640px) and (max-width: 1199px) {
  .home .loc--gcc { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .home .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .home .loc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .home .loc { padding: 24px; }
}
@media (min-width: 900px) {
  .home .locs { padding-bottom: 160px; }
}
.home .faq-q.is-active { background: var(--night); }
.home .faq-q.is-active::after { color: var(--gold); }
@media (min-width: 900px) {
  .home .faq-grid--8 .faq-a { grid-row: 1 / span 8; }
}
.home .contact { background: var(--night); }
.home .contact .btn-light { background: var(--gold); color: var(--night); }
.home .contact .btn-light:hover { background: var(--gold-hi); color: var(--night); }
.home .field input:focus, .home .field select:focus, .home .field textarea:focus { box-shadow: inset 0 0 0 2px var(--gold); }
.c-points { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.c-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--on-night); }
.c-points .ic { width: 22px; height: 22px; color: var(--gold); }
.c-wa { margin-top: 32px; }
.c-trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: rgba(255,255,255,.75); }
.c-trust li { display: flex; align-items: center; gap: 6px; }
.c-trust .ic { width: 16px; height: 16px; color: var(--gold); }
.js [data-r] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .h-seal-ring { animation: none; }
  .js [data-r] { opacity: 1; }
}
.btn { gap: 10px; }
.btn .ic-arrow { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease-p3); }
.btn:active { scale: .97; transition: scale .15s var(--ease-p3); }
.btn-outline:hover .ic-arrow { transform: translateX(4px); }
@media (hover: none) {
  .h-tile:hover, .home .dc:hover, .home .loc:hover, .home .t-card:hover, .h-meet-pro:hover { translate: 0 0; }
  [data-spot]:hover::before { opacity: 0; }
  .h-tile:active, .home .dc:active, .home .loc:active, .home .fl-card:active { scale: .99; transition: scale .2s var(--ease-p3); }
}
@media (prefers-reduced-motion: reduce) {
  .h-tile, .home .dc, .home .loc, .btn, .btn .ic-arrow, .h-tile-ic, .dc-ic, .h-pro-ic { transition: none !important; }
  .h-tile:hover, .home .dc:hover, .home .loc:hover { translate: 0 0; }
  .btn-shine::after { display: none; }
}
.h-more { display: flex; justify-content: center; margin-top: 40px; }
.h-more-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--hairline); transition: border-color .4s var(--ease-p3), color .4s; }
.h-more-link:hover { color: var(--ink); border-color: var(--gold-ink); }
.h-more-link .ic-arrow { width: 18px; height: 18px; transition: transform .5s var(--ease-p3); }
.h-more-link:hover .ic-arrow { transform: translateX(4px); }
.home .faq .h-more { margin-top: 48px; }
.h-blog { background: var(--ivory); padding: 112px 0; }
.h-blog-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 48px; }
.h-blog-head .h-title { min-width: 0; }
.h-blog-head .h-more-link { flex: none; white-space: nowrap; }
.h-blog-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 20px; }
.hb-link { display: flex; flex-direction: column; gap: 12px; height: 100%; color: var(--ink); }
.hb-link:hover { color: var(--ink); }
.hb-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 8px; border-radius: 18px; overflow: hidden; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(20,20,20,.04) 14px 15px), linear-gradient(180deg, #efefed, #e4e3df); box-shadow: var(--shadow-1); translate: 0 0; transition: translate .8s var(--ease-p3), box-shadow .8s var(--ease-p3); }
.hb-img span { font: 450 12px/1.33 ui-monospace, Menlo, monospace; color: var(--muted); background: var(--canvas); padding: 6px 10px; border-radius: var(--r-full); }
.hb-tag { width: fit-content; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--r-full); font-size: 12px; font-weight: 600; }
.hb-title { margin: 0; font: 400 clamp(24px, 2.2vw, 28px)/1.15 "Newsreader", Georgia, serif; letter-spacing: -0.01em; text-wrap: balance; }
.hb-ex { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.hb-meta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.hb-meta .ic-arrow { width: 16px; height: 16px; transition: transform .5s var(--ease-p3); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hb-link:hover .hb-img { translate: 0 -6px; box-shadow: var(--shadow-2); }
  .hb-link:hover .hb-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
  .hb-link:hover .hb-meta .ic-arrow { transform: translateX(4px); color: var(--gold-ink); }
}
@media (min-width: 720px) {
  .h-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .h-blog { padding: 160px 0; }
  .h-blog-head { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
}
:root { --shadow-1: 0 1px 1px oklch(0.35 0.04 60 / .05), 0 2px 4px oklch(0.35 0.04 60 / .05), 0 12px 28px -14px oklch(0.35 0.04 60 / .2); --shadow-2: 0 1px 2px oklch(0.35 0.04 60 / .06), 0 6px 12px -4px oklch(0.35 0.04 60 / .08), 0 36px 64px -28px oklch(0.35 0.04 60 / .34); }
.home .m-card, .h-plan, .h-tile--dark { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .28), inset 0 0 0 1px var(--night-line), inset 0 24px 48px -32px oklch(0.8 0.1 80 / .16), 0 40px 80px -40px oklch(0 0 0 / .7); }
.home .m-card { transition: box-shadow .7s var(--ease-p3); }
@media (hover: hover) {
  .home .m-card:hover, .h-plan:hover { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), inset 0 0 0 1px oklch(0.8 0.1 80 / .22), inset 0 30px 60px -34px oklch(0.8 0.1 80 / .24), 0 40px 80px -40px oklch(0 0 0 / .7); }
  .h-plan { transition: box-shadow .7s var(--ease-p3); }
}
@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 12px 30px -14px oklch(0.8 0.1 80 / .6), 0 0 0 0 oklch(0.8 0.1 80 / 0); }
  50% { box-shadow: 0 12px 30px -14px oklch(0.8 0.1 80 / .7), 0 0 0 8px oklch(0.8 0.1 80 / .12); }
}
.hx .btn-primary.is-visible, .h-plan-cta.is-visible, .home .contact .form-submit.is-visible { animation: gold-pulse 2.8s ease-in-out infinite; }
.hx .btn-primary:hover, .h-plan-cta:hover, .home .contact .form-submit:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hx .btn-primary, .h-plan-cta, .home .contact .form-submit { animation: none !important; }
}
.fl2 { position: relative; background: var(--ivory); padding: 112px 0; overflow: clip; }
.fl2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.fl2-sticky { display: flex; flex-direction: column; gap: 20px; }
.fl2-sticky .h-lead { margin: 0; }
.fl2-clock { display: none; position: relative; width: 240px; aspect-ratio: 1; margin: 12px 0 8px; }
.fl2-clock svg { width: 100%; height: 100%; overflow: visible; }
.fl2-ring-bg { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.fl2-ring { fill: none; stroke: var(--gold-ink); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px oklch(0.8 0.1 80 / .45)); }
.fl2-mark { fill: var(--ivory); stroke: var(--hairline); stroke-width: 1.5; transition: fill .5s var(--ease-p3), stroke .5s var(--ease-p3); }
.fl2-mark.on { fill: var(--gold); stroke: var(--gold-ink); }
.fl2-read { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.fl2-read b { font: 400 76px/1 "Newsreader", Georgia, serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fl2-read span { font-size: 13px; font-weight: 600; color: var(--muted); }
.fl2-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fl2-cta p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.fl2-cta p .ic { width: 18px; height: 18px; color: var(--gold-ink); }
.fl2-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.fl2-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 24px; background: var(--canvas); box-shadow: var(--shadow-1); transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3), background-color .7s var(--ease-p3); }
.fl2-top { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.fl2-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--ivory); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-soft); transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3), transform .6s var(--ease-p3); }
.fl2-ic .ic { width: 24px; height: 24px; }
.fl2-time { display: inline-flex; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl2-time b { color: var(--ink); font-weight: 650; }
.fl2-n { margin-left: auto; font: 400 44px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--hairline); transition: -webkit-text-stroke-color .6s var(--ease-p3); }
.fl2-title { margin: 0; font: 400 clamp(28px, 3vw, 38px)/1.08 "Newsreader", Georgia, serif; letter-spacing: -0.02em; color: var(--ink); }
.fl2-desc { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; max-width: 52ch; }
.fl2-step.is-active .fl2-card { box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
.fl2-step.is-active .fl2-ic { background: var(--night); color: var(--gold); transform: rotate(-4deg); }
.fl2-step.is-active .fl2-n { -webkit-text-stroke-color: var(--gold-ink); }
.fl2-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fl2-chips li { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-full); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--hairline-soft); font-size: 14px; font-weight: 600; color: var(--ink); }
.fl2-say { position: relative; margin: 8px 0 0; padding: 24px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 120% at 100% 0%, oklch(0.25 0.03 255), var(--night) 65%); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), inset 0 0 0 1px var(--night-line); }
.fl2-say figcaption { font-size: 13px; font-weight: 600; color: var(--gold); }
.fl2-ps { margin: 10px 0 6px; font: 500 clamp(34px, 4vw, 46px)/1.3 "Noto Naskh Arabic", serif; color: var(--on-night); text-align: right; }
.fl2-tr { margin: 0; font-size: 16px; color: var(--on-night-soft); }
.fl2-tr i { color: var(--on-night); }
.fl2-pat { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--night-line); font-size: 14px; color: var(--on-night-muted); }
.fl2-pat b { color: var(--gold); font-weight: 600; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fl2-card:hover { translate: 0 -4px; box-shadow: var(--shadow-2); }
  .fl2-card:hover .fl2-ic { transform: rotate(-4deg) scale(1.05); }
}
@media (min-width: 900px) {
  .fl2 { padding: 160px 0; }
  .fl2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
  .fl2-sticky { position: sticky; top: 120px; }
  .fl2-clock { display: block; }
  .fl2-list { gap: 24px; padding-top: 8px; }
  .fl2-card { padding: 36px; }
}
.h-trust { position: relative; overflow: clip; }
.h-trust::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, oklch(0.8 0.1 80 / .6), transparent); }
.h-trust-list li { position: relative; }
.h-trust-list li::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-p3); }
.h-trust-list li:hover::after { transform: scaleX(1); }
.h-trust-list .ic { filter: drop-shadow(0 0 10px oklch(0.8 0.1 80 / .35)); }
.h-meet-bio p:first-child { font: 400 clamp(22px, 2.2vw, 26px)/1.35 "Newsreader", Georgia, serif; color: var(--ink); }
.h-sign img { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--gold); }
.h-meet-pro { position: relative; overflow: hidden; background: radial-gradient(120% 70% at 100% 0%, oklch(0.25 0.03 255), var(--night) 60%); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), inset 0 0 0 1px var(--night-line), 0 50px 90px -40px oklch(0.17 0.02 255 / .7); }
.h-meet-pro .h-pro-title { color: var(--on-night); }
.h-meet-pro .h-pro-sub { color: var(--on-night-soft); }
.h-meet-pro .h-pro-list li { border-color: var(--night-line); border-radius: 14px; transition: background-color .5s var(--ease-p3), translate .6s var(--ease-p3); }
.h-meet-pro .h-pro-list h4 { color: var(--on-night); }
.h-meet-pro .h-pro-list p { color: var(--on-night-muted); }
.h-meet-pro .h-pro-ic { background: oklch(1 0 0 / .06); color: var(--gold); box-shadow: inset 0 0 0 1px var(--night-line); }
@media (hover: hover) {
  .h-meet-pro .h-pro-list li:hover { background: oklch(1 0 0 / .04); translate: 6px 0; }
}
.home .story { position: relative; overflow: clip; isolation: isolate; }
.story-light { position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: 50%; top: 40%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, oklch(0.88 0.08 80 / .55), transparent 60%); animation: story-drift 18s ease-in-out infinite alternate; }
@keyframes story-drift { from { transform: translate(-8%, -4%) scale(1); } to { transform: translate(8%, 6%) scale(1.12); } }
.home .story-inner { position: relative; }
.story-mark { position: absolute; left: 50%; top: -0.38em; translate: -50% 0; z-index: -1; pointer-events: none; font: 400 clamp(220px, 28vw, 380px)/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1.5px oklch(0.6 0.1 70 / .35); }
.home .story-quote em { background: linear-gradient(var(--gold), var(--gold)) 0 92% / 0% 2px no-repeat; transition: background-size 1.6s var(--ease-p3); padding-bottom: 2px; }
.home .story-quote.is-drawn em { background-size: 100% 2px; }
@media (prefers-reduced-motion: reduce) {
  .story-light { animation: none; }
}
.h-tile--hero { position: relative; isolation: isolate; }
.h-tile--hero::after { content: ""; position: absolute; z-index: -1; inset: -40%; background: radial-gradient(35% 35% at 30% 30%, oklch(0.88 0.08 80 / .45), transparent 70%),
  radial-gradient(30% 30% at 75% 70%, oklch(0.9 0.04 250 / .5), transparent 70%); animation: tile-mesh 16s ease-in-out infinite alternate; }
@keyframes tile-mesh { to { transform: rotate(20deg) scale(1.1); } }
.h-tile-ic { transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3), transform .6s var(--ease-p3), box-shadow .6s var(--ease-p3); }
@media (hover: hover) {
  .h-tile:not(.h-tile--dark):hover .h-tile-ic { background: var(--night); color: var(--gold); transform: rotate(-6deg); box-shadow: 0 12px 24px -12px oklch(0.17 0.02 255 / .6); }
}
.h-ladder li:not(.sep) { transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3), box-shadow .6s var(--ease-p3); }
.h-ladder li.lit:not(.sep) { background: var(--night); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3); }
.h-ladder li.lit:not(.sep) .ic { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .h-tile--hero::after { animation: none; }
}
.home .dc { overflow: hidden; }
.home .dc-num { font: 400 64px/.8 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--hairline); transition: -webkit-text-stroke-color .6s var(--ease-p3); }
.home .dc:hover .dc-num { -webkit-text-stroke-color: var(--gold-ink); }
.home .dc-ic { background: var(--night); color: var(--gold); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), 0 14px 28px -14px oklch(0.17 0.02 255 / .55); transition: transform .6s var(--ease-p3); }
.home .dc:hover .dc-ic { transform: rotate(-6deg) scale(1.05); }
.home .dc-focus { font: italic 400 21px/1.35 "Newsreader", Georgia, serif; color: var(--ink-soft); }
.home .dc-meta dt { color: var(--gold-ink); }
.home .dc-more .ic { transition: transform .5s var(--ease-p3); }
.home .dc-more:hover .ic { transform: translateX(5px); }
.home .dc-list li::marker { color: var(--gold-ink); }
.home .t-strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.home .t-card { position: relative; overflow: hidden; }
.home .t-card::before { content: "“"; position: absolute; right: 18px; top: -18px; font: 400 150px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--hairline); pointer-events: none; transition: -webkit-text-stroke-color .6s var(--ease-p3); }
.home .t-card:hover::before { -webkit-text-stroke-color: var(--gold-ink); }
.home .t-before { color: var(--muted); font-size: 15px; }
.home .t-after { font: 400 21px/1.38 "Newsreader", Georgia, serif; color: var(--ink); text-wrap: pretty; }
.home .t-tag { border-radius: var(--r-full); }
.home .t-after .t-tag { background: var(--night); color: var(--gold); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3); }
.home .t-flag { border-radius: 4px; box-shadow: 0 0 0 1px var(--hairline-soft), 0 4px 10px -4px oklch(0.3 0.03 60 / .4); }
.home .loc { position: relative; overflow: hidden; isolation: isolate; transition: box-shadow .7s var(--ease-p3), translate .7s var(--ease-p3); }
.home .loc-code { position: absolute; z-index: -1; right: -6px; bottom: -22px; font: 400 150px/1 "Newsreader", Georgia, serif; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--hairline-soft); transition: -webkit-text-stroke-color .7s var(--ease-p3), translate .9s var(--ease-p3); pointer-events: none; }
.home .loc:hover .loc-code { -webkit-text-stroke-color: oklch(0.6 0.1 70 / .55); translate: -10px 0; }
.home .loc-flag { border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline-soft), 0 10px 20px -10px oklch(0.3 0.03 60 / .5); transition: transform .7s var(--ease-p3); }
.home .loc:hover .loc-flag { transform: rotate(-4deg) scale(1.06); }
.home .loc:hover { box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .5); }
.loc-now { display: inline-flex; align-items: center; gap: 8px; width: fit-content; height: 30px; padding: 0 12px; border-radius: var(--r-full); background: var(--night); color: var(--on-night); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.loc-now i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 oklch(0.8 0.1 80 / .6); animation: loc-ping 2.4s ease-out infinite; }
.loc-now b { color: var(--gold); font-weight: 650; }
@keyframes loc-ping { 70% { box-shadow: 0 0 0 7px oklch(0.8 0.1 80 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.8 0.1 80 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .loc-now i { animation: none; }
}
.home .faq-q { border-radius: 16px; transition: background-color .5s var(--ease-p3), color .5s var(--ease-p3), padding .5s var(--ease-p3); }
.home .faq-q .faq-idx { font: 400 22px/1 "Newsreader", Georgia, serif; transition: color .5s var(--ease-p3); }
@media (min-width: 900px) {
  .home .faq-q.is-active { background: var(--night); color: var(--on-night); padding-left: 20px; padding-right: 20px; }
  .home .faq-q.is-active .faq-idx { color: var(--gold); }
  .home .faq-a-inner { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  .home .faq-a-body { position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 3vw, 44px); border-radius: 24px; background: var(--canvas); box-shadow: var(--shadow-2), inset 0 1px 0 oklch(0.8 0.1 80 / .5); }
  .home .faq-a-body::before { content: "؟"; position: absolute; z-index: -1; right: 4%; bottom: -12%; font: 500 300px/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.6 0.1 70 / .25); pointer-events: none; }
}
.home .faq-a-q { font-family: "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }
.home .faq-a-link span { display: inline-block; transition: transform .5s var(--ease-p3); }
.home .faq-a-link:hover span { transform: translateX(5px); }
.h-blog-grid { counter-reset: hb; }
.hb-card { counter-increment: hb; }
.hb-img::before { content: counter(hb, decimal-leading-zero); position: absolute; left: 18px; top: 12px; font: 400 56px/1 "Newsreader", Georgia, serif; color: transparent; -webkit-text-stroke: 1px var(--hairline); }
.hb-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, oklch(0.8 0.1 80 / 0) 40%, oklch(0.8 0.1 80 / .35)); opacity: 0; transition: opacity .8s var(--ease-p3); }
.hb-link:hover .hb-img::after { opacity: 1; }
.hb-tag { background: var(--night); color: var(--gold); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root { --sand: oklch(0.915 0.014 75); }
}
.h-promise { padding: 112px 0; }
.h-promise-head { display: grid; gap: 40px; margin-bottom: 64px; }
.h-arc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: arc; }
.h-arc li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 22px 24px; border-radius: 20px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.h-arc-n { grid-row: span 2; font: 400 40px/1 "Newsreader", Georgia, serif; }
.h-arc b { font: 400 26px/1.1 "Newsreader", Georgia, serif; letter-spacing: -0.02em; }
.h-arc p { margin: 0; line-height: 1.5; }
.h-arc li:last-child { background: var(--night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3); }
.h-arc li:last-child b { color: var(--on-night); }
.h-arc li:last-child p { color: var(--on-night-soft); }
.h-arc li:last-child .h-arc-n { -webkit-text-stroke-color: var(--gold); }
.h-vows { list-style: none; margin: 0; padding: 0; }
.h-vow { border-bottom: 1px solid var(--hairline-soft); }
.h-vow p { letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.h-vow-mark { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hairline); translate: 0 -0.2em; transition: background-color .5s var(--ease-p3), box-shadow .5s var(--ease-p3); }
.h-vow.is-lit .h-vow-mark { background: var(--gold); box-shadow: 0 0 0 6px oklch(0.8 0.1 80 / .2); }
.js-vows .h-vow p { opacity: .22; transition: opacity .8s var(--ease-p3); }
.js-vows .h-vow.is-lit p { opacity: 1; }
@media (min-width: 900px) {
  .h-promise { padding: 160px 0; }
  .h-vow { grid-template-columns: 48px minmax(0, 1fr); padding: 36px 0; }
}
.h-plan-alt { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--night-line); display: grid; gap: 16px; text-align: left; }
.h-alt-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.h-alt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: oklch(1 0 0 / .06); color: var(--gold); box-shadow: inset 0 0 0 1px var(--night-line); }
.h-alt-ic .ic { width: 20px; height: 20px; }
.h-alt-row b { display: block; font-size: 16px; font-weight: 650; color: var(--on-night); }
.h-alt-row p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--on-night-soft); }
.h-alt-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-left: 54px; font-size: 15px; font-weight: 600; color: var(--gold); border-bottom: 1px solid oklch(0.8 0.1 80 / .4); padding-bottom: 2px; }
.h-alt-link:hover { color: var(--gold-hi); border-color: var(--gold); }
.h-alt-link .ic { width: 16px; height: 16px; transition: transform .5s var(--ease-p3); }
.h-alt-link:hover .ic { transform: translateX(4px); }
.h-extras { margin-top: 40px; display: grid; gap: 16px; }
.h-extras-title { margin: 0; font: italic 400 22px/1.2 "Newsreader", Georgia, serif; color: var(--ink-soft); }
.h-extras-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.h-extras-list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--canvas); transition: box-shadow .6s var(--ease-p3), translate .6s var(--ease-p3); }
.h-ex-ic { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--night); color: var(--gold); }
.h-ex-ic .ic { width: 22px; height: 22px; }
.h-extras-list b { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.h-extras-list small { display: block; font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) {
  .h-extras-list li:hover { translate: 0 -3px; box-shadow: var(--shadow-2); }
}
@media (min-width: 720px) {
  .h-extras-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .h-extras-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.h-langs-note { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; padding: 16px 18px; border-radius: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); max-width: 560px; }
.h-langs-note .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--gold-ink); }
.h-langs-note b { color: var(--ink); }
.dc-custom { margin-top: 24px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 22px 24px; border-radius: 24px; background: radial-gradient(120% 140% at 100% 0%, oklch(0.25 0.03 255), var(--night) 60%); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), 0 30px 60px -34px oklch(0.17 0.02 255 / .7); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.dc-custom:hover { color: var(--on-night); translate: 0 -3px; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .5), inset 0 0 0 1px oklch(0.8 0.1 80 / .25), 0 40px 70px -34px oklch(0.17 0.02 255 / .8); }
.dc-custom-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--gold); color: var(--night); }
.dc-custom-ic .ic { width: 26px; height: 26px; }
.dc-custom-txt b { display: block; font: 400 clamp(22px, 2.4vw, 28px)/1.15 "Newsreader", Georgia, serif; letter-spacing: -0.015em; }
.dc-custom-txt em { color: var(--gold); }
.dc-custom-txt small { display: block; margin-top: 4px; font-size: 14px; color: var(--on-night-soft); }
.dc-custom-go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; width: fit-content; height: 44px; padding: 0 20px; border-radius: var(--r-full); background: var(--gold); color: var(--night); font-size: 15px; font-weight: 650; }
.dc-custom-go .ic { width: 18px; height: 18px; transition: transform .5s var(--ease-p3); }
.dc-custom:hover .dc-custom-go .ic { transform: translateX(4px); }
@media (min-width: 900px) {
  .dc-custom { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 28px 32px; }
  .dc-custom-go { grid-column: auto; }
}
.h-promise { position: relative; overflow: clip; isolation: isolate; background: var(--night); color: var(--on-night); }
.h-promise .hx-grain { position: absolute; inset: 0; z-index: -1; opacity: .25; }
.h-promise-glow { position: absolute; z-index: -1; inset: -20% -10% auto auto; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(circle, oklch(0.8 0.1 80 / .14), transparent 60%); animation: promise-drift 20s ease-in-out infinite alternate; pointer-events: none; }
@keyframes promise-drift { to { transform: translate(-18%, 22%) scale(1.15); } }
.h-promise .h-title { color: var(--on-night); }
.h-promise .h-title em { color: var(--gold); }
.h-arc { position: relative; gap: 14px; }
.h-arc-line { display: none; }
.h-arc li:not(.h-arc-line) { background: oklch(1 0 0 / .04) !important; box-shadow: inset 0 1px 0 oklch(1 0 0 / .08), inset 0 0 0 1px var(--night-line) !important; padding: 20px 22px; transition: box-shadow .7s var(--ease-p3), background-color .7s var(--ease-p3), translate .7s var(--ease-p3); }
.h-arc b { color: var(--on-night) !important; font-size: 24px; }
.h-arc p { color: var(--on-night-soft) !important; font-size: 14px; }
.h-arc-n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 18px !important; color: var(--gold) !important; -webkit-text-stroke: 0 !important; background: oklch(0.17 0.02 255); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .45); transition: background-color .6s var(--ease-p3), color .6s var(--ease-p3), box-shadow .6s var(--ease-p3); }
.h-arc.is-on li:not(.h-arc-line) .h-arc-n { background: var(--gold); color: var(--night) !important; box-shadow: 0 0 0 6px oklch(0.8 0.1 80 / .14), 0 0 24px oklch(0.8 0.1 80 / .5); }
.h-arc.is-on li:nth-child(3) .h-arc-n { transition-delay: .35s; }
.h-arc.is-on li:nth-child(4) .h-arc-n { transition-delay: .7s; }
@media (hover: hover) {
  .h-arc li:not(.h-arc-line):hover { translate: 0 -4px; box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .4), inset 0 0 0 1px oklch(0.8 0.1 80 / .25), 0 30px 50px -30px oklch(0 0 0 / .8) !important; }
}
@media (min-width: 900px) {
  .h-promise-head { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; align-items: start !important; margin-bottom: 56px !important; }
  .h-arc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .h-arc-line { display: block; position: absolute; left: 44px; right: 44px; top: 42px; height: 1px; background: var(--night-line); pointer-events: none; }
  .h-arc-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), oklch(0.6 0.1 70)); box-shadow: 0 0 10px oklch(0.8 0.1 80 / .6); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-p3); }
  .h-arc.is-on .h-arc-line i { transform: scaleX(1); }
  .h-arc li:not(.h-arc-line) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; background: transparent !important; box-shadow: none !important; padding: 20px 22px 4px !important; }
  .h-arc-n { grid-row: auto !important; position: relative; z-index: 1; }
}
.h-vows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border-top: 0 !important; }
.h-vow { position: relative; overflow: hidden; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 16px !important; align-items: start !important; padding: 22px 22px !important; border: 0 !important; border-radius: 20px; background: linear-gradient(180deg, oklch(1 0 0 / .055), oklch(1 0 0 / .02)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .08), inset 0 0 0 1px var(--night-line), 0 24px 48px -32px oklch(0 0 0 / .8); opacity: 0; translate: 0 24px; transition: opacity 1s var(--ease-p3) calc(var(--i) * 70ms), translate 1s var(--ease-p3) calc(var(--i) * 70ms), box-shadow .6s var(--ease-p3), background-color .6s; }
.h-vows.is-in .h-vow { opacity: 1; translate: 0 0; }
.h-vow-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: oklch(0.8 0.1 80 / .08); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .25); transition: transform .6s var(--ease-p3), background-color .6s var(--ease-p3), color .6s var(--ease-p3), box-shadow .6s var(--ease-p3); }
.h-vow-ic .ic { width: 24px; height: 24px; }
.h-vow p { margin: 0; display: flex; flex-direction: column; gap: 4px; font: inherit !important; opacity: 1 !important; }
.h-vow p b { font: 400 21px/1.25 "Newsreader", Georgia, serif; letter-spacing: -0.01em; color: var(--on-night); text-wrap: balance; }
.h-vow p em { font-style: italic; font-size: 15px; line-height: 1.45; color: var(--on-night-soft); }
.h-vow-mark { display: none; }
@media (hover: hover) {
  .h-vow:hover { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), inset 0 0 0 1px oklch(0.8 0.1 80 / .28), 0 30px 60px -30px oklch(0.8 0.1 80 / .28); translate: 0 -4px; transition-delay: 0s; }
  .h-vow:hover .h-vow-ic { background: var(--gold); color: var(--night); transform: rotate(-6deg) scale(1.05); box-shadow: 0 10px 24px -8px oklch(0.8 0.1 80 / .6); }
  .h-vow:hover p em { color: var(--gold); }
}
@media (min-width: 720px) {
  .h-vows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1100px) {
  .h-vows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-vow { grid-template-columns: minmax(0, 1fr) !important; padding: 26px !important; min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-vow { opacity: 1; translate: 0 0; transition: none; }
  .h-promise-glow { animation: none; }
}
.h-extras-list li { box-shadow: 0 1px 2px oklch(0.35 0.04 60 / .05), 0 12px 24px -16px oklch(0.35 0.04 60 / .28); }
.h-ex-ic { box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3); transition: transform .6s var(--ease-p3); }
.h-extras-list li:hover .h-ex-ic { transform: rotate(-6deg) scale(1.05); }
.h-langs-note { background: linear-gradient(135deg, oklch(0.8 0.1 80 / .12), oklch(0.8 0.1 80 / .03)); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .3); }
.dc-custom-ic { box-shadow: 0 0 0 6px oklch(0.8 0.1 80 / .12), 0 0 30px oklch(0.8 0.1 80 / .35); animation: custom-pulse 3.2s ease-in-out infinite; }
@keyframes custom-pulse { 50% { box-shadow: 0 0 0 10px oklch(0.8 0.1 80 / .06), 0 0 40px oklch(0.8 0.1 80 / .45); } }
@media (prefers-reduced-motion: reduce) {
  .dc-custom-ic { animation: none; }
}
.h-arc > li.h-arc-line { display: none; }
@media (min-width: 900px) {
  .h-arc > li.h-arc-line { display: block; position: absolute; left: 66px; right: 66px; top: 42px; height: 1px; padding: 0; border-radius: 0; background: var(--night-line) !important; box-shadow: none !important; grid-template-columns: none; pointer-events: none; }
}
.h-quiz { background: var(--ivory); padding: 24px 0 96px; }
.hq-card { position: relative; overflow: hidden; display: grid; gap: 28px; padding: 32px 24px; border-radius: 28px; background: radial-gradient(120% 120% at 0% 0%, oklch(0.25 0.03 255), var(--night) 60%); color: var(--on-night); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .3), inset 0 0 0 1px var(--night-line), 0 50px 90px -46px oklch(0.17 0.02 255 / .75); }
.hq-card::after { content: "؟"; position: absolute; right: -2%; bottom: -18%; font: 500 320px/1 "Noto Naskh Arabic", serif; color: transparent; -webkit-text-stroke: 1px oklch(0.8 0.1 80 / .14); pointer-events: none; }
.hq-title { margin: 0; font: 400 clamp(30px, 3.6vw, 46px)/1.06 "Newsreader", Georgia, serif; letter-spacing: -0.02em; text-wrap: balance; }
.hq-title em { color: var(--gold); }
.hq-sub { margin: 12px 0 0; font-size: 15px; color: var(--on-night-soft); }
.hq-dots { display: flex; gap: 6px; margin-top: 20px; }
.hq-dots i { width: 26px; height: 4px; border-radius: 4px; background: oklch(1 0 0 / .14); transition: background-color .5s var(--ease-p3), width .5s var(--ease-p3); }
.hq-dots i.on { background: var(--gold); width: 40px; }
.hq-stage { position: relative; z-index: 1; min-height: 250px; }
.hq-step { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.hq-step.is-on { display: block; animation: hq-in .7s var(--ease-p3) both; }
@keyframes hq-in { from { opacity: 0; transform: translateX(24px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hq-q { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; font: 400 24px/1.2 "Newsreader", Georgia, serif; color: var(--on-night); }
.hq-q span { font: 600 13px/1 var(--font); color: var(--gold); }
.hq-opts { display: grid; gap: 10px; }
.hq-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 20px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: 600 16px/1.3 var(--font); color: var(--on-night); background: oklch(1 0 0 / .05); box-shadow: inset 0 0 0 1px var(--night-line); transition: background-color .4s var(--ease-p3), box-shadow .4s var(--ease-p3), translate .5s var(--ease-p3), color .4s; }
.hq-opt .ic { width: 18px; height: 18px; color: var(--gold); opacity: .5; transition: transform .5s var(--ease-p3), opacity .4s; }
.hq-opt:hover, .hq-opt:focus-visible { background: oklch(0.8 0.1 80 / .1); box-shadow: inset 0 0 0 1px oklch(0.8 0.1 80 / .55), 0 0 24px -6px oklch(0.8 0.1 80 / .4); translate: 4px 0; }
.hq-opt:hover .ic { opacity: 1; transform: translateX(4px); }
.hq-opt:active { scale: .99; }
.hq-result:not([hidden]) { display: block; animation: hq-in .8s var(--ease-p3) both; }
.hq-course { margin: 0; font: 400 clamp(32px, 4vw, 48px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.02em; color: var(--gold); }
.hq-why { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--on-night-soft); max-width: 48ch; }
.hq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.hq-more { font-size: 15px; font-weight: 600; color: var(--on-night); border-bottom: 1px solid oklch(1 0 0 / .3); padding-bottom: 2px; }
.hq-more:hover { color: var(--gold); border-color: var(--gold); }
.hq-reset { border: 0; background: none; padding: 8px 0; cursor: pointer; font: 600 14px/1 var(--font); color: var(--on-night-muted); }
.hq-reset:hover { color: var(--on-night); }
@media (min-width: 900px) {
  .h-quiz { padding: 40px 0 140px; }
  .hq-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; padding: 56px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hq-step.is-on, .hq-result:not([hidden]) { animation: none; }
}
.h-plan-anchor { margin: 6px 0 0; font-size: 14px; color: var(--on-night-soft); }
.h-plan-anchor b { color: var(--gold); font-weight: 650; }
.h-place { position: relative; background: var(--night); }
.h-place-fig { position: relative; margin: 0; height: clamp(420px, 70vh, 720px); overflow: hidden; }
.h-place-fig img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.h-place-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.17 0.02 255 / .25), oklch(0.17 0.02 255 / .1) 40%, oklch(0.17 0.02 255 / .92)); }
.h-place-cap { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 56px; display: grid; gap: 8px; max-width: var(--max); margin: 0 auto; }
.h-place-cap span { font-size: 15px; font-weight: 650; color: oklch(0.8 0.1 80); }
.h-place-cap b { font: 400 clamp(44px, 7vw, 104px)/.98 "Newsreader", Georgia, serif; letter-spacing: -0.03em; color: oklch(0.97 0.012 85); text-wrap: balance; }
.h-place-credit { position: absolute; z-index: 2; right: 16px; bottom: 14px; font-size: 11px; color: oklch(1 0 0 / .6); }
.h-place-credit a { color: inherit; }
.locs2 .loc-you { margin: 16px auto 0; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: 999px; font: italic 400 19px/1.3 "Newsreader", Georgia, serif; color: var(--ink); background: oklch(0.8 0.1 80 / .18); box-shadow: inset 0 0 0 1px oklch(0.6 0.1 70 / .35); }
.locs2 .loc-you b { font-weight: 400; color: var(--gold-ink); }
.loc-map { position: relative; margin: 40px 0 48px; padding: 28px 20px 18px; border-radius: 32px; overflow: hidden; isolation: isolate; background: radial-gradient(70% 90% at 66% 34%, oklch(0.27 0.04 255), oklch(0.17 0.02 255) 70%); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .45), inset 0 0 0 1px oklch(0.8 0.1 80 / .2), 0 50px 100px -50px oklch(0.17 0.03 255 / .7); }
.loc-map img, .loc-arcs { display: block; width: 100%; height: auto; }
.loc-arcs { position: absolute; left: 20px; right: 20px; top: 28px; width: calc(100% - 40px); overflow: visible; }
.loc-arc { fill: none; stroke: oklch(0.8 0.1 80 / .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) calc(var(--i) * .18s), stroke .4s, stroke-width .4s, filter .4s; }
.loc-map.is-drawn .loc-arc { stroke-dashoffset: 0; }
.loc-arc.is-hot, .loc-arc.is-you { stroke: oklch(0.86 0.11 82); stroke-width: 2.6; filter: drop-shadow(0 0 6px oklch(0.8 0.1 80 / .8)); }
.loc-pin { fill: oklch(0.86 0.11 82); opacity: 0; transition: opacity .6s calc(1.2s + var(--i) * .18s); }
.loc-map.is-drawn .loc-pin { opacity: 1; }
.loc-pin text, .loc-home text { font: 600 13px/1 system-ui, sans-serif; fill: oklch(0.93 0.015 85); paint-order: stroke; stroke: oklch(0.17 0.02 255); stroke-width: 4px; }
.loc-pin-halo { fill: oklch(0.8 0.1 80 / .18); transition: r .4s; }
.loc-pin.is-hot .loc-pin-halo, .loc-pin.is-you .loc-pin-halo { r: 14; fill: oklch(0.8 0.1 80 / .3); }
.loc-home { fill: oklch(0.86 0.11 82); }
.loc-home text { font: italic 400 17px/1 "Newsreader", Georgia, serif; }
.loc-home-ring { fill: none; stroke: oklch(0.8 0.1 80 / .6); stroke-width: 1.5; transform-origin: 665.5px 116.7px; animation: loc-ping 2.4s ease-out infinite; }
@keyframes loc-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.loc-map figcaption { margin-top: 10px; text-align: center; font: italic 400 17px/1.3 "Newsreader", Georgia, serif; color: oklch(0.88 0.02 85); }
.locs2 .loc-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }
@media (min-width: 720px) {
  .locs2 .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1100px) {
  .locs2 .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.locs2 .loc { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 28px; background: var(--canvas); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--hairline-soft); transition: translate .7s var(--ease-p3), box-shadow .7s var(--ease-p3); }
.locs2 .loc-top { display: flex; align-items: center; gap: 12px; }
.locs2 .loc-flag { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; box-shadow: 0 8px 18px -8px oklch(0 0 0 / .4), 0 0 0 1px oklch(0 0 0 / .06); position: relative; }
.locs2 .loc-top::before { content: none; }
.locs2 .loc-flags img { border-radius: 4px; }
.locs2 .loc-code { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.loc-here { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: oklch(0.17 0.02 255); background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); }
.loc-here[hidden] { display: none; }
.loc-here i { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.17 0.02 255); animation: sx-live 1.8s ease-out infinite; }
.locs2 .loc-name { margin: 0; font: 400 clamp(28px, 2.6vw, 34px)/1.05 "Newsreader", Georgia, serif; letter-spacing: -0.02em; }
.locs2 .loc-name a { color: var(--ink); text-decoration: none; }
.locs2 .loc-lead { margin: 0; font-size: 15.5px; color: var(--ink-soft, var(--muted)); }
.locs2 .loc-now { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: oklch(0.17 0.02 255); color: oklch(0.9 0.015 85); font-size: 14px; }
.locs2 .loc-now i { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.75 0.17 150); box-shadow: 0 0 10px oklch(0.75 0.17 150 / .7); }
.locs2 .loc-now b { margin-left: auto; font: 400 24px/1 "Newsreader", Georgia, serif; color: oklch(0.86 0.11 82); font-variant-numeric: tabular-nums; }
.loc-cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.loc-cities li { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--ivory, var(--canvas-soft)); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.loc-q { margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hairline-soft); }
.loc-q p { margin: 0; font: italic 400 18px/1.45 "Newsreader", Georgia, serif; color: var(--ink); text-wrap: pretty; }
.loc-q footer { margin-top: 8px; font-size: 13px; font-weight: 650; color: var(--gold-ink); }
.loc-tz { margin: 0; font-size: 13.5px; color: var(--muted); }
.locs2 .loc-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 650; font-size: 15px; text-decoration: none; color: oklch(0.97 0.012 85); background: oklch(0.17 0.02 255); box-shadow: inset 0 1px 0 oklch(0.8 0.1 80 / .35); transition: background-color .4s, color .4s, translate .4s var(--ease-p3); }
.locs2 .loc-cta .ic-arrow { width: 17px; height: 17px; transition: translate .4s var(--ease-p3); }
.locs2 .loc.is-you { box-shadow: var(--shadow-2), inset 0 0 0 1.5px oklch(0.75 0.11 78), 0 0 60px -24px oklch(0.8 0.1 80 / .7); }
.locs2 .loc.is-you .loc-cta { background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); color: oklch(0.17 0.02 255); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .locs2 .loc:hover { translate: 0 -6px; box-shadow: var(--shadow-2), inset 0 0 0 1px oklch(0.8 0.1 80 / .55), 0 0 60px -30px oklch(0.8 0.1 80 / .6); }
  .locs2 .loc:hover .loc-cta { background: linear-gradient(160deg, oklch(0.88 0.08 82), oklch(0.76 0.11 78)); color: oklch(0.17 0.02 255); }
  .locs2 .loc:hover .loc-cta .ic-arrow { translate: 4px 0; }
}
@media (max-width: 640px) {
  .loc-pin text { font-size: 22px; stroke-width: 6px; }
  .loc-home text { font-size: 26px; }
  .loc-map { padding: 16px 10px 14px; }
  .loc-arcs { left: 10px; top: 16px; width: calc(100% - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .loc-home-ring, .loc-here i { animation: none; }
  .loc-arc, .loc-pin { transition: none; }
}