1. Color Palette

These are the defined CSS variables used across the application for key visual elements.

Primary

#0077FF

`--color-primary`

Secondary Accent

#00CCBB

`--color-secondary`

Dark Text

#111827

`--color-text-dark`

Section BG

#F0F9FF

`--color-bg-section`

Light BG

#FFFFFF

`--color-bg-light`

2. Typography

The primary typeface is **Inter**. Weights (400, 600, 700, 800, 900) are available.

H1 - Hero Heading (font-black)

The Primary Heading Style

H2 - Section Heading (font-extrabold)

Section Title Style

Body Text (text-lg/text-base)

This is the lead paragraph style. Used for prominent descriptions right below the main heading. (font-medium, text-lg)

This is the standard paragraph text style, used for feature descriptions and longer blocks of content. (text-base)

3. Core Components & Styles

Gradient Accent Text

This Text Uses the Primary Gradient

Primary Gradient Button

Secondary/Outline Button

Active Tab Style

                        <button class="tab-button active pb-3 text-lg font-semibold text-blue-600 border-b-2 border-blue-600">...</button>
                    

Interactive Card (Hover Effect)

This card lifts slightly and changes shadow on hover.