:root{
--color-brand-sky:#E6F4FF;
--color-brand-navy:#152747;
--color-brand-white:#FFFFFF;
--color-brand-pink:#FF52A2;
--color-brand-green:#4AE583;
--color-text-primary:#1A2236;
--color-text-inverse:#FFFFFF;
--color-text-accent:#00B7E6;
--color-cta-black:#15161A;
--color-cta-white:#FFFFFF;
--gradient-brand-cyan:linear-gradient(90deg,#3AD6FF 0%,#00B7E6 100%);
--shadow-soft:0 2px 16px 0 rgba(21,39,71,0.10);

--font-heading:Montserrat Condensed,"Arial Narrow",Arial,sans-serif;
--font-body:Inter,Arial,sans-serif;

--fs-h1:3.5rem;
--fs-h2:2.25rem;
--fs-h3:1.5rem;
--fs-body-lg:1.125rem;
--fs-body:1rem;
--fs-small:0.875rem;

--space-1:0.5rem;
--space-2:1rem;
--space-3:1.5rem;
--space-4:2rem;
--space-5:3rem;
--space-6:4rem;

--radius-card:18px;
--radius-hero:32px;
--radius-pill:999px;

--container-max:1200px;
--container-pad-desktop:1.5rem;
--container-pad-mobile:1rem;
}

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

html{
font-size:16px;
-webkit-text-size-adjust:100%;
}

body{
font-family:var(--font-body);
font-size:var(--fs-body-lg);
color:var(--color-text-primary);
background:var(--color-brand-sky);
line-height:1.6;
min-height:100vh;
text-rendering:optimizeLegibility;
}

img,
picture,
video,
canvas,
svg{
display:block;
max-width:100%;
height:auto;
}

img{
border-radius:var(--radius-card);
}

a{
color:var(--color-text-accent);
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

button,
input,
textarea,
select{
font:inherit;
color:inherit;
background:none;
border:none;
outline:none;
}

button{
cursor:pointer;
}

:focus-visible{
outline:2px solid #00B7E6;
outline-offset:2px;
}

h1,
h2,
h3,
h4,
h5,
h6{
font-family:var(--font-heading);
font-weight:700;
text-transform:uppercase;
letter-spacing:0.02em;
line-height:1.2;
color:var(--color-text-primary);
}

h1{font-size:var(--fs-h1);margin-block-end:var(--space-4);}
h2{font-size:var(--fs-h2);margin-block-end:var(--space-3);}
h3{font-size:var(--fs-h3);margin-block-end:var(--space-3);}
h4{font-size:var(--fs-body-lg);margin-block-end:var(--space-2);}
h5{font-size:var(--fs-body);margin-block-end:var(--space-2);}
h6{font-size:var(--fs-small);margin-block-end:var(--space-2);}

p{
margin-block-end:var(--space-3);
}

ul,
ol{
margin-block-end:var(--space-3);
padding-left:1.25rem;
}

li{
margin-block-end:var(--space-1);
}

blockquote{
margin-block-end:var(--space-3);
padding-left:var(--space-3);
border-left:3px solid var(--color-text-accent);
}

hr{
border:none;
height:1px;
background:rgba(21,39,71,0.1);
margin-block:var(--space-4);
}

.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--container-pad-desktop);
}

@media (max-width:768px){
.container{
padding-inline:var(--container-pad-mobile);
}
h1{font-size:2.25rem;}
body{font-size:var(--fs-body);}
}

.section{
padding-block:var(--space-5);
}

.section--tight{
padding-block:var(--space-4);
}

.surface{
background:var(--color-brand-white);
border-radius:var(--radius-card);
box-shadow:var(--shadow-soft);
padding:var(--space-3);
}

.surface--hero{
border-radius:var(--radius-hero);
}

.surface > *:last-child{
margin-block-end:0;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
padding:0.6em 1.4em;
border-radius:var(--radius-pill);
font-weight:600;
line-height:1;
white-space:nowrap;
transition:all 0.2s ease;
}

.btn-primary{
background:var(--color-cta-black);
color:var(--color-cta-white);
}

.btn-primary:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-soft);
}

.btn-accent{
background:var(--gradient-brand-cyan);
color:#ffffff;
}

.btn-accent:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-soft);
}

.btn:active{
transform:translateY(0);
box-shadow:inset 0 2px 6px rgba(0,0,0,0.15);
}

.badge{
display:inline-flex;
align-items:center;
padding:0.3em 0.8em;
border-radius:var(--radius-pill);
font-size:var(--fs-small);
font-weight:600;
text-transform:uppercase;
background:var(--gradient-brand-cyan);
color:#ffffff;
}

.badge--pink{
background:var(--color-brand-pink);
}

.badge--green{
background:var(--color-brand-green);
color:#0f2a1a;
}

.card{
background:var(--color-brand-white);
border-radius:var(--radius-card);
box-shadow:var(--shadow-soft);
padding:var(--space-3);
display:flex;
flex-direction:column;
gap:var(--space-2);
}

.card:hover{
transform:translateY(-2px);
box-shadow:0 6px 24px rgba(21,39,71,0.15);
}

.card > *:last-child{
margin-block-end:0;
}

.grid{
display:grid;
gap:var(--space-3);
}

.grid-2{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:1024px){
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:640px){
.grid-2,
.grid-3,
.grid-4{
grid-template-columns:1fr;
}
}

.flex{
display:flex;
gap:var(--space-2);
}

.flex-center{
align-items:center;
justify-content:center;
}

.flex-between{
align-items:center;
justify-content:space-between;
}

.stack > * + *{
margin-top:var(--space-2);
}

.input,
textarea,
select{
width:100%;
padding:0.6em 0.8em;
border-radius:12px;
background:#ffffff;
box-shadow:inset 0 0 0 1px rgba(21,39,71,0.1);
}

.input:focus,
textarea:focus,
select:focus{
box-shadow:0 0 0 2px #00B7E6;
}

label{
display:block;
margin-bottom:0.3rem;
font-size:var(--fs-small);
}

.form-group{
margin-bottom:var(--space-3);
}

.nav-surface{
background:var(--color-brand-navy);
color:var(--color-text-inverse);
border-radius:var(--radius-pill);
padding:0.4rem 0.8rem;
}

.text-inverse{
color:var(--color-text-inverse);
}

.text-accent{
color:var(--color-text-accent);
}

.bg-sky{
background:var(--color-brand-sky);
}

.bg-white{
background:var(--color-brand-white);
}

.bg-navy{
background:var(--color-brand-navy);
color:var(--color-text-inverse);
}

.no-overflow{
overflow:hidden;
}

@media(max-width: 500px){
    .hero-grid{
        display: flex !important;
        flex-wrap: wrap !important;
    }
}


.btn,
.btn-outline {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  line-height: 1.35;
}


p,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6,
span {
  overflow-wrap: anywhere;
  word-break: normal;
}