/* ================================================= */
/* PROMOPOD PRODUCTION STYLING SYSTEM */
/* ================================================= */


/* ============================= */
/* ROOT VARIABLES (COLOR SYSTEM) */
/* ============================= */

:root {

--primary: #0077ff;
--primary-dark: #005edb;

--text-main: #1a1a1a;
--text-light: #555;

--bg-main: #ffffff;
--bg-soft: #f8f9fb;
--bg-alt: #eef2f7;

--border-light: #e5e5e5;

--radius: 8px;

}


/* ============================= */
/* GLOBAL RESET */
/* ============================= */

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

body {

font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

line-height: 1.6;

color: var(--text-main);

background-color: var(--bg-main);

}


/* ============================= */
/* CONTAINER SYSTEM */
/* ============================= */

.container {

max-width: 1100px;

margin: auto;

padding: 0 20px;

}


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

header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 30px;

background: var(--bg-main);

border-bottom: 1px solid var(--border-light);

position: sticky;

top: 0;

z-index: 1000;

}

header h1 {

font-size: 24px;

font-weight: 700;

}

nav a {

margin-left: 24px;

text-decoration: none;

color: var(--text-main);

font-weight: 500;

transition: 0.2s ease;

}

nav a:hover {

color: var(--primary);

}


/* ============================= */
/* HERO SECTION */
/* ============================= */

.hero {

text-align: center;

padding: 100px 20px;

background: var(--bg-soft);

}

.hero h1 {

font-size: 48px;

margin-bottom: 24px;

font-weight: 700;

}

.hero p {

font-size: 20px;

max-width: 650px;

margin: auto;

margin-bottom: 35px;

color: var(--text-light);

}


/* ============================= */
/* CTA BUTTON */
/* ============================= */

.cta-button {

display: inline-block;

padding: 16px 34px;

background: var(--primary);

color: white;

text-decoration: none;

font-weight: 600;

border-radius: var(--radius);

transition: 0.2s ease;

}

.cta-button:hover {

background: var(--primary-dark);

transform: translateY(-1px);

}


/* ============================= */
/* SECTION BASE */
/* ============================= */

section {

padding: 90px 0;

}

section h2 {

font-size: 36px;

margin-bottom: 24px;

text-align: center;

font-weight: 700;

}

.section-intro {

font-size: 22px;

font-weight: 500;

text-align: center;

margin-bottom: 40px;

}

section p {

margin-bottom: 16px;

font-size: 18px;

color: var(--text-light);

max-width: 750px;

margin-left: auto;

margin-right: auto;

}


/* ============================= */
/* BACKGROUND VARIATIONS */
/* ============================= */

.why-promopod {

background: var(--bg-main);

}

.discipline-structure {

background: var(--bg-soft);

}

.how-it-works {

background: var(--bg-main);

}

.core-features {

background: var(--bg-alt);

}

.who-its-for {

background: var(--bg-main);

}

.future-vision {

background: var(--bg-soft);

}

.final-cta {

background: var(--bg-alt);

text-align: center;

}


/* ============================= */
/* STEPS GRID */
/* ============================= */

.steps {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 30px;

margin-top: 50px;

}

.step {

background: white;

padding: 30px;

border-radius: var(--radius);

border: 1px solid var(--border-light);

text-align: center;

transition: 0.2s ease;

}

.step:hover {

transform: translateY(-4px);

box-shadow: 0 10px 25px rgba(0,0,0,0.06);

}

.step h3 {

margin-bottom: 14px;

font-size: 20px;

font-weight: 600;

}


/* ============================= */
/* FEATURES GRID */
/* ============================= */

.features {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 30px;

margin-top: 50px;

}

.feature {

background: white;

padding: 35px;

border-radius: var(--radius);

border: 1px solid var(--border-light);

transition: 0.2s ease;

}

.feature:hover {

transform: translateY(-4px);

box-shadow: 0 10px 25px rgba(0,0,0,0.06);

}

.feature h3 {

margin-bottom: 12px;

font-size: 22px;

font-weight: 600;

}


/* ============================= */
/* AUDIENCE GRID */
/* ============================= */

.audience {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 30px;

margin-top: 50px;

}

.user-type {

background: white;

padding: 30px;

border-radius: var(--radius);

border: 1px solid var(--border-light);

transition: 0.2s ease;

}

.user-type:hover {

transform: translateY(-4px);

box-shadow: 0 10px 25px rgba(0,0,0,0.06);

}

.user-type h3 {

margin-bottom: 12px;

font-size: 21px;

font-weight: 600;

}


/* ============================= */
/* FINAL CTA */
/* ============================= */

.final-cta p {

margin-bottom: 30px;

font-size: 19px;

}


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

footer {

text-align: center;

padding: 30px;

border-top: 1px solid var(--border-light);

background: white;

font-size: 14px;

color: #777;

}


/* ============================= */
/* RESPONSIVE BASE */
/* ============================= */

@media (max-width: 1024px) {

.steps {

grid-template-columns: repeat(2, 1fr);

}

.audience {

grid-template-columns: repeat(2, 1fr);

}

}

@media (max-width: 768px) {

.features {

grid-template-columns: 1fr;

}

.steps {

grid-template-columns: 1fr;

}

.audience {

grid-template-columns: 1fr;

}

.hero h1 {

font-size: 36px;

}

.hero p {

font-size: 18px;

}

section {

padding: 70px 0;

}

}

@media (max-width: 480px) {

.hero {

padding: 70px 20px;

}

.hero h1 {

font-size: 30px;

}

.section-intro {

font-size: 20px;

}

}