.referral-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(92,184,92,.16), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(245,124,0,.10), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f6faf7 100%);
}

.referral-section:before{
  content:"";
  position:absolute;
  inset:auto -120px 70px auto;
  width:380px;
  height:380px;
  border-radius:50%;
  background:rgba(92,184,92,.10);
  filter:blur(4px);
  pointer-events:none;
}

.referral-hero-card{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  padding:42px;
  border:1px solid rgba(92,184,92,.22);
  border-radius:34px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.78)),
    linear-gradient(135deg,rgba(92,184,92,.12),rgba(245,124,0,.08));
  box-shadow:0 28px 80px rgba(31,35,41,.12);
  overflow:hidden;
}

.referral-title{
  margin-bottom:20px;
}

.referral-title h2{
  max-width:720px;
}

.referral-lead{
  max-width:680px;
  margin:0 0 28px;
  font-size:clamp(20px,2.4vw,24px);
  line-height:1.22;
  font-weight:650;
  letter-spacing:-.035em;
  color:var(--graphite,#2F3136);
}

.referral-lead strong,
.referral-lead span{
  color:var(--orange,#F57C00);
}

.referral-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.referral-visual{
  position:relative;
  min-height:280px;
}

.referral-aircon{
  position:absolute;
  top:16px;
  right:0;
  width:min(100%,520px);
  min-height:168px;
  border-radius:30px 30px 38px 38px;
  background:
    linear-gradient(180deg,#fff 0%,#f2f3f1 62%,#dfe2df 100%);
  box-shadow:
    inset 0 -16px 28px rgba(31,35,41,.08),
    0 28px 64px rgba(31,35,41,.18);
  border:1px solid rgba(31,35,41,.10);
}

.aircon-logo{
  position:absolute;
  left:34px;
  top:70px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--graphite,#2F3136);
  opacity:.82;
}

.aircon-temp{
  position:absolute;
  right:52px;
  top:38px;
  color:#fff;
  text-shadow:0 1px 10px rgba(31,35,41,.28);
  font-size:28px;
  font-weight:300;
}

.aircon-line{
  position:absolute;
  left:26px;
  right:26px;
  bottom:54px;
  height:3px;
  background:rgba(31,35,41,.16);
  border-radius:999px;
}

.aircon-vent{
  position:absolute;
  left:52px;
  right:52px;
  bottom:24px;
  height:30px;
  border-radius:4px 4px 18px 18px;
  background:linear-gradient(180deg,#1f2329,#10151a);
  overflow:hidden;
}

.aircon-vent:after{
  content:"";
  position:absolute;
  inset:11px 0 auto 0;
  height:7px;
  background:linear-gradient(90deg,transparent,rgba(80,188,255,.95),transparent);
  box-shadow:0 0 22px rgba(80,188,255,.8);
}

.aircon-wind{
  position:absolute;
  bottom:-38px;
  width:110px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(80,188,255,.28),rgba(80,188,255,0));
  filter:blur(2px);
}

.wind-1{left:110px;transform:rotate(8deg);}
.wind-2{left:230px;transform:rotate(-3deg);}
.wind-3{right:75px;transform:rotate(-10deg);}

.referral-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:28px 0;
}

.referral-step{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px;
  border:1px solid var(--line,#e7ece8);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 36px rgba(31,35,41,.07);
}

.referral-step-icon{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--graphite,#2F3136);
  background:linear-gradient(180deg,#fff,#f2f4f2);
  box-shadow:inset 0 0 0 1px rgba(31,35,41,.08);
}

.referral-step-icon svg{
  width:30px;
  height:30px;
}

.referral-step strong{
  font-size:16px;
  line-height:1.25;
}

.referral-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:26px;
  align-items:stretch;
}

.referral-table-card,
.referral-bonus-card{
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(31,35,41,.13);
}

.referral-table-card{
  background:#fff;
  border:1px solid var(--line,#e7ece8);
}

.referral-card-heading{
  padding:30px 30px 18px;
  text-align:center;
}

.referral-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(92,184,92,.12);
  color:var(--green-dark,#248C3B);
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.04em;
}

.referral-card-heading h3{
  margin:14px 0 0;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  letter-spacing:-.04em;
}

.referral-table-wrap{
  overflow-x:auto;
}

.referral-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:650px;
}

.referral-table th{
  background:linear-gradient(180deg,var(--graphite,#2F3136),var(--graphite-2,#1f2329));
  color:#fff;
  padding:18px 18px;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:14px;
}

.referral-table th:last-child{
  background:linear-gradient(135deg,var(--green,#5CB85C),var(--green-dark,#248C3B));
}

.referral-table td{
  padding:19px 18px;
  border-bottom:1px solid #edf0ed;
  font-size:22px;
  font-weight:800;
  color:#171b22;
  text-align:center;
}

.referral-table td:first-child{
  text-align:left;
}

.referral-table td:last-child{
  color:var(--orange,#F57C00);
  font-size:30px;
  font-weight:950;
  letter-spacing:-.03em;
}

.referral-table tr:nth-child(even) td{
  background:#fafcfa;
}

.check{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-right:12px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--green,#5CB85C),var(--green-dark,#248C3B));
  box-shadow:0 5px 14px rgba(92,184,92,.28);
  font-size:18px;
  vertical-align:middle;
}

.referral-bonus-card{
  position:relative;
  padding:34px;
  background:
    radial-gradient(circle at 85% 15%,rgba(92,184,92,.18),transparent 30%),
    linear-gradient(145deg,var(--graphite,#2F3136),var(--graphite-2,#1f2329));
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

.bonus-icon{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:var(--orange,#F57C00);
  font-size:36px;
  margin-bottom:16px;
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.bonus-label{
  display:inline-flex;
  padding:9px 16px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--green,#5CB85C),var(--green-dark,#248C3B));
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.referral-bonus-card h3{
  margin:20px 0 26px;
  font-size:clamp(26px,2.7vw,38px);
  line-height:1.12;
  letter-spacing:-.04em;
}

.bonus-list{
  display:grid;
  gap:12px;
}

.bonus-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 0 13px 42px;
  border-bottom:1px solid rgba(255,255,255,.13);
  position:relative;
  font-weight:800;
}

.bonus-row:before{
  content:"✓";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--green,#5CB85C);
  border:2px solid currentColor;
  font-weight:900;
}

.bonus-row strong{
  flex:0 0 auto;
  min-width:116px;
  padding:8px 12px;
  border-radius:999px;
  text-align:center;
  background:var(--orange,#F57C00);
  color:#fff;
  font-size:25px;
  line-height:1;
  box-shadow:0 8px 20px rgba(245,124,0,.25);
}

.bonus-limit{
  margin:28px 0 0;
  text-align:center;
  font-size:24px;
  font-weight:900;
  line-height:1.25;
}

.bonus-limit span{
  color:#7ed87e;
}

.referral-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin:28px 0;
  border:1px solid var(--line,#e7ece8);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 48px rgba(31,35,41,.09);
  overflow:hidden;
}

.referral-benefits div{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 26px;
  border-right:1px solid var(--line,#e7ece8);
}

.referral-benefits div:last-child{
  border-right:0;
}

.referral-benefits span{
  flex:0 0 auto;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green,#5CB85C),var(--green-dark,#248C3B));
  box-shadow:0 12px 22px rgba(92,184,92,.26);
  color:#fff;
  font-size:28px;
}

.referral-benefits strong{
  font-size:18px;
  line-height:1.22;
}

.referral-final-cta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:28px;
  border-radius:30px;
  background:#fff;
  border:1px solid var(--line,#e7ece8);
  box-shadow:0 20px 56px rgba(31,35,41,.10);
}

.referral-phone-icon{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green,#5CB85C),var(--green-dark,#248C3B));
  color:#fff;
  font-size:40px;
  box-shadow:0 16px 34px rgba(92,184,92,.26);
}

.referral-final-cta h3{
  margin:0;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-.04em;
}

.referral-final-cta h3 span{
  color:var(--orange,#F57C00);
}

.referral-final-cta p{
  margin:10px 0 0;
  font-size:18px;
  color:var(--muted,#69717c);
}

.referral-note{
  max-width:980px;
  margin:20px auto 0;
  text-align:center;
  color:var(--muted,#69717c);
  font-size:14px;
}

@media (max-width: 1060px){
  .referral-hero-card,
  .referral-grid{
    grid-template-columns:1fr;
  }

  .referral-visual{
    min-height:235px;
  }

  .referral-aircon{
    left:0;
    right:auto;
  }

  .referral-steps,
  .referral-benefits{
    grid-template-columns:repeat(2,1fr);
  }

  .referral-benefits div:nth-child(2){
    border-right:0;
  }

  .referral-benefits div:nth-child(1),
  .referral-benefits div:nth-child(2){
    border-bottom:1px solid var(--line,#e7ece8);
  }
}

@media (max-width: 680px){
  .referral-hero-card{
    padding:24px;
    border-radius:26px;
  }

  .referral-visual{
    display:none;
  }

  .referral-steps,
  .referral-benefits{
    grid-template-columns:1fr;
  }

  .referral-benefits div{
    border-right:0;
    border-bottom:1px solid var(--line,#e7ece8);
  }

  .referral-benefits div:last-child{
    border-bottom:0;
  }

  .referral-table-card,
  .referral-bonus-card,
  .referral-final-cta{
    border-radius:24px;
  }

  .referral-card-heading,
  .referral-bonus-card{
    padding:24px;
  }

  .referral-table td{
    font-size:18px;
  }

  .referral-table td:last-child{
    font-size:24px;
  }

  .bonus-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .bonus-row strong{
    min-width:0;
  }

  .referral-final-cta{
    grid-template-columns:1fr;
    text-align:center;
  }

  .referral-phone-icon{
    margin-inline:auto;
  }
}