/*
Theme Name: Joydea
Template: joydea-base
Description: Joydea child theme for joydea.com. Generated by provision.py; brand values live in the site config.
Version: 1.0.0
Text Domain: joydea-joydea
*/


/* ===== Orbit: joydea.com design layer ===== */
:root { --ob-bg:#070A14; --ob-bg2:#0E1430; --ob-ink:#EAE7DF; --ob-muted:rgba(234,231,223,0.66); --ob-gold:#F2C14E; --ob-gold2:#FFD97A; --ob-blue:#4F6BFF; --ob-blue2:#7FA6FF; --ob-line:rgba(255,255,255,0.08); }
body { background: var(--ob-bg); color: var(--ob-ink); }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:
  radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(1px 1px at 28% 72%, rgba(255,255,255,.7) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 44% 30%, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(1px 1px at 63% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
  radial-gradient(1px 1px at 71% 58%, rgba(255,255,255,.9) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 36%, rgba(255,255,255,.7) 50%, transparent 51%),
  radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.5) 50%, transparent 51%),
  radial-gradient(1px 1px at 52% 90%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1px 1px at 36% 50%, rgba(255,255,255,.5) 50%, transparent 51%); }
.wp-site-blocks { background: transparent; }
.ob-wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.ob-narrow { max-width: 760px; margin: 0 auto; }
h1,h2,h3,.ob-h1,.ob-h2 { font-family: var(--wp--preset--font-family--heading); letter-spacing:-0.02em; line-height:1.05; color: var(--ob-ink); }
.ob-h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); margin: 0.6rem 0 1.2rem; font-weight: 700; }
.ob-h2 { font-size: clamp(1.8rem, 3vw, 2.75rem); margin: 0.5rem 0 1rem; font-weight: 700; }
.ob-eyebrow { display:block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ob-gold); font-weight:600; }
.ob-lead, .ob-intro { color: var(--ob-muted); font-size: 1.15rem; line-height: 1.65; margin: 0 0 1.5rem; }
.ob-intro { font-size: 1.05rem; }
.ob-head.ob-center, .ob-narrow.ob-center { text-align:center; } .ob-center .ob-intro { margin-left:auto; margin-right:auto; max-width:600px; }
.ob-section { padding: 5.5rem 0; }
.ob-section.ob-tight { padding-top: 3rem; }
.ob-two { display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center; }
.ob-stack { display:flex; flex-direction:column; gap:1rem; }
.ob-grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ob-card { background: rgba(255,255,255,0.04); border:1px solid var(--ob-line); border-radius: 22px; }
.ob-btns { display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; }
.ob-btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding: .95rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.ob-btn:hover { transform: translateY(-1px); }
.ob-btn-gold { background: var(--ob-gold); color:#14110A; } .ob-btn-gold:hover { background: var(--ob-gold2); color:#14110A; }
.ob-btn-ghost { border:1px solid rgba(234,231,223,.3); color: var(--ob-ink); } .ob-btn-ghost:hover { border-color: var(--ob-gold); color: var(--ob-gold); }
.ob-ic { width:18px; height:18px; flex:0 0 auto; }
.ob-link { color: var(--ob-gold); font-weight:600; text-decoration:none; } .ob-link:hover { color: var(--ob-gold2); }
.ob-num { font-family: var(--wp--preset--font-family--heading); color: var(--ob-gold); font-size:.8rem; font-weight:700; }
.ob-list { list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-direction:column; gap:.6rem; }
.ob-list li { display:flex; gap:.7rem; align-items:flex-start; color: var(--ob-ink); font-size:.98rem; }
.ob-list .ob-ic { color: var(--ob-gold); margin-top:2px; }

/* hero */
.ob-hero { position:relative; overflow:hidden; }
.ob-hero-home { padding: 4.5rem 0 3rem; }
.ob-hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items:center; }
.ob-hero-copy .ob-lead { max-width: 520px; }
.ob-stats { display:flex; gap:2rem; margin-top:1.8rem; flex-wrap:wrap; }
.ob-stat-n { font-family: var(--wp--preset--font-family--heading); font-weight:700; font-size:1.35rem; color: var(--ob-gold); }
.ob-stat-l { font-size:.8rem; color: var(--ob-muted); }
.ob-system { position:relative; height: 560px; }
@keyframes ob-spin { to { transform: rotate(360deg); } } @keyframes ob-spinr { to { transform: rotate(-360deg); } }
@keyframes ob-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ob-ring { position:absolute; border-radius:50%; border:1px solid rgba(242,193,78,.28); }
.ob-orb { position:absolute; border-radius:50%; display:block; }
.ob-orb-gold { width:22px; height:22px; background:var(--ob-gold); box-shadow:0 0 24px var(--ob-gold); left:50%; top:-11px; margin-left:-11px; }
.ob-orb-blue { width:14px; height:14px; background:var(--ob-blue2); box-shadow:0 0 18px var(--ob-blue2); left:10%; top:80%; }
.ob-orb-white { width:10px; height:10px; background:var(--ob-ink); left:92%; top:25%; }
.ob-ring-1 { width:520px; height:520px; left:calc(50% - 260px); top:20px; animation: ob-spin 60s linear infinite; }
.ob-ring-2 { width:380px; height:380px; left:calc(50% - 190px); top:90px; animation: ob-spinr 42s linear infinite; border-color: rgba(127,166,255,.35); }
.ob-ring-3 { width:240px; height:240px; left:calc(50% - 120px); top:160px; animation: ob-spin 28s linear infinite; border-color: rgba(234,231,223,.25); }
.ob-planet { position:absolute; left:calc(50% - 80px); top:200px; width:160px; height:160px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #4F6BFF 0%, #1C2A6B 55%, #0B1030 100%); box-shadow: 0 0 80px rgba(79,107,255,.35), inset -20px -20px 40px rgba(0,0,0,.5); animation: ob-drift 7s ease-in-out infinite; }
.ob-chip { position:absolute; display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1rem; font-size:.82rem; font-weight:600; background: rgba(14,20,48,.85); border:1px solid var(--ob-line); border-radius:14px; backdrop-filter: blur(6px); white-space:nowrap; color: var(--ob-ink); }
.ob-chip.is-gold { border-color: rgba(242,193,78,.5); }
.ob-dot { width:8px; height:8px; border-radius:50%; display:block; }
.ob-chip-a { left:0; top:430px; } .ob-chip-b { right:0; top:40px; } .ob-chip-c { right:-10px; top:480px; }
.ob-hero-page { padding: 4rem 0 4.5rem; text-align:center; }
.ob-hero-page-inner { max-width: 820px; } .ob-hero-page-inner .ob-lead { margin-left:auto; margin-right:auto; max-width:640px; }
.ob-hero-page .ob-btns { justify-content:center; }
.ob-ring-deco { width:420px; height:420px; right:-160px; top:-200px; animation: ob-spin 50s linear infinite; pointer-events:none; }

/* marquee */
.ob-marquee { overflow:hidden; border-top:1px solid var(--ob-line); border-bottom:1px solid var(--ob-line); padding:1rem 0; }
.ob-mq-track { display:flex; gap:3rem; white-space:nowrap; width:max-content; animation: ob-slide 32s linear infinite; font-family: var(--wp--preset--font-family--heading); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(234,231,223,.5); }
.ob-mq-dot { color: var(--ob-gold); }
@keyframes ob-slide { to { transform: translateX(-50%); } }

/* problems / features */
.ob-problem { padding:1.4rem 1.6rem; display:flex; gap:1.1rem; align-items:flex-start; }
.ob-problem .ob-num { margin-top:4px; }
.ob-problem-t { font-weight:600; font-size:1.05rem; } .ob-problem-d { color: var(--ob-muted); font-size:.95rem; margin-top:.35rem; }
.ob-feature { padding:1.8rem; display:flex; flex-direction:column; gap:.6rem; }
.ob-feature h3 { font-size:1.2rem; margin:.3rem 0 0; } .ob-feature p { margin:0; color: var(--ob-muted); font-size:.97rem; }

/* prices */
.ob-prices { align-items:end; margin-top: 3rem; }
.ob-price { padding:2.2rem; display:flex; flex-direction:column; gap:1rem; position:relative; }
.ob-price.is-featured { border-color: rgba(242,193,78,.5); background: linear-gradient(180deg, rgba(242,193,78,.10), rgba(255,255,255,.03)); padding-top:2.8rem; }
.ob-badge { position:absolute; top:-14px; left:2.2rem; background: var(--ob-gold); color:#14110A; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.ob-pl { border-radius:50%; width:72px; height:72px; position:relative; }
.ob-pl-blue { background: radial-gradient(circle at 35% 30%, #9AB0FF, #2B3B8F 70%); box-shadow:0 0 40px rgba(79,107,255,.3); }
.ob-pl-gold { width:104px; height:104px; background: radial-gradient(circle at 35% 30%, #FFE29A, #C48A12 70%); box-shadow:0 0 60px rgba(242,193,78,.35); }
.ob-pl-grey { width:88px; height:88px; background: radial-gradient(circle at 35% 30%, #F0EDE6, #6E6A60 70%); }
.ob-pl-grey i { position:absolute; inset:30px -18px; border:2px solid rgba(234,231,223,.5); border-radius:50%; transform: rotate(-20deg); }
.ob-pl-small { width:56px; height:56px; background: radial-gradient(circle at 35% 30%, #B8C4FF, #3A4BA8 70%); }
.ob-price-name { font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color: rgba(234,231,223,.6); }
.is-featured .ob-price-name { color: var(--ob-gold); }
.ob-price-amt { font-family: var(--wp--preset--font-family--heading); font-weight:700; font-size:2rem; line-height:1.1; }
.is-featured .ob-price-amt { font-size:2.4rem; }
.ob-price-who { color: var(--ob-muted); margin:0; font-size:.97rem; }
.ob-price .ob-list { flex:1; margin-bottom:.5rem; }
.ob-price-note { color: var(--ob-muted); font-size:.85rem; margin:0 0 .5rem; }

/* care orbit */
.ob-two-rev { grid-template-columns: 1.1fr .9fr; }
.ob-care-art { position:relative; height:520px; }
.ob-cr-1 { width:480px; height:480px; left:calc(50% - 240px); top:20px; border-color: rgba(255,255,255,.12); }
.ob-cr-2 { width:330px; height:330px; left:calc(50% - 165px); top:95px; border-color: rgba(255,255,255,.12); }
.ob-cr-3 { width:180px; height:180px; left:calc(50% - 90px); top:170px; border-color: rgba(255,255,255,.12); }
.ob-care-core { position:absolute; left:calc(50% - 30px); top:230px; width:60px; height:60px; }
.ob-care-a { left:calc(50% + 40px); top:150px; } .ob-care-b { left:calc(50% - 220px); top:240px; } .ob-care-c { left:calc(50% + 100px); top:400px; }

/* steps */
.ob-steps { list-style:none; margin: 3rem 0 0; padding:0; display:grid; grid-template-columns: repeat(4, 1fr); gap:1.25rem; }
.ob-step { padding:1.6rem; display:flex; flex-direction:column; gap:.7rem; }
.ob-step-n { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-family: var(--wp--preset--font-family--heading); font-weight:700; color:#14110A; background: var(--ob-gold); }
.ob-step h3 { margin:.2rem 0 0; font-size:1.1rem; } .ob-step p { margin:0; color: var(--ob-muted); font-size:.95rem; }

/* demos */
.ob-demo { overflow:hidden; text-decoration:none; color:inherit; display:block; transition: transform .18s, border-color .18s; }
.ob-demo:hover { transform: translateY(-4px); border-color: rgba(242,193,78,.4); }
.ob-demo-frame { height:220px; padding:18px; background: linear-gradient(160deg, var(--tint), #070A14 160%); }
.ob-demo-screen { background: rgba(255,255,255,.92); border-radius:10px 10px 0 0; height:100%; padding:14px; display:flex; flex-direction:column; gap:8px; }
.ob-demo-bar { display:block; height:8px; background: var(--tint); border-radius:4px; }
.ob-demo-block { display:block; height:40px; background:#E6EBF5; border-radius:6px; }
.ob-demo-row { display:grid; grid-template-columns: repeat(3,1fr); gap:6px; } .ob-demo-row i { display:block; height:28px; background:#E6EBF5; border-radius:4px; }
.ob-demo-text { padding:1.4rem 1.5rem; } .ob-demo-text h3 { font-size:1.15rem; margin:.4rem 0 .4rem; } .ob-demo-text p { margin:0; color: var(--ob-muted); font-size:.95rem; }
.ob-demo-text .ob-eyebrow { font-size:11px; }

/* cta */
.ob-cta { position:relative; overflow:hidden; padding: 4.5rem 5rem; border-radius:32px; border:1px solid var(--ob-line); background: radial-gradient(600px 300px at 20% 0%, rgba(79,107,255,.35), transparent 70%), radial-gradient(500px 300px at 90% 100%, rgba(242,193,78,.25), transparent 70%), var(--ob-bg2); display:flex; justify-content:space-between; align-items:center; gap:2.5rem; }
.ob-cta .ob-head { max-width:640px; } .ob-cta .ob-intro { margin-bottom:0; } .ob-cta .ob-btn { flex:0 0 auto; font-size:1.05rem; padding:1.2rem 2rem; }
.ob-cta-ring { width:300px; height:300px; right:-80px; top:-120px; animation: ob-spin 50s linear infinite; pointer-events:none; }

/* faq */
.ob-faq { border-top:1px solid var(--ob-line); padding:1.1rem 0; }
.ob-faq:last-of-type { border-bottom:1px solid var(--ob-line); }
.ob-faq summary { cursor:pointer; font-weight:600; font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.ob-faq summary::after { content:"+"; color: var(--ob-gold); font-size:1.4rem; } .ob-faq[open] summary::after { content:"–"; }
.ob-faq p { color: var(--ob-muted); margin:.8rem 0 0; }

/* contact form */
.ob-form { padding:2rem; background: rgba(255,255,255,.05); }
.ob-form input, .ob-form textarea, .ob-form select { background: rgba(255,255,255,.06) !important; border:1px solid var(--ob-line) !important; color: var(--ob-ink) !important; border-radius:10px !important; }
.ob-form label { color: var(--ob-ink); }
.ob-form .ff-btn-submit, .ob-form button[type=submit] { background: var(--ob-gold) !important; color:#14110A !important; border:0 !important; border-radius:999px !important; font-weight:600; padding:.9rem 1.6rem !important; }

/* header and footer (base theme parts, re-skinned) */
.jd-header { background: rgba(7,10,20,.85) !important; border-bottom:1px solid var(--ob-line); }
.jd-header .wp-block-site-title a, .jd-header .wp-block-navigation a { color: var(--ob-ink); }
.jd-header .wp-block-site-title { font-family: var(--wp--preset--font-family--heading); }
.jd-header .wp-block-navigation a:hover { color: var(--ob-gold); text-decoration:none; }
.jd-header .jd-header-cta .wp-block-button__link { background: var(--ob-gold); color:#14110A; border-radius:999px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--ob-bg) !important; color: var(--ob-ink) !important; }
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--ob-ink) !important; }
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--ob-ink) !important; }
.jd-footer { background: var(--ob-bg) !important; border-top:1px solid var(--ob-line); color: var(--ob-muted) !important; }
.jd-footer .has-base-color, .jd-footer a, .jd-footer h4, .jd-footer .wp-block-site-title a { color: var(--ob-ink) !important; }
.jd-footer .jd-eyebrow { color: var(--ob-gold) !important; }
.jd-footer p, .jd-footer .wp-block-site-tagline, .jd-footer .has-neutral-300-color, .jd-footer .jd-footer-contact p { color: var(--ob-muted) !important; }
.jd-footer a:hover { color: var(--ob-gold) !important; }

/* generic dark overrides for any leftover core blocks on the site */
.has-base-background-color { background-color: var(--ob-bg) !important; }
.has-surface-background-color { background-color: var(--ob-bg2) !important; }
.has-neutral-600-color { color: var(--ob-muted) !important; }
.entry-content a:not(.ob-btn):not(.ob-demo) { color: var(--ob-gold); }

/* responsive */
@media (max-width: 1000px) {
  .ob-hero-grid, .ob-two, .ob-two-rev { grid-template-columns: 1fr; }
  .ob-system { height: 420px; transform: scale(.78); transform-origin: top center; margin-bottom:-60px; }
  .ob-grid-3 { grid-template-columns: 1fr; } .ob-steps { grid-template-columns: repeat(2,1fr); }
  .ob-cta { flex-direction:column; align-items:flex-start; padding:3rem 2rem; }
  .ob-care-art { transform: scale(.75); transform-origin: top center; height: 400px; }
}
@media (max-width: 600px) {
  .ob-section { padding: 3.5rem 0; } .ob-steps { grid-template-columns: 1fr; }
  .ob-system { transform: scale(.58); height: 330px; margin-bottom:-90px; } .ob-chip-c { right: 20px; }
  .ob-stats { gap:1.2rem; } .ob-wrap { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .ob-ring, .ob-planet, .ob-mq-track { animation: none !important; } }

.ob-prices-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left:auto; margin-right:auto; }