/* **********************************************************
   STRATEGIC REDESIGN -- New Section Styles
   Old vs New . Systems . Hook Offer . ROI Calculator
********************************************************** */

/*  Old Way vs New Way  */
.oldnew-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:center;
  margin-top:56px;
}
.oldnew-card{
  border-radius:22px;padding:32px;
  border:1px solid var(--border);
  position:relative;overflow:hidden;
}
.old-way{
  background:rgba(255,59,48,.04);
  border-color:rgba(255,59,48,.2);
}
.old-way::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ff3b30,#ff6b6b);
}
.new-way{
  background:rgba(6,214,160,.04);
  border-color:rgba(6,214,160,.2);
}
.new-way::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
}
.oldnew-header{
  display:flex;align-items:center;gap:14px;
  margin-bottom:24px;
}
.oldnew-icon{font-size:1.8rem}
.oldnew-label{
  font-family:var(--fh);font-size:1.1rem;font-weight:700;
  margin-bottom:2px;
}
.oldnew-sublabel{font-size:.75rem;color:#c0bada}
.oldnew-list{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:20px;list-style:none;
}
.oldnew-list li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.88rem;color:#c0bada;line-height:1.5;
}
.x-icon{
  flex-shrink:0;color:#ff6b6b;font-weight:700;
  width:18px;
}
.ck-icon{
  flex-shrink:0;color:#06d6a0;font-weight:700;
  width:18px;
}
.oldnew-result{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:12px;
  font-size:.82rem;font-weight:600;
}
.oldnew-result.bad{background:rgba(255,59,48,.1);color:#ff6b6b}
.oldnew-result.good{background:rgba(6,214,160,.12);color:#06d6a0}

.oldnew-vs{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.vs-circle{
  width:52px;height:52px;border-radius:50%;
  background:rgba(124,58,237,.15);
  border:2px solid rgba(124,58,237,.3);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:.85rem;font-weight:800;
  color:var(--violet-lt);
}
.vs-arrow{
  font-size:1.5rem;color:var(--violet-lt);
}

@media(max-width:900px){
  .oldnew-grid{grid-template-columns:1fr;gap:16px}
  .oldnew-vs{flex-direction:row;justify-content:center}
  .vs-arrow{display:none}
}

/*  Systems Grid  */
.systems-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:56px;
}
.system-card{
  padding:32px 28px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:22px;
  position:relative;
  transition:all var(--tr);
  display:flex;flex-direction:column;
  gap:0;
}
.system-card:hover{
  transform:translateY(-6px);
  border-color:rgba(124,58,237,.4);
  box-shadow:0 24px 60px rgba(124,58,237,.18);
}
.featured-system{
  border-color:rgba(124,58,237,.45);
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(67,97,238,.06));
}
.featured-system::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--cyan),var(--pink));
  border-radius:22px 22px 0 0;
}
.system-badge{
  position:absolute;top:18px;right:18px;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  color:#fff;font-size:.62rem;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;
}
.system-num{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--violet-lt);
  margin-bottom:10px;
}
.system-icon{font-size:2.2rem;margin-bottom:12px}
.system-title{
  font-family:var(--fh);font-size:1.25rem;font-weight:700;
  margin-bottom:12px;line-height:1.2;
}
.system-desc{
  font-size:.88rem;color:#c0bada;line-height:1.75;
  margin-bottom:18px;
}
.system-features{
  list-style:none;display:flex;flex-direction:column;gap:8px;
  margin-bottom:20px;flex:1;
}
.system-features li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:.82rem;color:#c0bada;
}
.system-features li::before{
  content:'\2713';color:var(--cyan);font-weight:700;
  flex-shrink:0;font-size:.75rem;margin-top:1px;
}
.system-outcome{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  border-radius:10px;padding:10px 12px;
  font-size:.78rem;color:var(--violet-lt);
  font-weight:600;line-height:1.5;
  margin-top:auto;
}
.outcome-icon{flex-shrink:0}

@media(max-width:1024px){
  .systems-grid{grid-template-columns:1fr}
}

/*  Hook Offer  */
.hook-wrapper{
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(67,97,238,.06));
  border:1px solid rgba(124,58,237,.25);
  border-radius:28px;
  overflow:hidden;
  position:relative;
}
.hook-wrapper::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--cyan),var(--pink));
}
.hook-badge-top{
  background:linear-gradient(135deg,rgba(247,37,133,.15),rgba(124,58,237,.15));
  border-bottom:1px solid rgba(124,58,237,.2);
  padding:10px 32px;
  font-size:.75rem;font-weight:700;
  color:var(--pink);letter-spacing:.06em;
  display:flex;align-items:center;gap:8px;
}
.hook-grid{
  display:grid;grid-template-columns:1fr 380px;
  gap:0;
}
.hook-content{
  padding:40px;
  border-right:1px solid rgba(124,58,237,.15);
}
.hook-includes{
  display:flex;flex-direction:column;gap:14px;
  margin-bottom:28px;
}
.hook-item{
  display:flex;align-items:flex-start;gap:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;
}
.hook-item-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
  box-shadow:0 4px 14px rgba(124,58,237,.35);
}
.hook-item strong{display:block;font-size:.88rem;font-weight:700;margin-bottom:2px}
.hook-item span{font-size:.78rem;color:#c0bada}

.hook-value-stack{
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:16px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.value-line{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;
}
.val-price{color:#c0bada}
.val-price.strike{text-decoration:line-through;opacity:.6}
.total-line{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:8px;margin-top:4px;
  font-weight:700;
}
.total-line span:first-child{color:var(--white)}
.today-line{
  background:rgba(124,58,237,.15);
  border-radius:8px;padding:8px 12px;margin-top:4px;
  font-weight:800;
}
.today-line span:first-child{color:var(--violet-lt)}
.val-price.today{
  font-family:var(--fh);font-size:1.4rem;
  background:var(--gall);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.hook-cta-box{
  padding:40px 32px;
  display:flex;flex-direction:column;
  background:rgba(0,0,0,.15);
}
.hook-price-display{
  text-align:center;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.2);
  border-radius:16px;padding:20px;
  margin-bottom:20px;
}
.hook-price-label{font-size:.72rem;color:#c0bada;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.hook-price{
  font-family:var(--fh);font-size:3rem;font-weight:800;
  background:var(--gall);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;
}
.hook-price::before{content:'$';font-size:1.4rem;vertical-align:super}
.hook-price-note{font-size:.72rem;color:#c0bada;margin-top:6px}

.hook-guarantees{
  display:flex;flex-direction:column;gap:7px;
  margin-top:16px;
}
.hook-guarantee{
  display:flex;align-items:center;gap:8px;
  font-size:.78rem;color:#c0bada;
}
.hook-guarantee span{color:var(--green);font-weight:700}

.hook-urgency{
  display:flex;align-items:center;gap:8px;
  background:rgba(247,37,133,.1);
  border:1px solid rgba(247,37,133,.2);
  border-radius:8px;padding:8px 12px;
  font-size:.75rem;color:var(--pink);font-weight:600;
  margin-top:14px;
}
.urgency-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 8px var(--pink);
  flex-shrink:0;
  animation:blink 1.5s infinite;
}

@media(max-width:900px){
  .hook-grid{grid-template-columns:1fr}
  .hook-content{border-right:none;border-bottom:1px solid rgba(124,58,237,.15)}
}

/*  ROI Calculator  */
.calc-wrapper{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px;margin-top:56px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(124,58,237,.18);
  border-radius:24px;overflow:hidden;
}
.calc-inputs{
  padding:36px;
  border-right:1px solid rgba(124,58,237,.12);
}
.calc-results{padding:36px}
.calc-heading{
  font-family:var(--fh);font-size:1rem;font-weight:700;
  margin-bottom:24px;color:var(--white);
}
.calc-field{margin-bottom:20px}
.calc-field label{
  display:block;font-size:.82rem;font-weight:600;
  color:#c0bada;margin-bottom:8px;
}
.calc-field label small{font-weight:400;opacity:.7}
.calc-input-wrap{
  display:flex;align-items:center;gap:10px;
}
.calc-prefix{color:#c0bada;font-weight:700}
.calc-input{
  flex:1;background:rgba(255,255,255,.06);
  border:1px solid rgba(124,58,237,.2);
  border-radius:10px;padding:10px 14px;
  font-family:var(--fb);font-size:.95rem;
  color:var(--white);
  transition:all .3s ease;
}
.calc-input:focus{
  outline:none;
  border-color:rgba(124,58,237,.5);
  background:rgba(124,58,237,.08);
}
.calc-unit{font-size:.78rem;color:#c0bada;white-space:nowrap}
.calc-slider{
  flex:1;accent-color:var(--violet);cursor:pointer;height:4px;
}
.calc-radio-group{
  display:flex;flex-wrap:wrap;gap:8px;
}
.calc-radio{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;padding:7px 12px;
  font-size:.78rem;cursor:pointer;
  transition:all .3s ease;
}
.calc-radio:has(input:checked){
  background:rgba(124,58,237,.15);
  border-color:rgba(124,58,237,.4);
  color:var(--violet-lt);
}
.calc-radio input{accent-color:var(--violet)}
.calc-disclaimer{
  display:flex;align-items:flex-start;gap:8px;
  background:rgba(0,229,255,.06);
  border:1px solid rgba(0,229,255,.15);
  border-radius:10px;padding:10px 12px;
  font-size:.72rem;color:rgba(0,229,255,.7);
  line-height:1.6;margin-top:20px;
}

.calc-result-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;border-radius:12px;margin-bottom:10px;
  background:rgba(255,255,255,.04);
}
.calc-result-row.current{}
.calc-result-row.lost{background:rgba(255,59,48,.06)}
.calc-result-row.gain{background:rgba(6,214,160,.06)}
.calc-result-row.highlight{background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25)}
.calc-result-row.highlight2{background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2)}
.crr-label{font-size:.78rem;color:#c0bada;line-height:1.4}
.crr-label small{display:block;font-size:.68rem;opacity:.7}
.crr-value{
  font-family:var(--fh);font-size:1.3rem;font-weight:700;
  text-align:right;
}
.crr-value.loss{color:#ff6b6b}
.crr-value.gain{color:#06d6a0}
.highlight-val{
  background:var(--gv);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:1.5rem;
}
.highlight2-val{
  background:var(--gc);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  font-size:1.5rem;
}
.calc-result-divider{
  text-align:center;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--cyan);margin:8px 0;
  padding:6px;border:1px dashed rgba(0,229,255,.2);
  border-radius:6px;
  background:rgba(0,229,255,.04);
}

@media(max-width:900px){
  .calc-wrapper{grid-template-columns:1fr}
  .calc-inputs{border-right:none;border-bottom:1px solid rgba(124,58,237,.12)}
}