:root{--ink:#16293f;--muted:#6b7d94;--line:#e2e9f1}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"Be Vietnam Pro",system-ui,sans-serif;background:#dbe5ef;background-image:radial-gradient(circle at 12% 6%,#bcd4f7,transparent 38%),radial-gradient(circle at 92% 92%,#c6d3ee,transparent 34%);min-height:100vh;padding:36px 20px 52px;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.panel{max-width:940px;margin:auto;background:#fff;border-radius:26px;box-shadow:0 26px 70px #22406326;padding:34px 40px 20px}

/* HEADER */
.brand-header{display:flex;align-items:center;gap:18px;padding-bottom:26px;border-bottom:1px solid #eaeff6}
.brand-mark{flex:none;width:80px;height:80px;border-radius:50%;overflow:hidden;box-shadow:0 10px 24px #1a6cc72e;background:#07102b}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.eyebrow{margin:0;color:#2782c4;font-size:11px;letter-spacing:2.4px;font-weight:800}
.brand-copy{min-width:0}
.brand-header + section{margin-top:28px}
.brand-copy h1{font-size:38px;letter-spacing:-1.8px;line-height:1.05;margin:0 0 8px}
.brand-copy h1 span{background:linear-gradient(90deg,#1b78da,#00b7d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-services{display:grid;gap:3px;margin-top:6px}.brand-services p{margin:0;color:#586d87;font-size:13px;line-height:1.5;font-weight:500}.brand-services p span{color:#15a8bb;margin-right:4px}
.brand-badge{margin-left:auto;display:flex;align-items:center;gap:7px;white-space:nowrap;color:#267f79;background:#eafaf5;border:1px solid #d3efe7;border-radius:30px;font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:11px 15px}
.dot{width:6px;height:6px;border-radius:50%;background:#22bd9c;box-shadow:0 0 0 3px #22bd9c26}

/* INTRO */
.intro{display:flex;align-items:center;gap:14px;background:linear-gradient(100deg,#f0f9f8,#f1f8f3);border:1px solid #daeee7;border-radius:15px;padding:16px 18px;margin:24px 0 30px}
.intro-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:12px;color:#0fa78f;background:#dcf6ec}
.intro-icon svg{width:21px;height:21px}
.intro strong{font-size:13.5px}
.intro p{font-size:11.5px;color:var(--muted);margin:3px 0 0}

/* SECTIONS */
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}
.section-heading h2{font-size:24px;letter-spacing:-.8px;line-height:1.15;margin:5px 0 0}
.section-heading>p{margin:0 0 3px;color:#7890aa;font-size:11.5px;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}

/* CARDS */
.card{min-height:151px;border-radius:16px;padding:19px 20px;border:1px solid transparent;transition:transform .22s,box-shadow .22s,border-color .22s}
.card:hover,.support-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #2c4c761f}
.blue{background:#eef5ff;--accent:#1f76e8;border-color:#dfebfd}
.orange{background:#fff6ec;--accent:#c3700f;border-color:#f7e6d2}
.purple{background:#f6f1ff;--accent:#8050dd;border-color:#e9dffb}
.mint{background:#eaf9f4;--accent:#0d9583;border-color:#d7f0e8}
.card:hover{border-color:var(--accent)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--accent);background:#ffffffc4;box-shadow:inset 0 0 0 1px #ffffff}
.icon svg{width:20px;height:20px}
.card h3,.support-card h3{font-size:16px;line-height:1.3;margin:0 0 8px;font-weight:800}
.card p,.support-card p{color:#61758e;font-size:12.5px;line-height:1.55;margin:0}
.card :is(button,.card-link),.support-action,.phone{border:0;background:none;color:var(--accent);font-size:11.5px;font-weight:800;padding:5px 0;min-height:28px;display:inline-flex;align-items:center;gap:4px;transition:opacity .2s,gap .2s}
.card :is(button,.card-link):hover,.support-action:hover,.phone:hover{opacity:.72;gap:7px}
.soon{font-size:10px;font-weight:700;color:#4f8578;background:#ffffffc9;border-radius:20px;padding:5px 10px}

/* SUPPORT */
.support{margin-top:30px}
.support-card{display:flex;flex-direction:column;min-height:143px;border:1px solid var(--line);border-radius:16px;padding:19px 20px;background:#fff;transition:transform .22s,box-shadow .22s,border-color .22s}
.support-card:hover{border-color:#bedcf7}
.support-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.support-name{display:flex;align-items:flex-start;gap:11px;min-width:0}
.support-name h3{margin:0 0 4px}
.service-icon{flex:none;width:36px;height:36px;border-radius:11px;overflow:hidden;display:grid;place-items:center;box-shadow:0 5px 12px #1f6fc42e}
.service-icon svg{width:36px;height:36px;display:block}
.phone,.support-label{font-size:11.5px;color:#2d4a6b;font-weight:800;white-space:nowrap}
.phone{--accent:#1b6fd0}
.support-card .support-action{--accent:#0a7dbe;margin-top:auto;padding-top:13px;align-self:flex-start}

/* CTA + FOOTER */
.bottom{margin-top:24px;text-align:center}
.primary{width:100%;border:0;border-radius:12px;background:linear-gradient(100deg,#1a6fe0,#2f93ef);color:#fff;font-weight:800;font-size:14px;padding:17px;box-shadow:0 8px 20px #2078ed38;transition:transform .2s,box-shadow .2s,filter .2s}
.primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 12px 26px #2078ed4d}
.primary:active{transform:translateY(0)}
.bottom p,footer{font-size:11px;color:#71849b}
.bottom p{margin:13px 0 0}
footer{text-align:center;margin-top:22px;border-top:1px solid #eff2f6;padding-top:16px}
button:focus-visible{outline:3px solid #19a6d8;outline-offset:3px;border-radius:6px}

/* TOAST */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#15334d;color:#fff;padding:12px 17px;border-radius:11px;font-size:12px;box-shadow:0 12px 28px #1c38543d;transition:opacity .2s,transform .2s;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:860px){.panel{padding:28px 26px 18px}.brand-header{flex-wrap:wrap}.brand-badge{margin:0}.section-heading>p{display:none}}
@media(max-width:620px){body{padding:12px}.panel{padding:24px 18px 18px;border-radius:20px}.brand-header{gap:13px}.brand-mark{width:66px;height:66px;border-radius:50%}.brand-copy{flex:1;min-width:140px}.brand-copy h1{font-size:29px}.brand-services p{font-size:11.5px;line-height:1.45}.grid{grid-template-columns:1fr}.card{min-height:auto}.intro{margin:20px 0 24px}.support-top{flex-direction:column;gap:10px}.card :is(button,.card-link),.support-action,.phone{min-height:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}






.linked-card{position:relative;cursor:pointer}
.card-link{text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;border-radius:16px}
.linked-card:has(.card-link:focus-visible){outline:3px solid #19a6d8;outline-offset:3px}
.card-link:focus-visible{outline:none}
.linked-card .phone{position:relative;z-index:1}