:root{
--color-surface-base:#fdfbf7;
--color-surface-alt:#f8f5f0;
--color-text-primary:#1c1917;
--color-accent-primary:#4c1d95;
--color-accent-secondary:#d97706;
--color-cta:#f59e0b;
--color-border-soft:rgba(28,25,23,0.08);
--shadow-ambient:0 2px 12px 0 rgba(76,29,149,0.10);

--font-heading:"Playfair Display",serif;
--font-body:"Montserrat","Montserrat Hungarian",Arial,sans-serif;

--text-xs:0.875rem;
--text-sm:1rem;
--text-md:1.125rem;
--text-lg:1.5rem;
--text-xl:2rem;
--text-xxl:2.75rem;

--space-xs:0.5rem;
--space-sm:1rem;
--space-md:1.5rem;
--space-lg:2rem;
--space-xl:3rem;

--radius-sm:12px;
--radius-md:18px;
--radius-pill:999px;

--container-max:1200px;
--container-pad:2rem;
}

*,*::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);
color:var(--color-text-primary);
background:var(--color-surface-base);
line-height:1.6;
min-height:100vh;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;height:auto;display:block;border-radius:var(--radius-sm)}

ul{list-style:none;padding:0;margin:0}

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

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

button{cursor:pointer}

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

h1,h2,h3,h4{
font-family:var(--font-heading);
letter-spacing:0.02em;
line-height:1.2;
color:var(--color-text-primary);
margin-bottom:var(--space-sm);
}

h1{font-size:clamp(2rem,4vw,2.75rem)}
h2{font-size:clamp(1.6rem,3vw,2rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.5rem)}
h4{font-size:clamp(1.05rem,2vw,1.125rem)}

p{
font-size:var(--text-sm);
margin-bottom:var(--space-sm);
}

small{font-size:var(--text-xs)}

blockquote{
margin-bottom:var(--space-md);
padding-left:var(--space-md);
border-left:3px solid var(--color-accent-secondary);
}

ul,ol{margin-bottom:var(--space-md)}

section{
padding:5rem 0;
}

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

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

.card{
background:var(--color-surface-base);
border:1px solid var(--color-border-soft);
border-radius:var(--radius-md);
box-shadow:var(--shadow-ambient);
padding:var(--space-lg);
display:flex;
flex-direction:column;
min-width:0;
}

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

.card:hover{
transform:scale(1.02);
box-shadow:0 6px 20px rgba(76,29,149,0.15);
border-color:var(--color-accent-primary);
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:0.5rem;
font-weight:700;
letter-spacing:0.05em;
padding:1rem 2rem;
border-radius:var(--radius-pill);
white-space:nowrap;
min-width:0;
}

.btn-primary{
background:var(--color-cta);
color:#fff;
box-shadow:var(--shadow-ambient);
}

.btn-primary:hover{
background:var(--color-accent-secondary);
}

.btn-secondary{
border:1px solid var(--color-accent-primary);
color:var(--color-accent-primary);
}

.btn-secondary:hover{
background:var(--color-accent-primary);
color:#fff;
}

.tag{
display:inline-flex;
align-items:center;
padding:0.35rem 0.75rem;
border-radius:var(--radius-pill);
background:var(--color-accent-secondary);
color:#fff;
font-size:var(--text-xs);
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
}

.flex{
display:flex;
gap:var(--space-md);
min-width:0;
}

.flex-col{flex-direction:column}

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

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

.grid-auto{
display:grid;
gap:var(--space-lg);
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

input,textarea{
width:100%;
padding:0.75rem 1rem;
border-radius:var(--radius-sm);
border:1px solid var(--color-border-soft);
background:#fff;
}

input:focus,textarea:focus{
border-color:var(--color-accent-primary);
}

hr{
border:none;
border-top:1px solid var(--color-border-soft);
margin:var(--space-lg) 0;
}

@media (max-width:768px){
section{padding:3rem 0}
.container{padding-inline:1rem}
.grid-auto{gap:var(--space-sm)}
}
html, body {
  overflow-x: clip;
  max-width: 100%;
}

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