/* ============================================================
 * Pulsar landing — shared design system
 * Referenced by every section in landing/sections/*.html
 * (Original §1, §2, §6.1 were built BEFORE this file and inline
 * the same variables — they remain valid; new sections lean here.)
 * ============================================================ */

:root {
  /* cockpit DNA */
  --signal:        #0d9488;
  --signal-2:      #0f766e;
  --signal-3:      #115e59;
  --signal-bg:     #f0fdfa;
  --signal-border: rgba(13, 148, 136, 0.22);

  --surface:       #fefefe;
  --surface-2:     #f8fafc;
  --surface-3:     #f1f5f9;

  --paper:         #fbfaf5;
  --paper-grid:    rgba(15, 23, 42, 0.04);

  --border:        #e2e8f0;
  --border-2:      #cbd5e1;
  --border-3:      #94a3b8;

  --ink:           #0a0f1c;
  --ink-2:         #1e293b;
  --ink-3:         #475569;
  --ink-4:         #64748b;
  --ink-5:         #94a3b8;

  --danger:        #be123c;
  --danger-2:      #9f1239;
  --danger-bg:     #fff1f3;
  --danger-border: rgba(190, 18, 60, 0.22);

  --amber:         #b45309;
  --amber-bg:      #fef3c7;

  /* destination brand colors (used in legends, micro-decoration) */
  --c-meta:       #1877f2;
  --c-tiktok:     #fe2c55;
  --c-google:     #4285f4;
  --c-ga4:        #f9ab00;
  --c-snap:       #fffc00;
  --c-linkedin:   #0a66c2;
  --c-pinterest:  #e60023;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 8px 32px -8px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 30px 60px -20px rgba(15, 23, 42, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background-image:
    linear-gradient(var(--paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

@keyframes rise     { from {opacity:0; transform:translateY(14px);} to {opacity:1; transform:translateY(0);} }
@keyframes fade-in  { from {opacity:0;} to {opacity:1;} }
@keyframes pulse    { 0%,100% {opacity:.5;} 50% {opacity:1;} }
@keyframes blink    { 0%,60% {opacity:1;} 80%,100% {opacity:0;} }
@keyframes draw-ul  { to {transform: scaleX(1);} }

/* shared section frame */
.section {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px 64px;
}
.section-marg-l, .section-marg-r {
  position: absolute;
  top: 80px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-5);
  font-weight: 500;
}
.section-marg-l { left: 64px; }
.section-marg-r { right: 64px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-2);
  margin-bottom: 28px;
}
.eyebrow::before { content:''; width:30px; height:1px; background: var(--signal); }
.eyebrow .pulse-dot { width:6px; height:6px; border-radius:50%; background: var(--signal); display:inline-block; margin-left:4px; animation: pulse 1.6s ease-in-out infinite; }
.eyebrow.danger { color: var(--danger); }
.eyebrow.danger::before { background: var(--danger); }
.eyebrow.danger .pulse-dot { background: var(--danger); }

.headline {
  font-family: 'Fraunces', serif;
  font-weight: 360;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-bottom: 28px;
}
.headline em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
  color: var(--signal-2);
  position: relative;
}
.headline em.danger { color: var(--danger); }
.headline em::after {
  content:''; position:absolute; left:0; right:0; bottom:0.1em; height:0.05em;
  background: currentColor; opacity:.25;
  transform-origin:left; transform: scaleX(0);
  animation: draw-ul 700ms 700ms cubic-bezier(0.2,0.7,0.2,1) forwards;
}

.lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 640px;
  margin-bottom: 56px;
}

/* CTA */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
  font-family: 'Sora', sans-serif;
}
.cta-primary:hover { background: var(--signal-2); border-color: var(--signal-2); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(13, 148, 136, 0.5); }
.cta-primary .arrow { font-family: 'JetBrains Mono', monospace; transition: transform 160ms ease; }
.cta-primary:hover .arrow { transform: translateX(4px); }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}
.cta-secondary::after {
  content:''; position:absolute; left:4px; right:4px; bottom:10px;
  height:1px; background: var(--ink-2);
  transform-origin:left; transform: scaleX(0);
  transition: transform 200ms cubic-bezier(0.2,0.7,0.2,1);
}
.cta-secondary:hover::after { transform: scaleX(1); }

/* responsive */
@media (max-width: 980px) {
  .section { padding: 80px 32px; }
  .section-marg-l { left: 32px; }
  .section-marg-r { right: 32px; }
}