.stng-wrap{--blue:#2563eb;--blue-2:#4f8dfc;--blue-3:#93c5fd;--radius:26px;position:relative;overflow:hidden}
.stng-container{padding:clamp(12px,3vw,44px);font-family:Outfit,ui-sans-serif;color:#0b1324}
.stng-mesh{position:absolute;inset:-25vmax;z-index:-2;pointer-events:none;background:conic-gradient(from 30deg at 30% 20%,#e3f0ff,#f6fbff,#eaf3ff,#f9fbff,#e3f0ff);filter:blur(80px) saturate(130%);animation:stng-swirl 28s linear infinite;opacity:.75}
@keyframes stng-swirl{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
.stng-dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;background-image:radial-gradient(#cfe3ff 1px,transparent 1px),radial-gradient(#e5edf9 1px,transparent 1px);background-size:28px 28px,28px 28px;background-position:0 0,14px 14px;animation:stng-drift 80s linear infinite}
@keyframes stng-drift{to{transform:translate3d(28px,28px,0)}}
.stng-header{display:block;text-align:inherit;width:100%;margin-bottom:clamp(20px,4vw,34px)}
.stng-title{font-size:clamp(32px,5vw,56px);margin:0;font-weight:900;letter-spacing:-.01em;background:linear-gradient(90deg,var(--blue),var(--blue-3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* If user sets a color via Elementor, prefer it */
.elementor-widget .stng-title{color:inherit}
.stng-subtitle{margin:10px 0 0;color:#1f2a44;line-height:1.5}
.stng-metrics{margin:20px 0 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:min(2.4vw,16px)}
.stng-metric{background:linear-gradient(145deg,#fff,#eff6ff);border:1px solid rgba(59,130,246,.16);border-radius:18px;padding:18px;text-align:center;box-shadow:0 16px 48px rgba(15,23,42,.12),0 6px 18px rgba(15,23,42,.08)}
.stng-metric .num{font-size:clamp(28px,3.6vw,42px);font-weight:900;color:var(--blue)}.stng-metric .label{color:#30415f;font-weight:600;letter-spacing:.02em}
/* Core Grid */
.stng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:min(3vw,28px);align-items:stretch}
@media(max-width:520px){.stng-grid{grid-template-columns:1fr}}
.stng-card{position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;transform-style:preserve-3d;box-shadow:0 16px 48px rgba(15,23,42,.12),0 6px 18px rgba(15,23,42,.08);background:linear-gradient(145deg,#fff,#eff6ff);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;border:1px solid rgba(59,130,246,.18)}
.stng-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 30px 86px rgba(15,23,42,.18),0 14px 30px rgba(15,23,42,.12);border-color:rgba(59,130,246,.28)}
.stng-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--angle,0deg),rgba(37,99,235,.35),rgba(147,197,253,.25),rgba(37,99,235,.35));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.stng-card:hover::before{opacity:.9}
.stng-card .accent{position:absolute;inset:-20% -10% auto auto;height:40%;width:60%;border-radius:28px;background:radial-gradient(80% 100% at 100% 0%,rgba(79,141,252,.20),transparent 60%);transform:translateZ(-30px)}
.stng-card .spotlight{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(220px 220px at var(--mx,-100px) var(--my,-100px),rgba(255,255,255,.65),transparent 70%);mix-blend-mode:screen;transition:opacity .2s}
.stng-card:hover .spotlight{opacity:.9}
.stng-card .inner{position:relative;z-index:2;padding:clamp(20px,2.6vw,34px)}
.stng-card .eyebrow{display:inline-flex;align-items:center;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;padding:.34rem .64rem;border-radius:999px;background:rgba(37,99,235,.10);color:var(--blue);margin-bottom:10px}
.stng-card h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,32px);line-height:1.15}
.stng-lead{margin:0 0 14px;color:#0e1a2f;line-height:1.7;font-size:1.06rem;max-width:60ch}
.divider{height:1px;background:linear-gradient(90deg,rgba(15,23,42,.08),rgba(15,23,42,.16),rgba(15,23,42,.08));margin:12px 0 14px}
.list{margin:0;padding-left:0;display:grid;gap:.55rem;color:#334155;list-style:none}
.cta{white-space:nowrap; display:inline-flex;align-items:center;gap:.6rem;padding:16px 24px;border-radius:14px;background:linear-gradient(180deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 14px 30px rgba(37,99,235,.28);border:1px solid #1e4fd8;position:relative;overflow:hidden;transition:transform .15s ease,filter .2s ease;line-height:1.1;cursor:pointer;margin-top:16px}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);transition:transform .45s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.02)}.cta:hover::after{transform:translateX(120%)}
.cta .arrow{transition:transform .15s ease;display:inline-block}.cta:hover .arrow{transform:translateX(3px)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);transition:transform .45s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.02)}.cta:hover::after{transform:translateX(120%)}.cta .arrow{transition:transform .15s ease;display:inline-block}.cta:hover .arrow{transform:translateX(3px)}
.expand-btn{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:0;cursor:pointer;color:var(--blue);font-weight:800;padding:0;margin-top:0;line-height:1.2}
.details{overflow:hidden;max-height:0;transition:max-height .5s ease,opacity .4s ease;opacity:0}.details.open{opacity:1}
/* Sticky CTA */
.sticky-cta{position:fixed;inset:auto 18px 18px 18px;z-index:20;background:linear-gradient(90deg,#ffffffee,#f6fbffee);border:1px solid rgba(59,130,246,.18);border-radius:18px;box-shadow:0 16px 48px rgba(15,23,42,.12),0 6px 18px rgba(15,23,42,.08);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;transform:translateY(120%);transition:transform .35s ease}
.sticky-cta.show{transform:translateY(0)}.sticky-cta .msg{font-weight:800;color:#0e1a2f}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(6,17,38,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:50}
.modal{max-width:840px;width:92%;background:#fff;border-radius:16px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.35);border:1px solid #dfe6ff}
.modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.x{background:#f1f5ff;border:1px solid #d9e4ff;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
.input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e0e6f7;outline:0;background:#fbfcff;font-size:14px}
fieldset{border:1px solid #e3e9fb;padding:12px;border-radius:12px}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}@media(max-width:720px){.check-grid{grid-template-columns:1fr}}
/* Feature First */
.stngF-layout{display:grid;grid-template-columns:280px 1fr;gap:28px;margin-top:26px}@media(max-width:980px){.stngF-layout{grid-template-columns:1fr}}
.stngF-left .panel{background:#ffffffd9;border:1px solid rgba(100,116,139,.15);border-radius:18px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);backdrop-filter:blur(6px)}
.stngF-left .filters{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.stngF-left .filter{cursor:pointer;border:1px solid #e3e9ff;background:#f7f9ff;border-radius:12px;padding:8px 10px;font-weight:700;color:#2e3666}
.stngF-left .filter.active{border-color:#cfe0ff;background:#eef4ff}
.stngF-cards{display:flex;flex-direction:column;gap:26px}
.stngF-card{display:grid;grid-template-columns:360px 1fr;gap:28px;background:#ffffffd9;border:1px solid rgba(100,116,139,.12);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.stngF-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.09);border-color:#dce5ff}
@media(max-width:980px){.stngF-card{grid-template-columns:1fr}}
.stngF-card .media{border-radius:14px;height:230px;background:radial-gradient(600px 260px at 10% 10%, #8ec5ff 0%, rgba(255,255,255,0) 50%), linear-gradient(135deg,#7c9eff 0%,#56d1ff 35%,#7d7cff 85%);position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px rgba(68,93,154,.18)}
.stngF-card .badge{position:absolute;top:12px;left:12px;background:#eef2ff;color:#334;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;border:1px solid #dde6ff;box-shadow:0 2px 8px rgba(80,100,200,.14)}
.stngF-card .content{display:flex;flex-direction:column;gap:10px;padding:4px 6px 8px}
.stngF-card .kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#2e3666;background:#eef2ff;border:1px solid #dfe7ff;border-radius:999px;display:inline-block;padding:6px 10px}
.stngF-card h3{margin:6px 0 0;font-size:clamp(20px,2.2vw,28px)}
.stngF-card .small{color:#28324d}
.stngF-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.stngF-card .chip{font-size:12px;font-weight:600;background:#eef2ff;border:1px solid #e2e7ff;padding:6px 10px;border-radius:999px}
.stngF-card .features{list-style:none;padding:0;margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
@media(max-width:620px){.stngF-card .features{grid-template-columns:1fr}}
/* Reveal */
.reveal{opacity:0;transform:translateY(16px) scale(.98)}.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
/* Ripple element */
.button, .cta{white-space:nowrap; white-space:nowrap; display:inline-flex;align-items:center;gap:.6rem;padding:16px 24px;border-radius:14px;background:linear-gradient(180deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:900;box-shadow:0 14px 30px rgba(37,99,235,.28);border:1px solid #1e4fd8;position:relative;overflow:hidden;transition:transform .15s ease,filter .2s ease;line-height:1.1;cursor:pointer;margin-top:16px}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);transition:transform .45s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.02)}.cta:hover::after{transform:translateX(120%)}
.cta .arrow{transition:transform .15s ease;display:inline-block}.cta:hover .arrow{transform:translateX(3px)}
.button .ripple, .cta .ripple{position:absolute;border-radius:50%;transform:scale(0);animation:stng-ripple .6s linear;background:rgba(255,255,255,.35)}
@keyframes stng-ripple{to{transform:scale(4);opacity:0}}

.stng-card .chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.stng-card .chip{font-size:12px;font-weight:600;background:#eef2ff;border:1px solid #e2e7ff;padding:6px 10px;border-radius:999px}

.stng-card .inner{display:flex;flex-direction:column;min-height:100%}
.stng-card .btn-row{margin-top:auto;display:flex;gap:14px;align-items:center}

/* v2.7 feature list icons */
.stng-card .list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.stng-card .feat-item{display:flex;gap:10px;align-items:flex-start;color:#2b3758}
.stng-card .feat-item i{width:18px;height:18px;display:inline-block;margin-top:3px;border-radius:50%}
.stng-card .feat-item[data-icon="check"] i{background:conic-gradient(from 180deg, #22c55e, #16a34a); -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z\'/></svg>') center/contain no-repeat; mask: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z\'/></svg>') center/contain no-repeat; background-color:#16a34a}
.stng-card .feat-item[data-icon="dot"] i{background:#93c5fd;box-shadow:inset 0 0 0 4px #93c5fd}
.stng-card .feat-item[data-icon="circle"] i{border:2px solid #94a3b8;background:transparent}
.stng-card .feat-item .ftext strong{font-weight:800;color:#0c1428}
.stng-card .feat-item .ftext span{color:#2b3758}

/* v2.7 font rendering improvements */
.stng-container, .stng-card{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* v2.8 – feature list & modal style */
.stng-card .list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.stng-card .feat-item{display:flex;gap:10px;align-items:flex-start}
.stng-card .feat-item i{flex:0 0 16px;height:16px;border-radius:50%;margin-top:4px;background:#dbeafe;box-shadow:inset 0 0 0 4px #93c5fd}
.stng-card .feat-item[data-icon="check"] i{background:linear-gradient(180deg,#22c55e,#16a34a);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>') center/contain no-repeat}
.stng-card .feat-item[data-icon="circle"] i{background:transparent;border:2px solid #94a3b8;box-shadow:none}
.stng-card .feat-item .ftext{color:#2b3758}
.stng-card .feat-item .ftext strong{color:#0c1428;font-weight:800}

/* CTA pill refinement */
.cta{white-space:nowrap; padding:10px 14px;border-radius:16px;background:linear-gradient(180deg,#2563eb,#3b82f6);border:1px solid #1e4fd8;box-shadow:0 14px 34px rgba(37,99,235,.28);font-weight:900}
.expand-btn{color:var(--blue);font-weight:800}

/* Modal */
.modal--strategy{background:linear-gradient(180deg,#0b1531,#0b1230);color:#dbe4ff;border:1px solid rgba(147,197,253,.25)}
.modal--strategy header{border-bottom:1px solid rgba(147,197,253,.2);padding-bottom:10px;margin-bottom:10px}
.modal--strategy .sub{opacity:.9;margin:.25rem 0 .5rem}
.modal--strategy .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.modal--strategy .form-grid .full{grid-column:1/-1}
.modal--strategy label{font-size:.9rem;opacity:.9}
.modal--strategy .input, .modal--strategy textarea, .modal--strategy select{background:rgba(255,255,255,.06);border:1px solid rgba(147,197,253,.25);border-radius:10px;color:#e8eeff;padding:10px 12px;outline:none}
.modal--strategy .input:focus, .modal--strategy textarea:focus, .modal--strategy select:focus{border-color:#7aa2ff;box-shadow:0 0 0 2px rgba(122,162,255,.25)}
.modal--strategy .check{display:flex;gap:10px;align-items:flex-start}
.modal--strategy .actions{display:flex;align-items:center;gap:14px;margin-top:14px}
.modal--strategy .button--primary{padding:14px 22px;border-radius:12px;background:linear-gradient(180deg,#22c55e,#16a34a);border:1px solid #10a13f;color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(34,197,94,.28)}
.modal--strategy .meta{margin-left:auto;font-size:.85rem;opacity:.85;display:flex;gap:8px}
@media (max-width: 767px){ .modal--strategy .form-grid{grid-template-columns:1fr} }

/* THEME PRESETS */
.stng-wrap{ --mesh-c1:#60a5fa; --mesh-c2:#3b82f6; --mesh-angle:28deg; }
.stng-wrap[data-theme="ocean"]  { --blue:#2563eb; --blue-2:#4f8dfc; --blue-3:#93c5fd; }
.stng-wrap[data-theme="sunset"] { --blue:#e11d48; --blue-2:#fb7185; --blue-3:#fecdd3; }
.stng-wrap[data-theme="emerald"]{ --blue:#059669; --blue-2:#34d399; --blue-3:#a7f3d0; }
.stng-wrap[data-theme="violet"] { --blue:#7c3aed; --blue-2:#a78bfa; --blue-3:#ddd6fe; }
/* Plain Estimate button (no background, no arrow) */
.estimate-btn{
  background:none;
  border:none;
  padding:0;
  margin:0px;
  box-shadow:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.expand-btn,
.expand-panel { display:none !important; }


/* Mesh gradient override using variables */
.stng-mesh{ background: conic-gradient(from var(--mesh-angle), var(--mesh-c1), var(--mesh-c2), var(--mesh-c1)); opacity:.75; }

/* Modal mobile fixes */
.modal-backdrop .modal{max-height:90vh; overflow:auto; border-radius:16px; padding:16px; width:min(860px,92vw)}
@media(max-width:767px){
  .modal-backdrop{align-items:flex-start; padding-top:12vh;}
  .modal-backdrop .modal{width:92vw; max-height:84vh;}
}
.modal--strategy label{display:block;margin-bottom:6px;color:#e8eeff}
.modal--strategy select{appearance:auto}