:root{

--bg:#fffaf2;
--panel:#ffffff;
--panel2:#fff5e9;
--soft:#fff0dd;

--text:#1f2937;
--muted:#6b7280;

--line:#fed7aa;

--accent:#ea580c;
--accent2:#c2410c;

--hero1:#ffedd5;
--hero2:#fff7ed;
--hero3:#ffffff;

--shadow:0 16px 40px rgba(15,23,42,.08);
--header-bg:rgba(255,255,255,.9);

--radius:28px;
--max:1240px;
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

h1,h2,h3,h4,h5{
font-family:"DM Sans",system-ui,sans-serif;
letter-spacing:-.02em;
margin:0;
}

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

img{
display:block;
max-width:100%;
}

.container{
width:min(var(--max),calc(100% - 28px));
margin-inline:auto;
}

.hidden{
display:none!important;
}

/* -----------------------------
HEADER
----------------------------- */

.site-header{
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(12px);
background:var(--header-bg);
border-bottom:1px solid var(--line);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
padding:14px 0;
}

.brand{
font-weight:800;
font-size:1.45rem;
color:var(--accent2);
}

.nav{
display:flex;
gap:14px;
flex-wrap:wrap;
color:var(--muted);
font-weight:700;
font-size:.94rem;
}

.nav a:hover{
color:var(--accent2);
}

/* -----------------------------
HERO
----------------------------- */

.hero{
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,var(--hero1),var(--hero2),var(--hero3));
}

.hero-inner{
position:relative;
padding:54px 0 34px;
}

.hero-grid{
display:grid;
gap:28px;
grid-template-columns:1.1fr .9fr;
align-items:center;
}

.hero h1{
font-size:clamp(2.2rem,5vw,4rem);
max-width:720px;
}

.hero-text{
margin-top:16px;
color:var(--muted);
max-width:720px;
}

.hero-actions{
margin-top:24px;
display:flex;
gap:12px;
flex-wrap:wrap;
}

/* -----------------------------
BUTTONS
----------------------------- */

.btn{
border:none;
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:13px 18px;
border-radius:18px;
font-weight:800;
font-size:.95rem;
transition:.2s ease;
}

.btn:hover{
transform:translateY(-1px);
}

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

.btn-secondary{
background:var(--panel);
color:var(--text);
border:1px solid var(--line);
}

.btn-soft{
background:var(--soft);
color:var(--accent2);
border:1px solid var(--line);
}

/* -----------------------------
CARDS
----------------------------- */

.card{
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow);
}

.card.soft{
background:var(--soft);
}

.card h3{
margin-bottom:10px;
}

.card p{
color:var(--muted);
}

/* -----------------------------
SECTION
----------------------------- */

section.section{
padding:70px 0;
}

.section-head{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:end;
margin-bottom:28px;
}

.section-head p{
color:var(--muted);
}

.section-title{
font-size:clamp(1.8rem,3vw,3rem);
}

/* -----------------------------
GRID
----------------------------- */

.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

/* -----------------------------
FORMS
----------------------------- */

.field{
display:grid;
gap:7px;
}

.input,
.select,
.textarea{
width:100%;
border:1px solid var(--line);
background:var(--panel);
color:var(--text);
border-radius:16px;
padding:13px 14px;
outline:none;
}

.input:focus,
.select:focus,
.textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 4px rgba(234,88,12,.12);
}

.textarea{
resize:vertical;
min-height:120px;
}

/* -----------------------------
CHIPS
----------------------------- */

.chips{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.chip{
border:1px solid var(--line);
background:var(--panel);
color:var(--muted);
padding:11px 14px;
border-radius:999px;
cursor:pointer;
font-weight:800;
}

.chip:hover{
background:var(--soft);
color:var(--accent2);
}

.chip.active{
background:var(--accent);
color:#fff;
}

/* -----------------------------
FOOTER
----------------------------- */

.site-footer{
border-top:1px solid var(--line);
background:var(--panel);
}

.footer-inner{
padding:26px 0;
display:flex;
justify-content:space-between;
gap:18px;
flex-wrap:wrap;
color:var(--muted);
}

/* -----------------------------
DARK MODE
----------------------------- */

:root[data-theme="dark"]{

--bg:#020617;
--panel:#0f172a;
--panel2:#111827;
--soft:#1e293b;

--text:#e5e7eb;
--muted:#94a3b8;

--line:#1f2937;

--accent:#f59e0b;
--accent2:#fbbf24;

--hero1:#111827;
--hero2:#0f172a;
--hero3:#020617;

--header-bg:rgba(2,6,23,.92);

--shadow:0 16px 40px rgba(0,0,0,.6);
}

/* DARK MODE TEXT FIX */

[data-theme="dark"] body{
color:var(--text);
}

[data-theme="dark"] p{
color:var(--muted);
}

[data-theme="dark"] .btn-secondary{
background:#1f2937;
color:#e5e7eb;
border:1px solid #374151;
}

[data-theme="dark"] .btn-soft{
background:#1f2937;
color:#fbbf24;
border:1px solid #374151;
}

[data-theme="dark"] .chip{
background:#111827;
color:#cbd5f5;
border:1px solid #374151;
}

[data-theme="dark"] .chip.active{
background:var(--accent);
color:#020617;
}

[data-theme="dark"] .input,
[data-theme="dark"] .select,
[data-theme="dark"] .textarea{
background:#020617;
border:1px solid #374151;
color:#e5e7eb;
}

/* -----------------------------
RESPONSIVE
----------------------------- */

@media (max-width:1100px){

.hero-grid,
.section-head{
grid-template-columns:1fr;
}

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

}

@media (max-width:780px){

.nav{
display:none;
}

.grid-4,
.grid-3,
.grid-2{
grid-template-columns:1fr;
}

.hero-inner{
padding:42px 0 26px;
}

section.section{
padding:56px 0;
}

}