/* Public portfolio finish. Loaded only by the public index; admin remains unchanged. */
:root { --bg: #101010; --surface: #191919; --surface2: #202020; --border: #343434; --text: #f4f3ef; --muted: #adadad; --accent: #e3ad79; }
::selection { background: #e3ad7955; }
.header { background: #101010dc; border-bottom-color: transparent; }
.wordmark-dot { color: var(--accent); }
.desktop-nav a { color: #b9b9b7; }
.desktop-nav a:hover { color: #fff; }
.button { border-color: #ffffff2a; background: linear-gradient(145deg, #ffffff09, #ffffff02); }
.button:hover { background: #303030; }
.button.primary:hover { background: #fff; border-color: #fff; }
.button.secondary:hover { background: #ffffff0d; }
.hero .button.secondary { background: #181818c9; backdrop-filter: blur(12px); }
.hero .button.primary { box-shadow: 0 6px 30px #0003; }
h2 { font-weight: 500; letter-spacing: -.045em; }
.section-heading { margin-bottom: 42px; }
#work { padding-top: 54px; }
#work .work-image { border-color: #ffffff14; box-shadow: 0 12px 28px #0002; }
#work .work-image:hover { border-color: #ffffff50; }
.panel { border-color: #ffffff1c; background: linear-gradient(145deg, #222 0%, #181818 66%); box-shadow: inset 0 1px 0 #ffffff05, 0 20px 60px #0002; }
.case-card { background: #181818; }
.case-metrics-apollon { grid-template-columns: minmax(0, max-content) minmax(0, max-content); }
.case-metrics-apollon strong, .case-metrics-apollon span { min-width: 0; }
.process-panel { position: relative; padding: 48px; overflow: hidden; background: radial-gradient(ellipse at 6% 0, #ffffff08, transparent 65%), #191919; }
.process-panel h2 { font-size: clamp(2.5rem, 4vw, 3.25rem); }
.process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.process-grid li { min-width: 0; border-top-color: #ffffff2a; padding-top: 22px; }
.step-number { display: inline-block; font-size: .875rem; color: var(--accent); letter-spacing: .06em; }
.process-grid h3 { font-size: 1.075rem; font-weight: 500; line-height: 1.35; margin: 24px 0 14px; overflow-wrap: normal; }
.process-grid p { font-size: .9375rem; line-height: 1.75; color: #aaa; }
.price-card { padding-block: 24px; }
.price-card .price { margin: 24px 0 16px; }
.price-card ul { margin: 20px 0 16px; }
.price-card .plan-note { min-height: 48px; margin-bottom: 16px; }
.price-card.featured { border-color: #e3ad7985; background: radial-gradient(ellipse at 50% 0, #e3ad7918, transparent 65%), #222; box-shadow: 0 18px 60px #0003, inset 0 1px 0 #e3ad7924; }
.price-card.featured .price { color: var(--text); }
.price-card.featured .button.primary { color: #111; background: var(--text); border-color: var(--text); }
.price-card.featured .button.primary:hover { background: #fff; border-color: #fff; }
.price-card li::before { color: var(--accent); }
.faq-list details[open] summary { color: var(--accent); }
.plan-eyebrow, .delivery { color: #bfbfbc; }
.number-icon { border-color: #ffffff26; background: linear-gradient(145deg, #303030, #1b1b1b); box-shadow: inset 0 1px 0 #ffffff15, 0 16px 34px #0004; }
.number-icon::before { background: #ffffff13; }
.number-icon svg { color: #d9d9d5; filter: drop-shadow(0 3px 5px #ffffff15); }
.number-value { color: #eeeee9; }
.number-item p, .about-section .about-copy .about-closing { color: #b9b9b5; }
.cursor-glow { background: radial-gradient(circle, #ffffff17, #ffffff08 36%, transparent 72%); }
.reveal-ready .reveal-item { transition-duration: 600ms; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #work .work-card, #results .case-card, #pricing .price-card {
    position: relative;
    /* Local perspective keeps every card's vanishing point at its own center. */
    transform: perspective(1100px) var(--card-rotation, rotate3d(1, 0, 0, 0deg));
    translate: 0 0;
    transition: opacity 600ms ease, translate 600ms cubic-bezier(.18,.68,.23,1);
  }
  #work .work-card.reveal-item:not(.is-visible),
  #results .case-card.reveal-item:not(.is-visible),
  #pricing .price-card.reveal-item:not(.is-visible) {
    translate: 0 28px;
  }
  #work .work-card { border-radius: 12px; }
  #work .spring-card, #results .spring-card, #pricing .spring-card { transform-style: preserve-3d; }
  #work .spring-card::before, #results .spring-card::before, #pricing .spring-card::before,
  #work .spring-card::after, #results .spring-card::after, #pricing .spring-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--card-depth, 0);
  }
  #work .spring-card::before, #results .spring-card::before, #pricing .spring-card::before {
    background: #111;
    transform: translateZ(-3px);
    box-shadow: var(--card-cast-x, 0px) var(--card-cast-y, 7px) 20px -3px #000a;
  }
  #work .spring-card::after, #results .spring-card::after, #pricing .spring-card::after {
    transform: translateZ(.25px);
    background: linear-gradient(var(--card-light-angle, 135deg), #ffffff14, #ffffff04 32%, transparent 62%, #0000000a);
    box-shadow: inset 0 1px 0 #ffffff18, inset 0 -1px 0 #0005,
      var(--card-edge-x, 0px) var(--card-edge-y, 0px) 0 #b7aaa06b;
  }
}
/* backdrop-filter flattens the pricing surface: an opaque negative-Z plane
   can paint in front of its text. Keep thickness as a transparent shadow. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #pricing .spring-card::before { background: transparent; transform: none; }
}
/* The title never waits for a scroll reveal to become readable. */
.hero-content.reveal-item { opacity: 1; transform: none; will-change: auto; }
@media (max-width: 1100px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
  .process-panel { padding: 36px; }
}
@media (max-width: 780px) {
  #work { padding-top: 76px; }
  .process-panel { padding: 30px; }
  .process-grid { gap: 32px; }
  .price-card .plan-note { min-height: 0; }
}
@media (max-width: 600px) {
  .process-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .process-panel { padding: 28px 24px; border-radius: 24px; }
  #process .section-heading { margin-bottom: 32px; }
  .process-grid li { padding-top: 18px; }
  .process-grid h3 { font-size: 1.125rem; margin-top: 15px; }
  .process-grid p { font-size: 1rem; line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-item { opacity: 1; transform: none; transition: none; }
  #work .work-card, #results .case-card, #pricing .price-card {
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
    will-change: auto;
  }
}

/* White creator names, original green case metrics, neutral contact surfaces. */
.channel h3, .channel-link, .case-card h3 { color: #fff; }
.channels-strip {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.channels-strip::before, .channels-strip::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 10%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.channels-strip::before {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}
.channels-strip::after {
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.contact-form label { color: #d2d2d2; }
.contact-form input:not([type=checkbox]), .contact-form textarea {
  background: #151515; border-color: #404040; color: #fff;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #919191; }
.contact-form input[aria-invalid=true], .contact-form textarea[aria-invalid=true] { border-color: #e8a09a; }
.social-icons a { color: #e0e0e0; border-color: #4a4a4a; background: linear-gradient(150deg, #ffffff0c, #ffffff03 70%); }
.social-icons a:hover { color: #fff; border-color: #8c8c8c; background: linear-gradient(150deg, #ffffff17, #ffffff07 70%); }
.contact-form .form-note { color: #b9b9b5; }
.contact-form .form-note a { color: var(--accent); text-decoration-color: #e3ad7970; }
.contact-form .form-note a:hover { color: #f1c99f; }
.contact-form .form-status:not(:empty) {
  color: var(--text);
  background: radial-gradient(ellipse at 0 50%, #e3ad790d, transparent 58%), #191919;
  border-color: #ffffff20;
}
.social-icons svg { width: 22px; height: 22px; stroke-width: 2; }

.social-icons a:not([data-social="instagram"]) svg { stroke: none; }