/* =====================================================================
   ROMB — Premium Dark design system (shared stylesheet)
   Used by all multilingual service pages. Onyx + indigo, warm gold,
   spectral hairlines with cursor-follow neon, gold-flair buttons.
   ===================================================================== */

:root {
    --bg:#08080c; --bg-2:#14141c; --bg-3:#050507;
    --indigo:#3b3391; --indigo-dp:#221d55;
    --spectral: linear-gradient(90deg,#ff2d7e,#ff8a00,#ffd21a,#35e06b,#24c3ff,#7a5cff,#ff2d7e);
    --aurora: linear-gradient(90deg,#00e0a0,#23c7d9,#3a8bff,#8a5cff,#c74be0,#23c7d9,#00e0a0);
    --warm: linear-gradient(90deg,#ffdf7a,#e9b232,#f0930f,#a9631a,#e9b232,#ffdf7a);
    --gold:#e9b232; --gold-soft:#f5d06a; --gold-deep:#c78a24; --lemon:#eee764;
    --white:#fff; --gray-300:#cfcfcf; --gray-400:#9a9a9a; --gray-500:#6f6f6f;
    --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.06);
    --serif:'Playfair Display', Georgia, serif;
    --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
::selection { background:var(--gold); color:#000; }

body {
    font-family:var(--sans);
    color:var(--gray-300); line-height:1.75; min-height:100vh; position:relative; overflow-x:hidden;
    background:
        radial-gradient(1000px 620px at 80% -6%, rgba(233,178,50,.10), transparent 58%),
        radial-gradient(1200px 800px at 10% 4%, rgba(59,51,145,.26), transparent 55%),
        radial-gradient(1300px 900px at 94% 106%, rgba(34,29,85,.30), transparent 60%),
        linear-gradient(180deg,#0a0a12 0%, var(--bg) 45%, var(--bg-3) 100%);
    background-attachment:fixed;
}

/* --- vertical hairlines with slowly flowing AURORA (northern lights), 50% dimmer --- */
/* (.lines-neon kept as the class name for the bright sweep layer so page markup is unchanged) */
.lines,.lines-neon { position:fixed; inset:0; z-index:0; pointer-events:none; }
.lines,.lines-neon {
    background:var(--aurora); background-size:320% 100%;
    -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 5px);
            mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 5px);
}
.lines { opacity:.11; animation:auroraFlow 30s linear infinite; }
.lines-neon {
    opacity:.30;
    filter:brightness(1.5) saturate(1.35) drop-shadow(0 0 5px rgba(90,200,255,.5));
    -webkit-mask-image:
        repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 5px),
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 25%, #000 45%, #000 55%, rgba(0,0,0,.15) 75%, transparent 100%);
    -webkit-mask-size:100% 100%, 55% 100%;
    -webkit-mask-repeat:repeat, no-repeat;
    -webkit-mask-composite:source-in;
    -webkit-mask-position:0 0, -60% 0;
            mask-image:
        repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 5px),
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 25%, #000 45%, #000 55%, rgba(0,0,0,.15) 75%, transparent 100%);
            mask-size:100% 100%, 55% 100%;
            mask-repeat:repeat, no-repeat;
            mask-composite:intersect;
            mask-position:0 0, -60% 0;
    animation:auroraFlow 30s linear infinite, auroraSweep 16s ease-in-out infinite;
}
@keyframes auroraFlow { to { background-position:320% 0; } }
@keyframes auroraSweep {
    0%   { -webkit-mask-position:0 0, -60% 0;  mask-position:0 0, -60% 0; }
    50%  { -webkit-mask-position:0 0, 160% 0;  mask-position:0 0, 160% 0; }
    100% { -webkit-mask-position:0 0, -60% 0;  mask-position:0 0, -60% 0; }
}
@media (prefers-reduced-motion:reduce){ .lines,.lines-neon{ animation:none; } .lines-neon{ opacity:.16; } }

.container { max-width:920px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* --- header --- */
header { position:sticky; top:0; z-index:40; background:rgba(8,8,12,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-soft); }
.nav { display:flex; align-items:center; justify-content:space-between; height:74px; max-width:1120px; margin:0 auto; padding:0 24px; }
.brand-name { display:inline-flex; align-items:center; flex-wrap:wrap; column-gap:11px; font-family:var(--serif); font-weight:700; font-size:1.35rem; letter-spacing:.16em; color:var(--white); text-transform:uppercase; text-decoration:none; }
.brand-logo { height:34px; width:auto; display:block; filter:drop-shadow(0 2px 6px rgba(233,178,50,.25)); }
.brand-name .dot { color:var(--gold); }
.brand-name small { flex-basis:100%; display:block; font-family:var(--sans); font-weight:500; font-size:.52rem; letter-spacing:.34em; color:var(--gold-soft); margin:2px 0 0 45px; }
[dir="rtl"] .brand-name small { margin:2px 45px 0 0; }
.foot .brand-logo { height:26px; }
.nav-right { display:flex; align-items:center; gap:26px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { color:var(--gray-300); text-decoration:none; font-size:.82rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; position:relative; transition:color .2s ease; }
.nav-links a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--warm); transition:right .25s ease; }
.nav-links a:hover { color:var(--white); } .nav-links a:hover::after,.nav-links a.active::after { right:0; }
.nav-links a.active { color:var(--gold); }
.menu-toggle { display:none; background:none; border:0; color:var(--white); font-size:1.5rem; cursor:pointer; }

/* language switch — dropdown (premiumhouses style) */
.langsel { position:relative; }
.langsel__btn {
    display:inline-flex; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer;
    color:var(--gold); font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.06em;
    padding:6px 8px; border-radius:6px; transition:color .2s ease;
}
.langsel__btn:hover { color:var(--gold-soft); }
.langsel__caret { font-size:.66rem; transition:transform .2s ease; }
.langsel[data-open="true"] .langsel__caret { transform:rotate(180deg); }
.langsel__menu {
    position:absolute; top:calc(100% + 8px); right:0; min-width:184px;
    background:#12121a; border:1px solid var(--line); border-radius:10px; padding:8px;
    display:flex; flex-direction:column; gap:3px; box-shadow:0 18px 40px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60;
}
.langsel[data-open="true"] .langsel__menu { opacity:1; visibility:visible; transform:translateY(0); }
.langsel__menu a {
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--gray-300);
    font-size:.9rem; font-weight:500; padding:7px 10px; border-radius:7px;
    transition:background-color .15s ease, color .15s ease;
}
.langsel__menu a:hover { background:rgba(255,255,255,.06); color:#fff; }
.langsel__menu a[aria-current="true"] { background:rgba(233,178,50,.10); color:var(--gold); }
.langsel__code {
    flex:0 0 auto; min-width:26px; text-align:center; font-size:.66rem; font-weight:600; letter-spacing:.05em;
    color:var(--gold); border:1px solid rgba(233,178,50,.5); border-radius:5px; padding:2px 5px;
}
[dir="rtl"] .langsel__menu { right:auto; left:0; }

/* --- hero --- */
.hero { padding:70px 0 40px; }
.crumbs { font-size:.76rem; letter-spacing:.06em; color:var(--gray-500); margin-bottom:20px; }
.crumbs a { color:var(--gray-400); text-decoration:none; } .crumbs a:hover { color:var(--gold); }
.eyebrow { display:block; color:var(--lemon); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:600; margin-bottom:16px; }
h1 { font-family:var(--serif); font-weight:600; color:var(--white); font-size:clamp(2.2rem,6vw,3.5rem); line-height:1.06; margin-bottom:14px; }
h1 em { font-style:italic; color:var(--gold); }
.subtitle { font-size:1.2rem; color:var(--gold-soft); font-weight:400; margin-bottom:26px; font-family:var(--serif); font-style:italic; }
.lead { color:var(--gray-300); font-size:1.06rem; font-weight:300; }
.lead + .lead { margin-top:16px; }

/* --- prose --- */
.prose { padding:14px 0 10px; }
.prose h2 { font-family:var(--serif); font-weight:600; color:var(--white); font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.15; margin:56px 0 14px; }
.prose h3 { font-family:var(--serif); font-weight:600; color:var(--white); font-size:1.28rem; margin:34px 0 10px; }
.prose h3::before { content:""; display:inline-block; width:22px; height:2px; background:var(--warm); vertical-align:middle; margin-right:12px; transform:translateY(-4px); }
.prose p { margin:0 0 14px; font-weight:300; color:var(--gray-300); }
.prose strong { color:var(--white); font-weight:600; }
.prose ul { list-style:none; margin:8px 0 20px; padding:0; }
.prose ul li { position:relative; padding-left:24px; margin-bottom:8px; font-weight:300; }
.prose ul li::before { content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(233,178,50,.6); }
.prose ol { margin:8px 0 20px; padding-left:22px; }
.prose ol li { margin-bottom:8px; font-weight:300; }
.prose ol li::marker { color:var(--gold); font-weight:600; }

/* internal-link chips */
.chip-row { margin:6px 0 24px; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; font-size:.82rem; font-weight:500; text-decoration:none; letter-spacing:.02em; color:var(--gray-300); border:1px solid transparent; background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box, var(--warm) border-box; transition:transform .2s ease, box-shadow .3s ease; }
.chip::after { content:"\2192"; color:var(--gold); }
.chip:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 16px rgba(233,178,50,.35); }
.chip:hover span { color:var(--gold); }

/* load-path flow */
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:20px 0 8px; padding:22px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(20,20,28,.7),rgba(12,12,18,.7)); }
.flow span { font-size:.9rem; color:var(--white); font-weight:500; padding:8px 14px; border-radius:8px; background:rgba(233,178,50,.08); border:1px solid rgba(233,178,50,.2); }
.flow i { color:var(--gold); font-style:normal; }

/* two cards */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:20px 0; }
.duo .card { border:1px solid var(--line); border-radius:16px; padding:26px; background:linear-gradient(180deg,rgba(20,20,28,.7),rgba(12,12,18,.7)); }
.duo .card h3 { margin-top:0; } .duo .card h3::before { display:none; }

/* button — flat solid gold, dark text, small radius, trailing arrow (premiumhouses style) */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 29px; border-radius:4px; cursor:pointer;
    font-weight:600; font-size:.95rem; letter-spacing:.045em;
    text-decoration:none; border:0;
    background:var(--gold); color:#0e1626;
    transition:background-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.btn::after { content:"\2192"; font-weight:600; transition:transform .2s ease; }
.btn:hover { background:var(--gold-soft); transform:translateY(-1px); box-shadow:0 10px 24px rgba(233,178,50,.26); }
.btn:hover::after { transform:translateX(3px); }
.btn-txt { color:inherit; }
/* secondary / ghost button — transparent with subtle outline */
.btn-ghost { background:transparent; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.25); }
.btn-ghost::after { color:var(--gold); }
.btn-ghost:hover { background:rgba(255,255,255,.06); color:#fff; box-shadow:none; transform:translateY(-1px); }
.cta-inline { margin:26px 0 8px; }

/* CTA band */
.band { margin:40px 0; padding:34px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(700px 300px at 80% 0,rgba(233,178,50,.10),transparent 60%),linear-gradient(180deg,rgba(20,20,28,.85),rgba(12,12,18,.9)); }
.band h2 { font-family:var(--serif); color:var(--white); font-size:1.7rem; margin-bottom:10px; }
.band p { font-weight:300; margin-bottom:8px; }

/* FAQ */
.faq { margin-top:14px; }
.faq details { border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:rgba(18,18,26,.6); overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:18px 22px; font-weight:500; color:var(--white); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold); font-size:1.4rem; line-height:1; transition:transform .25s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 22px 20px; font-weight:300; color:var(--gray-300); margin:0; }

/* secondary partner note */
.partner-note { margin:30px 0; font-size:.92rem; color:var(--gray-400); font-weight:300; }
.partner-note a { color:var(--gold-soft); text-decoration:none; border-bottom:1px solid rgba(233,178,50,.4); }
.partner-note a:hover { color:var(--gold); }

/* footer */
footer { border-top:1px solid var(--line-soft); padding:34px 0; position:relative; z-index:1; margin-top:40px; }
.foot { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; max-width:1120px; margin:0 auto; padding:0 24px; }
.foot p { color:var(--gray-500); font-size:.82rem; }
.foot .sig { font-family:var(--serif); color:var(--gray-300); font-style:italic; }

@media (max-width:820px){
  .menu-toggle{ display:block; }
  .duo{ grid-template-columns:1fr; }
  .nav-links{
    display:none; position:absolute; top:74px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(8,8,12,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 18px 40px rgba(0,0,0,.5); padding:6px 24px 14px;
  }
  .nav.nav-open .nav-links{ display:flex; }
  .nav-links a{ display:block; width:100%; padding:14px 2px; font-size:.95rem; border-bottom:1px solid var(--line-soft); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-links a::after{ display:none; }
  .menu-toggle[aria-expanded="true"]{ color:var(--gold); }
}
@media (max-width:480px){ .btn{ width:100%; justify-content:center; } }

/* =====================================================================
   RTL support (Arabic)
   ===================================================================== */
[dir="rtl"] .prose ul li { padding-left:0; padding-right:24px; }
[dir="rtl"] .prose ul li::before { left:auto; right:2px; }
[dir="rtl"] .prose ol { padding-left:0; padding-right:22px; }
[dir="rtl"] .prose h3::before { margin-right:0; margin-left:12px; }
[dir="rtl"] .nav-links a::after { left:auto; right:0; }
[dir="rtl"] .chip::after { content:"\2190"; }

/* =====================================================================
   Script-specific fonts
   ===================================================================== */
:lang(ar) { --serif:'Noto Naskh Arabic','Amiri',Georgia,serif; --sans:'Noto Sans Arabic','Inter',system-ui,sans-serif; }
:lang(zh) { --serif:'Noto Serif SC','Playfair Display',serif; --sans:'Noto Sans SC','Inter',system-ui,sans-serif; }
[lang="ar"] h1 em, [dir="rtl"] h1 em { font-style:normal; }