/* Creators Connect: the meeting place for owners and the creator community.
   Same family as the deal room (midnight emerald, champagne gold). */
:root { --cc-bg: #07110f; --cc-ink: #f4fbf7; --cc-mute: rgba(232,250,242,.68); --cc-faint: rgba(232,250,242,.44); --cc-line: rgba(214,255,238,.12); --cc-line2: rgba(214,255,238,.22);
  --cc-card: rgba(236,255,248,.045); --cc-card2: rgba(236,255,248,.085); --cc-gold: #f2c96d; --cc-em: #19c39a; --cc-bad: #ff6b81;
  --cc-acc: linear-gradient(120deg, #f7d58a, #e9a94a 55%, #d98a35); --cc-on: #1d1305; --cc-serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif; --cc-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif; --cc-mono: 'JetBrains Mono', ui-monospace, monospace; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.cc { margin: 0; background: var(--cc-bg); color: var(--cc-ink); font: 400 16px/1.6 var(--cc-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.cc a { color: inherit; } .cc button, .cc input, .cc select { font: inherit; color: inherit; }
.cc-skip { position: absolute; left: -999px; top: 8px; background: var(--cc-gold); color: #000; padding: 8px 14px; border-radius: 8px; z-index: 99; } .cc-skip:focus { left: 8px; }
.cc-shell { width: min(1160px, 100% - 40px); margin: 0 auto; }

.cc-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cc-bg i { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen; opacity: .5; animation: cc-drift 24s ease-in-out infinite alternate; }
.cc-bg i:nth-child(1) { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, rgba(25,195,154,.5), transparent 65%); }
.cc-bg i:nth-child(2) { width: 50vw; height: 50vw; right: -16vw; top: 10vh; background: radial-gradient(circle, rgba(242,201,109,.32), transparent 65%); animation-duration: 30s; animation-delay: -8s; }
.cc-bg i:nth-child(3) { width: 44vw; height: 44vw; left: 20vw; bottom: -24vw; background: radial-gradient(circle, rgba(47,124,255,.18), transparent 65%); animation-duration: 36s; animation-delay: -14s; }
@keyframes cc-drift { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }

.cc-nav { display: flex; align-items: center; gap: 18px; padding: 18px 0; }
.cc-brand { font: 600 24px/1 var(--cc-serif); text-decoration: none; letter-spacing: -.02em; } .cc-brand span { color: var(--cc-gold); } .cc-brand small { font: 600 10px/1 var(--cc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cc-faint); margin-left: 10px; }
.cc-nav nav { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cc-nav nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--cc-mute); } .cc-nav nav a:hover, .cc-nav nav a[aria-current] { color: var(--cc-ink); background: var(--cc-card); }
.cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--cc-acc); color: var(--cc-on); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; box-shadow: 0 10px 30px -14px #e9a94a; }
.cc-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px #e9a94a; } .cc-btn:active { transform: scale(.97); }
.cc-btn.ghost { background: var(--cc-card); color: var(--cc-ink); border: 1px solid var(--cc-line2); box-shadow: none; } .cc-btn.sm { min-height: 38px; padding: 0 16px; font-size: 14px; } .cc-btn:disabled { opacity: .55; cursor: not-allowed; }

/* hero */
.cc-hero { padding: clamp(40px, 8vw, 96px) 0 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.cc-kicker { font: 600 11px/1 var(--cc-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cc-gold); display: inline-flex; align-items: center; gap: 10px; }
.cc-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-em); box-shadow: 0 0 0 0 rgba(25,195,154,.6); animation: cc-ping 2.4s infinite; }
@keyframes cc-ping { 70% { box-shadow: 0 0 0 10px transparent; } }
.cc h1 { font: 600 clamp(40px, 6.4vw, 78px)/1 var(--cc-serif); letter-spacing: -.03em; margin: 18px 0 20px; }
.cc h1 em { font-style: italic; background: var(--cc-acc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-lede { font-size: clamp(17px, 2vw, 20px); color: var(--cc-mute); max-width: 56ch; margin: 0 0 28px; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-facts { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; padding: 0; list-style: none; } .cc-facts b { display: block; font: 600 28px/1 var(--cc-serif); } .cc-facts span { color: var(--cc-faint); font-size: 13px; }

/* the stage: a deal-room preview */
.cc-stage { position: relative; perspective: 1200px; }
.cc-demo { border-radius: 26px; border: 1px solid var(--cc-line2); background: linear-gradient(160deg, rgba(236,255,248,.09), rgba(236,255,248,.03)); backdrop-filter: blur(14px); padding: 18px; box-shadow: 0 40px 90px -30px #000; transform: rotateY(-8deg) rotateX(3deg); animation: cc-float 7s ease-in-out infinite; }
@keyframes cc-float { 50% { transform: rotateY(-5deg) rotateX(1deg) translateY(-8px); } }
.cc-demo-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cc-demo-av { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #0b1816; color: var(--cc-gold); font: 600 17px var(--cc-serif); position: relative; }
.cc-demo-av::before { content: ''; position: absolute; inset: -2px; border-radius: 16px; padding: 2px; background: conic-gradient(var(--cc-gold), var(--cc-em), var(--cc-gold)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cc-spin 6s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .cc-demo-stats div { padding: 9px 11px; border-radius: 12px; background: var(--cc-card); border: 1px solid var(--cc-line); } .cc-demo-stats small { display: block; font: 600 9px/1 var(--cc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cc-faint); margin-bottom: 4px; } .cc-demo-stats b { font-size: 14px; }
.cc-demo-bub { max-width: 82%; padding: 10px 14px; border-radius: 16px; background: var(--cc-card2); border: 1px solid var(--cc-line); font-size: 14px; margin-bottom: 8px; opacity: 0; animation: cc-in .6s cubic-bezier(.34,1.4,.64,1) forwards; }
.cc-demo-bub.me { margin-left: auto; background: rgba(233,185,92,.16); border-color: rgba(233,185,92,.4); } .cc-demo-bub:nth-of-type(1) { animation-delay: .6s; } .cc-demo-bub:nth-of-type(2) { animation-delay: 1.5s; } .cc-demo-bub:nth-of-type(3) { animation-delay: 2.4s; }
.cc-demo-offer { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cc-line2); background: var(--cc-card); border-top: 3px solid #e9a94a; opacity: 0; animation: cc-in .6s 3.3s cubic-bezier(.34,1.4,.64,1) forwards; } .cc-demo-offer b { font: 600 18px var(--cc-serif); display: block; margin: 4px 0; } .cc-demo-offer small { font: 600 10px var(--cc-mono); letter-spacing: .12em; color: var(--cc-gold); text-transform: uppercase; }
@keyframes cc-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* sections */
.cc-sec { padding: clamp(44px, 7vw, 90px) 0; } .cc-sec h2 { font: 600 clamp(30px, 4.4vw, 52px)/1.05 var(--cc-serif); letter-spacing: -.025em; margin: 12px 0 14px; max-width: 18ch; } .cc-sec > .cc-shell > p.lede { color: var(--cc-mute); max-width: 60ch; margin: 0 0 34px; font-size: 18px; }
.cc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cc-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cc-tile { padding: 26px; border-radius: 22px; background: var(--cc-card); border: 1px solid var(--cc-line); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, background .25s; } .cc-tile:hover { transform: translateY(-4px); border-color: var(--cc-line2); background: var(--cc-card2); }
.cc-tile .n { font: 600 12px var(--cc-mono); color: var(--cc-gold); letter-spacing: .14em; } .cc-tile h3 { font: 600 22px/1.15 var(--cc-serif); margin: 10px 0 8px; } .cc-tile p { margin: 0; color: var(--cc-mute); font-size: 15px; }
.cc-private { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cc-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; } .cc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--cc-mute); } .cc-list li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--cc-acc); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0); }
.cc-list.no li::before { background: var(--cc-bad); }

/* the directory */
.cc-app { padding: 30px 0 80px; scroll-margin-top: 16px; } .cc-app-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .cc-app-h h2 { font: 600 clamp(28px,4vw,44px)/1 var(--cc-serif); letter-spacing: -.02em; margin: 8px 0 0; }
.cc-filters { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .cc-filters input, .cc-filters select { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--cc-line2); background: var(--cc-card); outline: none; transition: border-color .2s, box-shadow .2s; } .cc-filters input:focus, .cc-filters select:focus { border-color: var(--cc-gold); box-shadow: 0 0 0 3px rgba(242,201,109,.2); } .cc-filters select option { color: #111; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .cc-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--cc-line2); background: var(--cc-card); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; text-transform: capitalize; } .cc-chip[aria-pressed="true"] { background: var(--cc-acc); color: var(--cc-on); border-color: transparent; }
.cc-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.cc-card { position: relative; padding: 20px; border-radius: 22px; background: var(--cc-card); border: 1px solid var(--cc-line); display: grid; gap: 12px; align-content: start; opacity: 0; animation: cc-in .6s cubic-bezier(.34,1.4,.64,1) forwards; animation-delay: calc(var(--i, 0) * 55ms); transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s; overflow: hidden; }
.cc-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cc-acc); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); } .cc-card:hover { transform: translateY(-4px); border-color: var(--cc-line2); } .cc-card:hover::before { transform: none; }
.cc-card-h { display: flex; align-items: center; gap: 12px; } .cc-plat { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--cc-card2); border: 1px solid var(--cc-line2); font: 600 15px var(--cc-serif); color: var(--cc-gold); flex: none; }
.cc-card h3 { margin: 0; font: 600 20px/1.1 var(--cc-serif); } .cc-card h3 small { display: block; font: 500 13px var(--cc-sans); color: var(--cc-faint); margin-top: 4px; }
.cc-badge { margin-left: auto; font: 700 9.5px var(--cc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cc-em); border: 1px solid rgba(25,195,154,.4); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.cc-card .head { font: italic 400 15px/1.35 var(--cc-serif); margin: 0; } .cc-card .bio { color: var(--cc-mute); font-size: 14px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cc-tags { display: flex; flex-wrap: wrap; gap: 6px; } .cc-tags span { padding: 4px 10px; border-radius: 999px; background: var(--cc-card2); font-size: 12px; color: var(--cc-mute); text-transform: capitalize; }
.cc-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 1px solid var(--cc-line); } .cc-rate { font-size: 13px; color: var(--cc-mute); } .cc-rate b { color: var(--cc-ink); }
.cc-empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: var(--cc-mute); border: 1px dashed var(--cc-line2); border-radius: 22px; } .cc-more { text-align: center; margin-top: 22px; }
.cc-gate { padding: 34px; border-radius: 26px; border: 1px solid var(--cc-line2); background: linear-gradient(160deg, rgba(236,255,248,.08), rgba(236,255,248,.02)); display: grid; gap: 14px; max-width: 640px; } .cc-gate h3 { font: 600 28px/1.1 var(--cc-serif); margin: 0; } .cc-gate p { margin: 0; color: var(--cc-mute); }

/* the offer sheet */
.cc-veil { position: fixed; inset: 0; z-index: 8000; background: rgba(2,8,7,.72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .cc-veil.on { opacity: 1; visibility: visible; }
.cc-sheet { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border-radius: 26px; background: #0b1816; border: 1px solid var(--cc-line2); padding: 24px; box-shadow: 0 40px 100px -20px #000; transform: translateY(24px) scale(.97); transition: transform .45s cubic-bezier(.16,1,.3,1); } .cc-veil.on .cc-sheet { transform: none; }
.cc-sheet h3 { font: 600 26px/1.1 var(--cc-serif); margin: 0 0 6px; } .cc-sheet > p { color: var(--cc-mute); margin: 0 0 16px; font-size: 14px; }
.cc-pick { display: grid; gap: 8px; margin-bottom: 16px; max-height: 220px; overflow-y: auto; } .cc-pick button { text-align: left; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--cc-line); background: var(--cc-card); cursor: pointer; transition: border-color .2s, background .2s; } .cc-pick button[aria-pressed="true"] { border-color: var(--cc-gold); background: rgba(242,201,109,.1); } .cc-pick img, .cc-pick i { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--cc-card2); flex: none; } .cc-pick b { display: block; font-size: 14px; } .cc-pick small { color: var(--cc-faint); font-size: 12px; }
.cc-sheet .cc-x { position: absolute; }
.cc-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 999px; background: #111; color: #fff; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 9999; } .cc-toast.on { opacity: 1; transform: translate(-50%, 0); } .cc-toast.bad { background: #b3243d; }

/* the dr- form lives in a sheet: give it the same palette */
.cc-sheet { --dr-text: #f4fbf7; --dr-mute: rgba(232,250,242,.68); --dr-faint: rgba(232,250,242,.44); --dr-line: rgba(214,255,238,.1); --dr-line-2: rgba(214,255,238,.2); --dr-glass: rgba(236,255,248,.045); --dr-glass-2: rgba(236,255,248,.085); --dr-accent: linear-gradient(120deg, #f7d58a, #e9a94a 55%, #d98a35); --dr-accent-solid: #e9b95c; --dr-on-accent: #1d1305; --dr-gold: #f2c96d; --dr-bad: #ff6b81; --dr-panel: #0b1816; color: var(--dr-text); }

.cc-faq details { border-top: 1px solid var(--cc-line); padding: 18px 0; } .cc-faq details:last-child { border-bottom: 1px solid var(--cc-line); } .cc-faq summary { cursor: pointer; font: 600 20px/1.3 var(--cc-serif); list-style: none; display: flex; justify-content: space-between; gap: 16px; } .cc-faq summary::-webkit-details-marker { display: none; } .cc-faq summary::after { content: '+'; color: var(--cc-gold); transition: transform .3s; } .cc-faq details[open] summary::after { transform: rotate(45deg); } .cc-faq p { color: var(--cc-mute); margin: 12px 0 0; max-width: 70ch; }
.cc-foot { border-top: 1px solid var(--cc-line); padding: 34px 0 50px; color: var(--cc-faint); font-size: 14px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; } .cc-foot a { text-decoration: none; margin-right: 18px; } .cc-foot a:hover { color: var(--cc-ink); }

.cc-rev { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .cc-rev.in { opacity: 1; transform: none; }
@media (max-width: 900px) { .cc-hero { grid-template-columns: 1fr; } .cc-demo { transform: none; } .cc-grid3, .cc-grid2, .cc-private { grid-template-columns: 1fr; } .cc-filters { grid-template-columns: 1fr 1fr; } .cc-filters input:first-child { grid-column: 1 / -1; } .cc-nav nav a:not(.cc-btn) { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-bg i, .cc-demo, .cc-demo-av::before, .cc-kicker::before { animation: none !important; } .cc-card, .cc-demo-bub, .cc-demo-offer { animation-duration: .01ms !important; animation-delay: 0s !important; } .cc-rev { opacity: 1; transform: none; transition: none; } }