/* ─── Autonym AI — light minimal design system ─────────────────── */
:root {
    --bg: #FAFAF8;
    --ink: #16181D;
    --text-secondary: #5C6470;
    --border: #E7E5E0;
    --accent: #3730A3;
    --accent-hover: #2B2580;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --max-w: 1080px;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out),
                  border-color 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; }
a { color: var(--accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--accent-hover); }

/* ─── Nav ─── */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(250, 250, 248, 0.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 16px 24px;
    display: flex; justify-content: space-between; align-items: center;
}
.brand {
    font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
    color: var(--ink); letter-spacing: -0.01em;
}
.brand:hover { color: var(--accent); }
.nav-contact { font-weight: 500; font-size: 0.95rem; }

/* ─── Sections shared ─── */
main > * { padding: 96px 24px; }
main > section { border-top: 1px solid var(--border); }
.thesis, .loop, .principles, .contact { max-width: 100%; }
.thesis > *, .loop > *, .principles > *, .contact > * {
    max-width: var(--max-w); margin-left: auto; margin-right: auto;
}
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 20px; }

/* ─── Hero ─── */
.hero { text-align: center; padding-top: 168px; padding-bottom: 104px; }
.hero-flavor {
    color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 28px;
    letter-spacing: 0.01em;
}
.hero h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    max-width: 820px; margin: 0 auto 24px;
}
.hero-sub {
    color: var(--text-secondary); font-size: clamp(1.05rem, 2vw, 1.25rem);
    max-width: 640px; margin: 0 auto 36px;
}

/* ─── CTA button ─── */
.cta {
    display: inline-block; background: var(--accent); color: #fff;
    font-weight: 600; font-size: 1rem; padding: 14px 32px; border-radius: 8px;
}
.cta:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }

/* ─── Thesis ─── */
.thesis { text-align: center; }
.thesis p { color: var(--text-secondary); font-size: 1.1rem; max-width: 680px; }

/* ─── Improvement loop ─── */
.loop h2 { text-align: center; margin-bottom: 48px; }
.loop-steps {
    list-style: none; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.loop-steps li {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 28px 24px; position: relative;
}
.loop-steps li:not(:last-child)::after {
    content: "→"; position: absolute; right: -20px; top: 50%;
    transform: translateY(-50%); color: var(--text-secondary);
    font-size: 1.1rem; width: 16px; text-align: center;
}
.step-num {
    display: inline-block; font-family: var(--font-display); font-weight: 700;
    color: var(--accent); font-size: 0.9rem; border: 1px solid var(--accent);
    border-radius: 50%; width: 28px; height: 28px; line-height: 26px;
    text-align: center; margin-bottom: 14px;
}
.loop-steps h3 { font-size: 1.1rem; margin-bottom: 8px; }
.loop-steps p { color: var(--text-secondary); font-size: 0.95rem; }

/* ─── Principles ─── */
.principles h2 { text-align: center; margin-bottom: 48px; }
.principle-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    padding: 32px 28px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--text-secondary); font-size: 0.98rem; }

/* ─── Contact ─── */
.contact { text-align: center; }
.contact p { color: var(--text-secondary); max-width: 560px; margin-bottom: 28px; }
.contact-email { margin-top: 24px; font-size: 0.98rem; color: var(--ink); }
#email-text { user-select: all; }
#copy-email {
    margin-left: 10px; font: 500 0.85rem var(--font-body);
    color: var(--accent); background: none; border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 12px; cursor: pointer; transition: var(--transition);
}
#copy-email:hover { border-color: var(--accent); }

/* ─── Footer ─── */
.site-footer {
    border-top: 1px solid var(--border); text-align: center;
    padding: 32px 24px; color: var(--text-secondary); font-size: 0.9rem;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .loop-steps { grid-template-columns: 1fr 1fr; }
    .loop-steps li:not(:last-child)::after { content: none; }
    .principle-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    main > * { padding: 64px 20px; }
    .hero { padding-top: 132px; }
    .loop-steps { grid-template-columns: 1fr; }
}