:root {
  --brand-accent: #7C5CF6;
  --brand-accent-hover: #6B4FE0;
  --brand-accent-subtle: #F0EEFF;
  --brand-text-on-accent: #FFFFFF;
  --brand-bg: #FFFFFF;
  --brand-surface: #F8F9FA;
  --brand-border: #E5E7EB;
  --brand-text: #111827;
  --brand-text-secondary: #4B5563;
  --brand-font: 'Inter', system-ui, sans-serif;
}
/*
 * "launch" — the bookmarks widget IS the hero. Real launchpad close-up
 * (colorful favicons) tips in, a clock card peeks behind it, and two accent
 * rings pulse off the favicons: "one click away". Soft accent glow canvas.
 *
 * Motion rule: base styles = final resting state; keyframes animate FROM
 * the displaced state, so .no-motion rests complete.
 */

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-display: block;
  src: url('fonts/inter-700.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { font-family: var(--brand-font); -webkit-font-smoothing: antialiased; }

.ad {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--brand-accent-subtle) 0%, transparent 55%),
    var(--brand-bg);
  border: 1px solid var(--brand-border);
  outline: none;
}
.ad:focus-visible { border-color: var(--brand-accent); }

/* ── Hero cluster ──────────────────────────────────────────────────────── */

.bm {
  position: absolute;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--brand-border);
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.18);
  transform: rotate(-3deg);
  animation: hero-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms both;
  z-index: 2;
}
.side {
  position: absolute;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--brand-border);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.14);
  transform: rotate(4deg);
  animation: hero-in 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 550ms both;
  z-index: 1;
}

/* Two pulses off the favicons — "one click away". */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--brand-accent);
  opacity: 0;
  z-index: 3;
}
.r1 { animation: ring-pop 900ms cubic-bezier(0.16, 1, 0.3, 1) 1900ms 1; }
.r2 { animation: ring-pop 900ms cubic-bezier(0.16, 1, 0.3, 1) 2500ms 1; }

/* ── Copy + CTA ────────────────────────────────────────────────────────── */

.logo { display: block; animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.headline {
  font-weight: 700;
  color: var(--brand-text);
  letter-spacing: -0.015em;
  line-height: 1.12;
  animation: rise 650ms cubic-bezier(0.16, 1, 0.3, 1) 900ms both;
}
.sub {
  font-weight: 400;
  color: var(--brand-text-secondary);
  line-height: 1.3;
  animation: rise 650ms cubic-bezier(0.16, 1, 0.3, 1) 1150ms both;
}
.sub strong { color: var(--brand-accent); }

.cta {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--brand-text-on-accent);
  background: var(--brand-accent);
  border-radius: 999px;
  white-space: nowrap;
  animation: cta-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 3100ms both;
}
.ad:hover .cta { background: var(--brand-accent-hover); }
.cta-arrow { width: 11px; height: 11px; flex: none; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.ad:hover .cta-arrow { transform: translateX(2px); }

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px) rotate(-9deg) scale(0.94); }
  to { opacity: 1; }
}
@keyframes ring-pop {
  0% { opacity: 0.8; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes cta-pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.8); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 300×250 — copy top, hero cluster bottom ───────────────────────────── */

.ad--300x250 { width: 300px; height: 250px; }
.ad--300x250 .copy { position: absolute; left: 16px; top: 16px; width: 260px; }
.ad--300x250 .logo { height: 14px; width: auto; margin-bottom: 7px; }
.ad--300x250 .headline { font-size: 20px; max-width: 240px; }
.ad--300x250 .sub { font-size: 11.5px; margin-top: 4px; }
.ad--300x250 .bm { left: 14px; top: 106px; width: 148px; }
.ad--300x250 .side { left: 176px; top: 118px; width: 84px; }
.ad--300x250 .r1 { left: 34px; top: 134px; width: 32px; height: 32px; }
.ad--300x250 .r2 { left: 104px; top: 162px; width: 28px; height: 28px; }
.ad--300x250 .cta { font-size: 12px; padding: 8px 14px; right: 14px; bottom: 12px; }

/* ── 728×90 — copy left, hero cluster center-right, CTA right ──────────── */

.ad--728x90 { width: 728px; height: 90px; }
.ad--728x90 .copy { position: absolute; left: 18px; top: 14px; width: 250px; }
.ad--728x90 .logo { height: 13px; width: auto; margin-bottom: 5px; }
.ad--728x90 .headline { font-size: 17px; }
.ad--728x90 .sub { font-size: 10.5px; margin-top: 3px; }
.ad--728x90 .bm { left: 300px; top: -14px; width: 150px; } /* bleeds top + bottom */
.ad--728x90 .side { left: 460px; top: 18px; width: 84px; }
.ad--728x90 .r1 { left: 322px; top: 22px; width: 30px; height: 30px; }
.ad--728x90 .r2 { left: 392px; top: 46px; width: 26px; height: 26px; }
.ad--728x90 .cta { font-size: 12px; padding: 8px 15px; right: 16px; top: 50%; margin-top: -16px; }

/* ── Reduced motion — rest complete ────────────────────────────────────── */

.no-motion * { animation: none !important; transition: none !important; }