:root {
  --bg: #0c111d;
  --bg-2: #0b1627;
  --panel: #101d31;
  --text: #f4f7fb;
  --muted: #a9b7ca;
  --line: rgba(255,255,255,.11);
  --blue: #46a7ff;
  --violet: #8b5cf6;
  --cyan: #56d8ff;
  --max: 1180px;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#182233; background:#f5f7fb; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(var(--max), calc(100% - 40px)); margin-inline:auto; }
.site-header { position:fixed; inset:0 0 auto; z-index:50; background:rgba(12,17,29,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-wrap { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; color:#fff; flex:0 0 auto; }
.brand-logo { display:block; width:220px; height:auto; max-width:none; border-radius:0; }
.footer-logo { width:205px; }

.brand-mark { width:43px; aspect-ratio:1; border-radius:13px 13px 18px 18px; display:grid; place-items:center; background:linear-gradient(145deg,var(--cyan),var(--blue) 42%,var(--violet)); transform:rotate(8deg); box-shadow:0 10px 28px rgba(78,111,255,.26); }
.brand-mark span { transform:rotate(-8deg); font-weight:900; font-size:24px; color:#08111f; letter-spacing:-2px; }
.brand-copy { display:flex; flex-direction:column; line-height:.95; min-width:125px; }
.brand-copy strong { font-size:17px; letter-spacing:.11em; }
.brand-copy > span { font-size:12px; letter-spacing:.38em; margin-top:4px; opacity:.92; }
.brand-copy small { font-size:7px; letter-spacing:.2em; margin-top:7px; color:#99bfff; }
.nav-links { display:flex; align-items:center; gap:28px; color:#d9e2ef; font-size:14px; font-weight:600; }
.nav-links a:hover { color:white; }
.nav-cta { padding:11px 16px; border:1px solid rgba(255,255,255,.2); border-radius:999px; }
.nav-toggle { display:none; border:0; background:transparent; color:white; font-size:26px; }
.hero { min-height:760px; background:var(--bg); color:white; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:center 58%/cover no-repeat; filter:saturate(.72) contrast(1.08); transform:scale(1.02); }
.hero-bg-demo { background-image:url('assets/hero-demo.jpg'); }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,16,29,.96) 0%,rgba(7,16,29,.86) 42%,rgba(7,16,29,.32) 72%,rgba(7,16,29,.42) 100%), linear-gradient(0deg,rgba(7,16,29,.82),rgba(7,16,29,.02) 55%); }
.hero-content { position:relative; z-index:2; padding-top:112px; max-width:1180px; }
.hero-content > * { max-width:760px; }
.eyebrow { color:#6cc8ff; font-size:12px; font-weight:800; letter-spacing:.16em; margin-bottom:18px; }
.hero h1 { font-size:clamp(48px,7vw,82px); line-height:1.02; letter-spacing:-.055em; margin:0 0 25px; }
.hero h1 span { background:linear-gradient(90deg,#75d8ff,#8787ff,#af76ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:20px; line-height:1.65; color:#ced8e7; margin:0 0 34px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 22px; border-radius:12px; font-weight:800; font-size:14px; cursor:pointer; border:0; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; background:linear-gradient(120deg,#248be7,#7657ee); box-shadow:0 12px 30px rgba(64,105,242,.3); }
.button-ghost { color:white; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); }
.hero-meta { margin-top:70px; display:flex; gap:10px; flex-wrap:wrap; }
.hero-meta span { font-size:12px; color:#c3cfde; border:1px solid rgba(255,255,255,.13); background:rgba(7,16,29,.45); padding:8px 11px; border-radius:999px; }
.trust-strip { background:#0a1423; color:white; border-top:1px solid rgba(255,255,255,.07); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-grid > div { padding:26px 26px 27px 0; display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.08); margin-right:26px; }
.trust-grid > div:last-child { border-right:0; }
.trust-grid strong { font-size:14px; }
.trust-grid span { color:#94a6bb; font-size:12px; margin-top:4px; }
.section { padding:110px 0; }
.section-dark { background:var(--bg); color:white; }
.section-heading { max-width:760px; margin-bottom:52px; }
.section-heading h2 { font-size:clamp(35px,5vw,56px); line-height:1.08; letter-spacing:-.045em; margin:0 0 20px; color:#101a2a; }
.section-dark .section-heading h2 { color:white; }
.section-heading p { font-size:17px; color:#64748b; margin:0; }
.section-dark .section-heading p { color:#9eb0c6; }
.split-heading { max-width:none; display:grid; grid-template-columns:1.35fr .65fr; gap:70px; align-items:end; }
.cards { display:grid; gap:18px; }
.three-col { grid-template-columns:repeat(3,1fr); }
.card { background:white; border:1px solid #e7ebf1; border-radius:var(--radius); padding:32px; min-height:250px; box-shadow:0 10px 35px rgba(21,32,55,.05); color:#182233; }
.card-no { font-weight:800; color:#7657ee; font-size:13px; margin-bottom:34px; }
.card h3 { margin:0 0 12px; font-size:22px; letter-spacing:-.02em; color:#172033; }
.card p { color:#64748b; margin:0; font-size:15px; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.demo-note { display:flex; align-items:flex-start; gap:12px; margin:-10px 0 28px; padding:16px 18px; border:1px solid #dbe3ee; background:#f7faff; border-radius:14px; color:#445066; font-size:14px; }
.demo-note strong { color:#172033; white-space:nowrap; }
.gallery-item { margin:0; position:relative; grid-column:span 6; aspect-ratio:4 / 3; border-radius:18px; overflow:hidden; background:#111; }
.gallery-item.gallery-wide { grid-column:span 12; aspect-ratio:16 / 6; }
.gallery-item.gallery-short { aspect-ratio:16 / 7; }
.gallery-item.gallery-portrait { grid-column:span 4; aspect-ratio:3 / 4; }
.gallery-item img { width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.025); }
.gallery-item::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(4,9,16,.83)); }
.gallery-item figcaption { position:absolute; z-index:2; left:24px; right:24px; bottom:20px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.gallery-item figcaption strong { font-size:17px; color:white; }
.gallery-item figcaption span { color:#c1cede; font-size:12px; }
.process-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:start; }
.sticky-heading { position:sticky; top:130px; margin-bottom:0; }
.steps { border-top:1px solid #dfe5ec; }
.step { display:grid; grid-template-columns:68px 1fr; gap:18px; padding:31px 0; border-bottom:1px solid #dfe5ec; }
.step > span { color:#795bef; font-weight:800; font-size:13px; }
.step h3 { margin:0 0 7px; font-size:20px; }
.step p { margin:0; color:#64748b; }
.inputs-section { padding-top:0; }
.inputs-box { padding:50px; border-radius:24px; color:white; background:linear-gradient(135deg,#0a1627,#10233c 60%,#1a1851); display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:start; box-shadow:0 24px 70px rgba(31,45,77,.18); }
.inputs-box h2 { margin:0; font-size:40px; line-height:1.1; letter-spacing:-.04em; }
.inputs-box ul { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.inputs-box li { color:#d7e0ec; font-size:14px; padding:12px 0 12px 22px; position:relative; border-bottom:1px solid rgba(255,255,255,.08); }
.inputs-box li::before { content:""; width:7px; height:7px; border-radius:50%; background:#6bcaff; position:absolute; left:0; top:20px; box-shadow:0 0 0 4px rgba(107,202,255,.12); }
.contact-section { background:#eef3f9; }
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:start; }
.contact-copy h2 { font-size:clamp(38px,5vw,58px); line-height:1.05; letter-spacing:-.05em; margin:0 0 20px; }
.contact-copy > p { color:#64748b; font-size:17px; }
.contact-details { display:flex; flex-direction:column; gap:9px; margin-top:36px; }
.contact-details a { font-weight:800; color:#243655; }
.contact-details span { color:#708096; font-size:14px; }
.quote-form { background:white; border:1px solid #e2e8f0; padding:30px; border-radius:22px; box-shadow:0 16px 50px rgba(23,36,61,.08); display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.quote-form label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:800; color:#4d5d72; }
.quote-form label:nth-of-type(5), .quote-form .button, .quote-form small { grid-column:1 / -1; }
.quote-form input,.quote-form select,.quote-form textarea { width:100%; border:1px solid #dce3eb; border-radius:10px; padding:12px 13px; font:inherit; color:#172033; background:#fbfcfe; outline:none; }
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus { border-color:#6e6cff; box-shadow:0 0 0 3px rgba(110,108,255,.12); }
.quote-form small { color:#8995a7; font-size:11px; }
.footer { background:#0c111d; color:white; padding:46px 0; }
.footer-grid { display:grid; grid-template-columns:.75fr 1.5fr .5fr; gap:50px; align-items:start; }
.footer-copy p { color:#d0d9e5; margin:0 0 12px; font-size:14px; }
.footer-copy small { color:#718297; font-size:10px; line-height:1.6; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:13px; color:#b9c5d4; }
.section-dark .card { background:#ffffff; color:#182233; }
.section-dark .card p { color:#64748b; }

@media (max-width: 850px) {
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:82px; left:20px; right:20px; background:#0b1627; border:1px solid rgba(255,255,255,.1); border-radius:15px; padding:18px; flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .hero { min-height:720px; }
  .hero h1 { font-size:52px; }
  .hero p { font-size:17px; }
  .trust-grid,.three-col,.split-heading,.process-layout,.inputs-box,.contact-grid,.footer-grid { grid-template-columns:1fr; }
  .trust-grid > div { border-right:0; border-bottom:1px solid rgba(255,255,255,.08); margin:0; }
  .split-heading,.process-layout,.inputs-box,.contact-grid { gap:36px; }
  .demo-note { flex-direction:column; }
  .sticky-heading { position:static; }
  .gallery-item,.gallery-item.gallery-wide,.gallery-item.gallery-portrait,.gallery-item.gallery-short { grid-column:span 12; aspect-ratio:4 / 3; }
  .inputs-box { padding:34px; }
  .inputs-box ul { grid-template-columns:1fr; }
  .quote-form { grid-template-columns:1fr; }
  .quote-form label { grid-column:1 / -1; }
}
@media (max-width: 520px) {
  .brand-logo { width:180px; }
  .footer-logo { width:190px; }
  .container { width:min(var(--max), calc(100% - 28px)); }
  .nav-wrap { min-height:72px; }
  .nav-links { top:72px; left:14px; right:14px; }
  .brand-copy small { display:none; }
  .hero { min-height:700px; }
  .hero-content { padding-top:90px; }
  .hero h1 { font-size:44px; }
  .hero-meta { margin-top:46px; }
  .section { padding:80px 0; }
  .section-heading h2 { font-size:39px; }
  .gallery-item.gallery-wide,.gallery-item,.gallery-item.gallery-portrait,.gallery-item.gallery-short { aspect-ratio:4 / 3; }
  .gallery-item figcaption { flex-direction:column; align-items:flex-start; }
  .inputs-box { padding:28px 22px; }
  .contact-copy h2 { font-size:42px; }
}
/* Keep the first half of the hero heading white; only the highlighted phrase uses the gradient. */
.hero h1 .hero-title-before {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
}