:root{
    --cream-1:#fdeed5; --cream-2:#ead5ba; --paper:#fff8ec;
    --ink:#351f06; --muted:#8a7256;
    --gold:#c9a15c; --gold-deep:#a67c3d; --gold-soft:rgba(201,161,92,.32);
    --noir:#0a0a0a; --noir-panel:#161310;
    --line-light: rgba(53,31,6,.14); --line-dark: rgba(201,161,92,.22);
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --max: 1120px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; font-family: var(--font-body); -webkit-font-smoothing:antialiased; background: var(--cream-1); }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width: var(--max); margin:0 auto; padding-left: clamp(20px,5vw,56px); padding-right: clamp(20px,5vw,56px); }
  section{ position:relative; padding: clamp(52px,7vw,84px) 0; }
  .center{ text-align:center; }

  .eyebrow{ font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; margin:0 0 16px; }
  .flourish{ display:flex; align-items:center; justify-content:center; gap:12px; margin: 14px 0 24px; }
  .flourish svg{ width:90px; height:18px; }

  h2{ font-family: var(--font-display); font-weight:600; font-size: clamp(26px,3.2vw,36px); line-height:1.2; margin:0 0 10px; }
  .section-sub{ font-size:14.5px; max-width:58ch; margin: 0 auto 32px; line-height:1.7; }

  /* ============ LIGHT (IVORY) ZONE ============ */
  .zone-light{ color: var(--ink); background: linear-gradient(180deg, var(--cream-1), var(--cream-2)); }
  .zone-light .eyebrow{ color: var(--gold-deep); }
  .zone-light .section-sub{ color: var(--muted); }
  .zone-light .flourish{ color: var(--gold-deep); }
  .zone-light .flourish::before, .zone-light .flourish::after{ content:""; width:40px; height:1px; background: var(--gold-deep); }

  .navbar{ position: sticky; top:0; z-index:30; padding: 16px 0; background: rgba(253,238,213,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-light); }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width: var(--max); margin:0 auto; padding: 0 clamp(20px,5vw,56px); }
  .brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:600; font-size:18px; }
  .brand-mark{ width:28px; height:28px; border-radius:50%; overflow:hidden; border: 1px solid var(--gold); }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; }
  .nav-links{ display:flex; gap:26px; font-size:13px; color: var(--muted); }
  .nav-links a{ text-decoration:none; }
  .nav-links a:hover{ color: var(--ink); }
  .nav-cta{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#2a1a05; font-weight:700; font-size:12.5px; text-decoration:none; }
  @media (max-width:760px){ .nav-links{ display:none; } }

  /* ---------- HERO (framed jewelry-box) ---------- */
  .hero{ padding-top: clamp(50px,7vw,80px); }
  .hero-frame{
    position:relative; border: 1px solid var(--gold-soft); border-radius:4px;
    padding: clamp(30px,5vw,56px) clamp(20px,4vw,40px); text-align:center;
  }
  .hero-frame::before, .hero-frame::after,
  .hero-frame .c2::before, .hero-frame .c2::after{ content:""; position:absolute; width:26px; height:26px; border-color: var(--gold); }
  .hero-frame::before{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
  .hero-frame::after{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; }
  .hero-frame .c2{ position:absolute; inset:0; }
  .hero-frame .c2::before{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; }
  .hero-frame .c2::after{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }

  .hero h1{ font-family: var(--font-display); font-weight:600; font-size: clamp(30px,4.4vw,46px); line-height:1.18; margin: 0 auto 6px; max-width:18ch; color: var(--ink); }
  .hero h1 em{ font-style:italic; color: var(--gold-deep); }
  .hero .sub{ font-size:16px; color: var(--muted); max-width:54ch; margin: 20px auto 30px; line-height:1.75; }
  .hero-actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
  .btn-gold{ display:inline-flex; align-items:center; gap:8px; padding:15px 30px; border-radius:999px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#2a1a05; font-weight:700; font-size:14.5px; text-decoration:none; box-shadow: 0 16px 30px rgba(166,124,61,.28); transition: transform .18s ease; }
  .btn-gold:hover{ transform: translateY(-2px); }
  .btn-outline{ display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px; border:1px solid var(--gold-deep); color: var(--gold-deep); font-weight:700; font-size:14px; text-decoration:none; transition: all .2s ease; }
  .btn-outline:hover{ background: var(--gold-deep); color:#fff8ec; }
  .trust-row{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; font-size:12px; color: var(--muted); }

  .hero-poster{ max-width:280px; margin: 40px auto 0; border-radius:8px; overflow:hidden; box-shadow: 0 30px 60px rgba(53,31,6,.25); border: 6px solid var(--paper); }

  /* ---------- AMBIENT SPARKLE MOTES (CSS-only, no JS, no touch dependency) ---------- */
  .sparkle-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .mote{ position:absolute; border-radius:50%; background: radial-gradient(circle, #fff, transparent 70%); animation: twinkle ease-in-out infinite; }
  .zone-dark .mote{ background: radial-gradient(circle, var(--gold), transparent 70%); }
  @keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.6); } 50%{ opacity:.95; transform:scale(1.2); } }
  @media (prefers-reduced-motion: reduce){ .mote{ animation:none; opacity:.4; } }

  /* rising motes inside the transition band, like dust lifting as the box opens */
  .rise-mote{ position:absolute; bottom:-10%; border-radius:50%; background: radial-gradient(circle, var(--gold), transparent 70%); animation: rise linear infinite; opacity:0; }
  @keyframes rise{ 0%{ transform: translateY(0); opacity:0; } 15%{ opacity:.8; } 85%{ opacity:.5; } 100%{ transform: translateY(-140%); opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .rise-mote{ animation:none; display:none; } }

  /* ---------- HERO FRAME ENGRAVING (SVG corners draw themselves in on load) ---------- */
  .hero-frame-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .hero-frame-svg path{
    fill:none; stroke: var(--gold); stroke-width:2; stroke-dasharray:80; stroke-dashoffset:80;
    animation: engrave 1s ease-out forwards;
  }
  .hero-frame-svg path:nth-child(2){ animation-delay:.15s; }
  .hero-frame-svg path:nth-child(3){ animation-delay:.3s; }
  .hero-frame-svg path:nth-child(4){ animation-delay:.45s; }
  @keyframes engrave{ to{ stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce){ .hero-frame-svg path{ animation:none; stroke-dashoffset:0; } }

  /* soft breathing glow on the moon-flourish glyph */
  .flourish svg{ animation: breathe 3.2s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{ opacity:.6; filter: drop-shadow(0 0 0 transparent); } 50%{ opacity:1; filter: drop-shadow(0 0 6px var(--gold-soft)); } }
  @media (prefers-reduced-motion: reduce){ .flourish svg{ animation:none; } }

  /* ---------- SCROLL REVEAL for salon cards (IntersectionObserver-driven) ---------- */
  .salon-card{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .salon-card.is-visible{ opacity:1; transform: translateY(0); }
  .salon-shot img{ transition: transform .4s ease; }
  .salon-card:hover .salon-shot img{ transform: scale(1.05); }
  @media (prefers-reduced-motion: reduce){ .salon-card{ opacity:1; transform:none; transition:none; } }

  /* ============ TRANSITION BAND (light -> dark) ============ */
  .transition{ height: clamp(140px,20vw,220px); background: linear-gradient(180deg, var(--cream-2), var(--noir)); }

  /* ============ DARK (SALON) ZONE ============ */
  .zone-dark{ background: var(--noir); color: #f1e9d8; }
  .zone-dark .eyebrow{ color: var(--gold); }
  .zone-dark .section-sub{ color: #b8a98c; }
  .zone-dark h2{ color: #f6ecd6; }
  .zone-dark .flourish{ color: var(--gold); }
  .zone-dark .flourish::before, .zone-dark .flourish::after{ content:""; width:40px; height:1px; background: var(--gold); }

  .salon-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
  .salon-card{ background: var(--noir-panel); border:1px solid var(--line-dark); border-radius:10px; overflow:hidden; }
  .salon-shot{ aspect-ratio: 4/5; overflow:hidden; }
  .salon-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; }
  .salon-body{ padding:16px 18px 20px; }
  .salon-card h3{ font-family: var(--font-display); font-weight:600; font-size:16.5px; margin:0 0 6px; color: var(--gold); }
  .salon-card p{ font-size:13px; color: #b8a98c; margin:0; line-height:1.6; }
  @media (max-width:900px){ .salon-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width:560px){ .salon-grid{ grid-template-columns: 1fr; } }

  /* ---------- FEATURE TILES (light zone, "Main sections inside the app") ---------- */
  .feature-tiles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
  .feature-tile{ background: var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:22px 24px; }
  .feature-tile h3{ font-family: var(--font-display); font-weight:600; font-size:18px; margin:0 0 8px; }
  .feature-tile h3 a{ text-decoration:none; color: var(--ink); }
  .feature-tile p{ font-size:14px; color: var(--muted); line-height:1.65; margin:0 0 10px; }
  .feature-tile .more{ font-size:13px; font-weight:700; text-decoration:none; color: var(--gold-deep); }
  @media (max-width:820px){ .feature-tiles{ grid-template-columns: 1fr; } }

  /* ---------- LINK CHIP CLUSTERS (reused in both zones) ---------- */
  .link-cluster-title{ font-family: var(--font-display); font-weight:600; font-size:16px; margin: 0 0 14px; }
  .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  .chip{ display:inline-flex; flex-direction:column; gap:2px; padding:10px 16px; border-radius:8px; text-decoration:none; }
  .zone-light .chip{ background: var(--paper); border:1px solid var(--line-light); }
  .zone-light .chip strong{ color: var(--ink); font-size:13.5px; }
  .zone-light .chip span{ color: var(--muted); font-size:11.5px; }
  .zone-light .chip:hover{ border-color: var(--gold); }
  .zone-dark .chip{ background: var(--noir-panel); border:1px solid var(--line-dark); }
  .zone-dark .chip strong{ color: var(--gold); font-size:13.5px; }
  .zone-dark .chip span{ color:#8f8471; font-size:11.5px; }
  .zone-dark .chip:hover{ border-color: var(--gold); }
  .cluster-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,48px); margin-top:10px; }
  @media (max-width:760px){ .cluster-row{ grid-template-columns:1fr; } }

  /* ---------- SUPPORT ---------- */
  .support-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  .support-box{ background: var(--paper); border:1px solid var(--line-light); border-radius:10px; padding:20px 22px; }
  .support-box strong{ display:block; margin-bottom:8px; font-family: var(--font-display); font-size:15px; }
  .support-box .note{ color: var(--muted); font-size:13.5px; }
  .support-box .pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .support-box .pill{ font-size:12.5px; font-weight:700; text-decoration:none; color: var(--gold-deep); border:1px solid var(--line-light); border-radius:999px; padding:6px 12px; }
  .support-box .pill:hover{ border-color: var(--gold); }
  @media (max-width:600px){ .support-row{ grid-template-columns:1fr; } }

  /* ============ TRANSITION BACK (dark -> light) ============ */
  .transition-back{ height: clamp(120px,16vw,180px); background: linear-gradient(180deg, var(--noir), var(--cream-2)); }

  /* ============ CLOSING CTA (light again) ============ */
  .cta-zone{ background: var(--cream-2); text-align:center; }
  .cta-zone p.lead{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size: clamp(20px,2.4vw,26px); color: var(--ink); max-width:36ch; margin: 0 auto 22px; line-height:1.5; }

  footer{ background: var(--cream-2); border-top:1px solid var(--line-light); padding: 28px 0; text-align:center; }
  .footer-inner{ font-size:12px; color: var(--muted); }
  .footer-inner a{ text-decoration:none; color: var(--muted); margin: 0 10px; }
  .footer-inner a:hover{ color: var(--ink); }

/* =========================================================================
   SUBPAGE MINI-HERO (light zone, deco-frame with real screenshot)
   ========================================================================= */
.mini-hero{ padding-top: clamp(40px,6vw,64px); text-align:center; }
.breadcrumb{ font-size:12px; color: var(--muted); margin-bottom:18px; }
.breadcrumb a{ text-decoration:none; color: var(--muted); }
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb .sep{ margin:0 8px; opacity:.5; }
.mini-hero .badge-pill{ display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:999px; background: var(--paper); border:1px solid var(--line-light); font-size:12.5px; font-weight:700; color: var(--gold-deep); margin-bottom:18px; }
.mini-hero h1{ font-family: var(--font-display); font-weight:600; font-size: clamp(26px,3.6vw,38px); line-height:1.26; margin: 0 auto 6px; max-width:24ch; color: var(--ink); }
.mini-hero .sub{ font-size:15.5px; color: var(--muted); max-width:58ch; margin: 20px auto 26px; line-height:1.75; }
.mini-hero-shot{ max-width:230px; margin: 8px auto 0; border-radius:8px; overflow:hidden; box-shadow: 0 26px 50px rgba(53,31,6,.22); border: 5px solid var(--paper); }

/* =========================================================================
   LEGACY CONTENT CLASSES
   These class names (.section, .split, .box, .tile, .grid3, .card, .note,
   .list, .pills, .pill, .btn) come straight from the existing Astera
   Oracle subpages. Rather than rewriting the markup of every subpage,
   those blocks are carried over as-is and restyled here so the content
   (feature boxes, FAQ, related-page links, CTA cards) survives 1:1.
   These render inside the DARK salon zone on subpages.
   ========================================================================= */
.zone-dark .section h2{ font-family: var(--font-display); font-weight:600; font-size: clamp(22px,2.8vw,28px); color: #f6ecd6; margin: 0 0 18px; text-align:left; }
.zone-dark .section > p.note{ color:#b8a98c; max-width:76ch; }

.split{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; margin-top:10px; }
.grid3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:10px; }
@media (max-width:760px){ .split{ grid-template-columns:1fr; } }
@media (max-width:820px){ .grid3{ grid-template-columns:1fr; } }

.zone-dark .box, .zone-dark .tile, .zone-dark .card{
  background: var(--noir-panel); border:1px solid var(--line-dark); border-radius:10px; padding:18px 20px;
  opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.zone-dark .box.is-visible, .zone-dark .tile.is-visible, .zone-dark .card.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .zone-dark .box, .zone-dark .tile, .zone-dark .card{ opacity:1; transform:none; transition:none; }
}
.zone-dark .box strong, .zone-dark .tile h3{ font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--gold); display:block; margin-bottom:8px; }
.zone-dark .tile p{ color:#b8a98c; font-size:13.5px; line-height:1.7; margin:0; }
.zone-dark .box .note{ color:#b8a98c; font-size:13.5px; line-height:1.65; }
.zone-dark a.box{ text-decoration:none; display:block; transition: border-color .2s ease; }
.zone-dark a.box:hover{ border-color: var(--gold); }

.list{ margin:14px 0 0; padding-left:20px; }
.zone-light .list{ color: var(--muted); }
.zone-dark .list{ color:#b8a98c; }
.list li{ margin-bottom:6px; line-height:1.65; font-size:14.5px; }

.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.zone-dark .pill{ font-size:12.5px; font-weight:700; text-decoration:none; color: var(--gold); border:1px solid var(--line-dark); border-radius:999px; padding:6px 12px; }
.zone-dark .pill:hover{ border-color: var(--gold); background: var(--noir-panel); }

.zone-dark .card{ padding:22px; }
.zone-dark .card h2{ margin-top:0; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:700; font-size:13.5px; text-decoration:none; transition: all .2s ease; }
.zone-dark .btn{ border:1px solid var(--line-dark); color:#e9dfc8; }
.zone-dark .btn:hover{ border-color: var(--gold); color: var(--gold); }
.zone-dark .btn.btn-primary{ border:none; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#1c1204; }
.zone-dark .btn.btn-primary:hover{ filter: brightness(1.06); }
.zone-light .btn{ border:1px solid var(--line-light); color: var(--ink); }
.zone-light .btn:hover{ border-color: var(--gold); }
.zone-light .btn.btn-primary{ border:none; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color:#1c1204; }