:root {
    --base-font-size: clamp(1rem, 2vw, 1.5rem); /* Min: 16px, Scales with vw, Max: 24px */

    --fibonacci-1: clamp(1rem, 2.5vw, 1.75rem);   /* 16px → 28px */
    --fibonacci-2: clamp(1.25rem, 3vw, 2rem);     /* 20px → 32px */
    --fibonacci-3: clamp(1.5rem, 4vw, 2.5rem);    /* 24px → 40px */
    --fibonacci-5: clamp(2rem, 5vw, 3rem);        /* 32px → 48px */
    --fibonacci-8: clamp(3rem, 6vw, 4.5rem);      /* 48px → 72px */
    --fibonacci-13: clamp(5rem, 8vw, 7rem);       /* 80px → 112px */
    --fibonacci-21: clamp(8rem, 10vw, 10rem);     /* 128px → 160px */
    --fibonacci-34: clamp(13rem, 12vw, 16rem);    /* 208px → 256px */
    --fibonacci-55: clamp(21rem, 15vw, 25rem);    /* 336px → 400px */

    --line-height-1: 0.87;    /* For Fibonacci-1 (16px) */
    --line-height-2: 1.2;     /* For Fibonacci-2 (20px) */
    --line-height-3: 1.6;     /* For Fibonacci-3 (24px) */
    --line-height-5: 1.8;     /* For Fibonacci-5 (32px) */
    --line-height-8: 2.0;     /* For Fibonacci-8 (48px) */
    --line-height-13: 2.2;    /* For Fibonacci-13 (80px) */
    --line-height-21: 2.4;    /* For Fibonacci-21 (128px) */
    --line-height-34: 2.6;    /* For Fibonacci-34 (336px) */
    --line-height-55: 2.8;    /* For Fibonacci-55 (544px) */
}



/* Global Typography Defaults */
body {
    font-size: var(--fibonacci-2);
    line-height: var(--line-height-3);
    font-family: "Matter", "Inter", sans-serif;
}

/* Headers with Fibonacci Scaling */
.Huge { font-size: var(--fibonacci-34); line-height: var(--line-height-1); font-family: "Matter", sans-serif; font-weight: 100; }
h1 { font-size: var(--fibonacci-21); line-height: var(--line-height-1); font-family: "Matter", sans-serif; font-weight: 100; margin:0 }
h2 { font-size: var(--fibonacci-5);  line-height: var(--line-height-2); font-family: "Matter", sans-serif; font-weight: 100; }
h3 { font-size: var(--fibonacci-3);  line-height: var(--line-height-2); font-family: "Matter", sans-serif; font-weight: 100; }
p  { font-size: var(--fibonacci-1);  line-height: var(--line-height-3); font-family: "Matter", sans-serif; }
a  { font-size: var(--fibonacci-1);  line-height: var(--line-height-3); font-family: "Matter", sans-serif; color:#000; text-decoration: none; }

.section.okok > div{
    font-size: var(--fibonacci-55);
}

/* Responsive Typography (Scaling) */
@media (max-width: 1024px) {
    h1 { font-size: var(--fibonacci-13); }
    h2 { font-size: var(--fibonacci-5); }
    h3 { font-size: var(--fibonacci-3); }
}

@media (max-width: 768px) {
    h1 { font-size: 66px; }
    h2 { font-size: var(--fibonacci-5); }
    h3 { font-size: var(--fibonacci-3); }
    .Intro > div:first-child > p { font-size: var(--fibonacci-5); }
    p { font-size: var(--fibonacci-3); }
}