:root {
--text: #000;
--bg: #fff;
--muted: #555;
--max-width: 760px;
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.7;
overflow-x: hidden;
}

.container {
max-width: var(--max-width);
margin: 0 auto;
padding: clamp(24px, 5vw, 64px) 24px;
}

/* ==========================
HEADER
========================== */

header {
margin-bottom: clamp(48px, 10vw, 96px);
}

.logo {
display: block;
width: 100%;
max-width: 800px;
height: auto;
margin: 0 auto;
}

/* ==========================
TYPOGRAPHY
========================== */

h1 {
font-size: clamp(2rem, 6vw, 2.4rem);
line-height: 1.05;
font-weight: 600;
letter-spacing: -0.04em;
text-align: center;
margin: 32px 0 24px;
}

p {
font-size: clamp(1rem, 2.5vw, 1.1rem);
margin: 0 0 24px;
}

/* ==========================
CONTENT
========================== */

section {
margin-top: clamp(40px, 8vw, 72px);
}

section p {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
}

ul {
margin: 32px 0;
padding-left: 20px;
}

li {
margin-bottom: 18px;
font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}

/* ==========================
FOOTER
========================== */

footer {
margin-top: clamp(60px, 12vw, 120px);
padding-top: 40px;
border-top: 1px solid #eee;
font-size: 0.95rem;
color: var(--muted);
text-align: center;
}

a {
color: inherit;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

/* ==========================
TABLETS
========================== */

@media (max-width: 768px) {
    .container {
        padding: 40px 20px;
    }

    header {
        margin-bottom: 64px;
    }

    .logo {
        max-width: 320px;
    }

}

/* ==========================
PHONES
========================== */

@media (max-width: 480px) {
    .container {
        padding: 32px 16px;
    }

    h1 {
        letter-spacing: -0.03em;
    }

    .logo {
        max-width: 260px;
    }

    ul {
        padding-left: 18px;
    }

    /* Better readability on very narrow screens */
    section p {
        text-align: left;
    }

}