/* Сайты конструктора: общая стилизация и темы */
:root {
  --bg: #070a11; --bg2: #0b111d; --panel: rgba(255,255,255,.04);
  --line: rgba(160,180,220,.14); --txt: #eef2fb; --mut: #94a3bd; --dim: #5f6f8c;
  --link: #f7c948; --link2: #37d7b0;
  --unit: 'Manrope', system-ui, sans-serif; --dis: 'Unbounded', 'Manrope', sans-serif;
}
[data-theme="gold"] { --bg:#06090f; --acc:#f7c948; --acc2:#ff9a3d; --acc-soft:rgba(247,201,72,.12); }
[data-theme="violet"] { --bg:#0a0716; --acc:#8b7bff; --acc2:#5ea0ff; --acc-soft:rgba(139,123,255,.14); }
[data-theme="teal"] { --bg:#06100f; --acc:#37d7b0; --acc2:#2aa8ff; --acc-soft:rgba(55,215,176,.12); }
[data-theme="night"] { --bg:#05070d; --acc:#9fb2ff; --acc2:#c9a2ff; --acc-soft:rgba(159,178,255,.12); }
[data-theme="light"] { --bg:#f6f7fb; --bg2:#fff; --panel:rgba(10,15,30,.05);
  --line:rgba(20,30,60,.12); --txt:#111827; --mut:#5b6b84; --dim:#8a97ad; --acc:#d99a1b; --acc2:#e07a2f; --acc-soft:rgba(217,154,27,.12); }

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { font-family:var(--unit); background:var(--bg); color:var(--txt); line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:rgba(247,201,72,.25); }

.container { max-width:1080px; margin:0 auto; padding:0 22px; }

/* header */
.s-head { display:flex; align-items:center; gap:16px; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); }
.s-brand { display:flex; align-items:center; gap:11px; font-family:var(--dis); font-weight:700; font-size:16px; }
.s-brand .cube { width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--acc), var(--acc2)); color:#fff; font-weight:800; font-size:15px; flex:none; }
.s-nav { display:flex; gap:6px; flex-wrap:wrap; }
.s-nav a { color:var(--mut); font-weight:600; font-size:14px; padding:8px 13px; border-radius:10px; }
.s-nav a:hover { color:var(--txt); background:var(--panel); }
.s-call { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:14px;
  color:#fff; background:linear-gradient(135deg, var(--acc), var(--acc2)); padding:10px 18px; border-radius:12px; white-space:nowrap; }

/* hero */
.s-hero { padding:72px 0 56px; text-align:center; }
.s-hero h1 { font-family:var(--dis); font-size:clamp(26px,4.6vw,48px); line-height:1.14; letter-spacing:-.02em; }
.s-hero h1 span { background:linear-gradient(135deg, var(--acc), var(--acc2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.s-hero p { color:var(--mut); font-size:17px; max-width:560px; margin:18px auto 0; }
.s-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.s-btn { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:15px;
  padding:14px 26px; border-radius:14px; color:#fff; background:linear-gradient(135deg, var(--acc), var(--acc2)); }
.s-btn.ghost { background:var(--panel); border:1px solid var(--line); color:var(--txt); }

/* sections */
.s-sec { padding:66px 0; }
.s-sec.alt { background:var(--bg2); border-block:1px solid var(--line); }
.s-sec .h { text-align:center; }
.s-sec .h .tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acc); border:1px solid var(--acc); border-radius:100px;
  padding:6px 13px; margin-bottom:16px; }
.s-sec .h h2 { font-family:var(--dis); font-size:clamp(22px,3vw,32px); letter-spacing:-.01em; }
.s-sec .h p { color:var(--mut); margin-top:12px; }

/* services */
.s-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
.s-card { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px; }
.s-card b { font-size:16px; display:block; margin-bottom:6px; }
.s-card .pr { display:inline-block; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--acc), var(--acc2)); padding:4px 11px; border-radius:100px; font-size:13px; margin-top:12px; }
.s-card p { color:var(--mut); font-size:14px; }

/* about / contacts */
.s-about { max-width:720px; margin:0 auto; text-align:center; }
.s-contacts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.s-ch { display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:12px 18px; font-weight:700; font-size:14px; }

/* footer */
.s-foot { border-top:1px solid var(--line); padding:26px 0 40px; text-align:center; color:var(--dim); font-size:13px; }
.s-foot .made { color:var(--mut); font-weight:600; }
.s-foot .made a { color:var(--acc); }

@media (max-width:720px) {
  .container { padding:0 14px; }
  .s-head { padding:12px 0; gap:10px; }
  .s-brand { font-size:14px; gap:9px; }
  .s-brand .cube { width:28px; height:28px; border-radius:8px; font-size:13px; }
  .s-nav { order:3; width:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .s-nav a { white-space:nowrap; padding:7px 10px; font-size:13px; }
  .s-call { padding:9px 14px; font-size:13px; border-radius:10px; }
  .s-hero { padding:38px 0 30px; }
  .s-hero h1 { font-size:26px; }
  .s-hero p { font-size:14.5px; margin-top:12px; }
  .s-cta { gap:10px; margin-top:20px; }
  .s-btn { width:100%; justify-content:center; padding:12px 18px; font-size:14px; border-radius:12px; }
  .s-sec { padding:38px 0; }
  .s-sec .h .tag { font-size:10px; padding:5px 11px; margin-bottom:12px; }
  .s-sec .h h2 { font-size:21px; }
  .s-sec .h p { font-size:13.5px; margin-top:10px; }
  .s-grid { grid-template-columns:1fr; gap:10px; margin-top:20px; }
  .s-card { border-radius:16px; padding:17px 18px; }
  .s-card b { font-size:15px; margin-bottom:4px; }
  .s-card .pr { font-size:12px; padding:3px 10px; margin-top:10px; }
  .s-card p { font-size:13px; }
  .s-about-hero { padding:4px 0 0; }
  .s-about-hero p { font-size:14.5px; margin-top:8px; }
  .s-contacts { margin-top:20px; gap:10px; }
  .s-ch { padding:10px 14px; font-size:13px; border-radius:12px; }
  .s-foot { padding:20px 0 30px; font-size:12px; }
}
@media (max-width:400px) {
  .s-call { display:none; }
  .s-brand { font-size:13px; }
  .s-hero h1 { font-size:23px; }
  .s-hero p { font-size:13.5px; }
  .s-nav a { padding:6px 9px; font-size:12.5px; }
  .s-btn { font-size:13.5px; padding:11px 16px; }
}