@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0;font-family:'Plus Jakarta Sans',sans-serif;}

.d{background:linear-gradient(160deg,#EBF5FB 0%,#E4F2F8 35%,#EBF5EF 70%,#EEE8F7 100%);border-radius:28px;padding:36px 30px 38px;margin: 40px 30px;position:relative;overflow:hidden;}

/* bg texture */
.d::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(71,130,162,.1) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:0;}


/* orbs */
.ob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(65px);animation:od ease-in-out infinite alternate;}
.o1{width:380px;height:380px;background:radial-gradient(circle,rgba(71,130,162,.14),transparent 70%);top:-120px;left:-90px;animation-duration:19s;}
.o2{width:280px;height:280px;background:radial-gradient(circle,rgba(111,186,217,.11),transparent 70%);bottom:-70px;right:-60px;animation-duration:24s;animation-delay:-9s;}
.o3{width:200px;height:200px;background:radial-gradient(circle,rgba(80,180,120,.08),transparent 70%);top:45%;left:48%;animation-duration:17s;animation-delay:-5s;}
@keyframes od{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,15px) scale(1.08)}}

/* waves */
.wv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.wp{fill:none;stroke-dasharray:2000;stroke-dashoffset:2000;animation:wd 5s ease forwards;}
@keyframes wd{to{stroke-dashoffset:0}}

/* particles */
.pt{position:absolute;border-radius:50%;pointer-events:none;z-index:0;animation:pr linear infinite;}
@keyframes pr{0%{transform:translateY(0) scale(1);opacity:.4}100%{transform:translateY(-110vh) scale(.1);opacity:0}}

.inn{position:relative;z-index:1;}

/* ── HEADER ── */
.hdr{display:flex;align-items:center;justify-content:center;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.hdr-left h2{font-size:clamp(20px,2.8vw,30px);font-weight:900;color:#0F2A38;letter-spacing:-.025em;line-height:1.15;}
.hdr-left h2 span{background:linear-gradient(135deg,#2E5E7A,#4782A2,#6FBAD9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hdr-left p{font-size:12px;color:#7AAAB8;margin-top:4px;margin-left: 25px;}
.hdr-badge{display: inline-flex; align-items: center; gap: 8px;background:rgba(71,130,162,.1);border:1.5px solid rgba(71,130,162,.25);color:#2E5E7A;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom: 10px;}
.bdot{width:7px;height:7px;background:#4782A2;border-radius:50%;animation:bp 2s infinite;}
@keyframes bp{0%,100%{opacity:1;box-shadow:0 0 5px rgba(71,130,162,.6)}50%{opacity:.25;box-shadow:none}}

/* ── TOP METRIC CARDS ── */
.tc{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px;}
@media(max-width:680px){.tc{grid-template-columns:1fr 1fr;}}

.mc{background:rgba(255,255,255,.84);border:1px solid rgba(71,130,162,.15);border-radius:18px;padding:20px 16px;position:relative;overflow:hidden;box-shadow:0 2px 14px rgba(71,130,162,.07);transition:transform .25s,box-shadow .25s;animation:ci .5s ease both;}
.mc:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(71,130,162,.14);}
@keyframes ci{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;background:var(--cb);}
.mc-ico{font-size:22px;margin-bottom:10px;}
.mc-lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8AACBC;margin-bottom:7px;}
.mc-val{font-size:clamp(18px,2.5vw,26px);font-weight:900;letter-spacing:-.025em;color:var(--cv,#0F2A38);line-height:1;margin-bottom:3px;opacity:0;transform:scale(.82);animation:pn .65s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--pd,.3s);}
@keyframes pn{to{opacity:1;transform:scale(1)}}
.mc-sub{font-size:11px;color:#9ABCCA;line-height:1.45;}
.mc-ico img {
    height: 30px;
}
/* deco shape */
.mc-shape{position:absolute;bottom:-10px;right:-10px;width:55px;height:55px;border-radius:50%;opacity:.1;background:var(--cv,#4782A2);}

/* ── MAIN GRID ── */
.mg{display:grid;grid-template-columns:1fr 1fr 230px;gap:14px;margin-bottom:16px;}
@media(max-width:860px){.mg{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.mg{grid-template-columns:1fr;}}

/* shared card */
.sc{background:rgba(255,255,255,.84);border:1px solid rgba(71,130,162,.14);border-radius:18px;padding:20px;box-shadow:0 2px 14px rgba(71,130,162,.06);animation:ci .5s ease both;}
.sc-ttl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4782A2;margin-bottom:16px;display:flex;align-items:center;gap:7px;}
.sc-ttl svg{width:14px;height:14px;flex-shrink:0;}

/* ── DONUT CARD ── */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.donut-svg{flex-shrink:0;}
.donut-legend{display:flex;flex-direction:column;gap:10px;}
.dl-row{display:flex;align-items:center;gap:8px;}
.dl-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.dl-lbl{font-size:11.5px;color:#3A6070;font-weight:600;}
.dl-val{font-size:11px;color:#8AACBC;font-weight:500;}

/* ── COMPARISON BARS ── */
.cmp-row{margin-bottom:13px;}
.cmp-row:last-child{margin-bottom:0;}
.cmp-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.cmp-lbl{font-size:12px;font-weight:600;color:#2D4E60;}
.cmp-vals{display:flex;gap:10px;}
.cv-manual{font-size:11px;font-weight:700;color:#C03030;}
.cv-auto{font-size:11px;font-weight:700;color:#4782A2;}
.cmp-tracks{display:flex;flex-direction:column;gap:4px;}
.cmp-track{height:6px;background:rgba(71,130,162,.1);border-radius:999px;overflow:hidden;}
.cmp-fill{height:100%;border-radius:999px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1);}
.fill-red{background:linear-gradient(90deg,#C03030,#E96F40);}
.fill-blue{background:linear-gradient(90deg,#4782A2,#6FBAD9);}

/* ── LOSS DRIVERS ── */
.driver{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid rgba(71,130,162,.08);}
.driver:last-child{border-bottom:none;padding-bottom:0;}
.drv-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.di1{background:rgba(220,90,30,.1);}
.di2{background:rgba(200,150,20,.1);}
.di3{background:rgba(30,150,80,.1);}
.di4{background:rgba(71,100,180,.1);}
.drv-txt{font-size:12px;font-weight:600;color:#2D4E60;}

/* ── SAVINGS STRIP ── */
.sav-strip{background:rgba(255,255,255,.84);border:1px solid rgba(71,130,162,.14);border-radius:18px;padding:20px 22px;box-shadow:0 2px 14px rgba(71,130,162,.06);animation:ci .5s .18s ease both;}
.sav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:560px){.sav-grid{grid-template-columns:1fr;}}

.sav-item{text-align:center;padding:16px 10px;background:rgba(71,130,162,.04);border:1px solid rgba(71,130,162,.1);border-radius:14px;transition:transform .2s;}
.sav-item:hover{transform:translateY(-3px);}
.sav-pct{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.02em;line-height:1;margin-bottom:4px;opacity:0;animation:pn .7s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--spd,.5s);}
.sav-arc{margin:8px auto;display:block;}
.sav-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7AAAB8;}

/* arc animation */
.arc-fill{stroke-dasharray:100;stroke-dashoffset:100;animation:arcfill 1.3s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--ad,.5s);}
@keyframes arcfill{to{stroke-dashoffset:var(--ao,35)}}

/* ── CTA ── */
.cta{margin-top:16px;background:linear-gradient(135deg,#1A3D55 0%,#2E6080 55%,#4782A2 100%);border-radius:18px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;position:relative;overflow:hidden;animation:ci .5s .24s ease both;}
.cta::before{content:'';position:absolute;top:-50px;right:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(111,186,217,.16),transparent);}
.cta-t{position:relative;z-index:1;}
.cta-t h3{font-size:15.5px;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:-.01em;}
.cta-t p{font-size:12px;color:#A8D4EA;}
.cta-btn{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#4782A2,#6FBAD9);color:#fff;font-size:13px;font-weight:700;padding:12px 22px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;box-shadow:0 4px 18px rgba(71,130,162,.5);transition:transform .2s,box-shadow .2s;white-space:nowrap;}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(71,130,162,.65);color: #fff;}
.cta-btn svg{width:13px;height:13px;}

@keyframes da1{to{stroke-dashoffset:155}} /* 44% of 251 = 110.44, offset = 276.46-121.6=154.8 */
@keyframes da2{to{stroke-dashoffset:237.6}} /* 14% */
@keyframes da3{to{stroke-dashoffset:245.9}} /* 11% */
@keyframes da4{to{stroke-dashoffset:190.7}} /* 31% */