:root{
    --tw-navy:#0d1b4c;
    --tw-navy-deep:#0a1338;
    --tw-blue:#2456e0;
    --tw-ink:#1c2540;
    --tw-muted:#5b6478;
    --tw-card:#ffffff;
    --tw-bg:#eef2f9;
    --tw-line:#e8eaf3;
    --tw-star:#f5b942;
 
    --tw-c1:#2456e0;
    --tw-c2:#1f9d55;
    --tw-c3:#e0801c;
    --tw-c4:#d6336c;
    --tw-c5:#0e9488;
    --tw-c6:#d6336c;
    --tw-c7:#2456e0;
}
 
img,svg{display:block;}
ul{margin:0;padding:0;list-style:none;}
 
.tw-section{
    position:relative;
    overflow:hidden;
    padding:56px 0 0;
}
 
/* faint skyline backdrop, decorative only */
.tw-skyline{
    position:absolute;
    top:0;left:0;width:100%;height:230px;
    z-index:0;pointer-events:none;
    opacity:0.55;
}
 
.tw-wrap{max-width:1320px;margin:0 auto;padding:0 40px;position:relative;z-index:1;}
 
/* ===== HEADER ===== */
.tw-head{text-align:center;margin-bottom:40px;}
.tw-title-row{
    display:flex;align-items:center;justify-content:center;gap:18px;
    margin-bottom:18px;
}
.tw-title-row svg{flex-shrink:0;width:70px;height:14px;}
.tw-title-row h1{
    font-size:clamp(1.7rem,3.4vw,2.6rem);
    font-weight:800;
    margin:0;
    color:var(--tw-ink);
    letter-spacing:-0.5px;
    white-space:nowrap;
}
.tw-sub{
    font-size:1.05rem;
    line-height:1.6;
    color:var(--tw-muted);
    max-width:760px;
    margin:0 auto;
}
.tw-sub b{color:var(--tw-blue);font-weight:700;}
 
/* ===== GRID ===== */
.tw-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    padding-bottom:48px;
}
 
.tw-card{
    background:var(--tw-card);
    border-radius:16px;
    padding:26px 26px 22px;
    box-shadow:0 8px 24px rgba(13,27,76,0.06);
    display:flex;
    flex-direction:column;
}
 
.tw-card-head{
    display:flex;align-items:flex-start;gap:12px;
    margin-bottom:18px;
}
.tw-avatar{
    width:58px;height:58px;border-radius:50%;
    border:2px solid var(--tw-c1);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tw-avatar svg{width:27px;height:27px;}
 
.tw-quote-name{flex:1;padding-top:2px;}
.tw-quote-mark{
    font-family:'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size:2.1rem;
    font-weight:800;
    line-height:0.6;
    color:var(--tw-c1);
    margin:0 0 6px;
    display:block;
}
.tw-quote-name h3{
    margin:0 0 2px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--tw-ink);
}
.tw-quote-name .tw-role{
    font-size:0.8rem;
    font-weight:700;
    color:var(--tw-c1);
    display:block;
    padding-bottom:10px;
    border-bottom:2px solid var(--tw-c1);
    white-space:nowrap;
}
 
.tw-card p{
    font-size:0.88rem;
    line-height:1.6;
    color:var(--tw-ink);
    margin:0 0 16px;
    flex:1;
}
 
.tw-stars{display:flex;gap:3px;}
.tw-stars svg{width:17px;height:17px;}
 
/* ===== BENEFITS PANEL ===== */
.tw-benefits{
    background:#dde6f8;
    border-radius:16px;
    padding:24px 24px;
    display:flex;
    flex-direction:column;
    gap:18px;
    justify-content:center;
}
.tw-benefit{display:flex;gap:14px;align-items:flex-start;}
.tw-benefit-ic{
    width:42px;height:42px;border-radius:50%;
    background:var(--tw-blue);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tw-benefit-ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
.tw-benefit h4{
    margin:0 0 3px;font-size:0.98rem;font-weight:700;color:var(--tw-blue);
}
.tw-benefit p{
    margin:0;font-size:0.84rem;line-height:1.5;color:var(--tw-muted);
}
 
/* ===== FOOTER STRIP ===== */
.tw-footer{
    background:linear-gradient(135deg,var(--tw-navy),var(--tw-navy-deep));
    padding:22px 0;
}
.tw-footer-inner{
    max-width:1320px;margin:0 auto;padding:0 40px;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:18px;
}
.tw-foot-items{
    display:flex;align-items:center;gap:0;
    flex-wrap:wrap;
}
.tw-foot-item{
    display:flex;align-items:center;gap:10px;
    color:#fff;font-size:0.92rem;font-weight:600;
    padding:0 22px;
}
.tw-foot-item svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;flex-shrink:0;}
.tw-foot-sep{
    width:1px;height:22px;background:rgba(255,255,255,0.25);
}
 
.tw-brand{
    display:flex;align-items:center;gap:10px;
}
.tw-brand-mark{
    width:34px;height:34px;border-radius:50%;
    background:conic-gradient(from 0deg,#2456e0,#1f9d55,#f5b942,#d6336c,#2456e0);
    flex-shrink:0;
}
.tw-brand-text{
    color:#fff;font-weight:800;font-size:0.95rem;line-height:1.25;
    letter-spacing:0.5px;
}
 
/* ===== RESPONSIVE ===== */
@media (max-width:1199px){
    .tw-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
    .tw-wrap{padding:0 24px;}
    .tw-title-row{flex-direction:column;gap:8px;}
    .tw-title-row svg{display:none;}
    .tw-title-row h1{white-space:normal;}
    .tw-footer-inner{justify-content:center;text-align:center;}
    .tw-foot-items{justify-content:center;}
}
@media (max-width:767px){
    .tw-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
    .tw-wrap{padding:0 18px;}
    .tw-card{padding:22px 20px 20px;}
    .tw-foot-item{padding:6px 14px;font-size:0.85rem;}
    .tw-foot-sep{display:none;}
}