/* Public pages only: the study panel keeps its own colors and layout. */
body[data-design="vibrant"] {
  color-scheme: dark;
  --ink: #f6f8ff;
  --blue: #74e9ff;
  --muted: #b8c7dd;
  --page: #0b1220;
  --surface: #131f34;
  --pale: #101e34;
  --line: #293c59;
  --accent: #ffc95b;
  --deep: #143fa0;
  --cyan: #79ebff;
  --purple: #cba6ff;
  --pink: #ff9acf;
  --green: #71f5bc;
  --gold: #ffd471;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[data-design="vibrant"]::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 650px 560px at 85% 9%, #1462a82c, transparent 72%),
    radial-gradient(ellipse 420px 440px at 0% 39%, #6248b522, transparent 72%),
    radial-gradient(ellipse 620px 540px at 100% 74%, #14594d25, transparent 72%),
    linear-gradient(#64acde07 1px, transparent 1px),
    linear-gradient(90deg, #64acde07 1px, transparent 1px);
  background-size: auto, auto, auto, 66px 66px, 66px 66px;
}
body[data-design="vibrant"]::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .6;
  background-image:
    radial-gradient(circle at 8% 17%, #7ee9ff 0 1px, transparent 2px),
    radial-gradient(circle at 92% 27%, #eec4ff 0 1px, transparent 2px),
    radial-gradient(circle at 39% 88%, #ffd577 0 1px, transparent 2px),
    radial-gradient(circle at 70% 65%, #7becc7 0 1px, transparent 2px);
  background-size: 420px 460px, 610px 660px, 720px 830px, 530px 610px;
}
body[data-design="vibrant"] .wrap { width: min(1240px, calc(100% - 72px)); }
body[data-design="vibrant"] h1,
body[data-design="vibrant"] h2,
body[data-design="vibrant"] h3 { color: var(--ink); font-weight: 750; letter-spacing: -.047em; }
body[data-design="vibrant"] h1 { font-size: clamp(46px, 4.9vw, 72px); line-height: 1.08; }
body[data-design="vibrant"] h2 { font-size: clamp(34px, 3.1vw, 47px); line-height: 1.14; }
body[data-design="vibrant"] em { color: var(--cyan); text-shadow: 0 0 30px #26b7f733; }
body[data-design="vibrant"] a:focus-visible,
body[data-design="vibrant"] button:focus-visible,
body[data-design="vibrant"] summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
body[data-design="vibrant"] .site-top {
  position: relative;
  z-index: 5;
  background: #0b1220e8;
  border-bottom: 1px solid #3b648048;
  backdrop-filter: blur(14px);
}
body[data-design="vibrant"] .top-inner { min-height: 92px; gap: 30px; }
body[data-design="vibrant"] .brand { color: #f7fbff; font-size: 31px; letter-spacing: -1.6px; }
body[data-design="vibrant"] .brand small { color: #c0dbea; font-size: 8px; letter-spacing: 4.3px; margin-top: 7px; }
body[data-design="vibrant"] .brand-mark {
  width: 43px;
  height: 46px;
  color: #c2f9ff;
  background: linear-gradient(140deg, #156b97, #154c84);
  border: 1px solid #79eaff67;
  box-shadow: 0 0 22px #27d0ef23, inset 0 1px 1px #e3fdff35;
}
body[data-design="vibrant"] .top-nav { gap: 28px; font-size: 12px; }
body[data-design="vibrant"] .top-nav a { color: #c5d4e9; }
body[data-design="vibrant"] .top-nav a:hover,
body[data-design="vibrant"] .top-nav a[aria-current] { color: var(--cyan); }
body[data-design="vibrant"] .top-nav a[aria-current] { box-shadow: inset 0 -2px var(--cyan); }
body[data-design="vibrant"] .theme-button {
  color: #d5edff;
  background: #17253a;
  border-color: #375370;
  box-shadow: inset 0 1px 0 #ffffff0a;
}
body[data-design="vibrant"] .button {
  min-height: 51px;
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid #7acbff82;
  background: linear-gradient(125deg, #176dde, #344fe3);
  color: #fff;
  box-shadow: 0 8px 23px #1d64f22b, inset 0 1px 0 #e4f2ff38;
  font-size: 13px;
  font-weight: 700;
  gap: 20px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
body[data-design="vibrant"] .button:hover {
  color: #fff;
  background: linear-gradient(125deg, #1b71df, #415ded);
  border-color: #b4e4ff;
  box-shadow: 0 10px 30px #226dff42, inset 0 1px 0 #e4f2ff38;
  transform: translateY(-2px);
}
body[data-design="vibrant"] .button.secondary {
  color: #d3efff;
  background: #152139aa;
  border-color: #415a7c;
  box-shadow: inset 0 1px 0 #ffffff06;
}
body[data-design="vibrant"] .button.secondary:hover { color: #fff; background: #203453; border-color: #83caff; }
body[data-design="vibrant"] .button.small { min-height: 42px; padding: 11px 16px; font-size: 11px; border-radius: 9px; }
body[data-design="vibrant"] .eyebrow { color: var(--cyan); font-size: 10px; letter-spacing: 2.3px; }
body[data-design="vibrant"] .eyebrow::before { background: #ffbd62; box-shadow: 0 0 12px #ffb75088; }
body[data-design="vibrant"] .intro {
  position: relative;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 35px;
  padding: 52px 0 48px;
  min-height: 654px;
}
body[data-design="vibrant"] .hero-copy { position: relative; z-index: 2; }
body[data-design="vibrant"] .intro h1 { max-width: 630px; margin: 25px 0 24px; }
body[data-design="vibrant"] .intro p { color: var(--muted); max-width: 510px; font-size: 15px; line-height: 1.86; }
body[data-design="vibrant"] .hero-scope {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #251604;
  background: linear-gradient(125deg, #ffdb79, #ffad60);
  border: 1px solid #ffe8a6;
  border-radius: 7px;
  padding: 5px 10px;
  margin: 23px 0 -4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  transform: rotate(-2deg);
  box-shadow: 0 5px 19px #fba5401a;
}
body[data-design="vibrant"] .action-row { margin-top: 29px; gap: 11px; }
body[data-design="vibrant"] .mini-trust { color: #bacce0; font-size: 10px; gap: 18px; margin-top: 26px; }
body[data-design="vibrant"] .mini-trust span::before { color: #7bf5bd; font-weight: 750; }
body[data-design="vibrant"] .hero-collage {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 536px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
body[data-design="vibrant"] .hero-collage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 87%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #218cd44a 0, #4d2c8829 47%, transparent 70%);
  filter: blur(13px);
}
body[data-design="vibrant"] .hero-students {
  position: relative;
  z-index: 1;
  width: 112%;
  max-width: none;
  height: 548px;
  object-fit: contain;
  filter: drop-shadow(0 22px 22px #03091860);
}
body[data-design="vibrant"] .hero-orbit {
  position: absolute;
  inset: 13% 15% 13% 15%;
  border: 1px dashed #5aa5db43;
  border-radius: 50%;
  transform: rotate(-21deg);
  z-index: -1;
}
body[data-design="vibrant"] .hero-orbit::after {
  content: "✦";
  position: absolute;
  right: 15%;
  top: -16px;
  color: #ffda77;
  font-size: 32px;
  text-shadow: 0 0 18px #ffba6666;
}
body[data-design="vibrant"] .hero-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 13px 17px;
  border: 1px solid #9cedff83;
  border-radius: 17px;
  color: #f4fdff;
  background: linear-gradient(145deg, #194678ec, #12345beb);
  box-shadow: 0 10px 25px #03091645, inset 0 1px 0 #ffffff28;
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 700;
}
body[data-design="vibrant"] .hero-badge strong,
body[data-design="vibrant"] .hero-badge b { font-size: 30px; font-weight: 800; line-height: 1.2; color: #fff0a0; }
body[data-design="vibrant"] .hero-badge small { font-size: 9px; color: #d4ecff; letter-spacing: .5px; }
body[data-design="vibrant"] .hero-spark { position: absolute; pointer-events: none; color: #ffd978; font-size: 37px; text-shadow: 0 0 18px #f5c35140; }
body[data-design="vibrant"] .hero-spark-a { left: 3%; top: 38%; transform: rotate(-12deg); }
body[data-design="vibrant"] .hero-spark-b { right: 3%; bottom: 31%; color: #93f1ff; font-size: 31px; }
body[data-design="vibrant"] .badge-100 { top: 14%; right: 1%; transform: rotate(8deg); }
body[data-design="vibrant"] .badge-focus { left: 0; bottom: 10%; transform: rotate(-7deg); }
body[data-design="vibrant"] .sticker,
body[data-design="vibrant"] .hero-sticker,
body[data-design="vibrant"] .section-sticker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  width: max-content;
  max-width: 140px;
  padding: 8px 15px;
  color: #172d4a;
  background: #fff3b9;
  border: 2px solid #fff;
  border-radius: 8px 13px 9px 13px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.3px;
  box-shadow: 0 5px 0 #040b2040, 0 8px 20px #02081930;
  transform: rotate(-9deg);
  pointer-events: none;
}
body[data-design="vibrant"] .sticker-hadi,
body[data-design="vibrant"] .hero-sticker-a { left: 7%; top: 8%; }
body[data-design="vibrant"] .sticker-basla,
body[data-design="vibrant"] .hero-sticker-b { bottom: 10%; right: 1%; color: #142650; background: #bffcff; transform: rotate(10deg); }
body[data-design="vibrant"] .facts {
  position: relative;
  padding: 31px 28px;
  gap: 24px;
  grid-template-columns: 1.07fr repeat(3, 1fr);
  background: linear-gradient(110deg, #14243fbd, #13223bd9, #191e39bb);
  border: 1px solid #395b7a71;
  border-radius: 17px;
  box-shadow: 0 15px 40px #02071328, inset 0 1px 0 #bce4ff09;
}
body[data-design="vibrant"] .facts-intro { color: #d2e2f6; font-size: 13px; line-height: 1.6; max-width: 200px; }
body[data-design="vibrant"] .fact {
  display: grid;
  grid-template-columns: 53px 1fr;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid #4b638354;
}
body[data-design="vibrant"] .fact-icon { font-size: 39px; line-height: 1; filter: drop-shadow(0 6px 12px #199bff28); width: 53px; }
body[data-design="vibrant"] .fact-icon img,
body[data-design="vibrant"] .fact-icon svg { width: 53px; height: 58px; object-fit: contain; }
body[data-design="vibrant"] .fact strong { color: var(--gold); font-size: clamp(30px, 2.7vw, 41px); letter-spacing: -1.4px; font-weight: 800; line-height: 1.2; text-shadow: 0 0 20px #ffd16625; }
body[data-design="vibrant"] .fact:nth-child(3) strong { color: #8de6ff; text-shadow: 0 0 20px #59c7ff25; }
body[data-design="vibrant"] .fact span:not(.fact-icon) { font-size: 11px; color: #bfd0e8; }
body[data-design="vibrant"] .section { position: relative; padding: 85px 0; }
body[data-design="vibrant"] .section-header { margin-bottom: 36px; gap: 50px; }
body[data-design="vibrant"] .section-header p { color: var(--muted); font-size: 13px; max-width: 380px; }
body[data-design="vibrant"] .section-header .eyebrow { margin-bottom: 18px; }
body[data-design="vibrant"] .section-sticker-a { right: 8%; top: 47px; background: #fdd4ec; transform: rotate(9deg); }
body[data-design="vibrant"] .section-sticker-b { left: -18px; bottom: 26px; background: #c1ffdf; transform: rotate(-12deg); }
body[data-design="vibrant"] .courses-section > .section-sticker.sticker-hadi { left: auto; right: 4%; top: 23px; background: #ffd1e9; transform: rotate(9deg); }
body[data-design="vibrant"] .courses-section > .section-sticker.sticker-basla { left: -16px; right: auto; top: auto; bottom: 29px; background: #c3ffe0; transform: rotate(-10deg); }
body[data-design="vibrant"] .course-links { gap: 18px; }
body[data-design="vibrant"] .course-link {
  --card-glow: #65efb1;
  position: relative;
  overflow: hidden;
  border-radius: 19px;
  padding: 18px 23px 24px;
  border: 1px solid color-mix(in srgb, var(--card-glow) 49%, #223047);
  background: radial-gradient(ellipse 160px 160px at 50% 10%, color-mix(in srgb, var(--card-glow) 12%, transparent), transparent), linear-gradient(145deg, #18263e, #101b2d);
  box-shadow: 0 7px 28px #02091438, inset 0 1px 0 #ffffff0b;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
body[data-design="vibrant"] .course-link:nth-child(2),
body[data-design="vibrant"] .course-ags { --card-glow: #b998ff; }
body[data-design="vibrant"] .course-link:nth-child(3),
body[data-design="vibrant"] .course-oabt { --card-glow: #6cddff; }
body[data-design="vibrant"] .course-link:nth-child(4),
body[data-design="vibrant"] .course-coaching { --card-glow: #ff92c6; }
body[data-design="vibrant"] .course-link:hover {
  border-color: var(--card-glow);
  transform: translateY(-7px);
  box-shadow: 0 12px 34px #02091450, 0 0 25px color-mix(in srgb, var(--card-glow) 11%, transparent);
}
body[data-design="vibrant"] .course-link::after { content: ""; position: absolute; top: 0; left: 21%; right: 21%; height: 2px; background: var(--card-glow); box-shadow: 0 0 15px var(--card-glow); opacity: .8; }
body[data-design="vibrant"] .course-visual { display: grid; place-items: center; height: 166px; margin: 0 -10px 8px; }
body[data-design="vibrant"] .course-visual img { width: 100%; height: 174px; object-fit: contain; filter: drop-shadow(0 12px 15px #03091835); }
body[data-design="vibrant"] .course-num { color: var(--card-glow); font-size: 9px; letter-spacing: 1px; margin-bottom: 17px; font-weight: 700; }
body[data-design="vibrant"] .course-link h3 { font-size: 22px; line-height: 1.2; min-height: 53px; color: #f5f9ff; }
body[data-design="vibrant"] .course-link p { color: #bacbe0; font-size: 12px; line-height: 1.85; margin-top: 13px; }
body[data-design="vibrant"] .course-link .course-next { color: var(--card-glow); border-top-color: #354861; margin-top: 25px; padding-top: 16px; font-size: 10px; gap: 12px; }
body[data-design="vibrant"] .course-next span { font-size: 20px; }
body[data-design="vibrant"] .method {
  position: relative;
  padding: 52px;
  gap: 78px;
  border-color: #385576;
  border-radius: 22px;
  background: radial-gradient(ellipse at 10% 5%, #385a8930, transparent 60%), linear-gradient(135deg, #14243bdc, #101b2fe8);
  box-shadow: 0 20px 45px #02081830, inset 0 1px 0 #ffffff0a;
}
body[data-design="vibrant"] .method h2 { margin: 22px 0; }
body[data-design="vibrant"] .method p { color: var(--muted); font-size: 13px; line-height: 1.85; }
body[data-design="vibrant"] .method .action-row { margin-top: 22px; }
body[data-design="vibrant"] .steps { gap: 16px; align-self: center; }
body[data-design="vibrant"] .step {
  position: relative;
  grid-template-columns: 51px 1fr;
  align-items: center;
  gap: 17px;
  padding: 19px 20px;
  border: 1px solid #344b6a;
  border-radius: 15px;
  background: linear-gradient(125deg, #263a544f, #17233979);
  box-shadow: inset 0 1px 0 #edfaff08;
}
body[data-design="vibrant"] .step-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 49px;
  height: 52px;
  color: #82edff;
  background: linear-gradient(145deg, #22537a, #173752);
  border: 1px solid #73d4ff50;
  border-radius: 14px;
  box-shadow: 0 5px 14px #29c9ff12, inset 0 1px 0 #c7f1ff25;
}
body[data-design="vibrant"] .step-icon svg { width: 27px; height: 27px; }
body[data-design="vibrant"] .step:nth-child(2) .step-icon { color: #cfa8ff; background: linear-gradient(145deg, #48315f, #2b2549); border-color: #b899ff50; }
body[data-design="vibrant"] .step:nth-child(3) .step-icon { color: #89fbc7; background: linear-gradient(145deg, #205749, #163c3c); border-color: #76e8b750; }
body[data-design="vibrant"] .step-number { color: #8dbce2; font-size: 9px; padding-top: 0; }
body[data-design="vibrant"] .step-icon .step-number { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; display: grid; place-items: center; color: #e6f3ff; background: #203c5b; border: 1px solid #7795b67a; border-radius: 6px; font-size: 7px; font-weight: 750; }
body[data-design="vibrant"] .step h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 7px; }
body[data-design="vibrant"] .step p { font-size: 11px; line-height: 1.7; }
body[data-design="vibrant"] .method-doodle { position: absolute; pointer-events: none; }
body[data-design="vibrant"] .sticker-go,
body[data-design="vibrant"] .method-doodle-go { right: 13px; top: -18px; background: #ffc5df; transform: rotate(11deg); }
body[data-design="vibrant"] .method-doodle-target { bottom: 22px; right: -15px; font-size: 33px; transform: rotate(-12deg); filter: drop-shadow(0 6px 8px #02081950); }
body[data-design="vibrant"] .tinted {
  position: relative;
  border-top: 1px solid #2d415759;
  border-bottom: 1px solid #2d415759;
  background: radial-gradient(ellipse 540px 300px at 15% 0%, #49338122, transparent 85%), linear-gradient(120deg, #121b2bcc, #101829bd);
}
body[data-design="vibrant"] .price-heading-art { width: 164px; height: 146px; margin-left: auto; position: relative; align-self: center; }
body[data-design="vibrant"] .price-heading-art img { width: 100%; height: 100%; object-fit: contain; }
body[data-design="vibrant"] .pricing-grid { gap: 22px; }
body[data-design="vibrant"] .price-card {
  --price-color: #73cfed;
  position: relative;
  overflow: hidden;
  padding: 31px;
  border-color: #3b577a;
  border-radius: 20px;
  background: radial-gradient(ellipse 300px 160px at 95% 0%, #1778962e, transparent), linear-gradient(140deg, #17283e, #131c30);
  box-shadow: 0 15px 30px #030a1530;
}
body[data-design="vibrant"] .price-card:nth-child(2) { --price-color: #cba6ff; background: radial-gradient(ellipse 300px 160px at 95% 0%, #7950bc34, transparent), linear-gradient(140deg, #28243f, #171d35); }
body[data-design="vibrant"] .price-card:nth-child(3) { --price-color: #86f0bd; background: radial-gradient(ellipse 300px 160px at 95% 0%, #267e6b30, transparent), linear-gradient(140deg, #173032, #131e30); }
body[data-design="vibrant"] .price-card.featured { border-color: #a98cd4; box-shadow: 0 14px 34px #704ebc20, inset 0 3px #a88cf4; }
body[data-design="vibrant"] .price-tag { color: var(--price-color, var(--cyan)); font-size: 9px; letter-spacing: 1.8px; margin-bottom: 17px; padding-right: 48px; }
body[data-design="vibrant"] .price-card h3 { font-size: 25px; max-width: 245px; line-height: 1.22; min-height: 61px; }
body[data-design="vibrant"] .price-art { position: absolute; width: 102px; height: 102px; top: 14px; right: -7px; opacity: .85; transform: rotate(10deg); pointer-events: none; }
body[data-design="vibrant"] .price-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px #04091640); }
body[data-design="vibrant"] .price-status { margin: 30px 0 10px; color: #f2f4ff; font-size: 29px; max-width: 220px; line-height: 1.18; letter-spacing: -1px; }
body[data-design="vibrant"] .price-caption { color: #c0cee0; font-size: 11px; }
body[data-design="vibrant"] .price-card ul { margin: 25px 0 29px; color: #c5d5e7; font-size: 12px; }
body[data-design="vibrant"] .price-card li { gap: 10px; padding: 6px 0; }
body[data-design="vibrant"] .price-card li::before { color: #85f5be; font-weight: 850; text-shadow: 0 0 9px #5ed79840; }
body[data-design="vibrant"] .price-card .button { font-size: 11px; padding: 12px 17px; color: #edf7ff; border-color: #546786; }
body[data-design="vibrant"] .price-spark { position: absolute; color: #f7cf87; font-size: 22px; right: 23px; top: 105px; transform: rotate(15deg); opacity: .7; pointer-events: none; }
body[data-design="vibrant"] .pricing-note { color: var(--muted); border-top-color: #35475e; font-size: 12px; margin-top: 30px; padding-top: 25px; }
body[data-design="vibrant"] .text-link { color: var(--cyan); font-size: 12px; font-weight: 650; }
body[data-design="vibrant"] .social-section { gap: 95px; grid-template-columns: 1fr 1.12fr; align-items: center; }
body[data-design="vibrant"] .social-copy { position: relative; }
body[data-design="vibrant"] .social-section h2 { margin: 19px 0; }
body[data-design="vibrant"] .social-section p { font-size: 13px; color: var(--muted); max-width: 400px; }
body[data-design="vibrant"] .social-art { position: relative; width: 310px; height: 199px; margin: 16px 0 8px; isolation: isolate; }
body[data-design="vibrant"] .social-art::before { content: ""; position: absolute; z-index: -1; inset: 18% 7%; border-radius: 50%; background: radial-gradient(ellipse, #94328d29, transparent 70%); filter: blur(8px); }
body[data-design="vibrant"] .social-art > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 20px #be47b128); }
body[data-design="vibrant"] .sticker-takip,
body[data-design="vibrant"] .social-sticker-a { left: -11px; top: 23px; background: #ffd2e7; font-size: 12px; transform: rotate(-12deg); }
body[data-design="vibrant"] .sticker-wow,
body[data-design="vibrant"] .social-sticker-b { right: -25px; top: 52px; background: #c0f8ff; font-size: 13px; transform: rotate(10deg); }
body[data-design="vibrant"] .sticker-yildiz,
body[data-design="vibrant"] .social-sticker-c { bottom: -5px; right: 44px; font-size: 11px; background: #ffebad; transform: rotate(-6deg); }
body[data-design="vibrant"] .profiles { gap: 16px; }
body[data-design="vibrant"] .profile {
  position: relative;
  padding: 24px;
  border-color: #344761;
  border-radius: 16px;
  background: linear-gradient(120deg, #1a2841dc, #142034cc);
  box-shadow: inset 0 1px 0 #dbf2ff08;
  transition: border-color .18s, transform .18s, background .18s;
}
body[data-design="vibrant"] .profile:hover { transform: translateX(4px); border-color: #cd7aba; background: #1e2b43; }
body[data-design="vibrant"] .insta-icon { width: 48px; height: 48px; color: #fff; background: linear-gradient(145deg, #805add, #c74291 65%, #e18853); border: 1px solid #eeb4f05e; border-radius: 13px; box-shadow: 0 5px 13px #d039a024, inset 0 1px 0 #ffffff25; }
body[data-design="vibrant"] .insta-icon svg { width: 26px; height: 26px; }
body[data-design="vibrant"] .profile b { color: #f5f8ff; font-size: 17px; }
body[data-design="vibrant"] .profile small { color: #b9cee4; font-size: 11px; }
body[data-design="vibrant"] .profile .external { color: #8bdfff; font-size: 24px; }
body[data-design="vibrant"] .closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 195px;
  padding: 46px 49px;
  border: 1px solid #70b4ff6e;
  border-radius: 23px;
  background: radial-gradient(ellipse at 70% 10%, #588aff48, transparent 60%), linear-gradient(112deg, #19479f, #3535a8 80%, #422aac);
  box-shadow: 0 15px 44px #264fd529, inset 0 1px 0 #d7f2ff25;
  margin-bottom: 80px;
  gap: 30px;
}
body[data-design="vibrant"] .closing::before { content: "✦ · ✧"; position: absolute; color: #d4dbff; font-size: 39px; z-index: -1; right: 28%; top: 15px; letter-spacing: 19px; transform: rotate(-13deg); opacity: .4; }
body[data-design="vibrant"] .closing h2 { color: #fff; font-size: clamp(27px, 2.6vw, 37px); letter-spacing: -.035em; margin-bottom: 13px; max-width: 650px; }
body[data-design="vibrant"] .closing p { color: #d5e6ff; font-size: 12px; max-width: 510px; }
body[data-design="vibrant"] .closing > div { position: relative; z-index: 2; }
body[data-design="vibrant"] .cta-confetti { position: absolute; z-index: 0; pointer-events: none; right: 17px; top: 19px; color: #ffdd8a; font-size: 27px; letter-spacing: 15px; transform: rotate(12deg); opacity: .65; }
body[data-design="vibrant"] .cta-rocket { position: absolute; width: 175px; height: 175px; object-fit: contain; right: 210px; bottom: -34px; z-index: 0; filter: drop-shadow(0 8px 15px #10236350); transform: rotate(9deg); opacity: .93; pointer-events: none; }
body[data-design="vibrant"] .cta-rocket img { width: 100%; height: 100%; object-fit: contain; }
body[data-design="vibrant"] .closing .button { position: relative; z-index: 2; color: #173684; background: #f3f7ff; border-color: #fff; box-shadow: 0 8px 24px #12185830; padding: 15px 24px; }
body[data-design="vibrant"] .closing .button:hover { color: #152f77; background: #fff; }
body[data-design="vibrant"] .footer { background: #0b1422dc; border-top-color: #38587978; padding: 42px 0 28px; }
body[data-design="vibrant"] .footer .brand-mark { box-shadow: 0 0 20px #1ddcff20; }
body[data-design="vibrant"] .footer-links { color: #b5cee7; gap: 26px; font-size: 12px; }
body[data-design="vibrant"] .footer-links a:hover { color: var(--cyan); }
body[data-design="vibrant"] .footer p { color: #acc1db; font-size: 11px; }
body[data-design="vibrant"] .footer-small { color: #94abc7; border-top-color: #29425b; font-size: 10px; margin-top: 32px; }
body[data-design="vibrant"] .page-intro { border-color: var(--line); padding: 70px 0 50px; }
body[data-design="vibrant"] .page-intro p,
body[data-design="vibrant"] .story p,
body[data-design="vibrant"] .faq p,
body[data-design="vibrant"] .coach-note p,
body[data-design="vibrant"] .social-page p { color: var(--muted); }
body[data-design="vibrant"] .breadcrumb { color: var(--muted); }
body[data-design="vibrant"] .breadcrumb a,
body[data-design="vibrant"] .about-point small { color: var(--cyan); }
body[data-design="vibrant"] .about-point,
body[data-design="vibrant"] .faq details { border-color: var(--line); }
body[data-design="vibrant"] .coach-note { background: var(--surface); border-color: var(--line); }

/* The light toggle keeps the illustrations and accents, with a clear daylight palette. */
html[data-theme="light"] body[data-design="vibrant"] {
  color-scheme: light;
  --ink: #122b4f;
  --blue: #0a5f88;
  --cyan: #0b658b;
  --muted: #49627e;
  --page: #f2f6ff;
  --surface: #fff;
  --pale: #e6eefc;
  --line: #c1d0e6;
  --gold: #815500;
}
html[data-theme="light"] body[data-design="vibrant"]::before { opacity: .7; }
html[data-theme="light"] body[data-design="vibrant"]::after { opacity: .25; }
html[data-theme="light"] body[data-design="vibrant"] .top-nav a:hover,
html[data-theme="light"] body[data-design="vibrant"] .top-nav a[aria-current],
html[data-theme="light"] body[data-design="vibrant"] .footer-links a:hover { color: #79ebff; }
html[data-theme="light"] body[data-design="vibrant"] .top-nav a[aria-current] { box-shadow: inset 0 -2px #79ebff; }
html[data-theme="light"] body[data-design="vibrant"] .hero-copy em { text-shadow: 0 0 28px #269fd526; }
html[data-theme="light"] body[data-design="vibrant"] .hero-collage::before { background: radial-gradient(circle, #94d3ef61, #b8a0ed36 47%, transparent 70%); }
html[data-theme="light"] body[data-design="vibrant"] .mini-trust { color: #49627e; }
html[data-theme="light"] body[data-design="vibrant"] .mini-trust span::before { color: #167146; }
html[data-theme="light"] body[data-design="vibrant"] .button.secondary { color: #245778; background: #ffffffb0; border-color: #a8bbd6; }
html[data-theme="light"] body[data-design="vibrant"] .button.secondary:hover { color: #173d61; background: #e6efff; border-color: #6ca6c5; }
html[data-theme="light"] body[data-design="vibrant"] .facts { background: linear-gradient(115deg, #e1edffdc, #eff3ffec); border-color: #afc6e4; box-shadow: 0 12px 32px #46619b0e; }
html[data-theme="light"] body[data-design="vibrant"] .facts-intro { color: #345476; }
html[data-theme="light"] body[data-design="vibrant"] .fact { border-color: #b9cce5; }
html[data-theme="light"] body[data-design="vibrant"] .fact strong { color: #87550b; text-shadow: none; }
html[data-theme="light"] body[data-design="vibrant"] .fact:nth-child(3) strong { color: #155aa1; }
html[data-theme="light"] body[data-design="vibrant"] .fact span:not(.fact-icon) { color: #47617b; }
html[data-theme="light"] body[data-design="vibrant"] .course-link { --card-glow: #24775b; background: radial-gradient(ellipse 160px 160px at 50% 10%, #d1f4e4, transparent), linear-gradient(145deg, #fff, #f0f4ff); border-color: #9ccabd; box-shadow: 0 8px 24px #2447730b; }
html[data-theme="light"] body[data-design="vibrant"] .course-link:nth-child(2) { --card-glow: #7546ad; border-color: #c3a7e6; background: radial-gradient(ellipse 160px 160px at 50% 10%, #ece0ff, transparent), linear-gradient(145deg, #fff, #f0f4ff); }
html[data-theme="light"] body[data-design="vibrant"] .course-link:nth-child(3) { --card-glow: #076e91; border-color: #8ebfd4; background: radial-gradient(ellipse 160px 160px at 50% 10%, #d8f1fc, transparent), linear-gradient(145deg, #fff, #f0f4ff); }
html[data-theme="light"] body[data-design="vibrant"] .course-link:nth-child(4) { --card-glow: #a34278; border-color: #d7a9c9; background: radial-gradient(ellipse 160px 160px at 50% 10%, #ffe2f0, transparent), linear-gradient(145deg, #fff, #f0f4ff); }
html[data-theme="light"] body[data-design="vibrant"] .course-link h3 { color: #173357; }
html[data-theme="light"] body[data-design="vibrant"] .course-link p { color: #4a6480; }
html[data-theme="light"] body[data-design="vibrant"] .course-next { border-top-color: #c7d5e7; }
html[data-theme="light"] body[data-design="vibrant"] .method { background: linear-gradient(135deg, #e8f1ffdc, #fcfdffec); border-color: #bacde5; box-shadow: 0 15px 40px #2447730b; }
html[data-theme="light"] body[data-design="vibrant"] .step { background: linear-gradient(125deg, #fff, #eef3fc); border-color: #c1d1e6; }
html[data-theme="light"] body[data-design="vibrant"] .tinted { background: linear-gradient(120deg, #e6ecfcde, #eef2ffec); border-color: #d1dcef; }
html[data-theme="light"] body[data-design="vibrant"] .price-card { --price-color: #1d6d89; background: radial-gradient(ellipse 300px 160px at 95% 0%, #d0edf66e, transparent), linear-gradient(140deg, #fff, #f2f7ff); border-color: #a8c4de; box-shadow: 0 10px 30px #2447730a; }
html[data-theme="light"] body[data-design="vibrant"] .price-card:nth-child(2) { --price-color: #7048a2; background: radial-gradient(ellipse 300px 160px at 95% 0%, #e3d5ff93, transparent), linear-gradient(140deg, #fff, #f2f3ff); border-color: #b4a0d7; }
html[data-theme="light"] body[data-design="vibrant"] .price-card:nth-child(3) { --price-color: #236e58; background: radial-gradient(ellipse 300px 160px at 95% 0%, #d3f2e696, transparent), linear-gradient(140deg, #fff, #f3f9fb); border-color: #9fcbbd; }
html[data-theme="light"] body[data-design="vibrant"] .price-status { color: #213b61; }
html[data-theme="light"] body[data-design="vibrant"] .price-caption,
html[data-theme="light"] body[data-design="vibrant"] .price-card ul { color: #4a6480; }
html[data-theme="light"] body[data-design="vibrant"] .price-card li::before { color: #17764d; text-shadow: none; }
html[data-theme="light"] body[data-design="vibrant"] .price-card .button { color: #245778; border-color: #a8bbd6; }
html[data-theme="light"] body[data-design="vibrant"] .pricing-note { border-color: #bfcfe5; }
html[data-theme="light"] body[data-design="vibrant"] .profile { background: linear-gradient(120deg, #fff, #eef2ff); border-color: #bcccdf; }
html[data-theme="light"] body[data-design="vibrant"] .profile:hover { background: #f1eafb; border-color: #b879a9; }
html[data-theme="light"] body[data-design="vibrant"] .profile b { color: #203859; }
html[data-theme="light"] body[data-design="vibrant"] .profile small { color: #4b6683; }
html[data-theme="light"] body[data-design="vibrant"] .profile .external { color: #256b8d; }

@media (min-width: 1500px) {
  body[data-design="vibrant"] .intro { padding-top: 67px; padding-bottom: 62px; }
}
@media (max-width: 1100px) {
  body[data-design="vibrant"] .wrap { width: calc(100% - 56px); }
  body[data-design="vibrant"] .top-inner { grid-template-columns: 1fr auto; gap: 14px; padding: 18px 0; }
  body[data-design="vibrant"] .top-nav { grid-row: 2; grid-column: 1 / -1; justify-content: center; gap: 31px; }
  body[data-design="vibrant"] .intro { gap: 18px; min-height: 560px; padding: 44px 0 38px; }
  body[data-design="vibrant"] h1 { font-size: clamp(44px, 5.2vw, 61px); }
  body[data-design="vibrant"] .hero-collage { min-height: 460px; }
  body[data-design="vibrant"] .hero-students { height: 460px; }
  body[data-design="vibrant"] .hero-badge { padding: 10px 12px; }
  body[data-design="vibrant"] .badge-100 { right: -8px; top: 10%; }
  body[data-design="vibrant"] .sticker-hadi { left: 1%; top: 3%; }
  body[data-design="vibrant"] .facts { grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 27px; }
  body[data-design="vibrant"] .facts-intro { grid-column: 1 / -1; max-width: none; }
  body[data-design="vibrant"] .facts-intro br { display: none; }
  body[data-design="vibrant"] .fact { padding-left: 17px; }
  body[data-design="vibrant"] .fact:nth-child(2) { border-left: 0; padding-left: 0; }
  body[data-design="vibrant"] .fact strong { font-size: 34px; }
  body[data-design="vibrant"] .course-links { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  body[data-design="vibrant"] .course-visual { height: 177px; }
  body[data-design="vibrant"] .course-visual img { height: 186px; }
  body[data-design="vibrant"] .course-link h3 { min-height: 0; }
  body[data-design="vibrant"] .method { gap: 35px; padding: 37px; grid-template-columns: 1fr 1.25fr; }
  body[data-design="vibrant"] .step { padding: 16px; gap: 12px; }
  body[data-design="vibrant"] .step h3 { font-size: 16px; }
  body[data-design="vibrant"] .social-section { gap: 45px; }
  body[data-design="vibrant"] .price-card { padding: 24px; }
  body[data-design="vibrant"] .pricing-grid { gap: 15px; }
  body[data-design="vibrant"] .price-status { font-size: 26px; }
  body[data-design="vibrant"] .price-card h3 { font-size: 23px; max-width: 170px; }
  body[data-design="vibrant"] .price-art { width: 83px; height: 83px; top: 28px; opacity: .8; }
  body[data-design="vibrant"] .cta-rocket { right: 185px; width: 150px; height: 150px; bottom: -20px; }
  body[data-design="vibrant"] .closing { padding: 37px; }
  body[data-design="vibrant"] .closing h2 { max-width: 460px; }
  body[data-design="vibrant"] .section-sticker-a { right: 3%; top: 27px; }
}
@media (max-width: 760px) {
  body[data-design="vibrant"] .wrap { width: calc(100% - 40px); }
  body[data-design="vibrant"] .top-inner { min-height: auto; padding: 16px 0 12px; gap: 12px; }
  body[data-design="vibrant"] .brand { font-size: 27px; }
  body[data-design="vibrant"] .brand-mark { width: 36px; height: 40px; }
  body[data-design="vibrant"] .brand small { font-size: 7px; letter-spacing: 3.7px; }
  body[data-design="vibrant"] .top-actions { gap: 8px; }
  body[data-design="vibrant"] .top-actions .button.small { padding: 10px 12px; min-height: 38px; font-size: 10px; }
  body[data-design="vibrant"] .theme-button { width: 34px; height: 34px; }
  body[data-design="vibrant"] .top-nav { justify-content: flex-start; gap: 25px; font-size: 11px; overflow-x: auto; padding-top: 2px; }
  body[data-design="vibrant"] .intro { grid-template-columns: 1fr; gap: 11px; padding: 40px 0 28px; min-height: 0; }
  body[data-design="vibrant"] .intro h1 { font-size: clamp(43px, 8vw, 58px); margin: 21px 0; max-width: 610px; }
  body[data-design="vibrant"] .intro p { max-width: 620px; font-size: 14px; }
  body[data-design="vibrant"] .hero-scope { margin: 22px 0 0; }
  body[data-design="vibrant"] .hero-collage { min-height: 430px; max-width: 620px; margin: 5px auto 0; }
  body[data-design="vibrant"] .hero-students { height: 450px; width: 100%; }
  body[data-design="vibrant"] .badge-100 { right: 1%; top: 12%; }
  body[data-design="vibrant"] .badge-focus { left: 4%; bottom: 13%; }
  body[data-design="vibrant"] .sticker-hadi { top: 9%; left: 5%; }
  body[data-design="vibrant"] .sticker-basla { right: 3%; bottom: 10%; }
  body[data-design="vibrant"] .facts { gap: 19px 13px; padding: 25px 20px; border-radius: 15px; }
  body[data-design="vibrant"] .fact { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 9px; padding-left: 11px; }
  body[data-design="vibrant"] .fact-icon { width: 43px; font-size: 33px; }
  body[data-design="vibrant"] .fact-icon img,
  body[data-design="vibrant"] .fact-icon svg { width: 43px; height: 47px; }
  body[data-design="vibrant"] .fact strong { font-size: clamp(28px, 5.7vw, 35px); }
  body[data-design="vibrant"] .fact span:not(.fact-icon) { font-size: 10px; line-height: 1.5; display: block; margin-top: 4px; }
  body[data-design="vibrant"] .facts-intro { font-size: 12px; text-align: center; }
  body[data-design="vibrant"] .section { padding: 58px 0; }
  body[data-design="vibrant"] .section-header { display: block; margin-bottom: 28px; }
  body[data-design="vibrant"] .section-header p { margin-top: 18px; max-width: 610px; }
  body[data-design="vibrant"] .section-header h2 { max-width: 510px; }
  body[data-design="vibrant"] .section-sticker-a { top: 18px; right: 3px; font-size: 10px; padding: 5px 9px; }
  body[data-design="vibrant"] .section-sticker-b { left: -6px; bottom: 16px; font-size: 11px; padding: 5px 9px; }
  body[data-design="vibrant"] .courses-section > .section-sticker.sticker-hadi { right: 2px; top: 16px; font-size: 10px; padding: 5px 9px; }
  body[data-design="vibrant"] .courses-section > .section-sticker.sticker-basla { left: -5px; bottom: 14px; font-size: 11px; padding: 5px 9px; }
  body[data-design="vibrant"] .course-links { gap: 16px; }
  body[data-design="vibrant"] .course-link { padding: 15px 20px 23px; }
  body[data-design="vibrant"] .course-visual { height: 151px; margin-bottom: 8px; }
  body[data-design="vibrant"] .course-visual img { height: 157px; }
  body[data-design="vibrant"] .course-link h3 { font-size: 21px; }
  body[data-design="vibrant"] .course-num { font-size: 8px; letter-spacing: .7px; }
  body[data-design="vibrant"] .course-link p { font-size: 11px; }
  body[data-design="vibrant"] .course-next { font-size: 9px; }
  body[data-design="vibrant"] .method { grid-template-columns: 1fr; padding: 31px; gap: 29px; border-radius: 19px; }
  body[data-design="vibrant"] .method h2 { margin: 20px 0; }
  body[data-design="vibrant"] .step { padding: 19px; gap: 17px; }
  body[data-design="vibrant"] .step h3 { font-size: 17px; }
  body[data-design="vibrant"] .step p { font-size: 11px; }
  body[data-design="vibrant"] .method-doodle-target { bottom: 5px; right: -10px; font-size: 27px; }
  body[data-design="vibrant"] .tinted { margin-top: 58px !important; }
  body[data-design="vibrant"] .pricing-grid { grid-template-columns: 1fr; gap: 22px; }
  body[data-design="vibrant"] .price-card { padding: 30px; }
  body[data-design="vibrant"] .price-card h3 { min-height: 0; max-width: 75%; font-size: 25px; }
  body[data-design="vibrant"] .price-status { margin-top: 30px; max-width: 280px; font-size: 30px; }
  body[data-design="vibrant"] .price-art { width: 110px; height: 110px; top: 35px; right: 2px; opacity: .95; }
  body[data-design="vibrant"] .price-card ul { margin: 25px 0; }
  body[data-design="vibrant"] .price-spark { top: 137px; right: 36px; }
  body[data-design="vibrant"] .price-heading-art { display: none; }
  body[data-design="vibrant"] .pricing-note { align-items: flex-start; flex-direction: column; gap: 17px; line-height: 1.8; }
  body[data-design="vibrant"] .social-section { grid-template-columns: 1fr; gap: 28px; }
  body[data-design="vibrant"] .social-art { margin-top: 18px; height: 188px; width: 300px; max-width: 90%; }
  body[data-design="vibrant"] .social-section p { max-width: 570px; }
  body[data-design="vibrant"] .profile { padding: 23px; }
  body[data-design="vibrant"] .social-section .action-row { margin-top: 18px; }
  body[data-design="vibrant"] .closing { min-height: 233px; padding: 31px; margin-bottom: 57px; flex-direction: column; align-items: flex-start; gap: 24px; }
  body[data-design="vibrant"] .closing h2 { font-size: 30px; max-width: 460px; }
  body[data-design="vibrant"] .closing p { max-width: 77%; font-size: 12px; }
  body[data-design="vibrant"] .cta-rocket { right: 15px; bottom: -20px; height: 152px; width: 152px; opacity: .75; }
  body[data-design="vibrant"] .closing::before { right: 11%; font-size: 24px; top: 10px; }
  body[data-design="vibrant"] .closing .button { font-size: 12px; padding: 13px 20px; }
  body[data-design="vibrant"] .footer { padding: 35px 0 26px; }
  body[data-design="vibrant"] .footer-main { flex-direction: column; align-items: flex-start; gap: 27px; }
  body[data-design="vibrant"] .footer-links { gap: 20px; font-size: 11px; }
  body[data-design="vibrant"] .footer-small { flex-direction: column; gap: 10px; margin-top: 27px; font-size: 10px; }
  body[data-design="vibrant"] .page-intro { padding: 44px 0 38px; }
  body[data-design="vibrant"] .page-intro h1 { font-size: clamp(38px, 8vw, 53px); }
}
@media (max-width: 420px) {
  body[data-design="vibrant"] .wrap { width: calc(100% - 32px); }
  body[data-design="vibrant"] .brand { font-size: 25px; gap: 8px; }
  body[data-design="vibrant"] .brand-mark { width: 33px; height: 38px; }
  body[data-design="vibrant"] .top-actions .button.small { padding: 10px; font-size: 9px; gap: 0; }
  body[data-design="vibrant"] .top-actions .button.small span { display: none; }
  body[data-design="vibrant"] .top-actions { gap: 7px; }
  body[data-design="vibrant"] .theme-button { width: 31px; height: 31px; font-size: 21px; }
  body[data-design="vibrant"] .top-nav { gap: 20px; font-size: 10px; }
  body[data-design="vibrant"] .intro { padding-top: 33px; gap: 8px; }
  body[data-design="vibrant"] .intro h1 { font-size: 43px; }
  body[data-design="vibrant"] .intro p { font-size: 13px; line-height: 1.84; }
  body[data-design="vibrant"] .eyebrow { font-size: 8px; letter-spacing: 1.8px; }
  body[data-design="vibrant"] .hero-scope { font-size: 9px; margin-top: 20px; }
  body[data-design="vibrant"] .action-row { gap: 9px; }
  body[data-design="vibrant"] .action-row .button { font-size: 11px; min-height: 47px; padding: 12px 16px; gap: 13px; }
  body[data-design="vibrant"] .mini-trust { font-size: 9px; gap: 12px; }
  body[data-design="vibrant"] .hero-collage { min-height: 350px; margin-top: 4px; }
  body[data-design="vibrant"] .hero-students { height: 358px; width: 100%; }
  body[data-design="vibrant"] .hero-badge { padding: 8px 9px; border-radius: 12px; font-size: 9px; }
  body[data-design="vibrant"] .hero-badge strong,
  body[data-design="vibrant"] .hero-badge b { font-size: 22px; }
  body[data-design="vibrant"] .hero-badge small { font-size: 7px; }
  body[data-design="vibrant"] .badge-100 { top: 13%; right: 0; }
  body[data-design="vibrant"] .badge-focus { left: 0; bottom: 12%; }
  body[data-design="vibrant"] .sticker-hadi,
  body[data-design="vibrant"] .sticker-basla { font-size: 12px; padding: 5px 10px; }
  body[data-design="vibrant"] .sticker-hadi { left: 0; top: 5%; }
  body[data-design="vibrant"] .sticker-basla { right: 0; bottom: 8%; }
  body[data-design="vibrant"] .facts { padding: 22px 13px; gap: 18px 9px; }
  body[data-design="vibrant"] .fact { padding-left: 8px; }
  body[data-design="vibrant"] .fact strong { font-size: 28px; letter-spacing: -1px; }
  body[data-design="vibrant"] .fact span:not(.fact-icon) { font-size: 9px; }
  body[data-design="vibrant"] .facts-intro { font-size: 11px; }
  body[data-design="vibrant"] h2 { font-size: 34px; }
  body[data-design="vibrant"] .section-header p { font-size: 12px; }
  body[data-design="vibrant"] .course-links { grid-template-columns: 1fr; gap: 20px; }
  body[data-design="vibrant"] .course-link { padding: 18px 25px 25px; }
  body[data-design="vibrant"] .course-visual { height: 178px; }
  body[data-design="vibrant"] .course-visual img { height: 186px; }
  body[data-design="vibrant"] .course-link h3 { font-size: 25px; }
  body[data-design="vibrant"] .course-link p { font-size: 12px; }
  body[data-design="vibrant"] .course-num { font-size: 9px; }
  body[data-design="vibrant"] .course-link .course-next { font-size: 10px; }
  body[data-design="vibrant"] .method { padding: 26px 22px; }
  body[data-design="vibrant"] .method h2 { font-size: 34px; }
  body[data-design="vibrant"] .step { padding: 16px 13px; grid-template-columns: 43px 1fr; gap: 12px; }
  body[data-design="vibrant"] .step-icon { width: 42px; height: 46px; border-radius: 12px; }
  body[data-design="vibrant"] .step h3 { font-size: 15px; }
  body[data-design="vibrant"] .step p { font-size: 10px; }
  body[data-design="vibrant"] .price-card { padding: 27px 24px; }
  body[data-design="vibrant"] .price-card h3 { font-size: 24px; max-width: 77%; }
  body[data-design="vibrant"] .price-art { width: 86px; height: 86px; top: 40px; right: -2px; }
  body[data-design="vibrant"] .price-status { font-size: 29px; max-width: 210px; }
  body[data-design="vibrant"] .price-card ul { font-size: 11px; }
  body[data-design="vibrant"] .social-art { width: 270px; height: 178px; margin-left: 4px; }
  body[data-design="vibrant"] .sticker-takip { left: -6px; font-size: 10px; }
  body[data-design="vibrant"] .sticker-wow { right: -15px; font-size: 11px; }
  body[data-design="vibrant"] .sticker-yildiz { font-size: 10px; right: 29px; }
  body[data-design="vibrant"] .profile { padding: 20px; gap: 14px; }
  body[data-design="vibrant"] .profile b { font-size: 15px; }
  body[data-design="vibrant"] .profile small { font-size: 10px; }
  body[data-design="vibrant"] .insta-icon { width: 43px; height: 43px; }
  body[data-design="vibrant"] .closing { padding: 28px 25px; }
  body[data-design="vibrant"] .closing h2 { font-size: 30px; }
  body[data-design="vibrant"] .closing p { max-width: 84%; font-size: 11px; }
  body[data-design="vibrant"] .cta-rocket { right: 14px; bottom: -20px; width: 138px; height: 138px; opacity: .67; }
  body[data-design="vibrant"] .footer-links { gap: 16px; font-size: 10px; }
}
@media (max-width: 350px) {
  body[data-design="vibrant"] .wrap { width: calc(100% - 28px); }
  body[data-design="vibrant"] .intro h1 { font-size: 38px; }
  body[data-design="vibrant"] .brand { font-size: 23px; }
  body[data-design="vibrant"] .brand small { letter-spacing: 3.2px; }
  body[data-design="vibrant"] .top-actions .button.small { font-size: 8px; padding: 9px 8px; }
  body[data-design="vibrant"] .top-nav { gap: 18px; }
  body[data-design="vibrant"] .fact strong { font-size: 25px; }
  body[data-design="vibrant"] .hero-students { height: 329px; }
  body[data-design="vibrant"] .hero-collage { min-height: 329px; }
  body[data-design="vibrant"] .profile { padding: 17px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-design="vibrant"] *,
  body[data-design="vibrant"] *::before,
  body[data-design="vibrant"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}