:root { --ink:#101827; --muted:#5f6b7d; --line:#dce4f0; --surface:#f5f8fc; --blue:#0a84ff; --blue-deep:#006edc; --navy:#101b36; --radius:1.25rem; --shadow:0 1.25rem 3.75rem rgb(17 38 76 / .10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:400 1rem/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; }
.container { width:min(1120px, calc(100% - 3rem)); margin-inline:auto; }
.site-nav { position:sticky; top:0; z-index:5; backdrop-filter:blur(18px); background:rgb(255 255 255 / .88); border-bottom:1px solid rgb(220 228 240 / .8); }
.nav-inner,.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-nav .nav-inner { min-height:4.5rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:750; text-decoration:none; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:.55rem; color:white; background:var(--blue); font-size:1.45rem; line-height:1; }
.nav-links { display:flex; align-items:center; gap:1.25rem; font-size:.9rem; font-weight:600; }
.nav-links > a:not(.btn),.footer-links a { text-decoration:none; color:#45536a; }
.nav-links > a:not(.btn):hover,.footer-links a:hover,.text-link:hover,.faq a { color:var(--blue); }
.btn { display:inline-flex; justify-content:center; align-items:center; min-height:3rem; padding:.68rem 1.05rem; border-radius:.8rem; text-decoration:none; font-weight:700; font-size:.94rem; transition:transform .16s ease, background .16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { color:#fff; background:var(--blue); box-shadow:0 .55rem 1.4rem rgb(10 132 255 / .23); }
.btn-primary:hover { background:var(--blue-deep); }
.btn-ghost { color:var(--ink); border:1px solid var(--line); }
.btn-light { color:var(--blue); background:#fff; }
.hero { overflow:hidden; background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 58%,#f5f8ff 100%); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5rem; padding:7.75rem 0 6.75rem; }
.eyebrow,.slot-kicker { display:inline-block; margin-bottom:1rem; color:var(--blue); font-weight:750; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.08; letter-spacing:-.045em; }
h1 { max-width:9ch; margin-bottom:1.35rem; font-size:clamp(3.4rem,7vw,6.15rem); }
h2 { margin-bottom:1rem; font-size:clamp(2.15rem,4vw,3.4rem); }
h3 { margin-bottom:.7rem; font-size:1.32rem; }
.lede { max-width:39rem; color:var(--muted); font-size:1.16rem; }
.cta-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-note { margin:1rem 0 0; color:var(--muted); font-size:.88rem; }
.media-slot { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:20rem; padding:2rem; color:#6d7b91; text-align:center; background:repeating-linear-gradient(135deg,#f7faff 0 1.2rem,#eef4fb 1.2rem 2.4rem); border:2px dashed #bed3ee; border-radius:var(--radius); }
.media-slot strong { display:block; color:#35445d; font-size:1.2rem; letter-spacing:-.025em; }
.media-slot span:not(.slot-kicker) { font-size:.82rem; }
.slot-note { max-width:17rem; margin-top:1rem; }
.hero-shot { min-height:34rem; border-radius:2rem; box-shadow:var(--shadow); transform:rotate(2deg); }
section { padding:7rem 0; }
.section-head { max-width:43rem; margin-bottom:3rem; }
.section-head > p { color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature-card { min-height:16rem; padding:1.7rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.feature-card p { color:var(--muted); font-size:.94rem; }
.feature-icon { display:grid; place-items:center; width:2.7rem; height:2.7rem; margin-bottom:1.6rem; color:var(--blue); background:#e7f2ff; border-radius:.85rem; font-size:1.35rem; font-weight:700; }
.showcase { background:var(--surface); }
.showcase-row { display:grid; grid-template-columns:1fr .82fr; align-items:center; gap:8rem; padding:4rem 0; border-top:1px solid var(--line); }
.showcase-row.reverse .showcase-copy { grid-column:2; }
.showcase-row.reverse .device-slot { grid-column:1; grid-row:1; }
.showcase-copy p,.campaign-grid p,.pro-grid p,.privacy-grid p { color:var(--muted); }
.device-slot { justify-self:center; width:min(100%,20rem); min-height:27rem; border-radius:2rem; }
.campaign-section { background:#fff; }
.campaign-grid { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:5rem; }
.campaign-slot { min-height:20rem; }
.pro-section { color:#eef5ff; background:var(--navy); }
.pro-section .eyebrow { color:#77baff; }
.pro-section p { color:#c0cbe0; }
.pro-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:6rem; }
.pro-list { display:grid; gap:1.3rem; padding:0; margin:0; list-style:none; }
.pro-list li { display:flex; gap:1rem; align-items:flex-start; padding:1.25rem; background:rgb(255 255 255 / .07); border:1px solid rgb(255 255 255 / .12); border-radius:1rem; }
.pro-list li > span { display:grid; flex:none; place-items:center; width:2.25rem; height:2.25rem; color:#93c9ff; background:rgb(10 132 255 / .18); border-radius:.7rem; font-size:1.25rem; }
.pro-list strong,.pro-list small { display:block; }
.pro-list small { color:#b9c8e0; }
.privacy-banner { padding:3rem 0; background:#eaf5ff; }
.privacy-grid { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.5rem; }
.privacy-grid h2 { margin:0 0 .3rem; font-size:1.5rem; }
.privacy-grid p { margin:0; font-size:.94rem; }
.privacy-seal { display:grid; place-items:center; width:3rem; height:3rem; color:#fff; background:var(--blue); border-radius:50%; font-weight:800; }
.text-link { color:var(--blue); font-weight:700; text-decoration:none; white-space:nowrap; }
.faq-wrap { max-width:850px; }
.faq { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { padding:1.2rem 2rem 1.2rem 0; cursor:pointer; font-weight:700; list-style:none; position:relative; }
summary::after { content:"+"; position:absolute; right:.2rem; color:var(--blue); font-size:1.35rem; }
details[open] summary::after { content:"−"; }
details p { max-width:44rem; margin:0 0 1.3rem; color:var(--muted); }
.faq-more { margin-top:1.5rem; color:var(--muted); }
.faq-more a { color:var(--blue); font-weight:700; }
.final-cta { padding:6.5rem 0; color:#fff; text-align:center; background:linear-gradient(135deg,#006edc,#0a84ff); }
.final-cta-inner { max-width:39rem; }
.final-cta .eyebrow,.final-cta p { color:#d8ebff; }
.final-cta h2 { margin-bottom:.7rem; }
.final-cta .btn { margin-top:1rem; }
.site-footer { padding:3rem 0 1.4rem; background:#f7f9fc; }
.site-footer p,.copyright { color:#6a7689; font-size:.86rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:1.3rem; font-size:.9rem; font-weight:600; }
.copyright { margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.legal-page { background:var(--surface); }
.legal-main { max-width:780px; padding:5rem 0 7rem; }
.legal-main article { padding:clamp(1.5rem,5vw,4rem); background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.legal-main h1 { max-width:none; font-size:clamp(2.6rem,5vw,4rem); }
.legal-main h2 { margin-top:2.4rem; font-size:1.5rem; }
.legal-main h3 { margin-top:1.7rem; font-size:1.1rem; }
.legal-main p,.legal-main li { color:#4e5b6e; }
.legal-main a { color:var(--blue); }
.legal-main li + li { margin-top:.55rem; }
.contact-callout { padding:1.2rem; border-left:4px solid var(--blue); background:#eff7ff; border-radius:.5rem; }
@media (max-width:780px) { .container { width:min(100% - 2rem,1120px); } .nav-links > a:not(.nav-cta) { display:none; } .nav-cta { padding:.55rem .75rem; font-size:.82rem; } .hero-grid,.pro-grid,.campaign-grid { grid-template-columns:1fr; gap:3rem; } .hero-grid { padding:5.5rem 0 4.5rem; } .hero-shot { min-height:25rem; transform:none; } .feature-grid { grid-template-columns:1fr; } .showcase-row,.showcase-row.reverse { grid-template-columns:1fr; gap:2rem; padding:3rem 0; } .showcase-row.reverse .showcase-copy,.showcase-row.reverse .device-slot { grid-column:auto; grid-row:auto; } .device-slot { justify-self:stretch; width:100%; min-height:22rem; } .privacy-grid { grid-template-columns:auto 1fr; } .privacy-grid .text-link { grid-column:1 / -1; } .footer-inner { align-items:flex-start; flex-direction:column; } section { padding:4.75rem 0; } }