:root { --ink:#1b2341; --paper:#f6f5fb; --violet:#7657ea; --blue:#1092e5; --line:#dedceb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; }
h1,h2,h3,p { margin:0; } h1,h2,h3 { font-family:Manrope,Arial,sans-serif; letter-spacing:0; } em { color:var(--violet); font-style:normal; }
.site-header { height:78px; padding:0 max(5vw,30px); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #eceaf2; }
.brand { color:var(--ink); text-decoration:none; font-family:Manrope,sans-serif; font-size:14px; font-weight:800; letter-spacing:0; } .brand span { display:inline-grid; width:21px; height:21px; place-items:center; margin-right:8px; color:#fff; border-radius:5px; background:var(--violet); font-size:18px; }
nav { display:flex; gap:28px; } nav a { color:#5b6076; text-decoration:none; font-size:14px; font-weight:600; } nav a:hover { color:var(--violet); }
.hero { min-height:510px; padding:100px 8vw 80px; position:relative; overflow:hidden; background:#fff; } .hero:after { content:""; position:absolute; z-index:0; width:490px; height:490px; right:-125px; top:-105px; border:72px solid #f1edff; border-radius:50%; }
.hero > * { position:relative; z-index:1; } .eyebrow { margin-bottom:17px; color:#6d59d7; font-size:11px; letter-spacing:1.4px; font-weight:700; }
h1 { max-width:780px; font-size:clamp(42px,6vw,76px); line-height:1.05; } .hero-copy { max-width:590px; margin-top:25px; color:#62667a; font-size:17px; line-height:1.65; }
.button { display:inline-flex; align-items:center; gap:24px; margin-top:31px; min-height:52px; padding:0 20px; border-radius:5px; text-decoration:none; font-weight:700; font-size:14px; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button span { font-size:20px; }.primary { color:#fff; background:var(--violet); }.dark { color:#fff; background:var(--ink); }
.hero-note { margin-top:56px; color:#71758a; font-size:13px; font-weight:600; }.hero-note span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#55c57b; }
.section-heading h2,.feature-strip h2,.cta h2 { font-size:clamp(28px,4vw,44px); line-height:1.2; }.product-picker { display:grid; gap:10px; margin-top:29px; }
.product-tab { min-height:90px; padding:14px 15px; cursor:pointer; display:flex; gap:12px; align-items:center; text-align:left; color:var(--ink); border:1px solid #dfd8c8; border-radius:6px; background:#fffdf8; font-family:inherit; transition:border-color .2s,transform .2s,background .2s; }.product-tab:hover { transform:translateX(4px); }.product-tab.is-active { border-color:var(--violet); background:#fff; box-shadow:0 8px 20px #30254912; }.product-tab > span:nth-child(2) { display:grid; gap:4px; }.product-tab strong { font-family:Manrope,sans-serif; font-size:14px; }.product-tab small { color:#767a8d; font-size:12px; }.product-tab b { margin-left:auto; color:#8977ef; font-size:20px; }.tab-icon { flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:5px; color:#fff; font-weight:800; }.loan-icon { background:#7657ea; font-size:24px; }.pdf-icon { background:#1195e5; font-size:12px; }
.product-detail { min-height:750px; padding:80px 8vw 65px; display:grid; grid-template-columns:minmax(205px,.68fr) minmax(320px,1.15fr) minmax(310px,1fr); align-items:center; gap:50px; overflow:hidden; }.loan-theme { background:#fff8eb; }.pdf-theme { background:#eef8ff; }.product-intro h2 { font-size:clamp(29px,3vw,42px); line-height:1.12; }.detail-copy { max-width:570px; }.detail-copy h2 { font-size:clamp(34px,4.2vw,56px); line-height:1.11; }.detail-copy p:not(.eyebrow) { margin-top:23px; color:#60657a; line-height:1.65; font-size:16px; }.detail-copy ul { padding:0; margin:26px 0 0; list-style:none; display:grid; gap:13px; }.detail-copy li { display:flex; align-items:center; gap:10px; font-weight:600; font-size:14px; }.detail-copy li:before { content:""; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#e5a524; }.pdf-theme li:before { background:#1195e5; }
.phone-stage { align-self:stretch; min-height:590px; position:relative; }.phone { position:absolute; bottom:-18px; width:242px; border-radius:22px; box-shadow:0 22px 45px #1b234131; }.front { z-index:2; left:22%; transform:rotate(-4deg); }.rear { right:10%; transform:rotate(8deg); opacity:.88; }.stage-tag { position:absolute; z-index:3; right:1%; top:54px; padding:12px 15px; color:#fff; border-radius:4px; background:#e8a524; font-family:Manrope,sans-serif; font-size:12px; font-weight:800; line-height:1.2; }.pdf-theme .stage-tag { background:#1092e5; }
.feature-strip { padding:100px 8vw; background:#1b2341; color:#fff; }.feature-strip .eyebrow { color:#b7abff; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin-top:55px; }.feature-grid article { padding-top:18px; border-top:1px solid #536080; }.feature-grid span { color:#b7abff; font-size:12px; font-weight:700; }.feature-grid h3 { margin-top:20px; font-size:22px; }.feature-grid p { margin-top:12px; max-width:275px; color:#b9bfd0; line-height:1.55; font-size:14px; }
.cta { padding:105px 8vw; background:#fff; }.cta h2 { max-width:640px; }.cta > p:not(.eyebrow) { max-width:520px; margin-top:20px; color:#62667a; line-height:1.6; }.text-link { display:inline-block; margin-top:23px; color:var(--violet); font-weight:700; text-decoration:none; }.text-link span { margin-left:8px; font-size:20px; } footer { padding:35px 8vw; display:grid; grid-template-columns:1fr auto; gap:16px 50px; color:#75798d; background:#eeecf7; font-size:12px; } footer p:last-child { grid-column:1/-1; }
@media (max-width:900px) { .product-detail { min-height:660px; grid-template-columns:minmax(190px,.72fr) 1.15fr; }.phone-stage { display:none; } }
@media (max-width:700px) { .site-header { height:64px; padding:0 20px; } nav { display:none; }.hero { min-height:575px; padding:75px 24px; }.hero:after { width:310px; height:310px; right:-130px; top:40px; border-width:45px; }.hero-copy { font-size:15px; }.product-detail,.feature-strip,.cta { padding-left:24px; padding-right:24px; }.product-detail,.feature-grid { grid-template-columns:1fr; }.product-detail { padding-top:65px; gap:42px; }.product-intro { display:grid; grid-template-columns:1fr; }.product-picker { grid-template-columns:1fr 1fr; margin-top:22px; }.product-tab { min-height:104px; padding:11px; align-items:flex-start; }.product-tab:hover { transform:translateY(-2px); }.product-tab span:nth-child(2) { display:none; }.product-tab b { font-size:16px; }.tab-icon { width:43px; height:43px; }.phone-stage { display:block; height:400px; margin-top:-18px; }.phone { width:195px; bottom:-100px; }.front { left:5%; }.rear { right:2%; }.stage-tag { right:1%; top:20px; }.feature-grid { gap:32px; margin-top:40px; }.cta { padding-top:78px; padding-bottom:78px; } footer { padding:30px 24px; grid-template-columns:1fr; gap:14px; } footer p:last-child { grid-column:auto; } }