:root {

    --navy: #2a1a52;

    --navy-deep: #1d1138;

    --purple: #7b3fc4;

    --purple-light: #b48fe8;

    --yellow: #f6c92d;

    --yellow-bright: #ffd93d;

    --cream: #fdf6e3;

    --cream-deep: #f9ecc8;

    --paper: #fffbf0;

    --ink: #1a0d36;

    --hot-pink: #ff5ea8;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', sans-serif;

    background: var(--cream);

    color: var(--ink);

    line-height: 1.5;

    overflow-x: hidden;

}



/* ============ NAV ============ */

nav {

    position: sticky;

    top: 0;

    z-index: 100;

    background: var(--navy);

    color: var(--cream);

    padding: 16px 32px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 14px;

}



.logo img {

    width: 70px;

}



.logo p {

    font-weight: 800;

}







.nav-links {

    display: flex;

    gap: 15px;

    align-items: center;

}



.nav-links a {

    color: var(--cream);

    text-decoration: none;

    font-size: 14px;

    font-weight: 500;

    opacity: 0.85;

    transition: opacity 0.2s;

}



.nav-links a:hover {

    opacity: 1;

}



.nav-cta {

    background: var(--yellow) !important;

    color: var(--navy) !important;

    padding: 10px 20px;

    border-radius: 999px;

    font-weight: 600 !important;

    font-size: 13px !important;

    opacity: 1 !important;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    transition: transform 0.2s;

}



.nav-cta:hover {

    transform: scale(1.04);

}



.color1 {

    background: var(--purple) !important;

    color: #fff !important;

}



.secondary {

    background: transparent !important;

    color: var(--cream) !important;

    border: 1.5px solid var(--cream);

    border-radius: 999px;

}





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

.hero-wrap {

    background: var(--cream);

    padding: 16px;

}



.hero {

    background: var(--navy);

    color: var(--cream);

    border-radius: 32px;

    padding: 80px 48px 0;

    position: relative;

    overflow: hidden;

    text-align: center;

    background-image:

        radial-gradient(circle at 20% 30%, #7b3fc433 0%, transparent 50%),

        radial-gradient(circle at 85% 70%, #f6c92d22 0%, transparent 45%);

}



.hero-eyebrow {

    font-family: 'Inter', sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: var(--yellow);

    margin-bottom: 28px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

}



.hero-eyebrow::before,

.hero-eyebrow::after {

    content: '';

    width: 32px;

    height: 1.5px;

    background: var(--yellow);

}



.hero h1 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 400;

    font-size: clamp(44px, 6.5vw, 96px);

    line-height: 1.02;

    letter-spacing: -0.035em;

    max-width: 1100px;

    margin: 0 auto 32px;

}



.hero h1 em {

    font-style: italic;

    font-weight: 400;

    color: var(--yellow);

}



.glyph {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    vertical-align: middle;

    margin: 0 8px;

    transform: translateY(-4px);

}



.glyph-star {

    width: 0.9em;

    height: 0.9em;

    color: var(--yellow);

}



.glyph-pill {

    background: var(--purple);

    color: var(--cream);

    padding: 0.15em 0.5em;

    border-radius: 999px;

    font-size: 0.75em;

    font-family: 'Public Sans', sans-serif;

    font-style: normal;

    font-weight: 500;

    transform: translateY(-0.15em);

}



.hero-sub {

    font-size: 18px;

    line-height: 1.55;

    max-width: 620px;

    margin: 0 auto 40px;

    color: #fdf6e3cc;

}



.hero-buttons {

    display: flex;

    gap: 16px;

    justify-content: center;

    margin-bottom: 80px;

    flex-wrap: wrap;

}



.btn-primary {

    background: var(--yellow);

    color: var(--navy);

    padding: 16px 32px;

    border: none;

    border-radius: 999px;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: transform 0.2s, box-shadow 0.2s;

    cursor: pointer;

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 0 #d4a91c;

}



.btn-secondary {

    background: transparent;

    color: var(--cream);

    padding: 16px 32px;

    border: 1.5px solid var(--cream);

    border-radius: 999px;

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    text-decoration: none;

    transition: all 0.2s;

}



.btn-secondary:hover {

    background: var(--cream);

    color: var(--navy);

}



.float-shape {

    position: absolute;

    pointer-events: none;

}



.shape-star-1 {

    top: 80px;

    left: 8%;

    width: 36px;

    color: var(--cream);

    opacity: 0.7;

}



.shape-star-2 {

    top: 200px;

    right: 10%;

    width: 28px;

    color: var(--yellow);

}



.shape-burst {

    bottom: 280px;

    left: 5%;

    width: 50px;

    color: var(--hot-pink);

    animation: spin 20s linear infinite;

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



.doodle-arrow {

    position: absolute;

    top: 180px;

    left: 12%;

    width: 90px;

    color: var(--yellow);

    transform: rotate(-15deg);

}



.hero-illustration {

    margin-top: 40px;

    background: var(--cream);

    border-radius: 24px 24px 0 0;

    padding: 48px 32px 80px;

    position: relative;

    margin-left: -48px;

    margin-right: -48px;

}



.hero-illustration::before {

    content: '';

    position: absolute;

    left: 0;

    right: 0;

    top: 60%;

    bottom: 0;

    background: var(--purple);

    z-index: 0;

}



.app-mockup-row {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1.2fr 1fr;

    gap: 24px;

    max-width: 1000px;

    margin: 0 auto;

    align-items: end;

}



.mock-card {

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 16px;

    padding: 20px;

    box-shadow: 6px 6px 0 var(--ink);

    text-align: left;

}



.mock-card-1 {

    transform: rotate(-3deg) translateY(20px);

    background: var(--yellow-bright);

}



.mock-card-2 {

    background: var(--paper);

    transform: scale(1.05);

}



.mock-card-3 {

    transform: rotate(3deg) translateY(20px);

    background: var(--purple-light);

}



.mock-label {

    font-family: 'Public Sans', sans-serif;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--ink);

    margin-bottom: 12px;

    text-align: center;

}



.mock-title {

    font-family: 'Public Sans', sans-serif;

    font-weight: 600;

    font-size: 18px;

    margin-bottom: 8px;

    line-height: 1.2;

    color: var(--ink);

}



.mock-bar {

    height: 8px;

    background: var(--ink);

    border-radius: 4px;

    margin-bottom: 6px;

    opacity: 0.15;

}



.mock-bar.short {

    width: 60%;

}



.mock-bar.med {

    width: 80%;

}



.mock-pill {

    display: inline-block;

    background: var(--ink);

    color: var(--cream);

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 600;

    margin-top: 8px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.chip-float {

    position: absolute;

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 999px;

    padding: 6px 14px;

    font-size: 12px;

    font-weight: 600;

    font-family: 'Inter', sans-serif;

    color: var(--ink);

    box-shadow: 3px 3px 0 var(--ink);

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 6px;

}



.chip-1 {

    top: 30px;

    left: 12%;

    background: var(--hot-pink);

    color: var(--cream);

}



.chip-2 {

    top: 80px;

    right: 10%;

    background: var(--yellow);

}



.chip-3 {

    bottom: 30%;

    left: 8%;

    background: var(--cream);

}



/* ============ TICKER ============ */

.ticker {

    background: var(--navy);

    color: var(--yellow);

    padding: 18px 0;

    overflow: hidden;

    border-top: 2px solid var(--ink);

    border-bottom: 2px solid var(--ink);

}



.ticker-track {

    display: flex;

    gap: 40px;

    white-space: nowrap;

    animation: scroll 35s linear infinite;

    font-family: 'Public Sans', sans-serif;

    font-size: 24px;

    font-weight: 500;

    font-style: italic;

}



.ticker-track span {

    display: inline-flex;

    align-items: center;

    gap: 40px;

}



.ticker-dot {

    color: var(--hot-pink);

    font-size: 28px;

    font-style: normal;

}



@keyframes scroll {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }

}



/* ============ ABOUT ============ */

.about {

    padding: 120px 32px;

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.section-label {

    font-family: 'Inter', sans-serif;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    font-weight: 600;

    margin-bottom: 24px;

    color: var(--purple);

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.section-label::before {

    content: '';

    width: 8px;

    height: 8px;

    background: var(--yellow);

    border: 1.5px solid var(--ink);

    transform: rotate(45deg);

}



.about-grid {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    gap: 80px;

    align-items: start;

}



/* .about h2 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 400;

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

}



.about h2 em {

    font-style: italic;

    color: var(--purple);

} */



h2 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 800;

    font-size: clamp(36px, 5vw, 64px);

    line-height: 1.02;

    letter-spacing: -0.035em;

    max-width: 800px;

}



h2 .hl-word {

    font-size: 0.95em;

}



.hl-word {

    position: relative;

    display: inline-block;

    font-style: italic;

    font-weight: 700;

    padding: 0 16px;

    z-index: 1;

}



.hl-word::before {

    content: '';

    position: absolute;

    inset: 8% -2% 4% -2%;

    background: var(--yellow);

    border-radius: 999px;

    z-index: -1;

    transform: rotate(-1deg);

}



.section-header-stack h2 {

    margin-left: auto;

    margin-right: auto;

}



.about-body {

    font-size: 17px;

    line-height: 1.65;

}



.card-img {

    display: flex;

    justify-content: center;

    align-items: center;

}



.img-size {

    width: 180px;

}



.img-size1 {

    width: 250px;

}



.about-body p+p {

    margin-top: 16px;

}



.includes {

    margin-top: 80px;

    background: var(--navy);

    color: var(--cream);

    border-radius: 24px;

    padding: 56px;

    position: relative;

    overflow: hidden;

}



.includes::before {

    content: '';

    position: absolute;

    top: -80px;

    right: -80px;

    width: 200px;

    height: 200px;

    background: var(--purple);

    border-radius: 50%;

    opacity: 0.4;

}



.includes h3 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 400;

    font-size: 36px;

    margin-bottom: 8px;

    letter-spacing: -0.02em;

    position: relative;

}



.includes h3 em {

    font-style: italic;

    color: var(--yellow);

}



.includes-sub {

    color: #fdf6e3aa;

    margin-bottom: 40px;

    font-size: 16px;

    position: relative;

}



.includes-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 24px;

    position: relative;

}



.include-item {

    border-top: 1.5px solid #fdf6e333;

    padding-top: 20px;

}



.include-num {

    font-family: 'Public Sans', sans-serif;

    font-style: italic;

    font-size: 14px;

    color: var(--yellow);

    margin-bottom: 12px;

    font-weight: 500;

}



.include-title {

    font-family: 'Public Sans', sans-serif;

    font-size: 19px;

    font-weight: 500;

    line-height: 1.3;

    margin-bottom: 8px;

}



.include-desc {

    font-size: 14px;

    line-height: 1.55;

    color: #fdf6e3bb;

}



/* ============ APPROACH ============ */

.approach {

    padding: 120px 32px;

    background: var(--cream-deep);

    position: relative;

    overflow: hidden;

}



.approach::before {

    content: '';

    position: absolute;

    top: 60px;

    right: 60px;

    width: 200px;

    height: 200px;

    background: radial-gradient(circle, var(--yellow) 30%, transparent 70%);

    border-radius: 50%;

    opacity: 0.4;

}



.approach-inner {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.approach-header {

    margin-bottom: 64px;

    max-width: 800px;

}



.approach h2 {

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

}



.approach h2 em {

    font-style: italic;

    color: var(--purple);

}



.pillars {

    display: grid;

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

    gap: 24px;

}



.pillar {

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 24px;

    padding: 36px;

    position: relative;

    transition: transform 0.2s;

}



.pillar:nth-child(1) {

    background: var(--yellow);

}



.pillar:nth-child(2) {

    background: var(--purple-light);

}



.pillar:nth-child(3) {

    background: var(--paper);

}



.pillar:nth-child(4) {

    background: var(--cream);

}



.pillar:hover {

    transform: translateY(-4px);

}



.pillar-num {

    font-family: 'Public Sans', sans-serif;

    font-style: italic;

    font-size: 16px;

    color: var(--ink);

    margin-bottom: 16px;

    font-weight: 500;

    opacity: 0.7;

}



.pillar h3 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 500;

    font-size: 26px;

    margin-bottom: 12px;

    letter-spacing: -0.02em;

    line-height: 1.15;

}



.pillar p {

    font-size: 15px;

    line-height: 1.6;

    color: var(--ink);

    opacity: 0.85;

}



/* ============ DIFFERENT ============ */

.different {

    padding: 120px 32px;

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.different-header {

    text-align: center;

    margin-bottom: 64px;

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

}



.different-header .section-label {

    justify-content: center;

}



.different-header h2 {

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

}



.different-header h2 em {

    font-style: italic;

    color: var(--purple);

}



.different-grid {

    display: grid;

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

    gap: 24px;

}



.diff-card {

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 24px;

    padding: 36px;

    position: relative;

    transition: transform 0.2s, box-shadow 0.2s;

    box-shadow: 6px 6px 0 var(--ink);

}



.diff-card:hover {

    transform: translate(-2px, -2px);

    box-shadow: 8px 8px 0 var(--ink);

}



.diff-card-header {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

}



.diff-icon-box {

    width: 56px;

    height: 56px;

    border-radius: 14px;

    border: 2px solid var(--ink);

    display: grid;

    place-items: center;

    flex-shrink: 0;

}



.diff-card:nth-child(1) .diff-icon-box {

    background: var(--yellow);

}



.diff-card:nth-child(2) .diff-icon-box {

    background: var(--hot-pink);

}



.diff-card:nth-child(3) .diff-icon-box {

    background: var(--purple);

}



.diff-card:nth-child(4) .diff-icon-box {

    background: var(--cream-deep);

}



.diff-card h3 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 500;

    font-size: 24px;

    letter-spacing: -0.02em;

    line-height: 1.2;

}



.diff-card p {

    font-size: 15px;

    line-height: 1.6;

    color: var(--ink);

    opacity: 0.85;

}



/* ============ PROGRAMS ============ */

.programs {

    padding: 120px 32px;

    background: var(--navy);

    color: var(--cream);

    position: relative;

    overflow: hidden;

}



.programs::before {

    content: '';

    position: absolute;

    bottom: -100px;

    left: -100px;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, var(--purple) 30%, transparent 70%);

    border-radius: 50%;

    opacity: 0.3;

}



.programs-inner {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

}



.programs-header {

    margin-bottom: 80px;

    max-width: 900px;

}



.programs-header .section-label {

    color: var(--yellow);

}



.programs-header .section-label::before {

    background: var(--yellow);

    border-color: var(--yellow);

}



.programs-header h2 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 400;

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

    margin-bottom: 16px;

}



.programs-header h2 em {

    font-style: italic;

    color: var(--yellow);

}



.programs-header p {

    font-size: 17px;

    line-height: 1.55;

    max-width: 600px;

    color: #fdf6e3bb;

}



.series {

    margin-bottom: 56px;

}



.series:last-child {

    margin-bottom: 0;

}



.series-header {

    display: flex;

    align-items: baseline;

    gap: 20px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.series-tag {

    font-family: 'Inter', sans-serif;

    font-size: 11px;

    background: var(--yellow);

    color: var(--navy);

    padding: 6px 14px;

    border-radius: 999px;

    letter-spacing: 0.1em;

    font-weight: 600;

    text-transform: uppercase;

}



.series-title {

    font-family: 'Public Sans', sans-serif;

    /* font-style: italic; */

    font-size: clamp(28px, 3.5vw, 44px);

    font-weight: 400;

}



.series-blurb {

    font-size: 16px;

    line-height: 1.6;

    max-width: 720px;

    margin-bottom: 32px;

    color: #fdf6e3bb;

}



.courses {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 16px;

}



.course {

    background: var(--paper);

    color: var(--ink);

    border: 2px solid var(--ink);

    border-radius: 16px;

    padding: 28px;

    transition: transform 0.2s;

    position: relative;

}



.course:hover {

    transform: translateY(-3px);

}



.course:nth-child(odd) {

    background: var(--cream);

}



.course:nth-child(2) {

    background: var(--yellow);

}



.course:nth-child(3) {

    background: var(--purple-light);

}



.course-name {

    font-family: 'Public Sans', sans-serif;

    font-weight: 600;

    font-size: 20px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.course-name .preview {

    font-family: 'Inter', sans-serif;

    font-size: 9px;

    background: var(--ink);

    color: var(--yellow);

    padding: 3px 8px;

    border-radius: 999px;

    letter-spacing: 0.1em;

    font-weight: 600;

}



.course-desc {

    font-size: 14px;

    line-height: 1.55;

    color: var(--ink);

    opacity: 0.85;

}



/* ============ DEVELOPS ============ */

.develops {

    padding: 120px 32px;

    max-width: 1200px;

    margin: 0 auto;

}



.develops-header {

    text-align: center;

    margin-bottom: 64px;

}



.develops-header .section-label {

    justify-content: center;

}



.develops-header h2 {

    font-family: 'Public Sans', sans-serif;

    /* font-weight: 400; */

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

    max-width: 900px;

    margin: 0 auto;

}



.develops-header h2 em {

    font-style: italic;

    color: var(--purple);

}



.skills {

    display: grid;

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

    gap: 16px;

}



.skill {

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 20px;

    padding: 28px 24px;

    transition: all 0.2s;

    position: relative;

}



.skill:hover {

    transform: translateY(-4px);

    background: var(--yellow);

}



.skill-num {

    font-family: 'Public Sans', sans-serif;

    font-style: italic;

    font-size: 14px;

    color: var(--purple);

    font-weight: 500;

    margin-bottom: 8px;

}



.skill-name {

    font-family: 'Public Sans', sans-serif;

    font-weight: 500;

    font-size: 26px;

    margin-bottom: 8px;

    letter-spacing: -0.02em;

}



.skill-desc {

    font-size: 14px;

    line-height: 1.55;

    color: var(--ink);

    opacity: 0.8;

}



/* ============ FAQ ============ */

.faq {

    padding: 120px 32px;

    background: var(--cream-deep);

}



.faq-inner {

    max-width: 900px;

    margin: 0 auto;

}



.faq-header {

    text-align: center;

    margin-bottom: 56px;

}



.faq-header .section-label {

    justify-content: center;

}



.faq h2 {

    font-family: 'Public Sans', sans-serif;

    /* font-weight: 400; */

    font-size: clamp(36px, 4.5vw, 60px);

    line-height: 1.08;

    letter-spacing: -0.03em;

}



.faq h2 em {

    font-style: italic;

    color: var(--purple);

}



details {

    background: var(--paper);

    border: 2px solid var(--ink);

    border-radius: 16px;

    padding: 24px 28px;

    margin-bottom: 12px;

    transition: background 0.2s;

}



details[open] {

    background: var(--yellow);

}



summary {

    font-family: 'Public Sans', sans-serif;

    font-size: 19px;

    font-weight: 500;

    cursor: pointer;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px;

    color: var(--ink);

    letter-spacing: -0.01em;

}



summary::-webkit-details-marker {

    display: none;

}



summary::after {

    content: '+';

    font-family: 'Public Sans', sans-serif;

    font-size: 28px;

    font-weight: 300;

    color: var(--purple);

    transition: transform 0.3s;

    flex-shrink: 0;

}



details[open] summary::after {

    transform: rotate(45deg);

    color: var(--ink);

}



.faq-answer {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1.5px solid var(--ink);

    font-size: 15px;

    line-height: 1.65;

    color: var(--ink);

    opacity: 0.85;

}



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

.cta-footer-wrap {

    background: var(--cream);

    padding: 16px;

}



.cta-footer {

    background: var(--navy);

    color: var(--cream);

    border-radius: 32px;

    padding: 100px 48px;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.cta-footer::before {

    content: '';

    position: absolute;

    top: -100px;

    left: -100px;

    width: 300px;

    height: 300px;

    background: var(--purple);

    border-radius: 50%;

    opacity: 0.3;

}



.cta-footer::after {

    content: '';

    position: absolute;

    bottom: -100px;

    right: -100px;

    width: 300px;

    height: 300px;

    background: radial-gradient(circle, var(--yellow) 30%, transparent 70%);

    border-radius: 50%;

    opacity: 0.3;

}



.cta-footer-inner {

    position: relative;

    z-index: 2;

}



.cta-footer h2 {

    font-family: 'Public Sans', sans-serif;

    font-weight: 400;

    font-size: clamp(40px, 6vw, 80px);

    line-height: 1.02;

    letter-spacing: -0.035em;

    margin-bottom: 24px;

    max-width: 1000px;

    margin-left: auto;

    margin-right: auto;

}



.cta-footer h2 em {

    font-style: italic;

    color: var(--yellow);

}



.cta-footer p {

    font-size: 18px;

    line-height: 1.55;

    margin-bottom: 40px;

    max-width: 580px;

    margin-left: auto;

    margin-right: auto;

    color: #fdf6e3cc;

}



.cta-footer-buttons {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



footer {

    padding: 32px;

    background: var(--cream);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: 'Inter', sans-serif;

    font-size: 13px;

    color: var(--ink);

    flex-wrap: wrap;

    gap: 16px;

}



footer .footer-meta {

    display: flex;

    gap: 24px;

    opacity: 0.7;

}

.user-message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0% 15%;
}

.user-message h3{
    font-size: 1.8rem;
}
.user-message h4{
    font-size: 1.4rem;
}

.user-message h2,
.user-message h3{
    align-items: center;
    text-align: center;

}

.user-message .top{
    margin-top: 1.8%;
}



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

@media (max-width: 900px) {

    nav {

        padding: 14px 20px;

    }



    .hero-wrap {

        padding: 8px;

    }



    .hero {

        overflow-x: hidden !important;

        padding: 56px 24px 0;

        border-radius: 20px;

    }



    .hero-illustration {

        margin-left: -24px;

        margin-right: -24px;

        padding: 32px 16px 60px;

    }



    .app-mockup-row {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .mock-card-1,

    .mock-card-3,

    .mock-card-2 {

        transform: none;

    }



    .chip-float {

        display: none;

    }



    .doodle-arrow,

    .shape-burst {

        display: none;

    }



    .about-grid {

        grid-template-columns: 1fr;

        gap: 32px;

    }



    .about,

    .approach,

    .different,

    .programs,

    .develops,

    .faq {

        padding: 72px 20px;

    }



    .pillars {

        grid-template-columns: 1fr;

    }



    .different-grid {

        grid-template-columns: 1fr;

    }



    .skills {

        grid-template-columns: 1fr;

    }



    .includes {

        padding: 32px 24px;

    }



    .cta-footer-wrap {

        padding: 8px;

    }



    .cta-footer {

        padding: 64px 24px;

        border-radius: 20px;

    }



    footer {

        padding: 24px 20px;

        flex-direction: column;

        align-items: flex-start;

    }

}



@media (max-width: 768px) {

    nav {

        padding: 14px 15px;

    }



    .nav-links {

        gap: 4px;

    }



    .logo img {

        width: 45px;

    }



    .nav-links a {

        font-size: 9px !important;

    }



    .nav-links a:not(.nav-cta) {

        display: none !important;

    }



    .nav-cta {

        padding: 6px 8px;

    }



    .logo p {

        display: none;

    }



}





@media (max-width: 320px) {



    .logo img {

        width: 40px;

    }



    .nav-links a {

        font-size: 7px !important;

    }



    .nav-links a:not(.nav-cta) {

        display: none !important;

    }



    .nav-cta {

        padding: 5px 6px;

    }



    .logo p {

        display: none;

    }



}