:root{
  --bg: #F7FAFF;
  --bg2:#FFFFFF;
  --text:#0F172A;
  --muted:#475569;
  --muted2:#64748B;
  --border: rgba(15, 23, 42, .10);
  --shadow: 0 18px 45px rgba(15, 23, 42, .12);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, .10);
  --radius: 18px;
  --max: 1120px;

  --brand:#2563EB;
  --brand2:#06B6D4;
  --brand3:#F59E0B;
  --good:#16A34A;

  --h1: clamp(28px, 4.2vw, 52px);
  --h2: clamp(22px, 3.2vw, 34px);
  --p: 16px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:"Noto Sans TC", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(37, 99, 235, .15), transparent 60%),
    radial-gradient(900px 520px at 80% 25%, rgba(6, 182, 212, .14), transparent 60%),
    radial-gradient(900px 520px at 55% 90%, rgba(245, 158, 11, .12), transparent 60%),
    linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 45%, #F7FAFF 100%);
}
a{ color: inherit; text-decoration:none; }
.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* Animations */
@keyframes floaty { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes softGlow { 0%,100% { filter: blur(0px); opacity: .75; } 50% { filter: blur(1px); opacity: 1; } }

.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.show{ opacity: 1; transform: translateY(0); }
.reveal.delay-1{ transition-delay: .08s; }
.reveal.delay-2{ transition-delay: .16s; }
.reveal.delay-3{ transition-delay: .24s; }
.reveal.delay-4{ transition-delay: .32s; }

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 190px;
}
/*.logo{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 45%),
    linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,1));
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
  border: 1px solid rgba(37,99,235,.20);
  animation: floaty 4.8s ease-in-out infinite;
}*/

.logo-container { line-height: 0; }
.logo { max-width: 120px; }
#sub-title { line-height: 12px; font-size: 12px; }

.brand strong{ font-weight: 900; letter-spacing:.2px; }
.brand span{ color: var(--muted2); font-weight: 600; font-size: 13px; }

.navlinks{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.navlinks a{
  font-size: 14px;
  color: #0F172A;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.navlinks a:hover{
  background: rgba(37, 99, 235, .08);
  border-color: rgba(37, 99, 235, .16);
  transform: translateY(-1px);
}

.nav-cta{ display:flex; gap: 10px; align-items:center; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(15,23,42,.12);
  /*background: rgba(255,255,255,.85);*/
  box-shadow: var(--shadow-soft);
  transition: .18s ease;
  cursor:pointer;
  white-space: nowrap;
  color: #FFF;
  background: rgb(240 81 75);
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.primary{
  border-color: rgba(37,99,235,.25);
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.92));
  color: #fff;
}
.btn.small{ padding: 9px 12px; border-radius: 13px; }

.hamburger{
  display:none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 10px 12px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.hamburger svg{ width: 20px; height: 20px; opacity:.9; }

.mobile-panel{ display:none; padding: 0 0 14px 0; }
.mobile-panel.show{ display:block; }
.mobile-links{ display:grid; gap: 8px; padding-bottom: 12px; }
.mobile-links a{
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  padding: 12px 12px;
  border-radius: 14px;
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.mobile-cta{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Sections */
section{ padding: 76px 0; }
.section-head{ margin-bottom: 22px; }
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.75);
  letter-spacing: .3px;
  padding: 8px 12px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
}
.dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(37,99,235,1), rgba(6,182,212,1));
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
  animation: softGlow 3.2s ease-in-out infinite;
}
h1{ font-size: var(--h1); line-height: 1.1; margin: 14px 0 10px 0; font-weight: 900; letter-spacing: .2px; }
h2{ font-size: var(--h2); line-height: 1.2; margin: 12px 0 10px 0; font-weight: 900; }
p{ margin: 0 0 14px 0; color: var(--muted); font-size: var(--p); }

.panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.grid{ display:grid; gap: 16px; }

/* ---------- HERO SLIDER ---------- */
.hero{
  padding: 60px 0 76px 0;
  position: relative;
  overflow: hidden;
}
/*.hero::before{
  content:"";
  position:absolute;
  inset: -180px -160px auto auto;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(37,99,235,.22), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(6,182,212,.18), transparent 55%),
              radial-gradient(circle at 45% 70%, rgba(245,158,11,.16), transparent 55%);
  pointer-events:none;
  opacity: .9;
  anima*/tion: floaty 7s ease-in-out infinite;
}
.hero-slider{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow);
}
.slides{
  position: relative;
  height: clamp(420px, 52vh, 560px);
}
.slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items:center;
  padding: clamp(18px, 3.2vw, 34px);
  opacity: 0;
  transform: translateY(10px) scale(.995);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.slide.active{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.slide-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .9;
}
/* each slide gets its own soft gradient */
.bg-1{ background:
  radial-gradient(900px 420px at 20% 20%, rgba(37,99,235,.18), transparent 60%),
  radial-gradient(900px 420px at 80% 35%, rgba(6,182,212,.16), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,250,255,.92));
}
.bg-2{ background:
  radial-gradient(900px 420px at 25% 25%, rgba(22,163,74,.14), transparent 60%),
  radial-gradient(900px 420px at 80% 35%, rgba(37,99,235,.14), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,250,255,.92));
}
.bg-3{ background:
  radial-gradient(900px 420px at 30% 20%, rgba(245,158,11,.16), transparent 60%),
  radial-gradient(900px 420px at 80% 35%, rgba(6,182,212,.14), transparent 60%),
  linear-gradient(135deg, rgba(255,255,255,.92), rgba(247,250,255,.92));
}

.slide-left{ position: relative; z-index: 1; }
.slide-sub{
  font-weight: 900;
  color: rgba(15,23,42,.70);
  letter-spacing:.2px;
  margin-top: 8px;
}
.slide-desc{
  margin-top: 10px;
  color: rgba(71,85,105,.95);
  font-size: 16px;
  line-height: 1.7;
}
.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

.slide-right{ position: relative; z-index: 1; }
.visual-card{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}
.visual-img{
  aspect-ratio: 4 / 3;
  width: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(135deg, rgba(37,99,235,.06), rgba(6,182,212,.06)),
    repeating-linear-gradient(90deg, rgba(15,23,42,.06) 0, rgba(15,23,42,.06) 1px, transparent 1px, transparent 18px);
  display:grid;
  place-items:center;
  position: relative;
}
.visual-img .placeholder{
  text-align:center;
  padding: 22px;
  max-width: 360px;
  color: rgba(15,23,42,.70);
}
.badge-row{
  display:flex;
  gap: 10px;
  padding: 14px;
  flex-wrap: wrap;
  background: rgba(37,99,235,.03);
  border-top: 1px solid rgba(15,23,42,.08);
}
.mini-badge{
  font-size: 12px;
  color: rgba(15,23,42,.74);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.9);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  box-shadow: var(--shadow-soft);
}
.mini-badge .dot{ animation: none; }

/* Slider controls */
.slider-controls{
  position:absolute;
  left: 0; right:0; bottom: 0;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.75) 35%, rgba(255,255,255,.92) 100%);
  border-top: 1px solid rgba(15,23,42,.08);
}
.dots{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}
.dotbtn{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.20);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  transition: .18s ease;
}
.dotbtn.active{
  width: 26px;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.92));
  border-color: rgba(37,99,235,.15);
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
}
.arrows{ display:flex; gap: 10px; align-items:center; }
.iconbtn{
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  transition: .18s ease;
  display:grid;
  place-items:center;
}
.iconbtn:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.iconbtn svg{ width: 20px; height: 20px; }

/* ---------- Original hero content BELOW slider ---------- */
.hero-below{
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
}
.hero-bullets{
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.hero-bullets li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(15,23,42,.86);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.10);
  padding: 12px 12px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  transition: .18s ease;
}
.hero-bullets li:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.check{
  width: 20px; height: 20px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(22,163,74,.95), rgba(6,182,212,.55));
  border: 1px solid rgba(22,163,74,.20);
  display:grid;
  place-items:center;
  margin-top: 1px;
  box-shadow: 0 12px 24px rgba(22,163,74,.14);
}
.check svg{ width: 14px; height: 14px; color: #fff; }
.hero-note{ margin-top: 12px; font-size: 13px; color: var(--muted2); }

/* Cards */
.card{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-soft);
  transition: .18s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.card-head{ display:flex; align-items:flex-start; gap: 12px; margin-bottom: 10px; }
.icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(37,99,235,.16);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 45%),
    linear-gradient(135deg, rgba(37,99,235,.20), rgba(6,182,212,.12));
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  box-shadow: 0 14px 30px rgba(37,99,235,.10);
}
.icon svg{ width: 22px; height: 22px; opacity:.92; }
.card h3{ margin: 0; font-size: 16px; line-height: 1.35; font-weight: 900; letter-spacing:.2px; }
.card p{ margin: 6px 0 0 0; font-size: 14px; color: rgba(71,85,105,.95); }

.two-line{ display:grid; gap: 6px; margin-top: 10px; color: rgba(71,85,105,.95); font-size: 14px; }
.two-line div{ padding-left: 12px; border-left: 2px solid rgba(37,99,235,.16); }

.pain-grid{ grid-template-columns: repeat(3, 1fr); }
.pain-grid .card{ min-height: 135px; }

.feature-grid{ grid-template-columns: repeat(4, 1fr); }
.feature-grid .card{ min-height: 210px; }

.hint{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(37,99,235,.05);
  border: 1px solid rgba(37,99,235,.14);
  color: rgba(15,23,42,.78);
  font-size: 14px;
  box-shadow: var(--shadow-soft);
}

.service-grid{ grid-template-columns: repeat(2, 1fr); }
.service-card ul{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: rgba(71,85,105,.95);
  font-size: 14px;
}
.service-card li{ margin: 6px 0; }

.case{ padding: 18px; }
.case-top{ display:flex; gap: 12px; align-items:flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.70);
  box-shadow: var(--shadow-soft);
}
.cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.box{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-soft);
}
.box h4{ margin: 0 0 8px 0; font-size: 14px; font-weight: 900; color: rgba(15,23,42,.86); }
.box ul{ margin: 0; padding-left: 18px; color: rgba(71,85,105,.95); font-size: 14px; }
.impact{ margin-top: 14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-soft);
}
.metric .label{ color: rgba(100,116,139,.95); font-size: 12px; font-weight: 900; }
.metric .value{ font-weight: 900; font-size: 14px; margin-top: 6px; }

.why-grid{ grid-template-columns: repeat(4, 1fr); }
.why-grid .card{ min-height: 186px; }

.faq{ display:grid; gap: 12px; }
details{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
summary{
  cursor:pointer;
  list-style:none;
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  color: rgba(15,23,42,.92);
  font-weight: 900;
  font-size: 15px;
}
summary::-webkit-details-marker{ display:none; }
.chev{
  width: 22px; height: 22px;
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(37,99,235,.06);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  margin-top: 2px;
  transition: transform .18s ease;
}
details[open] .chev{ transform: rotate(180deg); }
.faq-body{ padding: 0 16px 14px 16px; color: rgba(71,85,105,.95); font-size: 14px; }

.cta-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cta-panel{ padding: 18px; }

form{ display:grid; gap: 12px; }
.field{ display:grid; gap: 6px; }
label{ font-size: 13px; color: rgba(15,23,42,.80); font-weight: 900; }
input, select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: rgba(15,23,42,.92);
  outline: none;
  transition: .18s ease;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
input:focus, select:focus{
  border-color: rgba(6,182,212,.55);
  box-shadow: 0 0 0 4px rgba(6,182,212,.12);
  transform: translateY(-1px);
}
.hint-small{ font-size: 12px; color: rgba(100,116,139,.95); margin-top: 2px; }
.form-actions{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; margin-top: 6px; }

footer{
  padding: 34px 0 44px 0;
  color: rgba(100,116,139,.95);
  font-size: 13px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.foot{ display:flex; justify-content:space-between; gap: 14px; flex-wrap: wrap; align-items:center; }
.foot a{ color: rgba(71,85,105,.95); font-weight: 900; }
.foot a:hover{ color: rgba(37,99,235,.95); }

/* Responsive */
@media (max-width: 980px){
  .pain-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: repeat(2, 1fr); }
  .cta-wrap{ grid-template-columns: 1fr; }

  .slide{ grid-template-columns: 1fr; }
  .slides{ height: auto; }
  /*.slide-right{ display:none; } /* keep slider clean on tablet; remove if you want */*/
  .hero-slider{ overflow: visible; }
  .slide{ position: relative; opacity:1; transform:none; pointer-events:auto; }
  .slide:not(.active){ display:none; }
  .slider-controls{ position: relative; border-radius: 0 0 26px 26px; }
}
@media (max-width: 680px){
  section{ padding: 58px 0; }
  .navlinks, .nav-cta{ display:none; }
  .hamburger{ display:inline-flex; }
  .pain-grid{ grid-template-columns: 1fr; }
  /*.feature-grid{ grid-template-columns: 1fr; }*/
  .impact{ grid-template-columns: 1fr; }
  .cols{ grid-template-columns: 1fr; }
}


.banner-img {
  padding: 10px;
  width: 100%;
}

.flex-col {
  flex-direction: column;
}

.feature-icon {
  max-width: 80px;
  margin: 0 auto;
}

.bg-icon {
  border-radius: 33%;
  padding: 10px;
  border-color: rgba(245,158,11,.20); background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(6,182,212,.10));
}

.items-center {
  align-items: center;
}

.bg-gray {
  background: #f6f6f6;
}

.float-icon {
  display: block;
  position: fixed;
  bottom: 25px;
  right: 25px;
  max-width: 50px;
  background: #FFF;
  padding: 10px;
  border-radius: 100%;
  border: 2px solid #20d567;
}


.float-icon a {
  display: block;
  line-height: 0;
}

.float-icon img {
  width: 100%;
}


.section-image {
    max-width: 330px;
    margin: 0 auto;
}

.img-fluid {
  width: 100%;
}

.video-container {
  position: relative;
  margin: 20px auto;
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 */
  height: 0;
}

.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}


/* 額外美化：只針對 popup 內部，唔影響你網站其他地方 */
.school-gift-popup .swal2-popup {
  border-radius: 20px !important;
  padding: 26px 26px 20px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
  background: radial-gradient(1200px 300px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
              radial-gradient(900px 240px at 90% 10%, rgba(16,185,129,.10), transparent 60%),
              #fff !important;
}
.school-gift-popup .swal2-title {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;
  color: #29486d !important;
}
.school-gift-popup .swal2-html-container {
  text-align: left !important;
  margin: 12px 0 0 !important;
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.school-gift-popup .popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #0f172a;
  background: rgba(2,132,199,.10);
  border: 1px solid rgba(2,132,199,.18);
  margin-bottom: 10px;
}
.school-gift-popup .popup-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.18);
  color: #065f46;
  font-size: 14px;
}
.school-gift-popup .swal2-actions {
  margin-top: 18px !important;
  gap: 10px !important;
}
.school-gift-popup .swal2-confirm {
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  box-shadow: 0 10px 26px rgba(37,99,235,.25) !important;
}
.school-gift-popup .swal2-cancel {
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.school-gift-popup .swal2-icon.swal2-info {
  border-color: rgba(37,99,235,.35) !important;
  color: #2563eb !important;
}

/* SweetAlert2 自訂 icon 容器 */
.swal-custom-icon-wrap.swal2-icon {
  border: none !important;
  background: transparent !important;
  width: 78px !important;
  height: 78px !important;
  margin: 6px auto 4px !important;
}

/* 真正圖片樣式 */
.swal-custom-icon {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  border: 1px solid rgba(15,23,42,.08);
}