/* Fracto website UI kit — component + layout styles. Tokens come from colors_and_type.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.ds-eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; display: inline-block; }

/* ---- Buttons ---- */
.ds-btn { font-family: var(--font-body); font-weight: 600; border: 1px solid transparent; border-radius: 10px; white-space: nowrap;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1; transition: transform .15s cubic-bezier(.2,.7,.2,1), box-shadow .2s, background .2s, filter .2s; text-decoration:none; }
.ds-btn-md { font-size: 15px; padding: 12px 20px; }
.ds-btn-lg { font-size: 16px; padding: 15px 26px; }
.ds-btn:active { transform: scale(.975); }
.ds-btn-primary { background: var(--aura-magenta); color: #fff; }
.ds-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 8px 26px rgba(255,24,147,.32); transform: translateY(-1px); }
.ds-btn-gradient { background: var(--aura-gradient); color: #fff; background-size: 140% 100%; }
.ds-btn-gradient:hover { background-position: 100% 0; box-shadow: 0 10px 30px rgba(156,100,255,.30); transform: translateY(-1px); }
.ds-btn-cyan { background: var(--cyan); color: var(--navy-900); }
.ds-btn-cyan:hover { filter: brightness(1.07); box-shadow: 0 8px 26px rgba(73,238,244,.32); transform: translateY(-1px); }
.ds-btn-outline { background: transparent; border-color: rgba(255,255,255,.24); color: #fff; }
.ds-btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
.ds-btn-outline-dark { background: transparent; border-color: var(--mist-300); color: var(--navy-900); }
.ds-btn-outline-dark:hover { border-color: var(--aura-magenta); color: var(--aura-magenta); }
.ds-btn-ghost { background: transparent; color: var(--cyan); padding-left: 6px; padding-right: 6px; }
.ds-btn-ghost:hover { gap: 12px; }

/* ---- Badges ---- */
.ds-badge { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; line-height: 1; display:inline-flex; align-items:center; gap:6px; }
.ds-badge-magenta { background: rgba(255,24,147,.12); color: #D1006B; }
.ds-badge-violet { background: rgba(156,100,255,.16); color: #7B3FE4; }
.ds-badge-cyan { background: rgba(73,238,244,.16); color: #0B8E97; }
.ds-badge.solid { background: var(--aura-magenta); color: #fff; }
[data-theme="dark"] .ds-badge-magenta { background: rgba(255,24,147,.16); color: #FF7AC0; }
[data-theme="dark"] .ds-badge-violet { background: rgba(156,100,255,.18); color: #C2A1FF; }
[data-theme="dark"] .ds-badge-cyan { background: rgba(73,238,244,.16); color: #8BF4F8; }

/* ---- Icon badge ---- */
.ds-iconbadge { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---- Sections ---- */
section { position: relative; }
.sec-pad { padding: 96px 0; }
.sec-dark { background: var(--navy-900); color: #F3F5FB; }
.sec-deep { background: radial-gradient(120% 90% at 50% -10%, #16204a 0%, #0C1126 55%); color: #F3F5FB; }
.sec-light { background: var(--mist-50); color: var(--navy-900); }
.sec-paper { background: #fff; color: var(--navy-900); }
.center { text-align: center; }
.kicker-row { display:flex; align-items:center; gap:10px; }

h1,h2,h3,h4 { margin: 0; }
.h-display { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 68px); line-height: 1.03; letter-spacing: -.025em; }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
.lead { font-size: 19px; line-height: 1.6; color: var(--fg-muted); }
.sec-dark .lead, .sec-deep .lead { color: #A9B2C9; }
.aura-text { background: var(--aura-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Grid helpers ---- */
.grid { display: grid; gap: 22px; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Feature card ---- */
.feature { background: #fff; border: 1px solid var(--mist-200); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 16px 0 8px; }
.feature .feat-tag { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--navy-900); margin: 0 0 10px; line-height: 1.4; }
.feature p { font-size: 14.5px; line-height: 1.6; color: var(--slate-600); margin: 0; }

/* dark feature card */
.feature-d { background: var(--navy-800); border: 1px solid rgba(255,255,255,.10); color: #fff; border-radius: 20px; padding: 26px; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.feature-d:hover { transform: translateY(-4px); box-shadow: var(--glow-cyan); border-color: rgba(73,238,244,.4); }
.feature-d h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 16px 0 8px; }
.feature-d p { font-size: 14.5px; line-height: 1.6; color: #A9B2C9; margin: 0; }

/* ---- Stat ---- */
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.stat .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); margin-top: 10px; }
.sec-dark .stat .lbl, .sec-deep .stat .lbl { color: #8A93A8; }

/* ---- Inputs ---- */
.field { margin-bottom: 16px; }
.field label { display:block; font-size: 12px; font-weight: 700; letter-spacing:.04em; color: var(--fg-muted); margin-bottom: 7px; font-family: var(--font-mono); text-transform: uppercase; }
.inp, .ta { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); outline: none; transition: border-color .18s, box-shadow .18s; }
.inp::placeholder, .ta::placeholder { color: var(--fg-subtle); }
.inp:focus, .ta:focus { border-color: var(--aura-magenta); box-shadow: 0 0 0 3px var(--ring); }
.ta { resize: vertical; min-height: 96px; }
.field.err .inp, .field.err .ta { border-color: #ff4d6d; box-shadow: 0 0 0 3px rgba(255,77,109,.18); }
.err-msg { color: #ff4d6d; font-size: 12px; margin-top: 6px; font-family: var(--font-mono); }

/* Entrance: transform-only so content is ALWAYS visible even if the
   animation is frozen (e.g. background tab / headless capture). */
@keyframes revealIn { from { transform: translateY(16px); } to { transform: none; } }
[data-reveal] { opacity: 1; animation: revealIn .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { animation: none; } }

@media (max-width: 900px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-2 { grid-template-columns: 1fr; }
  .sec-pad { padding: 64px 0; }
}
@media (max-width: 620px) {
  .g-3, .g-4 { grid-template-columns: 1fr; }
  .wrap { padding: 0 20px; }
}

/* ============ DARK-THEME FLIPS for the light content sections ============ */
[data-theme="dark"] .sec-light { background: var(--navy-900); color: #F3F5FB; }
[data-theme="dark"] .sec-paper { background: var(--navy-850); color: #F3F5FB; }
[data-theme="dark"] .feature { background: var(--navy-800); border-color: rgba(255,255,255,.10); color: #fff; box-shadow: none; }
[data-theme="dark"] .feature h4 { color: #fff; }
[data-theme="dark"] .feature .feat-tag { color: #fff; }
[data-theme="dark"] .feature p { color: #A9B2C9; }
[data-theme="dark"] .feature:hover { box-shadow: var(--glow-violet); border-color: rgba(156,100,255,.4); }
[data-theme="dark"] .work-card { background: var(--navy-800); border-color: rgba(255,255,255,.10); color: #fff; box-shadow: none; }
[data-theme="dark"] .work-card h4 { color: #fff; }
[data-theme="dark"] .work-card p { color: #A9B2C9; }
[data-theme="dark"] .work-card:hover { box-shadow: var(--glow-magenta); border-color: rgba(255,24,147,.35); }
[data-theme="dark"] .work-link { color: #fff; }
[data-theme="dark"] .contact-card { background: var(--navy-800); border-color: rgba(255,255,255,.10); box-shadow: none; }
[data-theme="dark"] .contact-points li { color: #A9B2C9; }
[data-theme="dark"] .sent-state p { color: #A9B2C9; }