/* ABCollective — Landing page styles. Tokens live in colors_and_type.css. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
::selection { background: var(--pulse); color: var(--color-deep-ink); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1200px) { .container { padding: 0 56px; } }

section { padding: 72px 0; position: relative; }
@media (min-width: 768px) { section { padding: 112px 0; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; display: inline-block; }
.eyebrow.lime { color: var(--pulse); }
.eyebrow.hot  { color: var(--hot); }
.eyebrow.muted{ color: var(--fg2); }
.eyebrow.on-ink { color: rgba(248,250,252,0.7); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,250,252,0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav.on-ink { background: rgba(15,23,42,0.78); border-bottom-color: rgba(255,255,255,0.06); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--color-deep-ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: -0.04em;
  position: relative;
}
.brand-mark::after { content: ""; position: absolute; right: 5px; bottom: 6px; width: 6px; height: 6px; border-radius: 999px; background: var(--pulse); box-shadow: 0 0 0 3px rgba(163,230,53,0.25); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--fg1); }
.brand-name .blue { color: var(--accent); }
.brand-name .dot  { color: var(--pulse); }
.nav.on-ink .brand-name { color: var(--fg-inverse); }
.nav.on-ink .brand-name .blue { color: #60A5FA; }
.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 920px) { .nav-links { display: flex; } }
.nav-link { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg2); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
.nav-link:hover { color: var(--fg1); }
.nav.on-ink .nav-link { color: rgba(248,250,252,0.7); }
.nav.on-ink .nav-link:hover { color: #fff; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  padding: 13px 24px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-glow-blue); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--accent-press); transform: scale(0.98); }
.btn-secondary { background: var(--bg-elevated); color: var(--fg1); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--blue-50); border-color: var(--accent); color: var(--accent); }
.btn-ink { background: var(--color-deep-ink); color: #fff; }
.btn-ink:hover { background: #1E293B; transform: translateY(-1px); }
.btn-inverse { background: #fff; color: var(--color-deep-ink); }
.btn-inverse:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,0.16); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* pulse ring around primary hero CTA */
.cta-wrap { position: relative; display: inline-flex; }
.cta-wrap::before {
  content: ""; position: absolute; inset: -8px; border-radius: 999px;
  background: var(--pulse); opacity: 0.45; z-index: 0;
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}
.cta-wrap > * { position: relative; z-index: 1; }
@keyframes pulse-ring {
  0%   { transform: scale(0.94); opacity: 0.55; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cta-wrap::before { animation: none; opacity: 0; } }

/* tags / pills */
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.02em; }
.pill-pulse { background: var(--pulse); color: var(--color-deep-ink); }
.pill-hot   { background: var(--hot); color: #fff; }
.pill-blue  { background: var(--blue-50); color: var(--accent); }
.pill-ink   { background: var(--color-deep-ink); color: #fff; }
.pill-outline-ink { background: transparent; border: 1px solid rgba(255,255,255,0.16); color: rgba(248,250,252,0.85); }
.pill-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--pulse); box-shadow: 0 0 0 4px rgba(163,230,53,0.22); }

/* ============ HERO ============ */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-deep-ink); color: var(--fg-inverse);
  padding: 56px 0 88px;
  background-image: url('../assets/patterns/dot-grid.svg');
  background-size: 28px 28px;
}
@media (min-width: 768px) { .hero { padding: 80px 0 140px; } }
.hero::before {
  content: ""; position: absolute; inset: -10% -10% auto auto; width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.32), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: -8%; bottom: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle at 70% 70%, rgba(163,230,53,0.18), transparent 60%);
  filter: blur(50px); pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 56px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 72px; } }

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  font-size: 13px; color: rgba(248,250,252,0.85);
}
.hero-tag .badge-mini { background: var(--pulse); color: var(--color-deep-ink); padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(42px, 6.6vw, 84px); line-height: 0.98;
  letter-spacing: -0.038em; margin: 22px 0 24px; text-wrap: balance; color: var(--fg-inverse);
}
.hero h1 .blue { color: #60A5FA; }
.hero h1 .lime { background: var(--pulse); color: var(--color-deep-ink); padding: 0 14px 4px; border-radius: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero h1 .ink-shot { color: var(--hot); font-style: italic; font-weight: 800; }
.hero p.sub { font-size: 18px; line-height: 1.55; color: rgba(248,250,252,0.74); max-width: 540px; margin: 0 0 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-ctas .meta { font-size: 13px; color: rgba(248,250,252,0.5); margin-left: 6px; }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.hero-stats .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; color: #fff; }
.hero-stats .num em { font-style: normal; color: var(--pulse); }
.hero-stats .lbl { font-size: 13px; color: rgba(248,250,252,0.6); margin-top: 6px; max-width: 200px; }

/* hero collage */
.collage { position: relative; aspect-ratio: 5 / 6; max-width: 540px; margin: 0 auto; }
.collage .tile { position: absolute; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.collage .t1 { inset: 0 36% 38% 2%; transform: rotate(-3.5deg); border: 5px solid var(--color-deep-ink); }
.collage .t2 { inset: 8% -2% 30% 46%; transform: rotate(4deg); border: 5px solid var(--color-deep-ink); }
.collage .t3 { inset: 56% 30% -2% 0%; transform: rotate(-2.2deg); border: 5px solid var(--color-deep-ink); }
.collage .tile img { width: 100%; height: 100%; object-fit: cover; }
.collage .meta-card {
  position: absolute; right: -16px; top: 36%; transform: rotate(7deg);
  background: var(--pulse); color: var(--color-deep-ink);
  padding: 10px 16px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  box-shadow: var(--shadow-glow-lime); z-index: 3; line-height: 1.1;
}
.collage .meta-card small { display: block; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; margin-bottom: 2px; }
.collage .live {
  position: absolute; left: -8px; bottom: 22%;
  background: rgba(15,23,42,0.92); color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 14px 10px 12px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
  z-index: 3; backdrop-filter: blur(8px);
}
.live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--hot); box-shadow: 0 0 0 4px rgba(249,115,22,0.25); animation: live-pulse 1.6s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 7px rgba(249,115,22,0.05); } }

/* ============ MARQUEE strip ============ */
.marquee { background: var(--pulse); color: var(--color-deep-ink); border-top: 1px solid var(--color-deep-ink); border-bottom: 1px solid var(--color-deep-ink); overflow: hidden; padding: 0; }
.marquee section { padding: 0; }
.marquee-track { display: flex; gap: 56px; padding: 14px 0; white-space: nowrap; animation: marquee 30s linear infinite; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.marquee-track span { display: inline-flex; align-items: center; gap: 14px; }
.marquee-track .star { color: var(--color-deep-ink); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ============ BELIEF ============ */
.belief { background: var(--bg); }
.belief-grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 900px) { .belief-grid { grid-template-columns: 1.4fr 1fr; gap: 80px; } }
.belief h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4.8vw, 60px); line-height: 1.02;
  letter-spacing: -0.032em; margin: 0; text-wrap: balance; color: var(--fg1);
}
.belief h2 .hi { background: var(--pulse); color: var(--color-deep-ink); padding: 0 14px 4px; border-radius: 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.belief h2 .underline { position: relative; white-space: nowrap; }
.belief h2 .underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--accent); border-radius: 999px; }
.belief-side p { font-size: 17px; line-height: 1.65; color: var(--fg2); margin: 0 0 24px; max-width: 480px; }
.belief-quote { padding: 24px; border-left: 3px solid var(--accent); background: var(--bg-elevated); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.belief-quote em { font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--fg1); letter-spacing: -0.01em; display: block; }
.belief-quote .who { display: block; margin-top: 12px; font-size: 13px; color: var(--fg2); }

/* ============ FOR CREATORS ============ */
.creators { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { display: grid; gap: 24px; align-items: end; margin-bottom: 56px; }
@media (min-width: 900px) { .section-head { grid-template-columns: 1.6fr 1fr; gap: 56px; } }
.section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; max-width: 720px; }
.section-head .lede { font-size: 16px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 380px; }

.creator-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .creator-grid { grid-template-columns: repeat(6, 1fr); } }
.cc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; transition: all var(--dur-base) var(--ease-out); position: relative; overflow: hidden; }
.cc:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cc .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--accent); margin-bottom: 18px; }
.cc h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.cc p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.cc.span-3 { grid-column: span 1; }
@media (min-width: 720px) {
  .cc.span-3 { grid-column: span 3; }
  .cc.span-2 { grid-column: span 2; }
  .cc.span-4 { grid-column: span 4; }
}
.cc.feature { background: var(--color-deep-ink); color: #fff; border-color: transparent; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; }
.cc.feature h3 { font-size: 24px; }
.cc.feature p { color: rgba(248,250,252,0.75); }
.cc.feature .ic { background: rgba(163,230,53,0.16); color: var(--pulse); }
.cc.studio { background: var(--accent); color: #fff; border-color: transparent; padding: 32px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }
.cc.studio h3 { font-size: 24px; }
.cc.studio p { color: rgba(255,255,255,0.85); }
.cc.studio .ic { background: rgba(255,255,255,0.16); color: #fff; }
.cc .tag-set { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.cc .tag-set .t { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.1); color: inherit; font-weight: 500; letter-spacing: 0.02em; }

/* category strip */
.languages { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.lang-chip { padding: 8px 14px; border: 1px solid var(--border); background: #fff; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--fg1); transition: all var(--dur-base) var(--ease-out); }
.lang-chip:hover { background: var(--color-deep-ink); color: #fff; border-color: var(--color-deep-ink); }
.lang-chip.on { background: var(--color-deep-ink); color: #fff; border-color: var(--color-deep-ink); }
.lang-chip .count { color: var(--fg3); margin-left: 6px; font-weight: 400; }
.lang-chip.on .count { color: rgba(255,255,255,0.55); }

/* ============ FOR BRANDS ============ */
.brands { background: var(--color-deep-ink); color: #fff; position: relative; overflow: hidden; }
.brands::before { content: ""; position: absolute; inset: 0; background-image: url('../assets/patterns/dot-grid.svg'); background-size: 32px 32px; opacity: 0.5; pointer-events: none; }
.brands > .container { position: relative; }
.brands h2 { color: #fff; }
.brands .section-head .lede { color: rgba(248,250,252,0.7); }

.brand-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .brand-row { grid-template-columns: repeat(3, 1fr); } }
.bc { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-xl); padding: 28px; transition: all var(--dur-base) var(--ease-out); }
.bc:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }
.bc .num { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--pulse); margin-bottom: 16px; letter-spacing: 0.04em; }
.bc h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; color: #fff; }
.bc p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(248,250,252,0.7); }

.proof-strip { margin-top: 56px; display: grid; gap: 20px; grid-template-columns: 1fr; padding: 28px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); }
@media (min-width: 760px) { .proof-strip { grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; } }
.proof-strip .label { font-size: 13px; color: rgba(248,250,252,0.6); }
.proof-strip .label strong { color: #fff; display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 4px; }
.proof-strip .stat { border-left: 1px solid rgba(255,255,255,0.1); padding-left: 20px; }
.proof-strip .stat .n { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.proof-strip .stat .n em { font-style: normal; color: var(--pulse); }
.proof-strip .stat .l { font-size: 12px; color: rgba(248,250,252,0.6); margin-top: 4px; }
@media (max-width: 760px) { .proof-strip .stat { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px; } }

/* ============ WHY ============ */
.why { background: var(--bg); }
.why-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(180px, auto); } }
.tile-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; position: relative; overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out); }
.tile-card:hover { box-shadow: var(--shadow-md); }
.tile-card .lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.tile-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; }
.tile-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.tile-card.dark { background: var(--color-deep-ink); color: #fff; border-color: transparent; }
.tile-card.dark h3 { color: #fff; }
.tile-card.dark p { color: rgba(248,250,252,0.7); }
.tile-card.dark .lbl { color: var(--pulse); }
.tile-card.lime { background: var(--pulse); color: var(--color-deep-ink); border-color: transparent; }
.tile-card.lime .lbl { color: var(--color-deep-ink); }
@media (min-width: 900px) {
  .why-grid > .w1 { grid-column: span 7; grid-row: span 2; }
  .why-grid > .w2 { grid-column: span 5; }
  .why-grid > .w3 { grid-column: span 5; }
  .why-grid > .w4 { grid-column: span 4; }
  .why-grid > .w5 { grid-column: span 4; }
  .why-grid > .w6 { grid-column: span 4; }
}
.tile-card.w1 { padding: 40px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; background-image: linear-gradient(135deg, var(--color-deep-ink) 0%, #1E293B 100%); color: #fff; border-color: transparent; }
.tile-card.w1 h3 { font-size: clamp(24px, 2.6vw, 32px); color: #fff; }
.tile-card.w1 p { color: rgba(248,250,252,0.72); font-size: 15.5px; max-width: 380px; }
.studio-illu { display: flex; gap: 8px; align-items: flex-end; margin-top: 24px; }
.studio-illu .bar { background: rgba(255,255,255,0.1); border-radius: 6px; flex: 1; }
.studio-illu .bar.h1 { height: 60px; } .studio-illu .bar.h2 { height: 80px; background: var(--pulse); }
.studio-illu .bar.h3 { height: 50px; } .studio-illu .bar.h4 { height: 92px; } .studio-illu .bar.h5 { height: 64px; background: rgba(96,165,250,0.4); } .studio-illu .bar.h6 { height: 76px; }

.big-stat { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 6vw, 80px); letter-spacing: -0.04em; line-height: 0.9; }
.big-stat sub { font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: 0; vertical-align: middle; margin-left: 8px; opacity: 0.7; }

/* ============ ETHICS ============ */
.ethics { background: var(--color-deep-ink); color: #fff; position: relative; overflow: hidden; }
.ethics::before { content: ""; position: absolute; inset: 0; background-image: url('../assets/patterns/diagonal-stripe.svg'); background-size: 28px 28px; opacity: 0.45; pointer-events: none; }
.ethics > .container { position: relative; }
.ethics h2 { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px; max-width: 760px; text-wrap: balance; }
.ethics h2 em { font-style: normal; color: var(--hot); }
.ethics .lede { color: rgba(248,250,252,0.72); font-size: 17px; line-height: 1.6; max-width: 620px; margin: 0 0 48px; }
.rules { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rule { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); transition: all var(--dur-base) var(--ease-out); }
.rule:hover { background: rgba(255,255,255,0.05); border-color: rgba(249,115,22,0.3); }
.rule .x { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: rgba(249,115,22,0.16); color: var(--hot); display: grid; place-items: center; }
.rule .txt { font-size: 14.5px; line-height: 1.5; color: rgba(248,250,252,0.92); padding-top: 4px; }

.ethics-pact { margin-top: 48px; padding: 32px; border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-xl); display: grid; gap: 20px; align-items: center; background: rgba(255,255,255,0.02); }
@media (min-width: 800px) { .ethics-pact { grid-template-columns: 1fr auto; } }
.ethics-pact h4 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: #fff; }
.ethics-pact p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(248,250,252,0.7); max-width: 520px; }

/* ============ FINAL ============ */
.final { background: var(--bg); }
.final-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .final-grid { grid-template-columns: 1fr 1fr; } }
.final-card { border-radius: var(--radius-2xl); padding: 40px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.final-card.creator { background: var(--accent); color: #fff; }
.final-card.creator::before { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; background: var(--pulse); border-radius: 999px; opacity: 0.85; }
.final-card.creator::after { content: ""; position: absolute; left: -40px; bottom: -40px; width: 180px; height: 180px; background: rgba(255,255,255,0.12); border-radius: 999px; }
.final-card.brand { background: var(--color-deep-ink); color: #fff; }
.final-card.brand::before { content: ""; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(249,115,22,0.5) 0%, transparent 65%); }
.final-card .body { position: relative; z-index: 2; }
.final-card .tag { position: absolute; top: 24px; right: 24px; z-index: 3; }
.final-card.creator .tag { background: var(--color-deep-ink); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.final-card.brand .tag { background: var(--hot); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.final-card h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 16px; text-wrap: balance; }
.final-card .desc { font-size: 16px; line-height: 1.55; opacity: 0.86; margin: 0 0 28px; max-width: 320px; }
.final-card .checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.final-card .checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; opacity: 0.92; }
.final-card .checks .ck { width: 18px; height: 18px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,0.18); display: grid; place-items: center; margin-top: 2px; color: #fff; }
.final-card.creator .ck { background: var(--color-deep-ink); }
.final-card .actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ============ FOOTER ============ */
.footer { background: var(--color-deep-ink); color: rgba(248,250,252,0.72); padding: 64px 0 32px; position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-mega { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 11vw, 168px); letter-spacing: -0.05em; line-height: 0.9; color: rgba(255,255,255,0.06); text-align: center; pointer-events: none; user-select: none; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 48px; }
.footer-mega em { font-style: normal; color: rgba(163,230,53,0.4); }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer h5 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 16px; }
.footer-col a { display: block; color: rgba(248,250,252,0.7); text-decoration: none; font-size: 14px; padding: 6px 0; transition: color var(--dur-base) var(--ease-out); }
.footer-col a:hover { color: #fff; }
.footer .lead p { font-size: 15px; line-height: 1.6; max-width: 360px; margin: 14px 0 24px; color: rgba(248,250,252,0.7); }
.footer .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; color: rgba(248,250,252,0.5); }
.footer .legal a { color: inherit; text-decoration: none; }
.footer .legal a:hover { color: #fff; }