:root{ --bg:#0f1115; --bg-soft:#141821; --card:#171c26; --card-2:#1b2230; --text:#f3f4f6; --muted:#b5bdc9; --muted-2:#8f98a8; --border:rgba(255,255,255,.08); --line:rgba(255,255,255,.05); --accent:#d4a756; --accent-2:#f0cf8a; --accent-ink:#1b1408; --success:#63d59a; --danger:#ef6b6b; --radius:18px; --radius-lg:24px; --shadow:0 20px 60px rgba(0,0,0,.32); --shadow-sm:0 10px 24px rgba(0,0,0,.22); --max:1160px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ color:var(--text); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(900px 520px at 10% -10%, rgba(212,167,86,.10), transparent 60%), radial-gradient(860px 480px at 100% 0%, rgba(255,255,255,.05), transparent 55%), linear-gradient(180deg,#0d1015 0%, #11151d 35%, #0f1218 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(var(--max), calc(100% - 32px));margin-inline:auto} /* headers for both template families */
header.topbar.site-header{ position:sticky; top:0; z-index:40; backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(14,17,23,.90), rgba(14,17,23,.72)); border-bottom:1px solid var(--line);
}
.nav.navbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img,.logo{width:38px;height:38px;border-radius:12px;display:block;flex:0 0 auto;object-fit:cover; background: #131821 url('logo-icon.jpg') center/cover no-repeat; border:1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28);
}
.brand .t1,.brand h1,.brand b{font-size:15px;line-height:1.1;font-weight:800;letter-spacing:.2px;margin:0}
.brand .t2,.brand small{display:block;color:var(--muted-2);font-size:12px;margin-top:2px}
.menu, nav ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a, nav a{ padding:9px 12px;border-radius:12px;color:rgba(243,244,246,.86); border:1px solid transparent;
}
.menu a:hover, nav a:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06)}
.menu a.active, nav a.active{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.08); color:#fff}
.nav-actions,.cta,.actions,.hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 15px;border-radius:14px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); color:var(--text);font-weight:700;cursor:pointer;white-space:nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.05)}
.btn.primary{ color:var(--accent-ink); border-color:rgba(212,167,86,.45); background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 24px rgba(212,167,86,.20), inset 0 1px 0 rgba(255,255,255,.40);
}
.btn.primary:hover{box-shadow:0 10px 28px rgba(212,167,86,.24), inset 0 1px 0 rgba(255,255,255,.5)}
.btn.small{padding:9px 12px;border-radius:12px;font-size:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.pill:hover{background:rgba(255,255,255,.05)} .burger{display:none}.burger button{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:#fff}
.mmenu{display:none;padding:0 0 12px}.mmenu.open{display:block}.mmenu a{display:block;padding:10px 12px;border-radius:12px;color:var(--muted)}.mmenu a:hover{background:rgba(255,255,255,.04);color:#fff} .hero{padding:42px 0 18px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch}
.hero-card,.card,.tile,.stat,.step,.notice,.item{ background: linear-gradient(180deg, rgba(28,34,46,.88), rgba(21,26,36,.86)); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.hero-card{padding:22px;border-radius:var(--radius-lg);position:relative;overflow:hidden}
.hero-card:before{content:'';position:absolute;inset:-1px;background:radial-gradient(620px 260px at -5% 0%, rgba(212,167,86,.10), transparent 55%), radial-gradient(520px 240px at 100% -10%, rgba(255,255,255,.05), transparent 60%);pointer-events:none}
.hero-card>*{position:relative}
.kicker{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.2px}
.h1,h2{margin:.35rem 0 .65rem; line-height:1.08; font-weight:900; letter-spacing:-.02em}
.h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(26px,3vw,36px)}
.sub,.lead,p.lead{color:var(--muted);max-width:62ch}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid rgba(212,167,86,.22);background:rgba(212,167,86,.08);color:rgba(255,245,224,.92);font-size:13px}
.badge img{width:15px;height:15px;opacity:.9}
.note{ margin-top:14px;padding:12px 14px;border-radius:14px; background:rgba(99,213,154,.08);border:1px solid rgba(99,213,154,.18);color:#d6f6e5;font-size:14px;
} .side,.stats{display:grid;gap:12px}.stats{grid-template-columns:1fr 1fr}
.stat{padding:14px}
.stat .tt.stat b{display:flex;gap:8px;align-items:center;font-weight:800;font-size:14px}
.stat .tt img{width:16px;height:16px;opacity:.9}
.stat .pp.stat span{color:var(--muted);font-size:13px;margin-top:5px;display:block} .section{padding:34px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-block:1px solid var(--line)}
.h2,.section h3{font-size:clamp(22px,2vw,28px);font-weight:900;letter-spacing:-.01em;margin:0 0 14px}
.h3{font-size:17px;font-weight:800;margin:0 0 6px}
.grid{display:grid;gap:12px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid:not(.cols-2):not(.cols-3){grid-template-columns:repeat(4,minmax(0,1fr))}
.card{padding:16px}
.card p,.tile p,.item p,.notice,.list.breadcrumbs{color:var(--muted)}
.card .row{display:flex;gap:12px;align-items:flex-start}
.ico{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(212,167,86,.08);border:1px solid rgba(212,167,86,.16)}
.ico img{width:20px;height:20px;opacity:.95}
.price{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;font-size:13px;font-weight:800;border:1px solid rgba(212,167,86,.18);background:rgba(212,167,86,.07);color:#f0dfb6;margin-top:10px} .steps{counter-reset:step}
.step{position:relative;padding:16px}
.step:before{counter-increment:step;content:counter(step);position:absolute;right:12px;top:12px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff;background:rgba(255,255,255,.05);border:1px solid var(--border)} .tile,.item{padding:16px}
.tile h4,.item h4{margin:0 0 6px;font-size:16px}
.list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table td{padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid var(--border)}
.table td:first-child{border-radius:12px 0 0 12px}.table td:last-child{border-radius:0 12px 12px 0;text-align:right;font-weight:800;white-space:nowrap}
.faq details{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:800}.faq p{margin:8px 0 0;color:var(--muted)} /* forms */
.form{padding:18px}
.form label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input,.textarea,.form input,.form textarea,.form select{ width:100%;padding:12px 13px;border-radius:13px;outline:none; border:1px solid rgba(255,255,255,.09); background:rgba(10,13,18,.55);color:var(--text); transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus,.textarea:focus,.form input:focus,.form textarea:focus,.form select:focus{border-color:rgba(212,167,86,.35); box-shadow:0 0 0 4px rgba(212,167,86,.08)}
.textarea,.form textarea{min-height:110px;resize:vertical}
.filebox{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-radius:14px;border:1px dashed rgba(212,167,86,.28);background:rgba(212,167,86,.03);cursor:pointer;transition:.16s ease}
.filebox:hover{border-color:rgba(212,167,86,.42);background:rgba(212,167,86,.05)}
.filebox .left{display:flex;align-items:center;gap:10px;min-width:0}.filebox .hint{color:var(--muted-2);font-size:12px}.clip-emoji{width:18px;display:inline-flex;justify-content:center}
.filelist{font-size:13px;color:var(--muted)}
.notice{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.02)} .footer, footer{padding:28px 0;color:var(--muted);border-top:1px solid var(--line);margin-top:20px}
.footer-grid{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.small-links a{text-decoration:underline}
.toast{display:none;position:fixed;right:14px;bottom:14px;padding:12px 14px;border-radius:14px;background:rgba(23,28,38,.98);border:1px solid var(--border);box-shadow:var(--shadow)}
.toast.show{display:block} /* contact page helpers */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:16px}
.contact-card{padding:18px}
.contact-title{margin:0 0 8px;font-size:26px;font-weight:900;letter-spacing:-.02em}
.contact-sub{margin:0;color:var(--muted);max-width:66ch}
.kpi-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.kpi{padding:12px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.kpi b{display:block;font-size:14px}.kpi span{font-size:12px;color:var(--muted)}
.list-plain{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.list-plain li{display:flex;align-items:flex-start;gap:10px;color:var(--muted)}
.list-plain li::before{content:'✓';color:var(--accent);font-weight:900;line-height:1.2;margin-top:1px}
.formgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.help-steps{display:grid;gap:10px;margin-top:12px}
.help-step{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.02)}
.help-step .num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(212,167,86,.14);color:#f6e4bf;font-size:12px;font-weight:900;flex:0 0 auto}
.help-step div:last-child{color:var(--muted)}
.help-step b{display:block;color:#fff;margin-bottom:2px;font-size:13px}
.inline-sep{height:1px;background:var(--line);margin:14px 0} /* desktop fix for contacts request form */
.contact-card form.grid{grid-template-columns:1fr !important;align-items:start}
.contact-card form.grid > *{min-width:0}
.contact-card form.grid .btn.primary{width:100%}
.contact-card form.grid .notice{line-height:1.4}
@media (min-width: 981px){ #request .textarea{min-height:132px} #request .filebox{padding:13px 14px}
}
@media (max-width: 980px){ .hero-grid,.contact-grid{grid-template-columns:1fr} .cols-3{grid-template-columns:1fr 1fr} .grid:not(.cols-2):not(.cols-3){grid-template-columns:1fr 1fr}
}
@media (max-width: 860px){ .menu, nav ul{display:none} .burger{display:block} .cta .btn.small,.nav-actions .btn:first-child{display:none} .btn{padding:10px 13px} .form .row,.formgrid-2,.list{grid-template-columns:1fr} .cols-2,.cols-3,.grid:not(.cols-2):not(.cols-3){grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr} .kpi-row{grid-template-columns:1fr}
} .brand-title{font-weight:800;font-size:18px;line-height:1.1;color:#fff;margin:0} /* platform integration helpers */
.contact-platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.consent-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);color:var(--muted);font-size:13px;line-height:1.4}
.consent-row input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent)}
.consent-row a{text-decoration:underline;color:#fff}
@media (display-mode: standalone){.topbar,.site-header{padding-top:env(safe-area-inset-top)}}
.consent-line{display:flex;align-items:flex-start;gap:10px;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.4}
.consent-line input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.consent-line span{min-width:0}.consent-line a{text-decoration:underline;color:#fff}
.form label.consent-line{display:flex;margin-top:8px}
.form label.consent-line{display:flex;align-items:flex-start;gap:10px;margin-top:8px}
.form label.consent-line input[type="checkbox"]{flex:0 0 18px;width:18px;min-width:18px;max-width:18px;height:18px;padding:0;margin:1px 0 0;box-shadow:none}
.form label.consent-line span{min-width:0;line-height:1.4}

/* card readability tuning: codex 2026-07-12 */
.card,
.tile,
.item,
.stat,
.step,
.notice,
.help-step,
.kpi {
  opacity: 1;
  filter: none;
  text-shadow: none;
}

.card .h3,
.card h3,
.card h4,
.tile h4,
.item h4,
.stat b,
.kpi b,
.help-step b {
  color: rgba(255,255,255,.96);
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: 0;
  text-shadow: none;
}

.card p,
.tile p,
.item p,
.notice,
.list-plain li,
.help-step div:last-child,
.kpi span,
.stat span,
.contact-sub {
  color: rgba(221,228,238,.82);
  line-height: 1.62;
  text-shadow: none;
}

.card .lead,
.card p.lead {
  color: rgba(224,231,242,.84);
  line-height: 1.58;
}

@media (max-width: 860px) {
  .card .h3,
  .card h3,
  .card h4,
  .tile h4,
  .item h4,
  .stat b,
  .kpi b,
  .help-step b {
    line-height: 1.3;
  }

  .card p,
  .tile p,
  .item p,
  .notice,
  .list-plain li,
  .help-step div:last-child,
  .kpi span,
  .stat span,
  .contact-sub {
    line-height: 1.66;
  }
}
/* end card readability tuning */