/* ==================================================================
   BrightCode Academy — Main Stylesheet
   Design system: a "sticker book" visual language for a kids' code
   academy — bold flat color blocks, thick ink outlines, tactile
   offset shadows on interactive elements, and a single animated
   hero moment. Brand colors: navy ink, hot pink, sunshine yellow,
   plus teal + sky blue borrowed from the new illustration set.
   ================================================================== */

:root {
  --brand-navy: #241B4E;
  --brand-navy-light: #362A6E;
  --brand-pink: #F4419A;
  --brand-pink-dark: #D22E80;
  --brand-pink-light: #FCE4F0;
  --brand-yellow: #FFD447;
  --brand-teal: #5AD1C6;
  --brand-blue: #0E7AA6;
  --brand-white: #FFFFFF;
  --brand-gray-100: #F7F7FB;
  --brand-gray-200: #EDEDF6;
  --brand-gray-700: #4A4560;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --ink: var(--brand-navy);
  --shadow-soft: 0 10px 30px rgba(36, 27, 78, 0.08);
  --shadow-lift: 0 16px 40px rgba(244, 65, 154, 0.22);
  --shadow-sticker: 6px 6px 0 rgba(36, 27, 78, 0.92);
  --shadow-sticker-sm: 4px 4px 0 rgba(36, 27, 78, 0.92);

  --font-heading: 'Baloo 2', 'Poppins', sans-serif;
  --font-body: 'Inter', 'Nunito Sans', sans-serif;
}

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--brand-gray-700);
  background-color: var(--brand-white);
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--brand-navy);
  letter-spacing: -0.01em;
}

h1 { font-weight: 800; }

h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
}

p.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

a {
  color: var(--brand-pink-dark);
  text-decoration: none;
}
a:hover { color: var(--brand-pink); }

:focus-visible {
  outline: 3px solid var(--brand-yellow);
  outline-offset: 2px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--brand-pink-dark);
  font-weight: 700;
  font-size: 0.95rem;
}
.section-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-yellow);
  border: 2px solid var(--brand-navy);
  flex-shrink: 0;
}

.text-navy { color: var(--brand-navy) !important; }
.text-pink { color: var(--brand-pink) !important; }
.bg-brand-tint { background-color: var(--brand-gray-100); }
.bg-pink-light { background-color: var(--brand-pink-light); }

section {
  padding: 5.5rem 0;
}
@media (max-width: 576px) {
  section { padding: 3.25rem 0; }
}

/* ---------------------------------------------------------------
   Buttons — tactile "sticker" style with an offset ink shadow
   that flattens on press/hover for a satisfying, game-like feel.
   --------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.75rem 1.75rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-brand-primary {
  background-color: var(--brand-pink);
  border: 2.5px solid var(--brand-navy);
  color: var(--brand-white);
  box-shadow: var(--shadow-sticker-sm);
}
.btn-brand-primary:hover,
.btn-brand-primary:focus {
  background-color: var(--brand-pink-dark);
  border-color: var(--brand-navy);
  color: var(--brand-white);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(36, 27, 78, 0.92);
}
.btn-brand-primary:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 rgba(36, 27, 78, 0.92);
}

.btn-brand-secondary {
  background-color: transparent;
  border: 2.5px solid var(--brand-navy);
  color: var(--brand-navy);
}
.btn-brand-secondary:hover,
.btn-brand-secondary:focus {
  background-color: var(--brand-navy);
  color: var(--brand-white);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-sticker-sm);
}

.btn-brand-ghost {
  background-color: var(--brand-pink-light);
  color: var(--brand-pink-dark);
  border: 2px solid transparent;
}
.btn-brand-ghost:hover {
  background-color: var(--brand-pink);
  color: var(--brand-white);
  border-color: var(--brand-navy);
}

.btn-outline-light {
  border: 2.5px solid rgba(255,255,255,0.85);
}
.btn-outline-light:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.18);
}

/* ---------------------------------------------------------------
   Navbar
   --------------------------------------------------------------- */
.navbar-brightcode {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(36, 27, 78, 0.06);
  transition: box-shadow 0.25s ease, padding 0.25s ease, background-color 0.25s ease;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.navbar-brightcode.scrolled {
  box-shadow: var(--shadow-soft);
  background-color: rgba(255, 255, 255, 0.94);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.navbar-brightcode .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--brand-navy);
  font-size: 1.25rem;
}
.navbar-brightcode .brand-code { color: var(--brand-pink); }

.navbar-brightcode .nav-link {
  font-weight: 600;
  color: var(--brand-navy);
  margin: 0 0.35rem;
  position: relative;
}
.navbar-brightcode .nav-link.active,
.navbar-brightcode .nav-link:hover {
  color: var(--brand-pink-dark);
}
.navbar-brightcode .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-yellow);
}
.navbar-brightcode .nav-cta {
  border-radius: 999px;
  background-color: var(--brand-pink);
  border: 2px solid var(--brand-navy);
  color: var(--brand-white) !important;
  padding: 0.55rem 1.4rem;
  font-weight: 700;
  margin-left: 0.5rem;
  box-shadow: var(--shadow-sticker-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.navbar-brightcode .nav-cta:hover {
  background-color: var(--brand-pink-dark);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(36, 27, 78, 0.92);
}
.navbar-brightcode .nav-cta::after { display: none; }

/* Mobile floating CTA bar */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--brand-white);
  box-shadow: 0 -8px 24px rgba(36, 27, 78, 0.14);
  padding: 0.65rem 1rem;
  display: none;
}
@media (max-width: 767.98px) {
  .mobile-cta-bar { display: block; }
  body { padding-bottom: 4.25rem; }
}
.mobile-cta-bar .btn {
  width: 100%;
}

/* ---------------------------------------------------------------
   Hero — one orchestrated moment: soft drifting gradient orbs
   behind the headline, plus a gentle bob on the illustration.
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--brand-navy) 0%, #3A2A73 55%, var(--brand-pink-dark) 130%);
  color: var(--brand-white);
  padding: 7.5rem 0 6.5rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(255, 212, 71, 0.22), transparent 42%),
    radial-gradient(circle at 8% 85%, rgba(90, 209, 198, 0.18), transparent 40%);
  animation: heroDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-2%, 2%) scale(1.06); }
}
.hero h1 {
  color: var(--brand-white);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.15;
}
.hero .lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.2rem;
}
.hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.hero-visual img {
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.hero-illustration {
  animation: heroFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.25));
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------------------------------------------------------------
   Cards — sticker cards with a thin ink outline; on hover, the
   card lifts and its outline shadow becomes a solid offset block.
   --------------------------------------------------------------- */
.card-brand {
  border: 2px solid rgba(36, 27, 78, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  background: var(--brand-white);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  height: 100%;
}
.card-brand:hover {
  transform: translate(-4px, -4px);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-sticker);
}
.card-icon-badge {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  background: var(--brand-pink-light);
  border: 2px solid var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  margin-bottom: 1rem;
  transition: transform 0.25s ease;
}
.card-brand:hover .card-icon-badge {
  transform: rotate(-6deg) scale(1.06);
}

/* Why BrightCode grid */
.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  height: 100%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.why-item:hover {
  border-color: var(--brand-navy);
  transform: translate(-3px, -3px);
}
.why-item .emoji {
  font-size: 1.8rem;
  line-height: 1;
}

/* Program badge */
.age-badge {
  display: inline-block;
  background: var(--brand-yellow);
  color: var(--brand-navy);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  border: 2px solid var(--brand-navy);
}

/* How it works timeline */
.timeline-step {
  position: relative;
  text-align: center;
  padding: 1.5rem 1rem;
}
.timeline-step .step-number {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: var(--brand-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border: 3px solid var(--brand-white);
  box-shadow: 0 0 0 3px var(--brand-navy);
}
.timeline-step:nth-child(2) .step-number { background: var(--brand-pink); box-shadow: 0 0 0 3px var(--brand-pink); }
.timeline-step:nth-child(3) .step-number { background: var(--brand-teal); box-shadow: 0 0 0 3px var(--brand-teal); }
.timeline-step:nth-child(4) .step-number { background: var(--brand-pink); box-shadow: 0 0 0 3px var(--brand-pink); }

.timeline-track {
  position: relative;
}
@media (min-width: 992px) {
  .timeline-track::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--brand-pink-light) 0 10px, transparent 10px 20px);
    z-index: 0;
  }
  .timeline-step { z-index: 1; }
}

/* Project gallery */
.project-tile {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(36, 27, 78, 0.08);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.project-tile:hover {
  transform: translate(-4px, -4px);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-sticker);
}
.project-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.project-tile:hover img { transform: scale(1.06); }
.project-tile .project-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(36,27,78,0.9), transparent);
  color: var(--brand-white);
  padding: 1.25rem 1rem 0.75rem;
}
.project-tag {
  display: inline-block;
  background: var(--brand-pink-light);
  color: var(--brand-pink-dark);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  margin: 0.25rem;
}

/* Testimonials */
.testimonial-card {
  position: relative;
  background: var(--brand-white);
  border: 2px solid rgba(36, 27, 78, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 2.25rem 2rem 2rem;
  height: 100%;
}
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--brand-pink-light);
  line-height: 1;
}
.testimonial-card p { position: relative; z-index: 1; }
.testimonial-stars { color: var(--brand-yellow); letter-spacing: 2px; }

/* Pricing */
.pricing-card {
  border-radius: var(--radius-lg);
  border: 2.5px solid var(--brand-gray-200);
  padding: 2.25rem 1.75rem;
  height: 100%;
  position: relative;
  background: var(--brand-white);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.pricing-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-sticker);
}
.pricing-card.highlighted {
  border-color: var(--brand-navy);
  box-shadow: var(--shadow-sticker);
}
.pricing-card .ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-yellow);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--brand-navy);
}
.pricing-card .price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--brand-navy);
}
.pricing-card .price-note {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--brand-gray-700);
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.pricing-card ul li {
  padding: 0.4rem 0;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.pricing-card ul li::before {
  content: "\2713";
  color: var(--brand-white);
  background: var(--brand-pink);
  font-weight: 700;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* FAQ accordion tweaks */
.accordion-brand .accordion-item {
  border: 2px solid rgba(36, 27, 78, 0.08);
  margin-bottom: 0.75rem;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.accordion-brand .accordion-button {
  font-weight: 700;
  color: var(--brand-navy);
}
.accordion-brand .accordion-button:not(.collapsed) {
  background-color: var(--brand-pink-light);
  color: var(--brand-pink-dark);
}
.accordion-brand .accordion-button:focus {
  box-shadow: none;
  outline: 3px solid var(--brand-yellow);
}

/* Final CTA banner */
.final-cta {
  position: relative;
  background: linear-gradient(120deg, var(--brand-pink) 0%, var(--brand-pink-dark) 100%);
  color: var(--brand-white);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  text-align: center;
  border: 2.5px solid var(--brand-navy);
  overflow: hidden;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,0.18), transparent 45%);
  pointer-events: none;
}
.final-cta h2 { color: var(--brand-white); }
.final-cta .btn-brand-primary {
  background: var(--brand-white);
  border-color: var(--brand-navy);
  color: var(--brand-pink-dark);
}
.final-cta .btn-brand-primary:hover {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

/* Footer */
.site-footer {
  background: linear-gradient(180deg, var(--brand-navy) 0%, #1B1440 100%);
  color: rgba(255, 255, 255, 0.85);
  padding: 3.5rem 0 1.5rem;
}
.site-footer h5 { color: var(--brand-white); }
.site-footer a { color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover { color: var(--brand-yellow); }
.site-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--brand-white);
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}
.site-footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.14);
  margin-right: 0.5rem;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.site-footer .social-icons a:hover {
  background: var(--brand-pink);
  border-color: var(--brand-white);
  transform: translateY(-3px);
  color: var(--brand-white);
}
.site-footer hr { border-color: rgba(255,255,255,0.15); }

/* Booking modal / form */
.modal-brand .modal-content {
  border-radius: var(--radius-lg);
  border: 2.5px solid var(--brand-navy);
}
.modal-brand .modal-header {
  background: var(--brand-pink-light);
  border: none;
  border-top-left-radius: calc(var(--radius-lg) - 2px);
  border-top-right-radius: calc(var(--radius-lg) - 2px);
}
.form-check-subject {
  border: 2px solid var(--brand-gray-200);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.form-check-subject:has(input:checked) {
  border-color: var(--brand-pink);
  background: var(--brand-pink-light);
}
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#booking-success, #contact-success {
  display: none;
}
#booking-error, #contact-error {
  display: none;
}

/* Quiz widget */
.quiz-option-btn {
  border: 2px solid var(--brand-gray-200);
  border-radius: var(--radius-md);
  background: var(--brand-white);
  padding: 1.5rem 1rem;
  width: 100%;
  font-weight: 700;
  color: var(--brand-navy);
  transition: all 0.2s ease;
}
.quiz-option-btn:hover,
.quiz-option-btn.selected {
  border-color: var(--brand-navy);
  background: var(--brand-pink-light);
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-sticker-sm);
}
.quiz-option-btn .quiz-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}
#quiz-result { display: none; }

/* Brand logomark (inline SVG, used in navbar/footer/admin/portal) */
.brand-logo-mark {
  display: block;
  flex-shrink: 0;
  border-radius: 12px;
}

/* ---------------------------------------------------------------
   Admin panel
   --------------------------------------------------------------- */
.admin-sidebar {
  background: linear-gradient(180deg, var(--brand-navy) 0%, #1B1440 100%);
  min-height: 100vh;
  color: rgba(255,255,255,0.85);
}
.admin-sidebar a {
  color: rgba(255,255,255,0.75);
  display: block;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-sm);
  margin: 0.15rem 0.75rem;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-sidebar a:hover,
.admin-sidebar a.active {
  background: rgba(255,255,255,0.1);
  color: var(--brand-white);
}
.admin-content { padding: 2rem; }
.stat-card {
  border-radius: var(--radius-md);
  padding: 1.5rem;
  background: var(--brand-white);
  border: 2px solid rgba(36, 27, 78, 0.08);
  box-shadow: var(--shadow-soft);
}
.stat-card .stat-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2rem;
  color: var(--brand-navy);
}

/* SEO landing pages */
.seo-hero {
  background: var(--brand-pink-light);
  padding: 4rem 0 3rem;
  border-bottom: 3px solid var(--brand-navy);
}

/* Utility: fade-in-up (used sparingly on hero only per design guidance) */
.fade-in-up {
  animation: fadeInUp 0.7s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   2026 Modern UI Refresh
   Clean SaaS / Vite-inspired presentation while preserving Bootstrap
   and all existing PHP functionality.
   ================================================================== */
:root {
  --brand-navy: #0f172a;
  --brand-navy-light: #1e293b;
  --brand-pink: #6d5dfc;
  --brand-pink-dark: #5546e8;
  --brand-pink-light: #f1efff;
  --brand-yellow: #f8c96b;
  --brand-teal: #25b7a5;
  --brand-blue: #3974ff;
  --brand-white: #fff;
  --brand-gray-100: #f7f8fc;
  --brand-gray-200: #e8ebf2;
  --brand-gray-700: #5a6475;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --shadow-soft: 0 14px 40px rgba(15, 23, 42, .07);
  --shadow-lift: 0 24px 60px rgba(15, 23, 42, .12);
  --shadow-sticker: 0 24px 60px rgba(15, 23, 42, .12);
  --shadow-sticker-sm: 0 12px 30px rgba(15, 23, 42, .11);
  --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
}
body { background:#fff; color:#5a6475; font-size:15.5px; }
h1,h2,h3,h4,h5,h6 { letter-spacing:-.035em; }
h2 { font-size:clamp(2rem,3.5vw,3.15rem); line-height:1.08; }
section { padding:6.5rem 0; position:relative; }
.bg-brand-tint { background:linear-gradient(180deg,#f8f9fd 0%,#f4f6fb 100%) !important; }
.section-eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.75rem; color:#6758ee; font-weight:800; }
.section-eyebrow::before { width:22px; height:2px; border:0; border-radius:9px; background:#6d5dfc; }

/* navbar */
.navbar-brightcode { background:rgba(255,255,255,.78); border-bottom:1px solid rgba(15,23,42,.06); padding:.85rem 0; box-shadow:none; }
.navbar-brightcode.scrolled { background:rgba(255,255,255,.94); box-shadow:0 8px 30px rgba(15,23,42,.07); }
.navbar-brightcode .navbar-brand { font-family:var(--font-heading); font-size:1.18rem; letter-spacing:-.04em; }
.navbar-brightcode .brand-code { color:#6d5dfc; }
.navbar-brightcode .nav-link { font-size:.91rem; color:#465066; margin:0 .18rem; padding:.55rem .65rem !important; }
.navbar-brightcode .nav-link.active,.navbar-brightcode .nav-link:hover { color:#111827; }
.navbar-brightcode .nav-link.active::after { left:.65rem; right:.65rem; height:2px; bottom:0; background:#6d5dfc; }
.navbar-brightcode .nav-cta { background:#111827; border:0; box-shadow:none; padding:.68rem 1.05rem !important; margin-left:.5rem; }
.navbar-brightcode .nav-cta:hover { background:#6d5dfc; transform:translateY(-1px); box-shadow:0 10px 24px rgba(109,93,252,.25); }
.brand-logo-mark { border-radius:11px; box-shadow:0 8px 20px rgba(109,93,252,.18); }

/* buttons */
.btn { border-radius:12px; border-width:1px; padding:.78rem 1.35rem; font-weight:700; letter-spacing:-.01em; }
.btn-brand-primary { background:#6d5dfc; border:1px solid #6d5dfc; color:#fff; box-shadow:0 10px 22px rgba(109,93,252,.22); }
.btn-brand-primary:hover,.btn-brand-primary:focus { background:#5849ea; border-color:#5849ea; transform:translateY(-2px); box-shadow:0 16px 32px rgba(109,93,252,.28); }
.btn-brand-primary:active { transform:translateY(0); box-shadow:0 8px 16px rgba(109,93,252,.2); }
.btn-brand-secondary { background:#fff; border:1px solid #dce1ea; color:#172033; box-shadow:0 6px 20px rgba(15,23,42,.05); }
.btn-brand-secondary:hover,.btn-brand-secondary:focus { background:#111827; border-color:#111827; color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.16); }
.btn-brand-ghost { background:#f3f4f8; border:1px solid transparent; color:#182033; }
.btn-brand-ghost:hover { background:#ebe9ff; border-color:#dcd8ff; color:#5546e8; }

/* hero */
.hero { background:radial-gradient(circle at 80% 20%,rgba(110,93,252,.18),transparent 34%), radial-gradient(circle at 10% 90%,rgba(37,183,165,.12),transparent 32%), #0b1020; padding:8rem 0 7rem; }
.hero::before { background:linear-gradient(120deg,rgba(255,255,255,.02),transparent 45%); animation:none; }
.hero h1 { font-size:clamp(2.7rem,5.4vw,5rem); line-height:1.02; letter-spacing:-.06em; max-width:780px; }
.hero .lead { color:#c7cfdd; font-size:clamp(1.05rem,1.5vw,1.24rem); max-width:650px; line-height:1.8; }
.hero .hero-badge { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:.48rem .82rem; font-size:.78rem; color:#e8ebf1; }
.hero-illustration { animation:heroFloat 6s ease-in-out infinite; filter:drop-shadow(0 30px 45px rgba(0,0,0,.22)); }
.hero-visual { position:relative; }
.hero-visual::before { content:""; position:absolute; inset:8% 4% 4%; border-radius:36px; background:linear-gradient(145deg,rgba(109,93,252,.16),rgba(37,183,165,.08)); border:1px solid rgba(255,255,255,.08); transform:rotate(-3deg); }
.btn-outline-light { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.btn-outline-light:hover { background:#fff; color:#111827; transform:translateY(-2px); box-shadow:0 15px 30px rgba(0,0,0,.15); }

/* modern cards */
.card-brand { border:1px solid #e7eaf0; border-radius:22px; box-shadow:0 12px 35px rgba(15,23,42,.055); overflow:hidden; }
.card-brand:hover { transform:translateY(-7px); border-color:#dddff0; box-shadow:0 24px 58px rgba(15,23,42,.11); }
.card-brand h3,.card-brand h2 { margin-top:.25rem; }
.card-icon-badge { width:48px; height:48px; border:0; border-radius:13px; background:#f1efff; color:#5b4bed; font-size:1.25rem; margin-bottom:1.1rem; }
.card-brand:hover .card-icon-badge { transform:none; }

.course-card { padding:0 !important; }
.course-card-media { height:205px; background:linear-gradient(140deg,#eef0ff,#f6f7fb); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.course-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.035)); }
.course-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.course-card-media img[src$=".svg"] { object-fit:contain; padding:28px; }
.course-card:hover .course-card-media img { transform:scale(1.045); }
.course-card-body { padding:1.55rem; display:flex; flex-direction:column; height:calc(100% - 205px); }
.course-card-meta { display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 1rem; }
.course-card-meta span { font-size:.75rem; font-weight:700; color:#647085; background:#f5f6f9; border:1px solid #eceef3; padding:.38rem .58rem; border-radius:9px; }

.program-card { padding:0 !important; text-align:left !important; }
.program-card-media { min-height:175px; background-size:cover; background-position:center; position:relative; }
.program-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,23,42,.02),rgba(15,23,42,.38)); }
.program-card-media .age-badge { position:absolute; left:16px; bottom:16px; z-index:1; background:rgba(255,255,255,.92); color:#111827; border:0; backdrop-filter:blur(10px); }
.program-card-body { padding:1.45rem; display:flex; flex-direction:column; flex:1; }
.age-badge { border:0; background:#f1efff; color:#5c4cf0; border-radius:9px; font-weight:800; font-size:.73rem; padding:.42rem .65rem; }

/* feature grid */
.why-item { background:#fff !important; border:1px solid #e9ecf2; border-radius:20px; padding:1.55rem; box-shadow:0 8px 26px rgba(15,23,42,.04); align-items:center; transition:transform .22s ease,box-shadow .22s ease; }
.why-item:hover { transform:translateY(-5px); box-shadow:0 18px 38px rgba(15,23,42,.08); }
.why-item .emoji { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#f1efff; color:#5e50ea; font-family:var(--font-heading); font-size:.8rem; font-weight:800; }

/* timeline */
.timeline-track::before { height:1px; background:#e3e6ed; }
.step-number { width:48px; height:48px; border:1px solid #e1e4eb !important; box-shadow:0 8px 24px rgba(15,23,42,.08) !important; background:#fff !important; color:#5b4bed !important; font-family:var(--font-heading); font-size:.8rem; }
.timeline-step { padding:0 1.2rem; }
.timeline-step h3 { margin-top:1rem; font-size:1rem !important; }

/* projects / image tiles */
.project-tile { border-radius:22px; border:1px solid #e6e9ef; box-shadow:0 12px 34px rgba(15,23,42,.065); overflow:hidden; }
.project-tile:hover { transform:translateY(-6px); box-shadow:0 24px 55px rgba(15,23,42,.12); }
.project-tile img { height:255px; object-fit:cover; }
.project-caption { background:linear-gradient(transparent,rgba(9,14,29,.85)); padding:3.5rem 1.4rem 1.25rem; }
.project-tag { background:#f2f3f7; border:1px solid #e7e9ef; color:#4f596b; border-radius:9px; font-size:.75rem; padding:.45rem .65rem; }

/* testimonials / pricing / FAQ */
.testimonial-card { border:1px solid #e7eaf0; border-radius:22px; box-shadow:0 12px 34px rgba(15,23,42,.055); padding:1.7rem; background:#fff; }
.testimonial-stars { color:#f3b83f; letter-spacing:.08em; }
.pricing-card { border:1px solid #e6e9ef; border-radius:22px; box-shadow:0 12px 34px rgba(15,23,42,.05); padding:1.7rem; }
.pricing-card.highlighted { border:1px solid #6d5dfc; box-shadow:0 20px 50px rgba(109,93,252,.14); transform:translateY(-8px); }
.pricing-card .ribbon { background:#6d5dfc; border-radius:8px; border:0; box-shadow:none; }
.accordion-brand .accordion-item { border:1px solid #e7eaf0; border-radius:16px !important; box-shadow:0 7px 22px rgba(15,23,42,.04); }
.accordion-brand .accordion-button { padding:1.25rem 1.35rem; font-family:var(--font-heading); font-size:.96rem; }
.accordion-brand .accordion-button:not(.collapsed) { background:#f6f5ff; color:#4e42d8; }

/* CTA + footer */
.final-cta { background:radial-gradient(circle at 85% 15%,rgba(109,93,252,.8),transparent 28%), linear-gradient(135deg,#111827,#1d2740); border:0; border-radius:28px; padding:4rem 2rem; box-shadow:0 25px 65px rgba(15,23,42,.18); }
.final-cta::after { display:none; }
.final-cta .btn-brand-primary { background:#fff; border:0; color:#111827; box-shadow:none; }
.final-cta .btn-brand-primary:hover { background:#f1efff; color:#5546e8; }
.site-footer { background:#090f1d; padding:4.5rem 0 1.7rem; }
.site-footer .social-icons a { border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.05); }
.site-footer .social-icons a:hover { background:#6d5dfc; border-color:#6d5dfc; transform:translateY(-2px); }

/* forms / modal */
.form-control,.form-select { border:1px solid #dfe3ea; border-radius:12px; padding:.82rem .95rem; box-shadow:none; }
.form-control:focus,.form-select:focus { border-color:#8b7fff; box-shadow:0 0 0 4px rgba(109,93,252,.1); }
.modal-brand .modal-content { border:0; border-radius:24px; box-shadow:0 35px 90px rgba(15,23,42,.25); }
.modal-brand .modal-header { background:#f7f7fb; border-bottom:1px solid #eceef3; }
.form-check-subject { border:1px solid #e2e5eb; border-radius:12px; }
.form-check-subject:has(input:checked) { border-color:#8d82ff; background:#f5f3ff; }

/* page heroes */
.hero[style*="5rem"] { padding:5.5rem 0 4.5rem !important; }
.hero[style*="5rem"] h1 { max-width:900px; margin-left:auto; margin-right:auto; font-size:clamp(2.5rem,4.7vw,4.4rem); }
.hero[style*="5rem"] .lead { margin-left:auto; margin-right:auto; }
.seo-hero { background:linear-gradient(180deg,#f8f8fd,#f2f3f8); border-bottom:1px solid #e6e9ef; padding:5rem 0 4rem; }

/* responsive */
@media (max-width:991.98px) {
  .navbar-brightcode .navbar-collapse { margin-top:.75rem; padding:1rem; background:#fff; border:1px solid #e9ebf1; border-radius:18px; box-shadow:0 18px 45px rgba(15,23,42,.09); }
  .navbar-brightcode .nav-cta { margin:.55rem 0 0; text-align:center; }
  .hero { padding:6rem 0 5rem; }
  .hero-visual { margin-top:1rem; }
}
@media (max-width:767.98px) {
  section { padding:4.5rem 0; }
  .hero h1 { font-size:clamp(2.4rem,11vw,3.6rem); }
  .course-card-media { height:190px; }
  .pricing-card.highlighted { transform:none; }
}
.course-detail-visual { min-height:320px; border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.11); display:grid; place-items:center; padding:2rem; box-shadow:0 30px 60px rgba(0,0,0,.18); }
.course-detail-visual img { width:100%; max-height:300px; object-fit:contain; }
.quiz-option-btn { border:1px solid #e5e8ee; border-radius:18px; background:#fff; padding:1.35rem 1rem; color:#1c2538; box-shadow:0 10px 30px rgba(15,23,42,.045); }
.quiz-option-btn:hover,.quiz-option-btn.selected { border-color:#beb7ff; background:#f7f6ff; transform:translateY(-5px); box-shadow:0 18px 38px rgba(76,64,190,.10); }
.quiz-option-btn .quiz-emoji { font-family:var(--font-heading); font-size:.72rem; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin:0 auto .8rem; background:#f0eeff; color:#5d4ee9; letter-spacing:.04em; }

/* ============================================================
   2026 image-led polish: light homepage hero + resilient photos
   ============================================================ */
.home-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(109,93,252,.11), transparent 31%),
    radial-gradient(circle at 91% 82%, rgba(37,183,165,.10), transparent 30%),
    linear-gradient(180deg, #fbfbff 0%, #f6f7fb 100%);
  color: #111827;
  padding: 7.25rem 0 6.25rem;
  border-bottom: 1px solid #e9ebf1;
}
.home-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  top: -170px;
  border-radius: 50%;
  border: 1px solid rgba(109,93,252,.12);
  background: rgba(255,255,255,.55);
}
.home-hero h1 { color:#111827; }
.home-hero .lead { color:#667085; }
.home-hero .hero-badge {
  color:#5546e8;
  background:#eeecff;
  border:1px solid #ddd9ff;
}
.home-hero .hero-visual::before { display:none; }
.home-hero .btn-brand-secondary { background:#fff; color:#172033; border-color:#dfe3ea; }
.home-hero .btn-brand-secondary:hover { background:#111827; border-color:#111827; color:#fff; }

.hero-photo-frame {
  position:relative;
  max-width:620px;
  margin-inline:auto;
  padding:14px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(220,225,234,.9);
  border-radius:32px;
  box-shadow:0 34px 80px rgba(15,23,42,.15);
  transform:rotate(1deg);
}
.hero-photo-frame::before {
  content:"";
  position:absolute;
  inset:-18px 26px 28px -22px;
  border-radius:36px;
  background:linear-gradient(145deg,rgba(109,93,252,.14),rgba(37,183,165,.10));
  z-index:-1;
  transform:rotate(-4deg);
}
.hero-photo {
  width:100%;
  height:480px;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:23px;
}
.hero-floating-card {
  position:absolute;
  display:flex;
  align-items:center;
  gap:.72rem;
  padding:.78rem .9rem;
  min-width:185px;
  text-align:left;
  border-radius:16px;
  background:rgba(255,255,255,.95);
  border:1px solid rgba(224,228,236,.92);
  box-shadow:0 18px 45px rgba(15,23,42,.14);
  backdrop-filter:blur(12px);
}
.hero-floating-card-top { top:32px; left:-46px; }
.hero-floating-card-bottom { right:-35px; bottom:38px; }
.hero-floating-card strong { display:block; color:#172033; font-size:.82rem; line-height:1.15; }
.hero-floating-card small { display:block; color:#7b8494; font-size:.69rem; margin-top:.15rem; }
.hero-float-icon {
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#f0eeff;
  color:#5d4ee9;
}

.course-card-media,
.project-tile { background:#edf0f6; }
.course-card-media img,
.project-tile img { display:block; }
.course-card-media img:not([src$=".svg"]) { object-fit:cover; padding:0; }
.project-tile::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 54%,rgba(8,15,31,.08));
}
.project-tile { position:relative; }
.project-caption { z-index:2; }

/* Course-detail photos should feel editorial rather than icon-like. */
.course-detail-visual { overflow:hidden; padding:0; min-height:360px; background:#eef1f6; }
.course-detail-visual img { width:100%; height:360px; max-height:none; object-fit:cover; }

@media (max-width: 991.98px) {
  .home-hero { padding:5.5rem 0 5rem; }
  .hero-photo { height:420px; }
  .hero-floating-card-top { left:12px; }
  .hero-floating-card-bottom { right:12px; }
}
@media (max-width: 575.98px) {
  .hero-photo-frame { padding:9px; border-radius:24px; }
  .hero-photo { height:330px; border-radius:18px; }
  .hero-floating-card { min-width:0; padding:.62rem .7rem; }
  .hero-floating-card-top { top:20px; left:16px; }
  .hero-floating-card-bottom { right:16px; bottom:20px; }
  .hero-floating-card small { display:none; }
  .hero-float-icon { width:31px; height:31px; flex-basis:31px; }
}

/* ============================================================
   2026 homepage hero enhancement + technology marquee
   ============================================================ */
.home-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(251, 252, 255, .92), rgba(246, 248, 252, .96)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
  color: #111827;
  padding: 6.1rem 0 5rem;
  border-bottom: 1px solid #e8ebf1;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: auto auto -120px -110px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109,93,252,.14) 0%, rgba(109,93,252,0) 70%);
  pointer-events: none;
}
.home-hero::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,183,165,.13) 0%, rgba(37,183,165,0) 68%);
  pointer-events: none;
}
.home-hero .container,
.home-hero .row,
.home-hero .col-lg-6,
.home-hero .hero-copy-wrap,
.home-hero .hero-visual,
.home-hero .hero-photo-frame { position: relative; z-index: 1; }
.home-hero h1 {
  color: #101828;
  font-size: clamp(2.45rem, 4.5vw, 4.15rem);
  line-height: 1.02;
  max-width: 11.2ch;
  margin-bottom: 1rem;
}
.home-hero .lead {
  color: #5e6778;
  max-width: 560px;
  font-size: 1.05rem;
}
.hero-copy-wrap { max-width: 575px; }
.home-hero .hero-badge {
  color: #5447df;
  background: rgba(255,255,255,.82);
  border: 1px solid #dcdffd;
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
}
.home-hero .btn-brand-secondary {
  background: rgba(255,255,255,.95);
  color: #182233;
  border-color: #dfe3ea;
}
.home-hero .btn-brand-secondary:hover {
  background:#111827;
  border-color:#111827;
  color:#fff;
}
.hero-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
.hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .78rem .95rem;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid #e7eaf1;
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
  color: #334155;
  font-size: .88rem;
  font-weight: 700;
}
.hero-proof-item i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f1efff;
  color: #6152ea;
  font-size: .95rem;
}
.hero-photo-frame {
  max-width: 575px;
  margin-inline: auto;
  padding: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(224,228,236,.95);
  border-radius: 30px;
  box-shadow: 0 32px 70px rgba(15,23,42,.16);
  transform: rotate(.8deg);
}
.hero-photo-frame::before {
  content: "";
  position: absolute;
  inset: -14px 22px 26px -16px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(109,93,252,.12), rgba(37,183,165,.10));
  z-index: -1;
  transform: rotate(-3deg);
}
.hero-photo {
  width: 100%;
  height: 430px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 22px;
}
.hero-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .8rem .9rem;
  min-width: 190px;
  text-align: left;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(224,228,236,.92);
  box-shadow: 0 18px 45px rgba(15,23,42,.14);
  backdrop-filter: blur(12px);
}
.hero-floating-card-top { top: 26px; left: -38px; }
.hero-floating-card-bottom { right: -30px; bottom: 30px; }
.hero-floating-card strong { display:block; color:#172033; font-size:.84rem; line-height:1.15; }
.hero-floating-card small { display:block; color:#7b8494; font-size:.69rem; margin-top:.15rem; }
.hero-float-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #f0eeff;
  color: #5d4ee9;
}

.tech-strip-section {
  padding: 0 0 2.2rem;
  margin-top: -1.1rem;
}
.tech-strip-shell {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.96));
  border: 1px solid #e8ebf1;
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(15,23,42,.07);
  padding: 1.45rem 1.35rem 1.25rem;
}
.tech-strip-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.tech-strip-heading h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: #101828;
}
.tech-marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.tech-track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: techMarquee 32s linear infinite;
}
.tech-marquee:hover .tech-track { animation-play-state: paused; }
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: .78rem;
  padding: .88rem 1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e8ebf1;
  box-shadow: 0 10px 26px rgba(15,23,42,.05);
  min-width: 165px;
}
.tech-pill-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  border: 1px solid #eef1f5;
  flex: 0 0 42px;
}
.tech-pill-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.tech-pill-label {
  color: #111827;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}
@keyframes techMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1199.98px) {
  .home-hero h1 { max-width: 12ch; }
  .hero-photo { height: 400px; }
}
@media (max-width: 991.98px) {
  .home-hero {
    padding: 5.2rem 0 4.4rem;
    background-position: center top;
  }
  .home-hero h1 {
    max-width: none;
    font-size: clamp(2.2rem, 7vw, 3.4rem);
  }
  .hero-photo-frame { max-width: 620px; }
  .hero-photo { height: 390px; }
  .hero-floating-card-top { left: 12px; top: 18px; }
  .hero-floating-card-bottom { right: 12px; bottom: 18px; }
  .tech-strip-section { margin-top: 0; }
}
@media (max-width: 575.98px) {
  .home-hero { padding: 4.8rem 0 4rem; }
  .hero-proof-list { gap: .65rem; }
  .hero-proof-item {
    width: 100%;
    justify-content: flex-start;
    font-size: .84rem;
  }
  .hero-photo-frame { padding: 9px; border-radius: 24px; }
  .hero-photo { height: 300px; border-radius: 18px; }
  .hero-floating-card { min-width: 0; padding: .62rem .7rem; }
  .hero-floating-card small { display: none; }
  .hero-float-icon { width: 32px; height: 32px; flex-basis: 32px; }
  .tech-strip-shell { padding: 1.15rem .95rem 1rem; border-radius: 20px; }
  .tech-pill { min-width: 145px; padding: .75rem .85rem; }
  .tech-pill-icon { width: 38px; height: 38px; }
  .tech-pill-icon img { width: 20px; height: 20px; }
}

/* ============================================================
   Hero center alignment refinement requested by user
   ============================================================ */
.home-hero-centered {
  background:
    linear-gradient(rgba(248, 244, 236, .84), rgba(248, 244, 236, .88)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=80') center center/cover no-repeat;
  min-height: 0;
  padding: 6rem 0 5.4rem;
}
.home-hero-centered .hero-copy-wrap {
  max-width: 860px;
}
.home-hero-centered h1 {
  max-width: 13.5ch;
  margin: 0 auto 1rem;
  font-size: clamp(2.55rem, 5vw, 4.6rem);
  line-height: 1.02;
}
.home-hero-centered .lead {
  max-width: 760px;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
}
.home-hero-centered .hero-badge {
  margin-bottom: 1.25rem;
}
.home-hero-centered .hero-proof-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .85rem;
}
.home-hero-centered .hero-proof-item {
  background: rgba(255,255,255,.92);
}
.home-hero-centered .hero-visual,
.home-hero-centered .hero-photo-frame,
.home-hero-centered .hero-photo,
.home-hero-centered .hero-floating-card {
  display: none !important;
}
@media (max-width: 991.98px) {
  .home-hero-centered {
    padding: 5.3rem 0 4.7rem;
    background-position: center;
  }
  .home-hero-centered h1 {
    max-width: 14.5ch;
    font-size: clamp(2.2rem, 8vw, 3.6rem);
  }
}
@media (max-width: 575.98px) {
  .home-hero-centered {
    padding: 4.6rem 0 4rem;
  }
  .home-hero-centered h1 {
    max-width: none;
  }
  .home-hero-centered .hero-proof-item {
    width: auto;
  }
}

/* ============================================================
   Hero compact two-line refinement
   ============================================================ */
.home-hero-centered {
  background:
    linear-gradient(rgba(8, 15, 31, .38), rgba(8, 15, 31, .42)),
    url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=82') center 42%/cover no-repeat;
  padding: 4.25rem 0 3.8rem;
  min-height: 0;
}
.home-hero-centered::before,
.home-hero-centered::after {
  display: none;
}
.home-hero-centered .hero-copy-wrap {
  max-width: 1040px;
}
.home-hero-centered h1 {
  max-width: none;
  margin: 0 auto .9rem;
  color: #fff;
  font-size: clamp(2.2rem, 3.55vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-shadow: 0 3px 20px rgba(0,0,0,.28);
}
.home-hero-centered .lead {
  color: rgba(255,255,255,.92);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  line-height: 1.7;
  text-shadow: 0 2px 14px rgba(0,0,0,.22);
}
.home-hero-centered .hero-badge {
  color: #fff;
  background: rgba(15,23,42,.42);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  margin-bottom: 1rem;
}
.home-hero-centered .btn-brand-primary {
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.home-hero-centered .btn-brand-secondary {
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.65);
  color: #111827;
}
.home-hero-centered .hero-proof-list {
  margin-top: 1rem !important;
}
.home-hero-centered .hero-proof-item {
  background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.65);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  padding: .68rem .85rem;
}
.tech-strip-section {
  margin-top: 0;
  padding-top: 1.25rem !important;
}
.tech-strip-shell {
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
}
@media (max-width: 991.98px) {
  .home-hero-centered {
    padding: 4rem 0 3.6rem;
  }
  .home-hero-centered h1 {
    font-size: clamp(2rem, 5.6vw, 3rem);
  }
}
@media (max-width: 767.98px) {
  .home-hero-centered h1 br { display:none; }
}
@media (max-width: 575.98px) {
  .home-hero-centered {
    padding: 3.6rem 0 3.2rem;
  }
  .home-hero-centered h1 {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }
}