:root {
  --bg: #070b14;
  --bg-soft: rgba(18, 24, 42, 0.72);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-strong: rgba(255, 255, 255, 0.1);
  --text: #eef2ff;
  --muted: #9aa7c2;
  --line: rgba(255, 255, 255, 0.09);
  --purple: #9b5cff;
  --cyan: #2dd4ff;
  --pink: #ff4db8;
  --green: #56f39a;
  --gradient: linear-gradient(135deg, var(--purple), var(--cyan) 55%, var(--pink));
  --gradient-soft: linear-gradient(135deg, rgba(155,92,255,.22), rgba(45,212,255,.18), rgba(255,77,184,.16));
  --shadow: 0 24px 80px rgba(0,0,0,.38);
  --glow: 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(45,212,255,.08), 0 20px 60px rgba(155,92,255,.1);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --container: 1240px;
  --ease: 240ms cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(155,92,255,.18), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(45,212,255,.16), transparent 24%),
    radial-gradient(circle at 70% 70%, rgba(255,77,184,.12), transparent 22%),
    linear-gradient(180deg, #0a0e18, #070b14 36%, #04070d);
  min-height: 100vh;
}
body.admin-bar .topbar { top: 32px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
.container { width: min(calc(100% - 32px), var(--container)); margin: 0 auto; }
.section { padding: 88px 0; position: relative; }
.site-main { min-height: 40vh; }
.section-title { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.04; margin: 0 0 14px; letter-spacing: -0.04em; }
.section-copy, .entry-content, .entry-content p { color: var(--muted); max-width: 760px; font-size: 1.02rem; line-height: 1.75; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#d7def7; font-size:.88rem; backdrop-filter: blur(14px); }
.eyebrow::before { content:""; width:10px; height:10px; border-radius:50%; background: var(--gradient); box-shadow: 0 0 16px rgba(45,212,255,.8); }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow), var(--glow); backdrop-filter: blur(18px); }
.card { border-radius: var(--radius-lg); padding: 24px; }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 20px; border-radius:16px; border:1px solid transparent; font-weight:700; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease); cursor:pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gradient); color:white; box-shadow:0 18px 44px rgba(155,92,255,.28); }
.btn-secondary { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: var(--text); }
.btn-ghost { background:transparent; border-color:rgba(255,255,255,.14); color:var(--muted); }
.pill, .chip { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); color:#dce5ff; font-size:.92rem; }
.gradient-text { background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topbar { position: sticky; top: 0; z-index: 20; padding: 16px 0; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(7,11,20,.86), rgba(7,11,20,.4)); border-bottom: 1px solid rgba(255,255,255,.06); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:42px; height:42px; border-radius:14px; position:relative; background:var(--gradient); box-shadow:0 14px 30px rgba(155,92,255,.35); }
.brand-mark::after { content:""; position:absolute; inset:3px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.03)); }
.nav-links, .nova-inline-menu { display:flex; gap:10px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-links a, .nova-inline-menu a { padding:12px 14px; border-radius:12px; color:var(--muted); transition: var(--ease); }
.nav-links a:hover, .nova-inline-menu a:hover, .current-menu-item > a { color:var(--text); background:rgba(255,255,255,.06); }
.mobile-toggle { display:none; width:46px; height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:white; align-items:center; justify-content:center; }
.mobile-menu { display:none; padding-top:14px; }
.mobile-menu .glass { padding:14px; border-radius:18px; }
.nova-mobile-menu, .nova-mobile-menu ul { list-style:none; margin:0; padding:0; }
.nova-mobile-menu a { display:block; padding:14px 10px; color:var(--muted); }
.hero { min-height: calc(100vh - 76px); display:grid; align-items:center; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.hero-copy h1 { font-size: clamp(3rem, 6vw, 6.1rem); line-height:.96; margin:18px 0 16px; letter-spacing:-.06em; }
.hero-copy p { font-size:1.08rem; color:var(--muted); max-width:680px; }
.hero-meta { display:flex; gap:12px; flex-wrap:wrap; margin:24px 0 34px; }
.hero-visual { position:relative; min-height:680px; border-radius:34px; overflow:hidden; isolation:isolate; }
.hero-visual::before { content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(7,11,20,.55), rgba(7,11,20,.18)), radial-gradient(circle at 20% 25%, rgba(155,92,255,.55), transparent 30%), radial-gradient(circle at 80% 30%, rgba(45,212,255,.45), transparent 26%), radial-gradient(circle at 60% 75%, rgba(255,77,184,.34), transparent 24%), linear-gradient(135deg, #111827, #1f2937 32%, #111827 64%, #0f172a); }
.collage { position:absolute; inset:0; padding:22px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); gap:14px; }
.art-tile { position:relative; border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow:0 20px 40px rgba(0,0,0,.28); }
.art-tile::before { content:""; position:absolute; inset:0; background: var(--tile-bg, linear-gradient(135deg, #5b21b6, #0f172a 55%, #06b6d4)); opacity:.95; }
.art-tile::after { content: attr(data-label); position:absolute; left:16px; bottom:16px; padding:8px 12px; border-radius:999px; font-size:.78rem; color:white; background:rgba(7,11,20,.48); border:1px solid rgba(255,255,255,.12); }
.tile-1 { grid-column:span 2; grid-row:span 2; --tile-bg: linear-gradient(135deg, #6d28d9, #1e293b 55%, #22d3ee); }
.tile-2 { grid-row:span 2; --tile-bg: linear-gradient(135deg, #db2777, #111827 60%, #8b5cf6); }
.tile-3 { grid-row:span 3; --tile-bg: linear-gradient(135deg, #0ea5e9, #1f2937 62%, #f472b6); }
.tile-4 { grid-column:span 2; grid-row:span 2; --tile-bg: linear-gradient(135deg, #7c3aed, #0f172a 50%, #ec4899); }
.tile-5 { --tile-bg: linear-gradient(135deg, #f472b6, #0f172a 60%, #22d3ee); }
.tile-6 { grid-column:span 2; --tile-bg: linear-gradient(135deg, #22d3ee, #111827 50%, #8b5cf6); }
.profile-badge { position:absolute; left:22px; top:22px; right:22px; display:flex; justify-content:space-between; gap:16px; z-index:2; }
.profile-card { display:flex; align-items:center; gap:14px; padding:12px; border-radius:20px; min-width:260px; }
.avatar { width:62px; height:62px; border-radius:18px; background:linear-gradient(135deg, #f0abfc, #22d3ee); box-shadow:0 12px 28px rgba(34,211,238,.22); position:relative; }
.avatar::before { content:""; position:absolute; inset:2px; border-radius:16px; background: radial-gradient(circle at 45% 30%, #ffd9f8, #5b21b6 70%); }
.floating-panel { position:absolute; right:22px; bottom:22px; z-index:2; max-width:300px; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat-box { padding:18px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.stat-box strong { display:block; font-size:1.8rem; }
.about-grid, .feature-grid, .testimonial-grid, .stats-grid, .contact-grid, .payments-grid, .policy-grid { display:grid; gap:18px; }
.about-grid { grid-template-columns:1.2fr .8fr; }
.feature-grid { grid-template-columns:repeat(12,1fr); }
.feature-card { grid-column:span 4; min-height:320px; position:relative; overflow:hidden; transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(45,212,255,.26); }
.feature-media { height:200px; border-radius:18px; margin-bottom:18px; border:1px solid rgba(255,255,255,.08); background: var(--media-bg, linear-gradient(135deg, rgba(155,92,255,.7), rgba(45,212,255,.28) 55%, rgba(255,77,184,.5))); position:relative; overflow:hidden; }
.feature-media::before { content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%, rgba(255,255,255,.06)); }
.feature-media.video::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; font-size:2rem; color:white; background: radial-gradient(circle, rgba(7,11,20,.08), rgba(7,11,20,.34)); }
.skills-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.skill-item { padding:16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:#dbe7ff; }
.testimonial-grid { grid-template-columns:repeat(3,1fr); }
.quote { font-size:1rem; color:#e9eeff; line-height:1.7; }
.meta { color:var(--muted); font-size:.92rem; }
.stats-grid { grid-template-columns:repeat(4,1fr); }
.big-stat strong { font-size:clamp(2rem,4vw,3rem); display:block; }
.footer { padding:30px 0 60px; color:var(--muted); }
.footer-wrap { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.socials { display:flex; gap:10px; flex-wrap:wrap; }
.socials a { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.page-hero { padding:62px 0 30px; }
.header-card { padding:32px; border-radius:30px; }
.search-filter-bar { display:grid; grid-template-columns:1.3fr .7fr; gap:16px; margin:32px 0 18px; }
.input-wrap, .select-wrap, .textarea-wrap, .upload-wrap { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px 16px; }
.input-wrap input, .select-wrap select, .textarea-wrap textarea { width:100%; background:transparent; border:0; outline:0; color:var(--text); resize:vertical; }
.filter-chips { display:flex; gap:10px; flex-wrap:wrap; }
.filter-btn { padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#d5def6; cursor:pointer; transition:var(--ease); }
.filter-btn.active, .filter-btn:hover { background:var(--gradient-soft); border-color:rgba(45,212,255,.26); color:white; }
.masonry { columns: 3 320px; column-gap:18px; margin-top:24px; }
.art-card { display:inline-block; width:100%; margin:0 0 18px; border-radius:24px; overflow:hidden; position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.art-card:hover { transform:translateY(-4px); border-color:rgba(45,212,255,.26); box-shadow:0 24px 60px rgba(0,0,0,.35); }
.art-preview { min-height:260px; position:relative; overflow:hidden; background: var(--preview-bg, linear-gradient(135deg, #7c3aed, #1e293b 55%, #22d3ee)); transition: transform var(--ease); }
.art-preview.tall { min-height:420px; }
.art-preview.square { min-height:320px; }
.art-preview.video::after { content:"Preview ▶"; position:absolute; right:16px; top:16px; padding:8px 12px; border-radius:999px; background:rgba(7,11,20,.48); border:1px solid rgba(255,255,255,.12); font-size:.8rem; }
.art-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; gap:10px; background: linear-gradient(180deg, transparent 20%, rgba(7,11,20,.82)); }
.zoom-ring { position:absolute; inset:16px; border-radius:18px; border:1px solid rgba(255,255,255,.12); opacity:0; transform:scale(.96); transition:var(--ease); }
.art-card:hover .zoom-ring { opacity:1; transform:scale(1); }
.art-card:hover .art-preview { transform:scale(1.04); }
.art-info { padding:18px; }
.category-label { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.08); font-size:.78rem; }
.featured-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.category-card { min-height:220px; position:relative; overflow:hidden; }
.category-card::before { content:""; position:absolute; inset:0; background: var(--gradient-soft); opacity:.95; }
.category-card .inner { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; place-items:center; z-index:30; padding:20px; }
.modal.open { display:grid; }
.modal-card { width:min(1100px,100%); display:grid; grid-template-columns:1.1fr .9fr; gap:18px; border-radius:28px; overflow:hidden; }
.modal-media { min-height:520px; background:linear-gradient(135deg, #6d28d9, #1e293b 56%, #22d3ee); }
.modal-side { padding:28px; position:relative; }
.close-btn { position:absolute; right:18px; top:18px; width:42px; height:42px; border-radius:14px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06); color:white; cursor:pointer; }
.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:26px; }
.step { position:relative; padding:22px; }
.step-number { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--gradient); font-weight:800; margin-bottom:16px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid .full { grid-column:1 / -1; }
.upload-wrap { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.contact-grid { grid-template-columns:repeat(4,1fr); }
.contact-card { min-height:190px; display:flex; flex-direction:column; justify-content:space-between; }
.contact-icon { width:56px; height:56px; border-radius:18px; background:var(--gradient-soft); display:grid; place-items:center; font-size:1.4rem; }
.faq-list, .accordion-list { display:grid; gap:14px; }
.accordion-item { border-radius:20px; overflow:hidden; }
.accordion-trigger { width:100%; text-align:left; padding:20px 22px; color:white; background:rgba(255,255,255,.04); border:0; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.accordion-content { display:none; padding:0 22px 22px; color:var(--muted); line-height:1.7; background:rgba(255,255,255,.03); }
.accordion-item.open .accordion-content { display:block; }
.payments-grid { grid-template-columns:repeat(3,1fr); }
.payment-card { min-height:180px; display:flex; flex-direction:column; justify-content:space-between; }
.policy-grid { grid-template-columns:repeat(3,1fr); }
.rule-card { min-height:160px; }
.rule-icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; margin-bottom:16px; background:rgba(86,243,154,.12); color:#56f39a; border:1px solid rgba(86,243,154,.24); }
.support-card { display:flex; justify-content:space-between; gap:24px; align-items:center; flex-wrap:wrap; }
.muted { color:var(--muted); }
.center { text-align:center; }
.spacer-24 { height:24px; }
.spacer-40 { height:40px; }
.single-artwork-layout { align-items:stretch; }
@media (max-width:1180px) {
  .hero-grid, .about-grid, .search-filter-bar, .modal-card, .single-artwork-layout { grid-template-columns:1fr; }
  .feature-card { grid-column:span 6; }
  .featured-cats { grid-template-columns:repeat(2,1fr); }
  .testimonial-grid, .stats-grid, .contact-grid, .payments-grid, .policy-grid { grid-template-columns:repeat(2,1fr); }
  .timeline { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px) {
  .nav-links { display:none; }
  .mobile-toggle { display:inline-flex; }
  .mobile-menu.open { display:block; }
  .hero-visual { min-height:540px; }
  .collage { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(6,1fr); }
  .tile-4, .tile-6 { grid-column:span 1; }
  .feature-card { grid-column:span 12; }
  .testimonial-grid, .stats-grid, .contact-grid, .featured-cats, .payments-grid, .policy-grid, .form-grid { grid-template-columns:1fr; }
  .timeline, .skills-list { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  body.admin-bar .topbar { top: 46px; }
  .section { padding:70px 0; }
  .hero-copy h1 { font-size:2.8rem; }
  .hero-copy p { font-size:.98rem; }
  .hero-visual { min-height:420px; border-radius:26px; }
  .profile-badge { left:14px; right:14px; top:14px; flex-direction:column; align-items:flex-start; }
  .floating-panel { left:14px; right:14px; bottom:14px; max-width:none; }
  .panel-grid { grid-template-columns:1fr 1fr; }
  .header-card, .card { padding:20px; }
  .masonry { columns:1; }
  .modal-media { min-height:280px; }
}
