:root {
    --bg: #f5f8fc;
    --bg-alt: #ffffff;
    --accent: #78a1a5;
    --accentbt: #FF0000;
    --accent-soft: #c7dde;
    --text-main: #1f2a3a;
    --text-soft: #5f6b7a;
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.08);
    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --transition-fast: 0.25s ease;
    --max-width: 90%;
  }
.modal{
    display:none;
    position:fixed;
    z-index:99999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
}

.modal-content{
    background:#fff;
    width:90%;
    max-width:900px;
    height:80vh;
    margin:5vh auto;
    border-radius:10px;
    overflow:hidden;
    position:relative;
}

.modal iframe{
    width:100%;
    height:100%;
    border:none;
}

.close{
    position:absolute;
    top:10px;
    right:18px;
    font-size:34px;
    cursor:pointer;
    z-index:10;
    color:#333;
    font-weight:bold;
}
a {
    text-decoration: none;
}

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #ffffff 0, #f5f8fc 40%, #e7eef7 100%);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
  }

  img { max-width: 100%; display: block; }
  button, input, textarea { font-family: inherit; }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---------- HEADER ---------- */
  .header {
    position: sticky;
    top: 0;
    z-index: 999;
background: rgb(222 236 237 / 92%);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }

  .nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

  .brand-logo {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: conic-gradient(from 180deg, #78a1a5, #b7d4d8, #f5f8fc, #78a1a5);
    box-shadow: 0 0 0 1px rgba(120, 161, 165, 0.4), 0 10px 25px rgba(120, 161, 165, 0.3);
  }

  .brand-text { min-width: 0; }

  .brand-title {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-sub {
    font-size: 0.72rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-right { display: flex; align-items: center; gap: 10px; }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    list-style: none;
  }

  .nav-links a {
    text-decoration: none;
    color: var(--text-soft);
    padding: 8px 12px;
    border-radius: 999px;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .nav-links a:hover { background: rgba(120, 161, 165, 0.12); color: var(--text-main); }

  .nav-cta {
    background: linear-gradient(135deg, #78a1a5, #9bbdc1);
    color: #fff !important;
    padding: 9px 18px !important;
    box-shadow: 0 10px 22px rgba(120, 161, 165, 0.4);
  }

  .lang-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(120, 161, 165, 0.12);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid rgba(120, 161, 165, 0.25);
  }

  .lang-btn {
    border: none;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 6px 11px;
    min-height: 40px;
    min-width: 44px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .lang-btn.active {
    background: var(--accentbt);
    color: #fff;
  }

  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
  }

  .hamburger span {
    width: 24px;
    height: 2px;
    background: var(--text-main);
    border-radius: 3px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--bg-alt);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  }

  .mobile-menu.open { display: flex; }

  .mobile-menu a {
    padding: 14px 20px;
    text-decoration: none;
    color: var(--text-main);
    border-top: 1px solid rgba(120, 161, 165, 0.16);
    font-size: 0.95rem;
  }

  .mobile-menu a.nav-cta {
    margin: 12px 20px 16px;
    text-align: center;
    border-top: none;
    border-radius: 999px;
  }

  .mobile-lang {
    display: flex;
    justify-content: center;
    padding: 14px 20px 0;
  }

  @media (max-width: 860px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }

  main { flex: 1; }

  .section { max-width: var(--max-width); margin: 0 auto; padding: 56px 20px; }

  @media (max-width: 600px) {
    .section { padding: 40px 16px; }
  }

  /* ---------- HERO ---------- */
  .hero {
 /*   display: grid;  */display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-top: 44px;
    padding-bottom: 60px;
  }

  @media (max-width: 900px) {
    .hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(120, 161, 165, 0.1);
    color: var(--accent);
    font-size: 0.78rem;
    margin-bottom: 18px;
  }

  .hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #78a1a5;
    box-shadow: 0 0 0 6px rgba(120, 161, 165, 0.25);
    animation: pulse 1.8s infinite;
  }

  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  .hero-title {
    font-size: clamp(2rem, 5vw + 1rem, 3.4rem);
    letter-spacing: 0.01em;
    margin-bottom: 16px;
  }

  .hero-highlight {
    background: linear-gradient(120deg, #78a1a5, #3f6b72);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-subtitle2 { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 6px; }
  .hero-subtitle2 strong { color: var(--text-main); }
  .hero-subtitle2 p { margin: 6px 0; }

  .hero-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }

  .hero-pill {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(120, 161, 165, 0.18);
    font-size: 0.82rem;
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hero-pill span { width: 6px; height: 6px; border-radius: 999px; background: #78a1a5; flex-shrink: 0; }

  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }


  .btn-primary, .btn-ghost {
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.95rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-primary {
    border: none;
    background: linear-gradient(135deg, #78a1a5, #9bbdc1);
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 14px 30px rgba(120, 161, 165, 0.5);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(120, 161, 165, 0.6); }

  .btn-ghost {
    border: 1px solid rgba(120, 161, 165, 0.35);
    background: rgb(225 227 225 / 90%);
    color: var(--text-main);
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .btn-ghost:hover { background: rgba(120, 161, 165, 0.06); transform: translateY(-1px); }

  .hero-note { font-size: 0.8rem; color: var(--text-soft); }

  .hero-visual { padding: 4px; }

  .hero-card {
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, #ffffff, #f5f8fc);
    box-shadow: var(--shadow-soft);
    padding: 22px;
  }

  .hero-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .hero-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .hero-card-tag {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(120, 161, 165, 0.1);
    font-size: 0.72rem;
    color: var(--accent);
  }

  .hero-card-text { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 16px; }
  .hero-card-text strong { color: var(--text-main); }

  .hero-card-energy {
    position: relative;
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at 20% 0%, #ffffff, #c7dde0 40%, #78a1a5 100%);
    overflow: hidden;
    min-height: 140px;
  }

  .energy-orbit {
    position: absolute;
    inset: 18px;
    border-radius: inherit;
    border: 1px dashed rgba(255, 255, 255, 0.7);
    animation: orbit 12s linear infinite;
    pointer-events: none;
  }

  @keyframes orbit { to { transform: rotate(360deg); } }

  .hero-card-energy img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

  .hero-card-footer {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-soft);
  }

  .hero-card-footer span { display: inline-flex; align-items: center; gap: 6px; }
  .hero-card-footer span::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #78a1a5; flex-shrink: 0; }

  /* ---------- SECTION HEADERS ---------- */
  .section-header { margin-bottom: 26px; display: flex; flex-direction: column; gap: 8px; }
  .section-kicker { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
  .section-title { font-size: clamp(1.35rem, 2.4vw + 0.8rem, 1.6rem); letter-spacing: 0.02em; }
  .section-subtitle { font-size: 0.94rem; color: var(--text-soft); max-width: 520px; }

  /* ---------- BIOGRAPHY ---------- */
  .bio-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
  @media (max-width: 860px) { .bio-layout { grid-template-columns: minmax(0, 1fr); } }

  .bio-card, .bio-highlight, .panel, .history-card, .testimonial, .current-info, .contact-card, .contact-side {
    border-radius: var(--radius-xl);
    background: var(--bg-alt);
    box-shadow: var(--shadow-soft);
    padding: 22px;
  }

  .bio-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
  .bio-card p { font-size: 0.94rem; color: var(--text-soft); margin-bottom: 10px; }
  .bio-list { margin-top: 10px; padding-left: 18px; font-size: 0.9rem; color: var(--text-soft); }
  .bio-list li { margin-bottom: 6px; }
  .bio-card .btn-ghost { margin-top: 14px; }

  .bio-highlight {
    background: linear-gradient(135deg, #f5f8fc, #ffffff);
    border: 1px solid rgba(120, 161, 165, 0.18);
    font-size: 0.9rem;
    color: var(--text-soft);
    box-shadow: none;
  }
  .bio-highlight strong { color: var(--text-main); }

  /* ---------- DIPLOMAS & VIDEOS ---------- */
  .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  @media (max-width: 860px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

  .panel { position: relative; }
  .panel h3 { font-size: 1.02rem; margin-bottom: 8px; padding-right: 90px; }
  .panel p { font-size: 0.9rem; color: var(--text-soft); }
  .panel .btn-ghost { margin-top: 12px; }

  .panel-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 0.7rem;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(120, 161, 165, 0.1);
    color: var(--accent);
  }

  .panel-strip { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.78rem; }
  .panel-pill { padding: 6px 10px; border-radius: 999px; background: rgba(245, 248, 252, 0.9); border: 1px dashed rgba(120, 161, 165, 0.25); color: var(--text-soft); }

  /* ---------- HISTORY & TESTIMONIALS ---------- */
  .history-card { margin-bottom: 22px; }
  .history-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
  .history-card p { font-size: 0.9rem; color: var(--text-soft); }
  .history-card .btn-ghost { margin-top: 14px; }

  .testimonials-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  @media (max-width: 860px) { .testimonials-grid { grid-template-columns: minmax(0, 1fr); } }

  .testimonial { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); font-size: 0.9rem; color: var(--text-soft); position: relative; padding-top: 34px; }
  .testimonial::before { content: "\201C"; position: absolute; top: 6px; left: 16px; font-size: 2.1rem; color: rgba(120, 161, 165, 0.25); }
  .testimonial-footer { margin-top: 10px; font-size: 0.78rem; color: var(--accent); }

  /* ---------- CURRENT INFO ---------- */
  .current-info { font-size: 0.9rem; color: var(--text-soft); }
  .current-info strong { color: var(--text-main); }
  .current-info p + p { margin-top: 12px; }

  /* ---------- CONTACT ---------- */
  .contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
  @media (max-width: 860px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

  .contact-card h3 { font-size: 1.02rem; margin-bottom: 8px; }
  .contact-card p { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 10px; }

  .contact-form { display: grid; gap: 12px; margin-top: 10px; }
  .field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-soft); }

  .field input, .field textarea {
    border-radius: var(--radius-md);
    border: 1px solid rgba(120, 161, 165, 0.25);
    padding: 11px 12px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    background: rgba(255, 255, 255, 0.95);
    outline: none;
    transition: border var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
  }

  .field input:focus, .field textarea:focus {
    border-color: rgba(120, 161, 165, 0.7);
    box-shadow: 0 0 0 1px rgba(120, 161, 165, 0.4);
  }

  .field textarea { min-height: 110px; resize: vertical; }

  .contact-form .btn-primary { border: none; width: 100%; }

  .btn-whatsapp {
    background: linear-gradient(135deg, #25d366, #1fb959);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.4);
    gap: 8px;
  }

  .btn-whatsapp:hover { box-shadow: 0 18px 36px rgba(37, 211, 102, 0.5); }

  .whatsapp-icon { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

  .contact-note { font-size: 0.8rem; color: var(--text-soft); margin-top: 10px; }
  .form-status { font-size: 0.85rem; margin-top: 8px; color: var(--accent); display: none; }
  .form-status.visible { display: block; }

  .contact-side { background: linear-gradient(145deg, #ffffff, #f5f8fc); font-size: 0.9rem; color: var(--text-soft); }
  .contact-side h3 { font-size: 1.02rem; color: var(--text-main); margin-bottom: 8px; }
  .contact-side ul { list-style: none; margin-top: 10px; }
  .contact-side li { margin-bottom: 8px; display: flex; align-items: flex-start; gap: 8px; }
  .contact-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; background: #78a1a5; flex-shrink: 0; }

  /* ---------- IMG -  IMAGE TEXT ---------- */
.image {max-width:450px;height:auto;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.2);}
.img-text {margin-top:5%;}
h1 { color: #3f6b72;}

  /* ---------- FOOTER ---------- */
  footer { padding: 24px 20px; text-align: center; font-size: 0.8rem; color: var(--text-soft); }
  .footer-inner { max-width: var(--max-width); margin: 0 auto; border-top: 1px solid rgba(120, 161, 165, 0.18); padding-top: 16px; }
  .footer-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 8px; }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1; transform: none; }
  }

  /* No-JS fallback: keep content visible if scripts fail to load */
  .no-js .reveal { opacity: 1; transform: none; }

  /* ---------- FLOATING WHATSAPP BUTTON ---------- */
  .whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 998;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25d366, #1fb959);
    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }

  .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(37, 211, 102, 0.55); }

  .whatsapp-float svg { width: 28px; height: 28px; fill: #ffffff; }

  @media (max-width: 600px) {
    .whatsapp-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    .whatsapp-float svg { width: 26px; height: 26px; }
  }

  /* ---------- VIDEO TESTIMONIAL ---------- */
  .video-testimonial {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .video-left { flex: 1; }
  .video-left h3 { margin-bottom: 8px; }

  .video-left iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
    margin-top: 10px;
  }

  .video-right { flex: 1; }
  .video-right h2 { margin-top: 0; margin-bottom: 12px; font-size: 1.3rem; }
  .video-right p { line-height: 1.7; margin-bottom: 14px; color: var(--text-soft); font-size: 0.9rem; }

  .watch-more {
    display: inline-block;
    padding: 10px 20px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.88rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .watch-more:hover { background: #5f8a8e; transform: translateY(-1px); }

  @media (max-width: 768px) {
    .video-testimonial { flex-direction: column; }
  }

  /* ================================================================
     MOBILE FIXES
     Added to make every page usable on phones. Ordered last so these
     win over the rules above; !important is only used where it has to
     beat inline style="" attributes coming from the translation
     strings in _db_/.
     ================================================================ */

  /* Anchor links (#bio, #diplomas, #contact...) used to land underneath
     the sticky header. Reserve its height so headings stay visible. */
  section[id],
  .section[id],
  [id]:target {
    scroll-margin-top: 88px;
  }

  @media (max-width: 700px) {

    /* Content was capped at 90% of an already-narrow screen, wasting
       ~36px of a 360px viewport on top of the section padding. */
    :root { --max-width: 100%; }

    /* Header could not fit the full name alongside the language toggle
       and the menu button, so the name was ellipsised to "Wiesla...".
       Drop the strapline and tighten the toggle to buy back space. */
    .brand-sub { display: none; }
    .brand-logo { width: 32px; height: 32px; }
    .nav-container { padding: 10px 16px; gap: 8px; }
    .lang-btn { min-width: 40px; padding: 6px 8px; }
    .lang-toggle { gap: 0; }

    /* Badges were 11px, which is hard going on a phone. */
    .hero-card-tag, .panel-tag { font-size: 0.8rem; }
  }

  /* Below ~520px there is genuinely no room for the wordmark next to the
     controls, so show the logo alone rather than a truncated name. The
     full name is the page's H1 anyway. */
  @media (max-width: 520px) {
    .brand-text { display: none; }

    /* Absolute "Verified" badge overlapped the panel heading and forced
       an empty 90px gutter on panels that have no badge at all. */
    .panel-tag {
      position: static;
      display: inline-block;
      margin-bottom: 10px;
    }
    .panel h3 { padding-right: 0; }

    /* Keep the floating WhatsApp button off the footer text. */
    footer { padding-bottom: 88px; }
  }

  /* ---- Rich content injected via data-i18n-html ----
     Those strings carry inline styles (flex: 0 0 280px, min-width: 300px)
     that are wider than a phone screen, which pushed the page sideways
     and clipped the body copy. Collapse them to a single column. */
  @media (max-width: 760px) {
    .hero-subtitle2 [style*="flex"] {
      flex: 1 1 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 18px !important;
    }

    .hero-subtitle2 img,
    .bio-card img,
    .panel img {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
    }

    .hero-subtitle2 h1 { font-size: 1.5rem; margin-top: 24px; }
    .img-text { margin-top: 0; }
  }

  /* ---- Performance on phones ----
     Backdrop blur and large shadows are expensive to repaint while
     scrolling on mobile GPUs; long-running animations keep the
     compositor awake and drain battery. */
  @media (max-width: 768px) {
    .header {
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
background: rgb(222 236 237 / 92%);
    }

    .bio-card, .bio-highlight, .panel, .history-card,
    .testimonial, .current-info, .contact-card, .contact-side,
    .hero-card {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }

    .energy-orbit { animation-duration: 20s; }
    .hero-badge-dot { animation-duration: 2.6s; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .energy-orbit, .hero-badge-dot { animation: none !important; }
  }