:root{
  --color-surface-default:#FFFFFF;
  --color-surface-glass:rgba(255,255,255,0.65);
  --color-surface-alt:#FDF6ED;
  --color-primary:#32C7F6;
  --color-secondary:#8B5CF6;
  --color-cta-bg:#FFD600;
  --color-cta-fg:#1A237E;
  --color-info:#00D2A8;
  --color-warn:#FF7043;
  --color-success:#34D399;
  --color-text:#21243D;
  --color-footer-bg:#1A237E;
  --color-footer-text:#FFFFFF;
  --color-shadow:rgba(44,62,80,0.10);
  --radius-sm:1.25rem;
  --radius-lg:2rem;
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;
  --space-7:4rem;
  --container-max:1100px;
  --font-heading:Quicksand,"Segoe UI Rounded",Arial Rounded MT,Arial,sans-serif;
  --font-body:Nunito,"Segoe UI",Arial,sans-serif;
  --text-xs:0.95rem;
  --text-sm:1rem;
  --text-md:1.25rem;
  --text-lg:1.5rem;
  --text-xl:2rem;
  --text-xxl:2.6rem;
  --shadow-soft:0 4px 24px var(--color-shadow);
  --border-glass:1px solid rgba(255,255,255,0.4);
}

*,
*::before,
*::after{
  box-sizing:border-box;
  min-width:0;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-surface-default);
  text-rendering:optimizeLegibility;
}

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

input,
button,
textarea,
select{
  font:inherit;
  color:inherit;
}

button{
  cursor:pointer;
  border:none;
  background:none;
}

a{
  color:inherit;
  text-decoration:none;
}

:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.2;
  margin:0 0 var(--space-3);
}

h1{
  font-size:clamp(1.9rem,4vw,2.6rem);
}
h2{
  font-size:clamp(1.6rem,3.5vw,2rem);
}
h3{
  font-size:clamp(1.3rem,3vw,1.5rem);
}
h4{
  font-size:1.25rem;
}
h5{
  font-size:1rem;
}
h6{
  font-size:0.95rem;
}

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

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

blockquote{
  margin:0 0 var(--space-4);
  padding-left:var(--space-3);
  border-left:4px solid var(--color-primary);
}

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

@media (min-width:768px){
  .container{
    padding-inline:var(--space-5);
  }
}

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

.section-alt{
  background:var(--color-surface-alt);
}

.card{
  background:var(--color-surface-default);
  border-radius:var(--radius-sm);
  padding:var(--space-4);
  box-shadow:var(--shadow-soft);
}

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

.glass{
  background:var(--color-surface-glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:var(--border-glass);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);
}

.surface{
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.4rem;
  font-weight:700;
  border-radius:var(--radius-sm);
  transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;
}

.btn:focus-visible{
  outline:2px solid var(--color-primary);
}

.btn-primary{
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  color:#fff;
  box-shadow:var(--shadow-soft);
}

.btn-cta{
  background:var(--color-cta-bg);
  color:var(--color-cta-fg);
  box-shadow:var(--shadow-soft);
}

.btn:hover{
  transform:scale(1.03);
  box-shadow:0 8px 28px var(--color-shadow);
}

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

.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
}

.flex-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}

.flex-wrap{
  flex-wrap:wrap;
}

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

.input,
textarea,
select{
  width:100%;
  padding:0.75rem 1rem;
  border-radius:var(--radius-sm);
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
}

.input:focus,
textarea:focus,
select:focus{
  outline:2px solid var(--color-primary);
  border-color:transparent;
}

.footer{
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
  padding:var(--space-6) var(--space-3);
}

.rounded{
  border-radius:var(--radius-sm);
}

.shadow{
  box-shadow:var(--shadow-soft);
}

.hide{
  display:none;
}

.show{
  display:block;
}