/* SEO Secret site — shared styles */
@import url('tokens.css');

html { scroll-behavior: smooth; }
body { background: var(--bg-app); margin: 0; }

/* ============ Layout ============ */
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1480px; margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }
@media (max-width: 880px) {
  .section { padding: 80px 0; }
  .section-sm { padding: 56px 0; }
  .container, .container-wide { padding: 0 20px; }
}


/* ============ Buttons ============ */
.btn {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 180ms var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn .arrow { font-family: var(--font-display); font-weight: 700; transition: transform 220ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--color-anthracite); color: var(--color-ivory); }
.btn-primary:hover { background: var(--anthracite-90); transform: translateY(-1px); opacity: 1; }
.btn-accent { background: var(--color-chartreuse); color: var(--color-anthracite); }
.btn-accent:hover { background: var(--chartreuse-deep); transform: translateY(-1px); opacity: 1; }
.btn-indigo { background: var(--color-indigo); color: var(--color-ivory); }
.btn-indigo:hover { background: var(--indigo-deep); opacity: 1; }
.btn-ghost {
  background: transparent;
  color: var(--color-anthracite);
  box-shadow: inset 0 0 0 1.5px var(--color-anthracite);
}
.btn-ghost:hover { background: var(--color-anthracite); color: var(--color-ivory); opacity: 1; }
.btn-ghost-light {
  background: transparent;
  color: var(--color-ivory);
  box-shadow: inset 0 0 0 1.5px rgba(244,240,234,0.5);
}
.btn-ghost-light:hover { background: var(--color-ivory); color: var(--color-anthracite); opacity: 1; }

/* ============ Eyebrow ============ */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-chartreuse);
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
}

/* ============ Display ============ */
.display-h {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.display-h em { font-style: normal; color: var(--color-indigo); }

/* ============ Section head ============ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 920px;
  margin-bottom: 64px;
}

/* ============ Card primitives ============ */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-2);
}
.card-flat {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  outline: 1px solid var(--border-default);
}

/* ============ Brand text combos ============ */
.text-on-dark   { color: rgba(244,240,234,0.78); }
.text-on-indigo { color: rgba(244,240,234,0.85); }
.text-on-chart  { color: rgba(32,32,32,0.78); }

/* ============ Marquee ============ */
.marquee {
  background: var(--color-indigo);
  color: var(--color-chartreuse);
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--color-anthracite);
  border-bottom: 1px solid var(--color-anthracite);
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee span.tag {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(28px, 4vw, 56px);
  padding: 0 28px;
  line-height: 1;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Reveal on scroll ============ */
.reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ============ Links ============ */
.link-underline { position: relative; }
.link-underline::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; background: currentColor; transform-origin: left;
  transform: scaleX(0); transition: transform 260ms var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ============ Footer wordmark ============ */
.giant-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.85;
  font-size: clamp(40px, 13vw, 220px);
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ============ Form ============ */
.input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 15px;
  border: 1.5px solid rgba(244,240,234,0.18);
  background: rgba(244,240,234,0.06);
  border-radius: 8px;
  color: var(--color-ivory);
  outline: none;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
textarea.input { min-height: 104px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; }
.ss-fields { display: flex; flex-direction: column; gap: 14px; }
.ss-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ss-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 620px) { .ss-row { grid-template-columns: 1fr; } .input { font-size: 16px; } }
.input:focus { border-color: var(--color-chartreuse); background: rgba(244,240,234,0.10); }
.input-light {
  background: #fff;
  color: var(--color-anthracite);
  border: 1.5px solid var(--border-default);
}
.input-light:focus { border-color: var(--color-indigo); }
.field-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,240,234,0.7);
}

/* ============ Tag/Pill ============ */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(32,32,32,0.06); color: var(--color-anthracite);
}
.pill-dark { background: rgba(244,240,234,0.10); color: var(--color-ivory); }
.pill-chart { background: var(--color-chartreuse); color: var(--color-anthracite); }
.pill-indigo { background: var(--color-indigo); color: var(--color-chartreuse); }

/* ============ Scroll hint ============ */
.scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,240,234,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
  content: ''; width: 1px; height: 32px;
  background: linear-gradient(to bottom, rgba(244,240,234,0.55), transparent);
  animation: scrollLine 2.2s var(--ease-out) infinite;
}
@keyframes scrollLine { 0% { transform: scaleY(0.2); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============ Utility ============ */
.no-wrap { white-space: nowrap; }
.muted { color: var(--anthracite-60); }
hr.rule { border: 0; border-top: 1px solid var(--border-default); margin: 0; }
hr.rule-dark { border: 0; border-top: 1px solid rgba(244,240,234,0.14); margin: 0; }

/* ============ Picto system (site-wide) ============ */
.picto{position:relative;width:60px;height:60px;border-radius:18px;background:var(--indigo-tint);color:var(--color-indigo);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:all 220ms var(--ease-out)}
.picto-ring{position:absolute;inset:-7px;border-radius:22px;border:1px dashed rgba(104,91,200,0.45);animation:pictoSpin 18s linear infinite;transition:border-color 220ms var(--ease-out)}
.picto-dot{position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--color-chartreuse);box-shadow:0 0 0 3px rgba(218,255,8,0.25);animation:pictoPulse 2.4s var(--ease-in-out) infinite}
.picto--dark{background:rgba(218,255,8,0.12);color:var(--color-chartreuse)}
.picto--dark .picto-ring{border-color:rgba(218,255,8,0.45)}
.picto--dark .picto-dot{background:var(--color-indigo);box-shadow:0 0 0 3px rgba(104,91,200,0.3)}
.picto-host:hover .picto{background:var(--color-chartreuse);color:var(--color-anthracite);transform:rotate(-6deg) scale(1.06)}
.picto-host:hover .picto-ring{border-color:rgba(255,255,255,0.6);animation-duration:6s}
.picto-host:hover .picto i{animation:pictoNudge 0.6s var(--ease-out)}
@keyframes pictoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pictoPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:0.6}}
@keyframes pictoNudge{0%{transform:translateY(0)}40%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.picto-ring,.picto-dot{animation:none!important}}

.form-error{margin:14px 0 0;font-size:13px;line-height:1.45;color:oklch(0.55 0.18 28)}.form-error a{color:inherit;text-decoration:underline}
.form-error-dark{color:oklch(0.78 0.15 40);text-align:center}

/* ============ Mobile ============ */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; }
  .section-head { margin-bottom: 40px; gap: 18px; }
}