/* ============================================================
   OBSIDIAN — FACE layer (owner concept, Oct 31 2026)
   The crystal reskin for the Obsidian face pages ONLY:
   index, obsidian-domains, reseller, builder, marketplace, style.
   Scoped to body.face so every other lane (checkout, login,
   domain search, bookstore, games, preview) keeps its skin.
   Palette: obsidian black + OBSIDIAN BLUE #2563eb (the --cyan legacy
   token carries the Pay board blue here — audit D13, Nov 3 2026:
   town red does not accent the Obsidian storefront).
   ============================================================ */
body.face{
  --cyan:#2563eb; --royal:#2563eb; --purple:#2563eb;
  --red:#2563eb; --red-hot:#1597ec; --red-deep:#1e3a8a;
}
body.face ::selection{background:#2563eb;color:#fff}

/* ---------- brand + top bar ---------- */
body.face .brand .mark{
  background:linear-gradient(160deg,#0a1a33 0%,#2563eb 55%,#12275e 100%);
  clip-path:polygon(50% 0,100% 28%,82% 100%,18% 100%,0 28%);
  border-radius:0;font-size:0;color:transparent;
  box-shadow:0 0 18px rgba(37,99,235,.55);
}
body.face .topbar{background:rgba(4,4,6,.94);border-bottom:1px solid #1d1d26}
body.face .btn-primary:hover{background:#1d4ed8}
body.face .lang-toggle button.on{background:var(--red)}

/* ---------- concept hero (homepage) ---------- */
.fx-hero{position:relative;overflow:hidden;text-align:left;
  padding:64px 0 46px;border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 520px at 78% 30%,rgba(37,99,235,.20),transparent 60%),
             linear-gradient(180deg,#050507 0%,#0a0508 55%,#060609 100%)}
.fx-art{position:absolute;inset:0;pointer-events:none}
.fx-art svg{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  height:118%;max-width:none;opacity:.95}
.fx-art .fx-glowring{transform-origin:center;animation:fxpulse 5.5s ease-in-out infinite}
@keyframes fxpulse{0%,100%{opacity:.55}50%{opacity:1}}
.fx-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,7,.93) 0%,rgba(5,5,7,.72) 44%,rgba(5,5,7,.05) 78%)}
.fx-hero-in{position:relative;z-index:2}
.fx-kicker{display:inline-flex;align-items:center;gap:9px;color:#a9ccff;
  font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.fx-kicker::before{content:"";width:26px;height:3px;background:var(--red-hot);border-radius:2px}
.fx-hero h1{font-size:clamp(40px,6.4vw,76px);font-weight:900;margin:16px 0 6px;max-width:640px}
.fx-hero h1 .r{color:var(--red-hot)}
.fx-hero .fx-motto{font-size:clamp(21px,3vw,30px);font-weight:800;color:#fff;margin:8px 0 12px}
.fx-hero p.sub{color:var(--muted);font-size:16.5px;max-width:520px;margin:0}
.fx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fx-cta .btn-primary{box-shadow:0 12px 34px rgba(37,99,235,.45)}
.fx-hero .searchbar{margin:30px 0 0;max-width:700px;background:rgba(13,13,19,.88);
  border:1px solid #2c2c38;box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(8px)}
.fx-hero .searchbar input{color:#fff}
.fx-hero .searchbar input::placeholder{color:#8a8a93}
.fx-hero .trustline{text-align:left}
.fx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:2}
.fx-chips .chip{background:rgba(10,10,14,.82);border:1px solid #34343f;color:#fff;
  border-radius:14px;padding:10px 18px;font-size:17px;font-weight:900;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(0,0,0,.5)}
.fx-chips .chip b{color:var(--red-hot);font-size:13px;font-weight:800;margin-left:7px;letter-spacing:.02em}
@media(min-width:1024px){
  .fx-chips{position:absolute;inset:0;z-index:1;display:block;margin:0}
  .fx-chips .chip{position:absolute;animation:fxfloat 7s ease-in-out infinite}
  .fx-chips .chip:nth-child(1){top:15%;right:31%}
  .fx-chips .chip:nth-child(2){top:33%;right:36.5%}
  .fx-chips .chip:nth-child(3){top:52%;right:33%}
  .fx-chips .chip:nth-child(4){top:24%;right:12.5%}
  .fx-chips .chip:nth-child(5){top:44%;right:9%}
}
@keyframes fxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:700px){.fx-art svg{right:-190px;opacity:.5}.fx-hero{padding:48px 0 40px}}
@media(prefers-reduced-motion:reduce){.fx-art .fx-glowring,.fx-chips .chip{animation:none}}

/* ---------- task tiles ---------- */
.fx-sec{padding:38px 0 6px}
.fx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(min-width:900px){.fx-tiles{grid-template-columns:repeat(6,1fr);gap:14px}}
.fx-tile{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  background:linear-gradient(180deg,#16161f,#101016);border:1px solid #26262f;
  border-radius:18px;padding:22px 10px 18px;color:#fff;text-decoration:none;font-weight:800;font-size:14.5px;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.fx-tile i{font-size:24px;color:var(--red-hot)}
.fx-tile small{display:block;color:#6d6d78;font-weight:600;font-size:11.5px;margin-top:2px}
.fx-tile:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 16px 34px rgba(0,0,0,.5)}

/* ---------- trending + builder promo row ---------- */
.fx-duo{display:grid;gap:16px;margin-top:16px}
@media(min-width:900px){.fx-duo{grid-template-columns:1fr 1.15fr}}
.fx-panel{background:linear-gradient(180deg,#16161f,#101016);border:1px solid #26262f;
  border-radius:22px;padding:22px;overflow:hidden}
.fx-panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.fx-panel-h h3{font-size:19px;font-weight:900}
.fx-panel-h h3 i{color:var(--red-hot);margin-right:8px}
.fx-panel-h a{color:#fff;font-weight:800;font-size:13.5px;text-decoration:none;white-space:nowrap}
.fx-panel-h a:hover{color:var(--red-hot)}
.fx-note{color:#6d6d78;font-size:12.5px;font-weight:600;margin:2px 0 10px}
.fx-trow{display:flex;align-items:center;gap:12px;padding:12px 6px;border-top:1px solid #26262f;
  color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.fx-trow:first-of-type{border-top:none}
.fx-trow i.fa-globe{color:var(--faint)}
.fx-trow .fx-price{margin-left:auto;font-weight:900}
.fx-trow .fx-price small{color:#6d6d78;font-weight:600;font-size:12px}
.fx-trow .fx-go{background:var(--red);color:#fff;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:900}
.fx-trow:hover .fx-dom{color:var(--red-hot)}
.fx-promo{position:relative;border-radius:22px;overflow:hidden;border:1px solid #3a1a1e;
  background:radial-gradient(600px 300px at 85% 20%,rgba(224,51,59,.35),transparent 60%),linear-gradient(120deg,#12060a,#1c0a10);
  padding:26px;display:flex;flex-direction:column;justify-content:center;min-height:230px}
.fx-promo img{position:absolute;right:0;top:0;height:100%;width:52%;object-fit:cover;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.fx-promo-in{position:relative;z-index:1;max-width:56%}
.fx-promo h3{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.08}
.fx-promo p{color:#d8c9cb;margin:10px 0 18px;font-size:15px;max-width:340px}
.fx-badge{position:absolute;top:16px;right:16px;z-index:2;background:var(--red);color:#fff;
  font-weight:900;font-size:12px;letter-spacing:.08em;padding:7px 12px;border-radius:10px;transform:rotate(2deg)}
@media(max-width:700px){.fx-promo-in{max-width:100%}.fx-promo img{opacity:.22;width:100%}}

/* ---------- trust strip ---------- */
.fx-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px;margin-top:30px;
  border-top:1px solid #26262f;padding:22px 0 4px}
@media(min-width:900px){.fx-trust{grid-template-columns:repeat(4,1fr)}}
.fx-trust div{display:flex;gap:12px;align-items:flex-start}
.fx-trust i{font-size:21px;color:var(--red-hot);margin-top:3px}
.fx-trust b{display:block;font-size:15px}
.fx-trust span{color:#a7a7b3;font-size:13px;font-weight:600}

/* ---------- join bar (above footer, face pages) ---------- */
.fx-join{margin-top:44px;border-top:1px solid #26262f;background:linear-gradient(180deg,#0a0a10,#060609)}
.fx-join-in{max-width:var(--maxw);margin:0 auto;padding:22px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fx-join .fx-join-copy{color:var(--muted);font-weight:600;font-size:14px}
.fx-join .fx-soc{margin-left:auto;display:flex;align-items:center;gap:10px}
.fx-join .fx-soc a{width:40px;height:40px;border-radius:50%;border:1px solid #26262f;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:16px}
.fx-join .fx-soc a:hover{border-color:var(--red);color:var(--red-hot)}

/* ---------- subpage heroes inherit the crystal mood ---------- */
body.face .hero{background:radial-gradient(900px 420px at 80% 0%,rgba(37,99,235,.16),transparent 60%)}
body.face .page-head h1 span{color:var(--red-hot)!important}
body.face .badge{background:rgba(37,99,235,.16);color:#a9ccff}

/* ---------- theme pins ----------
   clone.js defaults phone-width screens to the LIGHT theme
   (html[data-theme="light"]: white page, near-black text).
   The face components are dark islands by design — like the
   beat layer — so their text colors are pinned here, or the
   light theme would put black text on the crystal hero. */
body.face .fx-hero{color:#fff}
body.face .fx-hero p.sub{color:#a7a7b3}
body.face .fx-hero .trustline{color:#6d6d78}
body.face .fx-panel{color:#fff}
body.face .fx-promo{color:#fff}
body.face .fx-trust{color:#fff}
body.face .fx-join .brand{color:#fff}
body.face .fx-join .fx-join-copy{color:#a7a7b3}
html[data-theme="light"] body.face .hero .promo{color:#2563eb;border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.08)}
html[data-theme="light"] body.face .fx-tile small{color:#6d6d78}

/* ghost buttons sit on the dark hero in both themes */
body.face .fx-hero .btn-ghost{color:#fff;border-color:#3a3a46}
body.face .fx-hero .btn-ghost:hover{border-color:var(--red-hot);color:#fff}