:root{
  --ink:#07142c; --muted:#536174; --blue:#2d1bd8; --red:#e91b47; --green:#11984b;
  --line:#dfe6f0; --soft:#f7f9fc;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,#fff 0,#fff 35%,#f5f7fb 100%)}
.page{width:min(1480px,calc(100% - 32px));margin:0 auto;padding:38px 0 26px}
.hero{text-align:center}
.badge{display:inline-flex;padding:8px 20px;border-radius:999px;background:#efedff;color:var(--blue);font-weight:900;font-size:14px;letter-spacing:.05em}
h1{margin:18px 0 8px;font-size:clamp(38px,5vw,66px);line-height:.98;letter-spacing:-.055em}
h1 span{color:var(--blue)}
.subtitle{margin:18px auto 30px;color:var(--muted);font-size:clamp(17px,1.7vw,22px)}
.panel,.cta{border:1px solid var(--line);background:rgba(255,255,255,.88);box-shadow:0 22px 80px rgba(7,20,44,.08);border-radius:24px}
.panel{padding:28px}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
label span{display:block;font-weight:850;font-size:14px;margin-bottom:10px}
small{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#bac3d0;color:#fff;font-size:11px}
.field{height:64px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;background:#fff;padding:0 18px}
input,select{width:100%;border:0;outline:0;background:transparent;color:#050b1d;font-size:23px}
.field b{font-size:21px;color:#667386;font-weight:500}
.quick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0}
.quick span{font-weight:900;color:#536174;font-size:18px}
.quick button{border:1px solid var(--line);background:#fff;color:#17243b;padding:13px 22px;border-radius:999px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(7,20,44,.035)}
.quick button:hover{border-color:#b4bfd0;transform:translateY(-1px)}
.comparison{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px}
.compare-card{border-radius:18px;padding:30px;border:1px solid var(--line)}
.competitor{background:linear-gradient(135deg,#fff5f7,#fff)}
.libre{background:linear-gradient(135deg,#f2fff8,#fff)}
.head{display:flex;align-items:center;gap:20px}
.icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900}
.competitor .icon{background:#ffdce4;color:var(--red)} .libre .icon{background:#d9f6e6;color:var(--green)}
h2{margin:0;font-size:30px;letter-spacing:-.03em}.head p{margin:7px 0 0;font-size:18px;font-weight:700}
.receive{text-align:center;margin:44px 0 30px}.receive span,.receive em{display:block;font-style:normal;font-size:17px}
.receive strong{display:block;margin:12px 0;font-size:clamp(44px,4.3vw,58px);letter-spacing:-.04em}
.competitor .receive strong,.competitor .total b,.negative{color:var(--red)}.libre .receive strong,.libre .total b,.positive{color:var(--green)}
.rows{border-top:1px solid var(--line);padding-top:18px}.rows div{display:flex;justify-content:space-between;gap:18px;font-size:19px;padding:9px 0}
.rows .total{border-top:1px solid var(--line);margin-top:10px;padding-top:18px;font-weight:900}
.versus{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);box-shadow:0 12px 35px rgba(7,20,44,.12);font-size:30px;font-weight:950}
.note{text-align:center;font-size:14px;color:#1b2a44;margin:18px 0 16px}
.bottom-grid{display:grid;grid-template-columns:1.05fr 1.4fr;gap:0;border:1px solid #bfe9d1;background:linear-gradient(90deg,#f0fff7,#f8fffb);border-radius:18px;overflow:hidden}
.gain-box{padding:28px 34px;display:flex;align-items:center;justify-content:center;gap:34px;text-align:center}
.trend{width:86px;height:86px;border-radius:50%;background:#dbf7e8;color:var(--green);font-size:54px;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.gain-box p{margin:0;font-size:22px}.gain-box strong{display:block;color:var(--green);font-size:clamp(58px,6vw,82px);line-height:1;letter-spacing:-.06em}.gain-box span{font-size:23px;font-weight:900}
.periods{border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.2)}
.periods div{text-align:center;padding:28px 16px}.periods div+div{border-left:1px solid var(--line)}
.periods p{margin:0 0 5px;font-weight:950;font-size:16px;line-height:1.2;min-height:20px}
small-text{display:block;font-size:13px;color:#07142c;font-weight:900;line-height:1.15;min-height:30px;margin-bottom:11px}
.periods strong{display:block;color:var(--green);font-size:clamp(28px,3.3vw,40px);letter-spacing:-.04em;line-height:1}.periods span{display:block;margin-top:9px;font-weight:850}
.cta{margin-top:24px;padding:28px 34px;background:linear-gradient(135deg,#fbfaff,#fff);display:grid;grid-template-columns:1.5fr .9fr;align-items:center;gap:24px}
.cta-text{display:flex;align-items:center;gap:28px}
.heart{font-size:58px;color:var(--blue);line-height:1}.cta h2{font-size:clamp(25px,2.5vw,34px);margin:0 0 12px}.cta p{font-size:18px;line-height:1.5;margin:0}
.actions{display:flex;flex-direction:column;gap:14px}.actions a{text-align:center;text-decoration:none;border-radius:10px;padding:18px 20px;font-size:18px;font-weight:950}.primary{background:var(--blue);color:#fff}.secondary{background:#fff;color:var(--blue);border:2px solid var(--blue)}
footer{text-align:center;color:#68778b;font-size:15px;padding:24px 0 0}
@media(max-width:950px){
  .page{width:min(100% - 18px,1180px);padding-top:22px}.panel{padding:18px}.controls,.comparison,.bottom-grid,.periods,.cta{grid-template-columns:1fr}.comparison{gap:20px}
  .versus{position:static;transform:none;margin:-2px auto;width:64px;height:64px;font-size:24px}.gain-box{padding:24px 16px;gap:14px;flex-direction:column}.periods{border-left:0}.periods div+div{border-left:0;border-top:1px solid var(--line)}.cta-text{flex-direction:column;text-align:center}.actions a{width:100%}
}