/* =============================================================
   DESIGN TOKENS — CSS custom properties
   ============================================================= */
:root {
    /* Brand colors */
    --color-heading:      #13002e;
    --color-dark:         #0f233d;
    --color-text:         #323232;
    --color-muted:        #707070;
    --color-border:       #b5b5b5;
    --color-border-soft:  #e2e2e2;

    /* Brand purple (squibit) */
    --squibit-purple:      #9d248f;
    --squibit-purple-dark: #6e196f;
    --squibit-border:      rgba(116, 9, 108, 0.18);

    /* Brand magenta gradient */
    --magenta-1:           #6e196f;
    --magenta-2:           #f433e7;
    --magenta-mid:         #9d248f;
    --gradient-brand:      linear-gradient(269deg, var(--magenta-1) 5%, var(--magenta-2) 152%);
    --gradient-text:       linear-gradient(269deg, var(--magenta-1) 5%, var(--magenta-2) 100%);
    --gradient-trust-bg:   linear-gradient(181deg, rgba(255, 214, 219, 0) 5%, rgb(204, 118, 201) 58%, rgb(255, 255, 255) 94%);
    --gradient-footer:     linear-gradient(180deg, #eed3ff 0%, #eed3ff 100%);

    /* Surfaces */
    --bg-white:     #ffffff;
    --bg-dark:      #000000;
    --bg-soft-pink: #c2e0f1;

    /* Shadows */
    --shadow-header: 0 4px 17px rgba(0, 0, 0, 0.08);
    --shadow-card:   0 14px 26px rgba(60, 84, 243, 0.17);
    --shadow-image:  0 7px 9px rgba(0, 0, 0, 0.16);

    /* Layout */
    --container-max: 1200px;
    --container-pad: 24px;
    --radius-sm:     12px;
    --radius-md:     24px;
    --radius-pill:   26px;

    /* Typography */
    --font-body:    'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
    --font-outfit:  'Outfit', sans-serif;
    --line-tight:   1.05;
    --line-snug:    1.2;
    --line-base:    1.5;

    /* ── Typography scale — edit here to change site-wide ── */
    --fs-h1:   clamp(38px, 3.5vw, 58px);   /* hero page titles       */
    --fs-h2:   clamp(28px, 3.2vw, 45px);    /* section headings       */
    --fs-h3:   clamp(20px, 2vw, 30px);      /* sub-section headings   */
    --fs-h4:   clamp(17px, 1.5vw, 22px);    /* card / list titles     */
    --fs-h5:   18px;
    --fs-h6:   16px;
    --fs-p:    clamp(20px, 1.1vw, 20px);    /* standard body text     */
    --fs-sm:   15px;                         /* secondary / compact    */
    --fs-xs:   13px;                         /* labels, fine print     */
    --lh-heading: 1.2;
    --lh-body:    1.65;

    /* Paragraph alias */
    --para: #323232;
}

/* =============================================================
   BASE RESETS
   ============================================================= */
   html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--color-dark);
    background: #fff;
    line-height: var(--line-base);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-outfit);
    color: var(--color-heading);
    font-weight: 700;
    line-height: var(--lh-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    transition: color 0.2s ease, opacity 0.2s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* =============================================================
   GLOBAL — Shared utilities, helpers, and resets
   ============================================================= */

/* Section spacing */
section {
    padding: 50px 0;
}

/* Global paragraph style */
p {
    font-family: var(--font-body);
    font-size: 20px!important;
    font-weight: 300;
    line-height: 1.4;
    color: var(--color-text, #323232);
    margin-top: 16px;
    margin-bottom: 0;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus ring */
:focus-visible {
    outline: 2px solid var(--squibit-purple);
    outline-offset: 3px;
}

/* Text selection */
::selection {
    background-color: var(--squibit-purple);
    color: #fff;
}

/* ---------- Typography helpers ---------- */
.text-squibit {
    color: var(--squibit-purple) !important;
}

.text-squibit-dark {
    color: var(--squibit-purple-dark) !important;
}

.bg-squibit {
    background-color: var(--squibit-purple) !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

/* ---------- Layout helpers ---------- */
.section-pad {
    padding-top: 80px;
    padding-bottom: 80px;
}
.gx-70{
    --bs-gutter-x: 70px;
}

@media(max-width:1280px){
    p{
        font-size: 18px!important;
    }
}
@media (max-width: 767.98px) {
    .section-pad {
        padding-top: 52px;
        padding-bottom: 52px;
    }
}

/* ---------- Divider ---------- */
.divider {
    border: none;
    border-top: 1px solid var(--squibit-border);
    margin: 0;
}

/* ---------- Accessibility ---------- */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Transition helper ---------- */
.transition-base {
    transition: all 0.3s ease;
}

/* ---------- Shadow helpers ---------- */
.shadow-squibit {
    box-shadow: 0 4px 24px rgba(116, 9, 108, 0.12);
}

/* ---------- Overflow ---------- */
.overflow-hidden {
    overflow: hidden;
}

/* ---------- Cursor ---------- */
.cursor-pointer {
    cursor: pointer;
}