/* ==========================================
   DESIGN SYSTEM
========================================== */

:root {

/* ==========================================
   COLORS
========================================== */

--color-bg: #f8fbfd;
--color-surface: #ffffff;

--color-text: #1f2a44;
--color-text-soft: #5f6b84;

--color-primary: #57c5f5;
--color-primary-dark: #2ea8dd;

--color-accent-pink: #f8dfe8;
--color-accent-blue: #dff3ff;

--color-border: rgba(31,42,68,.08);

--color-glass:
rgba(255,255,255,.55);

--color-glass-border:
rgba(255,255,255,.75);

/* ==========================================
   TYPOGRAPHY
========================================== */

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

--text-xs:
clamp(.75rem,.8vw,.85rem);

--text-sm:
clamp(.9rem,1vw,1rem);

--text-md:
clamp(1rem,1.2vw,1.125rem);

--text-lg:
clamp(1.15rem,1.5vw,1.35rem);

--text-xl:
clamp(1.5rem,2.5vw,2rem);

--text-2xl:
clamp(2rem,4vw,3.5rem);

--text-hero:
clamp(3rem,7vw,6rem);

/* ==========================================
   SPACING
========================================== */

--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-120: 120px;

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

--container-width: 1280px;
--container-padding: 24px;

/* ==========================================
   RADIUS
========================================== */

--radius-sm: 16px;
--radius-md: 24px;
--radius-lg: 32px;
--radius-xl: 40px;
--radius-pill: 999px;

/* ==========================================
   SHADOWS
========================================== */

--shadow-soft:
0 10px 30px rgba(31,42,68,.05);

--shadow-card:
0 20px 40px rgba(31,42,68,.06);

--shadow-large:
0 30px 80px rgba(31,42,68,.08);

/* ==========================================
   GLASS
========================================== */

--glass-background:
linear-gradient(
180deg,
rgba(255,255,255,.72),
rgba(255,255,255,.48)
);

--glass-blur:
blur(24px);

/* ==========================================
   TRANSITIONS
========================================== */

--transition-fast:
.2s ease;

--transition-normal:
.3s ease;

--transition-slow:
.5s ease;

}

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

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

html {
scroll-behavior:smooth;
}

body {

font-family:var(--font-main);

background:var(--color-bg);

color:var(--color-text);

line-height:1.7;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;
}

img {

display:block;

max-width:100%;

height:auto;
}

a {

text-decoration:none;

color:inherit;
}

button,
input,
select,
textarea {

font:inherit;
}

/* ==========================================
   LAYOUT
========================================== */

.container {

width:100%;

max-width:var(--container-width);

margin:0 auto;

padding-left:var(--container-padding);
padding-right:var(--container-padding);
}

section {

position:relative;

padding:
var(--space-120)
0;
}

/* ==========================================
   TYPOGRAPHY
========================================== */

h1 {

font-size:var(--text-hero);

font-weight:800;

line-height:.95;

letter-spacing:-.04em;
}

h2 {

font-size:var(--text-2xl);

font-weight:800;

line-height:1.05;

letter-spacing:-.03em;
}

h3 {

font-size:var(--text-lg);

font-weight:700;
}

p {

font-size:var(--text-md);

color:var(--color-text-soft);
}

/* ==========================================
   SECTION TITLE
========================================== */

.section-title {

max-width:820px;

margin:0 auto 64px;

text-align:center;
}

.section-title span {

display:inline-block;

margin-bottom:12px;

font-size:var(--text-sm);

font-weight:600;

color:var(--color-primary-dark);
}

.section-label {

display:inline-block;

margin-bottom:20px;

font-size:var(--text-sm);

font-weight:600;

color:var(--color-primary-dark);
}