stagecraft 0.1.0

package/themes/phosphor/components-business.css

@@ -0,0 +1,818 @@
+/* Stagecraft — Phosphor theme: business / marketing components. */
+
+/* ---------------------------------------------------------------------------
+ * Pricing
+ * ------------------------------------------------------------------------- */
+.pricing {
+  display: grid;
+  gap: clamp(1rem, 2vw, 1.6rem);
+  width: min(1300px, 94vw);
+  align-items: stretch;
+}
+.pricing--cols-1 { grid-template-columns: 1fr; max-width: 480px; }
+.pricing--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.pricing--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.pricing--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+.pricing-tier {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.7rem, 1.4vw, 1.2rem);
+  padding: clamp(1.3rem, 2.6vw, 2rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: translateY(14px);
+  transition:
+    opacity 700ms ease-out,
+    transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 500ms ease,
+    box-shadow 500ms ease;
+}
+.pricing-tier.in { opacity: 1; transform: translateY(0); }
+
+.pricing-tier--featured {
+  border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent),
+    0 0 40px -10px var(--accent-glow);
+  transform: translateY(14px) scale(1.04);
+  z-index: 1;
+}
+.pricing-tier--featured.in { transform: translateY(0) scale(1.04); }
+
+.pricing-badge {
+  position: absolute;
+  top: -0.8rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.25rem 0.7rem;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 500;
+  box-shadow: 0 0 24px -4px var(--accent-glow);
+}
+
+.pricing-name {
+  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.pricing-tier--featured .pricing-name { color: var(--accent); }
+
+.pricing-figure {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  line-height: 1;
+  margin: 0.2rem 0 0.4rem;
+}
+.pricing-price {
+  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  color: var(--fg);
+}
+.pricing-tier--featured .pricing-price {
+  color: var(--accent);
+  text-shadow: 0 0 28px var(--accent-glow);
+}
+.pricing-period {
+  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
+  color: var(--dim);
+}
+
+.pricing-features {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+.pricing-feature {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
+  color: var(--fg);
+  line-height: 1.4;
+}
+.pricing-check {
+  font-size: 1.1rem;
+  color: var(--accent);
+  flex: 0 0 auto;
+  margin-top: 0.1em;
+}
+
+.pricing-cta {
+  margin-top: auto;
+  padding: 0.7rem 1rem;
+  border: 1px solid var(--dim-2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--fg);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition: border-color 400ms ease, background 400ms ease;
+}
+.pricing-tier--featured .pricing-cta {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+.pricing-cta-arrow { font-size: 1.1rem; }
+
+@media (max-width: 800px) {
+  .pricing--cols-3, .pricing--cols-4 { grid-template-columns: 1fr; }
+  .pricing-tier--featured, .pricing-tier--featured.in { transform: translateY(0) scale(1); }
+}
+
+/* ---------------------------------------------------------------------------
+ * Testimonial
+ * ------------------------------------------------------------------------- */
+.testimonial {
+  display: grid;
+  grid-template-columns: minmax(0, 280px) 1fr;
+  align-items: center;
+  gap: clamp(2rem, 5vw, 4rem);
+  width: min(1200px, 94vw);
+}
+.testimonial-photo-wrap {
+  width: clamp(180px, 22vw, 280px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: 0 0 40px -10px var(--accent-glow);
+}
+.testimonial-photo-wrap.in { opacity: 1; transform: scale(1); }
+.testimonial-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.9) contrast(1.05);
+}
+
+.testimonial-body {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.8rem, 1.8vw, 1.4rem);
+  position: relative;
+}
+.testimonial-mark {
+  font-size: clamp(3rem, 6vw, 5rem);
+  color: var(--accent);
+  text-shadow: 0 0 30px var(--accent-glow);
+  line-height: 0.7;
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.testimonial-mark.in { opacity: 1; transform: scale(1); }
+
+.testimonial-quote {
+  margin: 0;
+  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
+  font-style: italic;
+  line-height: 1.3;
+  color: var(--fg);
+  letter-spacing: -0.01em;
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 900ms ease-out, transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.testimonial-quote.in { opacity: 1; transform: translateY(0); }
+
+.testimonial-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 700ms ease-out, transform 800ms ease-out;
+  position: relative;
+}
+.testimonial-meta.in { opacity: 1; transform: translateY(0); }
+.testimonial-author {
+  font-size: clamp(1rem, 1.3vw, 1.15rem);
+  color: var(--fg);
+  font-weight: 500;
+}
+.testimonial-affil {
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--dim);
+}
+.testimonial-sep { color: var(--dim-2); margin: 0 0.3rem; }
+.testimonial-logo {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 2rem;
+  opacity: 0.55;
+  filter: grayscale(1);
+}
+
+@media (max-width: 800px) {
+  .testimonial { grid-template-columns: 1fr; justify-items: center; text-align: center; }
+  .testimonial-meta { align-items: center; }
+  .testimonial-logo { position: static; transform: none; margin-top: 0.6rem; }
+}
+
+/* ---------------------------------------------------------------------------
+ * TeamGrid
+ * ------------------------------------------------------------------------- */
+.team-grid {
+  display: grid;
+  gap: clamp(1.2rem, 2.2vw, 2rem);
+  width: min(1300px, 94vw);
+}
+.team-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.team-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.team-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+.team-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: clamp(1rem, 2vw, 1.6rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms ease;
+}
+.team-card.in { opacity: 1; transform: translateY(0); }
+.team-card:hover { border-color: var(--accent); }
+
+.team-photo-wrap {
+  width: clamp(80px, 9vw, 120px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--dim-2);
+  margin-bottom: 0.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.team-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.9) contrast(1.04);
+}
+.team-photo--placeholder {
+  font-size: clamp(2.5rem, 4vw, 3.5rem);
+  color: var(--dim);
+}
+
+.team-name {
+  font-size: clamp(1rem, 1.3vw, 1.2rem);
+  font-weight: 500;
+  color: var(--fg);
+  letter-spacing: -0.01em;
+}
+.team-role {
+  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.team-bio {
+  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
+  color: var(--dim);
+  line-height: 1.45;
+  margin-top: 0.3rem;
+}
+.team-social {
+  margin-top: auto;
+  padding-top: 0.6rem;
+  display: flex;
+  gap: 0.7rem;
+}
+.team-social-icon {
+  font-size: 1.1rem;
+  color: var(--dim);
+  transition: color 300ms ease;
+  cursor: default;
+}
+.team-social-icon:hover { color: var(--accent); }
+
+@media (max-width: 900px) {
+  .team-grid--cols-3, .team-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 540px) {
+  .team-grid--cols-2, .team-grid--cols-3, .team-grid--cols-4 { grid-template-columns: 1fr; }
+}
+
+/* ---------------------------------------------------------------------------
+ * Agenda
+ * ------------------------------------------------------------------------- */
+.agenda {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.8rem, 1.6vw, 1.4rem);
+  width: min(900px, 92vw);
+  padding-left: clamp(5rem, 10vw, 8rem);
+}
+.agenda-rail {
+  position: absolute;
+  left: clamp(5rem, 10vw, 8rem);
+  top: 0.6rem;
+  bottom: 0.6rem;
+  width: 1px;
+  background: linear-gradient(to bottom, transparent, var(--dim-2) 12%, var(--dim-2) 88%, transparent);
+}
+.agenda-item {
+  position: relative;
+  display: grid;
+  grid-template-columns: clamp(5rem, 10vw, 8rem) auto 1fr;
+  align-items: center;
+  gap: clamp(0.8rem, 1.4vw, 1.2rem);
+  margin-left: calc(-1 * clamp(5rem, 10vw, 8rem));
+  opacity: 0;
+  transform: translateX(-12px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.agenda-item.in { opacity: 1; transform: translateX(0); }
+.agenda-time {
+  font-size: clamp(0.85rem, 1.15vw, 1rem);
+  color: var(--accent);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+}
+.agenda-dot {
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 50%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  box-shadow: 0 0 16px -2px var(--accent-glow);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+}
+.agenda-dot .material-symbols-outlined {
+  font-size: 1.1rem;
+  color: var(--accent);
+}
+.agenda-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+.agenda-label {
+  font-size: clamp(1rem, 1.4vw, 1.25rem);
+  color: var(--fg);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.agenda-duration {
+  font-size: clamp(0.75rem, 1vw, 0.9rem);
+  color: var(--dim);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 600px) {
+  .agenda { padding-left: 0; }
+  .agenda-rail { left: 4rem; }
+  .agenda-item { grid-template-columns: 4rem auto 1fr; margin-left: 0; }
+}
+
+/* ---------------------------------------------------------------------------
+ * Checklist
+ * ------------------------------------------------------------------------- */
+.checklist {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.6rem, 1.2vw, 1rem);
+  width: min(800px, 92vw);
+}
+.checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.8rem;
+  padding: clamp(0.7rem, 1.3vw, 1rem) clamp(0.8rem, 1.6vw, 1.2rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease;
+}
+.checklist-item.in { opacity: 1; transform: translateY(0); }
+.checklist-item.is-done { border-color: rgba(0, 255, 156, 0.25); }
+.checklist-box {
+  font-size: 1.5rem;
+  color: var(--dim);
+  flex: 0 0 auto;
+  transition: color 400ms ease;
+  line-height: 1.1;
+}
+.checklist-item.is-done .checklist-box {
+  color: var(--accent);
+  text-shadow: 0 0 12px var(--accent-glow);
+}
+.checklist-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+.checklist-text {
+  font-size: clamp(1rem, 1.35vw, 1.2rem);
+  color: var(--fg);
+  letter-spacing: -0.01em;
+  line-height: 1.35;
+}
+.checklist-item.is-done .checklist-text { color: var(--dim); }
+.checklist-sub {
+  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
+  color: var(--dim);
+  line-height: 1.45;
+}
+
+/* ---------------------------------------------------------------------------
+ * Steps
+ * ------------------------------------------------------------------------- */
+.steps {
+  display: grid;
+  gap: clamp(1rem, 2vw, 1.8rem);
+  width: min(1300px, 94vw);
+}
+.steps--horizontal { grid-auto-flow: column; grid-auto-columns: 1fr; }
+.steps--vertical   { grid-auto-flow: row; max-width: 720px; }
+
+.step-card {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: clamp(0.8rem, 1.5vw, 1.4rem);
+  padding: clamp(1.1rem, 2.2vw, 1.8rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  align-items: start;
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1), border-color 400ms ease;
+}
+.step-card.in { opacity: 1; transform: translateY(0); }
+.step-card:hover { border-color: var(--accent); }
+
+.steps--horizontal .step-card { grid-template-columns: 1fr; grid-template-rows: auto auto; }
+
+.step-numeral {
+  font-size: clamp(2.5rem, 5vw, 4.2rem);
+  font-weight: 500;
+  letter-spacing: -0.05em;
+  line-height: 0.9;
+  color: var(--accent);
+  text-shadow: 0 0 28px var(--accent-glow);
+  font-variant-numeric: tabular-nums;
+}
+
+.step-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 0;
+}
+.step-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.step-icon {
+  font-size: 1.3rem;
+  color: var(--dim);
+}
+.step-label {
+  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
+  font-weight: 500;
+  color: var(--fg);
+  letter-spacing: -0.015em;
+  line-height: 1.2;
+}
+.step-body {
+  font-size: clamp(0.85rem, 1.1vw, 1rem);
+  color: var(--dim);
+  line-height: 1.5;
+}
+
+@media (max-width: 800px) {
+  .steps--horizontal { grid-auto-flow: row; grid-auto-columns: auto; }
+  .steps--horizontal .step-card { grid-template-columns: auto 1fr; }
+}
+
+/* ---------------------------------------------------------------------------
+ * CTA
+ * ------------------------------------------------------------------------- */
+.cta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: clamp(1rem, 2vw, 1.6rem);
+  width: min(900px, 92vw);
+  padding: clamp(2rem, 4vw, 3.5rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  position: relative;
+}
+.cta--accent {
+  border-color: var(--accent);
+  box-shadow: 0 0 50px -10px var(--accent-glow);
+  background:
+    linear-gradient(135deg, var(--accent-soft), transparent 50%),
+    var(--bg-elevated);
+}
+.cta-headline {
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  font-weight: 500;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  color: var(--fg);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 800ms ease-out, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cta-headline.in { opacity: 1; transform: translateY(0); }
+.cta--accent .cta-headline { color: var(--fg); }
+
+.cta-body {
+  font-size: clamp(1rem, 1.4vw, 1.25rem);
+  color: var(--dim);
+  line-height: 1.5;
+  max-width: 50ch;
+  opacity: 0;
+  transform: translateY(10px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cta-body.in { opacity: 1; transform: translateY(0); }
+
+.cta-action {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.4rem;
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.cta-action.in { opacity: 1; transform: translateY(0); }
+
+.cta-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 1.4rem;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  background: transparent;
+  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  transition: background 300ms ease, color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
+}
+.cta--accent .cta-button {
+  background: var(--accent);
+  color: var(--bg);
+  box-shadow: 0 0 30px -5px var(--accent-glow);
+}
+.cta-button-arrow { font-size: 1.2rem; }
+.cta-hint {
+  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
+  color: var(--dim);
+  letter-spacing: 0.05em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Callout (shared base) + Tip
+ * ------------------------------------------------------------------------- */
+.callout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: flex-start;
+  gap: clamp(0.8rem, 1.5vw, 1.2rem);
+  width: min(900px, 92vw);
+  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1.2rem, 2.4vw, 2rem);
+  background: var(--bg-elevated);
+  border-left: 4px solid var(--dim-2);
+  opacity: 0;
+  transform: translateX(-12px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.callout.in { opacity: 1; transform: translateX(0); }
+.callout-icon {
+  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
+  line-height: 1;
+  flex: 0 0 auto;
+  margin-top: 0.05em;
+}
+.callout-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.callout-heading {
+  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+.callout-text {
+  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
+  color: var(--fg);
+  line-height: 1.5;
+  opacity: 0.9;
+}
+.callout--info    { border-left-color: var(--blue);   background: linear-gradient(90deg, rgba(24, 158, 255, 0.08), transparent 40%), var(--bg-elevated); }
+.callout--info    .callout-icon, .callout--info    .callout-heading { color: var(--blue); }
+.callout--tip     { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent 40%), var(--bg-elevated); }
+.callout--tip     .callout-icon, .callout--tip     .callout-heading { color: var(--accent); }
+.callout--warning { border-left-color: var(--amber);  background: linear-gradient(90deg, rgba(255, 180, 84, 0.1), transparent 40%), var(--bg-elevated); }
+.callout--warning .callout-icon, .callout--warning .callout-heading { color: var(--amber); }
+.callout--danger  { border-left-color: var(--red);    background: linear-gradient(90deg, rgba(255, 92, 92, 0.1), transparent 40%), var(--bg-elevated); }
+.callout--danger  .callout-icon, .callout--danger  .callout-heading { color: var(--red); }
+.callout--success { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(0, 255, 156, 0.18), transparent 50%), var(--bg-elevated); }
+.callout--success .callout-icon, .callout--success .callout-heading { color: var(--accent); }
+.callout--success .callout-icon { text-shadow: 0 0 18px var(--accent-glow); }
+
+/* Tip — compact single-paragraph emphasis */
+.tip {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 0.8rem;
+  width: min(720px, 92vw);
+  padding: 0.9rem 1.2rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.tip.in { opacity: 1; transform: translateY(0); }
+.tip-icon {
+  font-size: clamp(1.4rem, 2vw, 1.8rem);
+  flex: 0 0 auto;
+}
+.tip-body {
+  margin: 0;
+  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
+  color: var(--fg);
+  line-height: 1.4;
+}
+.tip--info    { border-color: rgba(24, 158, 255, 0.4); }
+.tip--info    .tip-icon { color: var(--blue); }
+.tip--tip     { border-color: rgba(0, 255, 156, 0.35); }
+.tip--tip     .tip-icon { color: var(--accent); }
+.tip--warning { border-color: rgba(255, 180, 84, 0.4); }
+.tip--warning .tip-icon { color: var(--amber); }
+.tip--danger  { border-color: rgba(255, 92, 92, 0.4); }
+.tip--danger  .tip-icon { color: var(--red); }
+.tip--success {
+  border-color: var(--accent);
+  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--bg-elevated);
+}
+.tip--success .tip-icon { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
+
+/* ---------------------------------------------------------------------------
+ * BeforeAfter
+ * ------------------------------------------------------------------------- */
+.before-after--text {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: stretch;
+  gap: clamp(1rem, 2vw, 2rem);
+  width: min(1200px, 94vw);
+}
+.ba-col {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: clamp(1.3rem, 2.5vw, 2rem);
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  opacity: 0;
+  transform: translateY(14px);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ba-col.in { opacity: 1; transform: translateY(0); }
+.ba-col.ba-after { border-color: rgba(0, 255, 156, 0.3); }
+.ba-col-tag {
+  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--dim);
+}
+.ba-col-tag--accent { color: var(--accent); }
+.ba-col-text {
+  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
+  color: var(--fg);
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+.ba-after .ba-col-text { color: var(--fg); }
+.ba-arrow {
+  align-self: center;
+  font-size: clamp(2rem, 3.5vw, 2.8rem);
+  color: var(--accent);
+  text-shadow: 0 0 22px var(--accent-glow);
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ba-arrow.in { opacity: 1; transform: translateX(0); }
+
+.before-after--image {
+  position: relative;
+  width: min(1200px, 94vw);
+  aspect-ratio: 16 / 9;
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  overflow: hidden;
+}
+.before-after--image .ba-pane {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 700ms ease-out;
+}
+.before-after--image .ba-pane.in { opacity: 1; }
+.before-after--image .ba-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  filter: saturate(0.9) contrast(1.05);
+}
+.before-after--image .ba-before { z-index: 1; }
+.before-after--image .ba-after {
+  z-index: 2;
+  clip-path: polygon(0 0, var(--ba-clip, 0%) 0, calc(var(--ba-clip, 0%) + 4%) 100%, 0 100%);
+  transition: opacity 700ms ease-out, clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.before-after--image .ba-after .ba-img { filter: saturate(1.05) contrast(1.08); }
+.ba-label {
+  position: absolute;
+  bottom: 1rem;
+  padding: 0.4rem 0.8rem;
+  z-index: 3;
+}
+.ba-label--left  { left: 1rem; }
+.ba-label--right { right: 1rem; }
+.ba-tag {
+  display: inline-block;
+  padding: 0.35rem 0.7rem;
+  background: rgba(10, 10, 10, 0.7);
+  border: 1px solid var(--dim-2);
+  color: var(--fg);
+  font-size: clamp(0.75rem, 1vw, 0.9rem);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  backdrop-filter: blur(4px);
+}
+.ba-tag--accent {
+  color: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 18px -4px var(--accent-glow);
+}
+.before-after--image .ba-divider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--ba-clip, 0%);
+  width: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 18px var(--accent-glow);
+  transform: skewX(-6deg);
+  z-index: 4;
+  pointer-events: none;
+  transition: left 1200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@media (max-width: 800px) {
+  .before-after--text { grid-template-columns: 1fr; }
+  .ba-arrow { transform: rotate(90deg); justify-self: center; }
+  .ba-arrow.in { transform: rotate(90deg); }
+}