:root{
  color-scheme: light dark;
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --surface:#ffffff;
  --card:#f8fafc;
  --line:#e5e7eb;
  --accent:#2563eb;
  --accent2:#0ea5e9;
  --radius:18px;
  --max:1120px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --header-bg:rgba(255,255,255,.9);
  --heroCard-from:#f8fafc;
  --heroCard-to:#ffffff;
  --banner-from:#eff6ff;
  --banner-to:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#0b1220;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --surface:#111827;
    --card:#0f172a;
    --line:rgba(148,163,184,.22);
    --accent:#3b82f6;
    --accent2:#22d3ee;
    --shadow:0 10px 30px rgba(0,0,0,.45);
    --header-bg:rgba(17,24,39,.85);
    --heroCard-from:#0f172a;
    --heroCard-to:#111827;
    --banner-from:rgba(37,99,235,.12);
    --banner-to:#0f172a;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --surface:#111827;
  --card:#0f172a;
  --line:rgba(148,163,184,.22);
  --accent:#3b82f6;
  --accent2:#22d3ee;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --header-bg:rgba(17,24,39,.85);
  --heroCard-from:#0f172a;
  --heroCard-to:#111827;
  --banner-from:rgba(37,99,235,.12);
  --banner-to:#0f172a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:12px 16px;border-radius:999px;font-weight:650}
.btn.primary{background:var(--accent);color:white;border-color:transparent}
.btn.ghost{background:transparent}
.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:14px}
header{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav a.logo{font-weight:800;letter-spacing:.2px}
.nav .links{display:flex;gap:18px;align-items:center}
.nav .links a{color:var(--muted);font-weight:600}
.nav .links a:hover{color:var(--text)}
.nav .actions{display:flex;gap:10px;align-items:center}
.menu{display:none;position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menuBtn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px 12px;border-radius:999px;font-weight:700;background:var(--surface);color:var(--text);cursor:pointer}
.menuBtn:focus-visible{outline:2px solid rgba(37,99,235,.55);outline-offset:2px}
.menuIcon{position:relative;display:inline-block;width:18px;height:12px;color:var(--text)}
.menuIcon::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;border-radius:2px;box-shadow:0 5px 0 0 currentColor,0 10px 0 0 currentColor}
.menuPanel{position:absolute;right:0;top:calc(100% + 10px);width:min(380px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:var(--shadow);z-index:60;max-height:calc(100vh - 90px);overflow:auto}
.menuLinks{display:grid;gap:6px;padding:6px}
.menuLinks a{padding:10px 12px;border-radius:12px;font-weight:650}
.menuLinks a:hover{background:rgba(37,99,235,.08)}
.menuActions{display:grid;gap:10px;padding:12px 6px 6px;border-top:1px solid var(--line);margin-top:6px}
.menuActions .btn{width:100%;justify-content:center}
details.menu[open] .menuBtn{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.35)}
@media (max-width:520px){.menuLabel{display:none}}
@media (max-width:900px){
  .nav .links,.nav .actions{display:none}
  .menu{display:block}
  .nav a.logo{max-width:70%}
}

.hero{padding:56px 0 24px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
h1{font-size:44px;line-height:1.1;margin:0 0 12px}
@media (max-width:520px){h1{font-size:34px}}
p.lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.heroCard{background:linear-gradient(180deg,var(--heroCard-from),var(--heroCard-to));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);min-height:260px}
.heroCard .mock{height:220px;border-radius:14px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.heroCard .mockImage{width:100%;height:220px;object-fit:cover;border-radius:14px;border:1px solid var(--line);display:block;background:var(--surface)}
.row{display:flex;gap:10px;flex-wrap:wrap}

.brochure{position:relative}
.brochure summary{list-style:none}
.brochure summary::-webkit-details-marker{display:none}
.brochure summary.btn{cursor:pointer}
.brochureMenu{position:absolute;top:calc(100% + 10px);left:0;display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow);z-index:10}
.brochureMenu .btn{justify-content:center}

.pricingGrid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.pricingGrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pricingGrid{grid-template-columns:1fr}}
.pricingCard{position:relative}
.pricingCard .price{margin:0 0 8px;font-weight:850}
.pricingCard .muted{font-weight:700;color:var(--muted)}
.pricingCard .tagline{margin:0 0 12px}
.pricingCard ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--muted)}
.pricingLink{display:inline-block;margin-top:14px;color:var(--accent);font-weight:750}
.pricingCard.popular{border-color:rgba(37,99,235,.35);box-shadow:0 0 0 1px rgba(37,99,235,.08) inset, var(--shadow)}
.pricingCard .pill{position:absolute;top:14px;right:14px;padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.22);color:var(--accent)}
.pricingNote{margin:14px 0 0;color:var(--muted);font-size:13px}

.section{padding:34px 0}
.section h2{font-size:28px;margin:0 0 10px}
.section p{color:var(--muted);margin:0 0 18px}

.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
@media (max-width:900px){.trust{grid-template-columns:repeat(2,1fr)}}
.trust .item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;font-weight:650;color:#0f172a}
.trust .item span{display:block;color:var(--muted);font-weight:600;font-size:14px;margin-top:2px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0 0 14px;color:var(--muted)}
.card a.small{color:var(--accent);font-weight:700}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.check{display:grid;gap:10px}
.check .li{display:flex;gap:10px;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:999px;background:var(--accent2);margin-top:7px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.project{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.project .img{height:160px;background:var(--card);border-bottom:1px solid var(--line)}
.project .img img{width:100%;height:100%;object-fit:cover;display:block}
.project .body{padding:14px}
.project .body h3{margin:0 0 6px}
.project .body p{margin:0;color:var(--muted)}
.project .body a.small{display:inline-block;margin-top:10px;color:var(--accent);font-weight:700}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.testimonials{grid-template-columns:1fr}}
.quote{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.quote p{margin:0 0 10px;color:#0f172a;font-weight:650}
.quote .who{color:var(--muted);font-weight:650}

.banner{background:linear-gradient(135deg,var(--banner-from),var(--banner-to));border:1px solid var(--line);border-radius:26px;padding:22px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:26px 0;margin-top:26px}
.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
@media (max-width:900px){.footergrid{grid-template-columns:1fr}}
small{color:var(--muted)}
input,select,textarea{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:14px;font:inherit;background:var(--surface);color:var(--text)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{min-height:130px;resize:vertical}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.formgrid{grid-template-columns:1fr}}