/* ============================================================
   Spark K–2 page — Lightbox
   ============================================================ */
:root {
  --spark-lime: #8CC63F;
  --spark-lime-dark: #a1cb48;
  --spark-orange: #F7941E;
  --spark-blue: #29ABE2;
  --spark-blue-dark: #4174b9;
  --spark-brand-blue: #1C75BC;
  --spark-reason-blue: #2470c3;
  --spark-teal: #00a88e;
  --spark-teal-banner: #00a6b3;
  --spark-yellow: #FFC20E;
  --spark-yellow-tab: #f2e635;
  --spark-red: #ED1C24;
  --spark-red-orange: #f15a24;
  --spark-watermelon: #e52e5f;
  --spark-purple: #7d2a90;
  --spark-green: #39B54A;
  --navy: #141b33;
  --slate: #5a6272;
  --ink: #000;
  --paper: #fff;
  --table-blue: #e2f4fd;
  --table-blue-head: #6ccff6;
  --font-body: 'Source Sans Pro', sans-serif;
  --font-bold: 'MyriadProBoldCond', 'myriad_probold', 'Myriad Pro', 'Source Sans Pro', sans-serif;
  --font-strip-link: 'MyriadProCondLight', 'MyriadProCond', 'Source Sans Pro', sans-serif;
  --pad-x: clamp(16px, 4vw, 48px);
}
@font-face { font-family: 'MyriadProCond'; src: local('Myriad Pro Condensed'), local('MyriadPro-Cond'); }
@font-face { font-family: 'MyriadProBoldCond'; src: local('Myriad Pro Bold Condensed'), local('MyriadPro-BoldCond'); font-weight: 600 800; }
@font-face { font-family: 'MyriadProBlack'; src: local('Myriad Pro Black'), local('MyriadPro-Black'); font-weight: 900; }
@font-face { font-family: 'MyriadProCondLight'; src: local('Myriad Pro Light Condensed'), local('MyriadPro-LightCond'), local('Myriad Pro Light'); font-weight: 300; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ===== Base ===== */
section {
    padding: 0px 0;
    overflow: hidden;
}
body { margin: 0; }
.spark-page { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: #1f2d3d; overflow-x: clip; }
.spark-page *, .spark-page *::before, .spark-page *::after { box-sizing: border-box; }
.spark-page img { max-width: 100%; height: auto; display: block; }
.spark-page a { color: var(--spark-reason-blue); }
.spark-page a:hover { color: var(--spark-red-orange); }
.spark-page .wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: var(--pad-x); }
.spark-page .wrap.narrow { max-width: 960px; }

/* ===== Strips ===== */
.strip { position: relative; background: var(--ink); display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px 40px; padding: 16px var(--pad-x); font-family: var(--font-bold); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 2.75rem); line-height: 1.25; color: var(--spark-yellow); text-align: center; }
.strip a { color: var(--paper); font-style: italic; font-family: var(--font-strip-link); font-weight: 400; text-decoration: none; }
.strip a:hover { color: var(--spark-yellow); }
.strip .free { color: var(--spark-red); }
.f-strip { font-family: var(--font-strip-link); gap: 10px 60px; }

/* ===== Hero ===== */
.hero { background: url('../images/p1-img0.png') top center / 100% 100% no-repeat, var(--spark-lime); padding: clamp(32px, 4vw, 60px) 0 0; overflow: hidden;    margin-top: 170px; }
.hero-wrap { width: 100%; margin: 0 auto; padding: 0 var(--pad-x) clamp(32px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.hero-text { display: flex; flex-direction: column; text-align: left; padding-bottom: 60px; }
.hero h1 { font-family: var(--font-bold); font-weight: 800; font-size: clamp(3.4rem, 6.4vw, 12.7rem); color: var(--paper); text-shadow: 0 3px 10px rgba(0,0,0,.18); margin: clamp(14px, 3vw, 30px) 0 clamp(14px, 3vw, 26px); line-height: 1.02; letter-spacing: -.01em; }
.herobar { position: relative; z-index: 3; }
.herobar p { background: var(--spark-yellow); margin: 0; padding: 10px 15px; font-family: var(--font-bold); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 4.95rem); line-height: 1.22; color: var(--ink); border-radius: 8px; }
.sticker { position: absolute; right: 15px; bottom: clamp(-55px, -5vw, -40px); background: var(--spark-red); color: var(--paper); font-family: var(--font-bold); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 4.95rem); padding: 0 14px 4px; border-radius: 14px; transform: rotate(-7deg); box-shadow: 0 6px 16px rgba(0,0,0,.3); white-space: nowrap; }


/* stage: bubbles scale with the column (container units) */
.stage { position: relative; container-type: inline-size; margin: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.stage-tablet { width: 100%; max-width: 650px; margin: 0 0 0 auto; transform: rotate(-2deg); filter: drop-shadow(0 20px 36px rgba(0,0,0,.28)); }
.bub { position: absolute; border-radius: 50%; color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2%; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-family: var(--font-bold); border: 4px solid var(--paper); }
.t{transform: translate(0px, 0px) rotate(0deg);}
.bub .bt, .bub .bt2 { font-weight: 700; line-height: 1; }
.bub .n { font-weight: 800; }
.bub1 { left: 1%; top: -9%; width: 26.6cqw; height: 26.6cqw; background: var(--spark-blue-dark); z-index: 2; animation: floaty 6s ease-in-out infinite; }
.bub1 .t, .bub1 .t2 { font-size: 5.3cqw; }
.bub1 .n { font-size: 7.4cqw; line-height: .8; }
.bub2 { left: 18%; top: 16%; width: 19.4cqw; height: 19.4cqw; background: var(--spark-teal); z-index: 3; animation: floaty 7s ease-in-out .5s infinite; }
.bub2 .t { font-size: 3.2cqw; }
.bub2 .n { font-size: 5.2cqw; line-height: .8; }
.bub2 .t2 { font-size: 3.2cqw; line-height: .9; }
.bub3 { left: 4%; top: 33%; width: 20.4cqw; height: 20.4cqw; background: var(--spark-lime-dark); border-color: #ddd; z-index: 4; animation: floaty 6.5s ease-in-out 1s infinite; }
.bub3 .t { font-size: 3.9cqw; line-height: .8; }
.bub3 .n { font-size: 3.9cqw; line-height: 1.1; white-space: nowrap; }
.bub4 { left: 2%; top: 55%; width: 24.9cqw; height: 24.9cqw; background: var(--spark-watermelon); z-index: 4; animation: floaty 7.5s ease-in-out .8s infinite; }
.bub4 .n { font-size: 3.5cqw; line-height: 1.1; white-space: nowrap; }
.bub4 .t { font-family: var(--font-strip-link); font-weight: 400; font-size: 2.5cqw; line-height: 1.1; margin-top: 7%; }

.ribbon { position: relative; z-index: 3; background: var(--ink); color: var(--spark-yellow); text-align: center; padding: 16px var(--pad-x); font-family: var(--font-bold); font-weight: 700; font-size: clamp(1.3rem, 3vw, 3.2rem); line-height: 1.2; margin-top: clamp(8px, 1.5vw, 16px); }

/* ===== Features ===== */
.features { background: var(--paper); padding: clamp(48px, 7vw, 80px) 0; }
.features .wrap { display: flex; flex-direction: column; gap: 48px; }
.f-head { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.eyebrow { font-family: var(--font-bold); font-weight: 700; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: #3d4a5c; }
.f-head h2 { margin: 0; font-family: var(--font-bold); font-weight: 800; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.05; color: var(--navy); text-wrap: balance; }
.f-head p { margin: 0; font-size: 22px; line-height: 1.3; color: var(--slate); text-wrap: pretty; }
.f-head p strong { color: var(--navy); }
.cardgrid { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(230px, calc((100% - 60px) / 4))), 1fr)); gap: 20px; }
.fcard { background: var(--paper); border: 1px solid #eef0f3; border-radius: 18px; padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 8px 24px rgba(20,27,51,.07); transition: transform .2s, box-shadow .2s; }
.fcard:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,27,51,.12); }
.ficon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ficon-1 { background: linear-gradient(135deg, #29ABE2, #1C75BC); }
.ficon-2 { background: linear-gradient(135deg, #A6CE39, #6fae2e); }
.ficon-3 { background: linear-gradient(135deg, #FAA61A, #F26522); }
.ficon-4 { background: linear-gradient(135deg, #9b6ad6, #6a3fb5); }
.ficon-5 { background: linear-gradient(135deg, #35BCC6, #00a88e); }
.ficon-6 { background: linear-gradient(135deg, #f06bb5, #EC008C); }
.ficon-7 { background: linear-gradient(135deg, #f25a7c, #e52e5f); }
.ficon-8 { background: linear-gradient(135deg, #FFD84A, #FFC20E); }
.fcard h3 { margin: 0; font-family: var(--font-bold); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--navy); }
.fcard p { margin: 0; font-size: 18px; line-height: 1.3; color: var(--slate); text-wrap: pretty; }

/* ===== Top 10 Reasons ===== */
.reasons { background: url('../images/building-readers.png') top center / 100% 100% no-repeat, var(--spark-reason-blue); }
.banner { position: relative; background: var(--spark-teal-banner); padding: 12px 15px 16px; text-align: center; box-shadow: 0 7px 20px #333; }
.banner h2 { margin: 0; font-family: var(--font-bold); font-weight: 800; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; color: var(--paper); text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.reasons-wrap { max-width: 1360px; margin: 0 auto; padding: 48px 24px 56px; display: flex; flex-direction: column; gap: 28px; }
.reason { background: var(--paper); border-radius: 24px; overflow: hidden; display: flex; }
.reason-tab { flex: none; width: 64px; background: var(--spark-yellow-tab); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 0; color: var(--spark-reason-blue); font-family: var(--font-bold); font-weight: 700; }
.reason-tab .word { writing-mode: vertical-rl; text-orientation: upright; font-size: 15px; letter-spacing: .02em; }
.reason-tab .num { font-size: 40px; line-height: 1; }
.reason-body { flex: 1; min-width: 0; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; align-items: center; }
.reason-text { display: flex; flex-direction: column; gap: 14px; }
.reason--alt .reason-text { order: 2; }
.reason--alt .reason-media { order: 1; }
.rtitle { margin: 0; font-family: var(--font-bold); font-weight: 700; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; color: var(--spark-reason-blue); }
.reason-text p { margin: 0; font-size: 22px; color: #1f2d3d; text-wrap: pretty; }
.reason-text p strong { font-family: var(--font-bold); font-weight: 700; color: var(--spark-red-orange); }
.filter-list { display: flex; flex-direction: column; gap: 8px; }
.filter-list p { font-size: 16px; padding-left: 14px; border-left: 3px solid var(--spark-lime); }
.filter-list p strong { color: var(--spark-reason-blue); }
.reason-media { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.reason-media--row { flex-direction: row; }
.reason-media img { flex: 1 1 0; min-width: 0; width: 100%; border-radius: 14px; }

/* ===== Video + Brochure ===== */
.video-sec { background: var(--paper); padding: clamp(48px, 7vw, 80px) var(--pad-x); }
.video-wrap { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); align-items: center; }
.video-text { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; max-width: 720px; }
.video-text h2 { margin: 0; font-family: var(--font-bold); font-weight: 800; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.05; color: var(--navy); }
.video-text p { margin: 0; font-size: 22px; line-height: 1.3; color: var(--slate); }
.video-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; justify-content: center; }
.spark-page .btn-brochure, .spark-page .btn-yt { display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font-bold); font-weight: 700; font-size: 20px; border-radius: 999px; }
.spark-page .btn-brochure { gap: 8px; background: var(--spark-lime); color: var(--paper); padding: 12px 26px; }
.spark-page .btn-brochure:hover { background: #7ab32f; color: var(--paper); }
.spark-page .btn-yt { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 9px 24px; }
.spark-page .btn-yt:hover { background: var(--ink); color: var(--spark-yellow); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 14px 36px rgba(20,27,51,.18); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Advantage ===== */
.advantage { background: url('../images/p1-img0.png') top center / 100% 100% no-repeat, var(--spark-lime); padding: clamp(40px, 7vw, 72px) 0 0; color: var(--ink); }
.adv-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); align-items: center; justify-content: center; }
.starburst-box { flex: 0 1 320px; min-width: 260px; display: flex; justify-content: center; }
.starburst { background: #ffd503; border-radius: 50%; width: 325px; max-width: 100%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 15px; color: var(--spark-purple); font-family: 'Myriad Pro Black', 'MyriadProBlack', 'MyriadPro-Black', var(--font-bold); transform: rotate(-11deg); }
.starburst .s-line { font-weight: 800; font-size: 36px; line-height: 1; -webkit-text-stroke: 18px #ffd503; paint-order: stroke fill; }
.starburst .s-num { font-weight: 800; font-size: 76px; line-height: .95; margin-top: -9px; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; }
.starburst .s-price { color: var(--spark-red); font-weight: 800; font-size: 85px; line-height: .85; -webkit-text-stroke: 6px #fff; paint-order: stroke fill; text-shadow: 0 4px 3px rgba(0,0,0,.65); }
.starburst .s-price sup { font-size: 46px; }
.starburst .s-tail { margin-top: 2px; }
.hub { flex: 0 0 auto; position: relative; width: min(440px, 92vw); aspect-ratio: 1; }
.hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-ic { position: absolute; transform: translate(-50%, -50%); width: 18%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hub-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.hub-ic.h1 { left: 50%; top: 15%; }
.hub-ic.h2 { left: 75%; top: 25%; }
.hub-ic.h3 { left: 85%; top: 50%; }
.hub-ic.h4 { left: 75%; top: 75%; }
.hub-ic.h5 { left: 50%; top: 85%; }
.hub-ic.h6 { left: 25%; top: 75%; }
.hub-ic.h7 { left: 15%; top: 50%; }
.hub-ic.h8 { left: 25%; top: 25%; }
.hub-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28%; aspect-ratio: 1; object-fit: contain; border-radius: 20%; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.adv-h2 { font-family: var(--font-bold); font-weight: 800; font-size: clamp(2.6rem, 6vw, 6rem); line-height: 1.05; color: var(--spark-purple); text-align: center; margin: 15px 0 15px; }
.table { border: 2px solid var(--ink); overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,.15); }
.thead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--table-blue-head); font-family: var(--font-bold); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 2.7rem); }
.thead div { padding: 5px 8px; }
.thead div:first-child { border-right: 2px solid var(--ink); }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 2px solid var(--ink); }
.tcell { padding: 6px; display: flex; gap: 12px; align-items: center; background: var(--table-blue); }
.tcell:first-child { border-right: 2px solid var(--ink); }
.tcell svg { flex: 0 0 26px; }
.tcell span { font-size: clamp(1rem, 2.2vw, 2.56rem); line-height: 1.3; }

/* ===== CTA ===== */
.ctaband { padding: 45px var(--pad-x) 35px; text-align: center; }
.ctaband .q { font-family: var(--font-bold); font-weight: 800; font-size: clamp(2rem, 5vw, 4.8rem); color: var(--spark-purple); margin: 0 0 16px; line-height: 1.2; }
.ctaband .s { display: inline;font-family: var(--font-bold); font-weight: 700; font-size: clamp(1.6rem, 4.4vw, 4.8rem); color: var(--ink); line-height: 1.2; margin: 0; }
.contactbar { justify-content: center; padding: 20px var(--pad-x); font-size: clamp(1.4rem, 3.6vw, 3.2rem); }
.contactbar .btm-wt { color: var(--paper); }
.contactbar .contact-mail { color: var(--spark-yellow); font-style: normal; font-family: var(--font-bold); font-weight: 700; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-text { padding-bottom: 0; }
  .stage { container-type: normal; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 58px; }
  .bub { position: static; animation: none; flex: 0 0 auto; padding: 10px; }
  .bub1 { width: 230px; height: 230px; }
  .bub1 .t, .bub1 .t2 { font-size: 2.8rem; }
  .bub1 .n { font-size: 4.5rem; }
  .bub2 { width: 168px; height: 168px; }
  .bub2 .t, .bub2 .t2 { font-size: 1.8rem; }
  .bub2 .n { font-size: 3rem; }
  .bub3 { width: 176px; height: 176px; }
  .bub3 .t, .bub3 .n { font-size: 2.3rem; }
  .bub4 { width: 215px; height: 215px; }
  .bub4 .n { font-size: 1.9rem; }
  .bub4 .t { font-size: 1.55rem; margin-top: 6px; }
  .stage-tablet { order: 5; max-width: 100%; margin: 16px 0 0; transform: none; }
}
@media (max-width: 760px) {
  .reason--alt .reason-text { order: 0; }
  .reason--alt .reason-media { order: 0; }
  .reason-body { padding: 22px; }
  .reason-tab { width: 48px; }
  .reason-tab .num { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .bub { animation: none !important; }
  .fcard { transition: none; }
}