html, body {
      margin: 0; padding: 0;
      height: 100%;
      font-family: 'Montserrat', sans-serif;
      background: #140526;
      overflow-x: hidden;
    }
    body { min-height: 100vh; }
    
    .banner-wall {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      text-align: center;
      user-select: none;
      overflow: hidden;
      padding: 0 30px;
    }
    
    #gradientOverlay, #lightPulse, #canvasParticles {
      position: absolute;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
    }
    #gradientOverlay {
      z-index: 1;
      mix-blend-mode: overlay;
      opacity: 0.3;
      background: linear-gradient(45deg, #ff9c00, #fad961, #2543c3 70%, #6339b1);
      background-size: 600% 600%;
      animation: gradientShift 15s linear infinite;
    }
    #lightPulse {
      z-index: 2;
      background: radial-gradient(circle, rgba(255,156,0,0.14) 10%, transparent 80%);
      opacity: 0.2;
      animation: pulse 14s linear infinite;
      animation-delay: 6s;
    }
    @keyframes gradientShift {
      0% {background-position: 0% 50%;}
      50% {background-position: 100% 50%;}
      100% {background-position: 0% 50%;}
    }
    @keyframes pulse {
      0%,100% {opacity: 0.12;}
      50% {opacity: 0.38;}
    }
    
    #canvasParticles {
      z-index: 3;
    }

    .banner-text {
      position: relative;
      z-index: 4;
      font-size: 3.4rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 4px;
      max-width: 85vw;
      margin: 0 auto;
      text-shadow:
        0 0 20px #442d89,
        0 0 35px #ff9b02,
        0 0 60px #ff9000;
      user-select: none;
      color: #fad961;
      transition: color 0.7s, text-shadow 0.7s;
    }
    .color1 {
      color: #fad961;
      text-shadow:
        0 0 20px #442d89,
        0 0 35px #ff9b02,
        0 0 60px #ff9000;
    }
    .color2 {
      color: #ff9c00;
      text-shadow:
        0 0 20px #2d2900,
        0 0 40px #f7da72,
        0 0 30px #f7da72;
    }
    .color3 {
      color: #dabbed;
      text-shadow:
        0 0 15px #5a3ca7,
        0 0 35px #9966cc,
        0 0 45px #9966cc;
    }
    
    .scroll-clue {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #fad961cc;
      font-weight: 600;
      font-size: 1.1rem;
      letter-spacing: 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      user-select: none;
      z-index: 5;
      opacity: 0.75;
    }
    .arrow {
      width: 24px;
      height: 24px;
      border-left: 3px solid #fad961cc;
      border-bottom: 3px solid #fad961cc;
      transform: rotate(-45deg);
      animation: bounce 1.8s infinite;
      box-shadow: 0 0 15px #ff9c0055;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0) rotate(-45deg); }
      50% { transform: translateY(6px) rotate(-45deg); }
    }
  
/* Account for fixed nav when jumping to anchors */
#index, #about, #blog, #contact { scroll-margin-top: 64px; }



/* ---- next inline <style> block ---- */


  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter&display=swap');

  * {
    box-sizing: border-box;
  }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    background: url('bkg/aboutbkg1.png') no-repeat center center fixed;
    background-size: cover;
    color: #ddd;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
  }
  main {
    max-width: 1100px;
    margin: 60px auto 80px;
    padding: 0 25px;
    display: flex;
    gap: 60px;
    align-items: flex-start;
    position: relative;
    z-index: 10; /* above shapes */
  }
  .photo-wrapper {
    flex: 1;
    max-width: 400px;
    position: sticky;
    top: 100px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 10;
  }
  .photo-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
  }
  .cards-container {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 10;
  }
  .card {
    border-radius: 20px;
    padding: 35px 30px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
    border: 1.5px solid rgba(255, 255, 255, 0.13);
    color: #ddd;
    cursor: default;
    position: relative;
  }
  .card h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    margin: 0 0 22px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .card h2 svg {
    max-width: 32px;
    max-height: 32px;
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(255 255 255 / 0.15));
  }
  .card p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    color: #ddd;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  }
  /* Neon tinted cards */
  .card.who {
    background: rgba(104, 92, 143, 0.22);
    border-color: rgba(104, 92, 143, 0.5);
  }
  .card.who h2 {
    color: #7466c2;
    text-shadow: 0 0 6px #7466c2cc;
  }
  .card.vision {
    background: rgba(0, 123, 255, 0.17);
    border-color: rgba(0, 123, 255, 0.55);
  }
  .card.vision h2 {
    color: #007bff;
    text-shadow: 0 0 8px #1a73ffcc;
  }
  .card.journey {
    background: rgba(135, 220, 85, 0.18);
    border-color: rgba(135, 220, 85, 0.55);
  }
  .card.journey h2 {
    color: #8bd93a;
    text-shadow: 0 0 6px #8bd93acc;
  }

  /* Geometric shapes scattered all around the page */
  .parallax-shape {
    position: fixed;
    border-radius: 50%;
    opacity: 0.15;
    filter: drop-shadow(0 0 6px rgba(255 255 255, 0.3));
    pointer-events: none;
    will-change: transform;
  }
  .shape1 { width: 120px; height: 120px; background: #7466c2; top: 10%; left: 5%; }
  .shape2 { width: 80px; height: 80px; background: #00d4de; top: 20%; right: 10%; }
  .shape3 { width: 60px; height: 60px; background: #8bd93a; bottom: 25%; left: 12%; border-radius: 16px; }
  .shape4 { width: 100px; height: 100px; background: #7466c2; top: 60%; left: 8%; }
  .shape5 { width: 40px; height: 40px; background: #00d4de; bottom: 10%; right: 15%; }
  .shape6 { width: 140px; height: 140px; background: #8bd93a; bottom: 15%; right: 25%; border-radius: 18px; }
  .shape7 { width: 60px; height: 60px; background: #7466c2; top: 25%; right: 35%; }
  .shape8 { width: 50px; height: 50px; background: #00d4de; bottom: 35%; right: 5%; border-radius: 10px; }
  .shape9 { width: 70px; height: 70px; background: #8bd93a; top: 45%; left: 30%; border-radius: 50%; }
  .shape10 { width: 90px; height: 90px; background: #007bff; top: 35%; left: 80%; border-radius: 50%; }
  .shape11 { width: 50px; height: 50px; background: #7466c2; bottom: 50%; left: 85%; border-radius: 16px; }
  .shape12 { width: 110px; height: 110px; background: #00d4de; top: 70%; right: 45%; border-radius: 50%; }

  @media (max-width: 900px) {
    main {
      flex-direction: column;
      margin: 30px 20px 50px;
      padding: 0 15px;
    }
    .photo-wrapper {
      max-width: 90vw;
      position: relative;
      top: auto;
      margin-bottom: 40px;
      z-index: 10;
    }
    .cards-container {
      flex: none;
      gap: 30px;
      position: relative;
      z-index: 10;
    }
  }


/* ---- next inline <style> block ---- */


    body {
      margin: 0;
      background: #ffffff url('bkg/blogbkg.png') no-repeat center top;
      background-size: cover;
      font-family: 'Montserrat', sans-serif;
      color: #333;
      padding: 3rem 2rem 1rem;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    header.section-header {
      width: 100%;
      max-width: 960px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      padding-bottom: 0.8rem;
      margin-bottom: 2rem;
    }

    header.section-header h2 {
      margin: 0;
      font-weight: 600;
      font-size: 1.8rem;
      color: #222;
      letter-spacing: 0.04em;
    }

    header.section-header p.caption {
      margin: 0.3rem 0 0;
      font-weight: 400;
      font-size: 1rem;
      color: #666;
      font-style: normal;
    }

    main {
      max-width: 960px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      row-gap: 1rem;
      column-gap: 1.5rem;
      justify-content: center;
    }

    .card {
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        inset 0 0 18px rgba(255, 255, 255, 0.6);
      color: #111;
      padding: 2rem 1.8rem;
      text-decoration: none;
      cursor: pointer;
      user-select: none;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: auto;
      min-height: 180px;
      transition: background-color 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease;
      font-weight: 700;
      font-size: 1.3rem;
      text-align: center;
      line-height: 1.2;
    }

    .card:hover {
      box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.18),
        inset 0 0 22px rgba(255, 255, 255, 0.8);
      transform: translateY(-6px);
      color: #000;
    }

    /* Card titles */
    .title {
      margin: 0 0 0.6rem 0;
      font-weight: 700;
      font-size: 1.35rem;
    }

    /* Card description */
    .description {
      font-weight: 400;
      font-size: 1rem;
      color: #555;
      line-height: 1.35;
      flex-grow: 1;
    }

    /* Widths and background tints for puzzle effect */
    .w1-1 {
      width: 22%;
      min-width: 140px;
      background: rgba(255, 240, 240, 0.32);
      border-color: rgba(255, 160, 160, 0.5);
    }
    .w1-2 {
      width: 33%;
      min-width: 180px;
      background: rgba(240, 255, 240, 0.32);
      border-color: rgba(160, 255, 160, 0.5);
    }
    .w1-3 {
      width: 40%;
      min-width: 220px;
      background: rgba(240, 240, 255, 0.32);
      border-color: rgba(160, 160, 255, 0.5);
    }

    .w2-1 {
      width: 35%;
      min-width: 190px;
      background: rgba(255, 255, 240, 0.32);
      border-color: rgba(255, 255, 160, 0.5);
    }
    .w2-2 {
      width: 30%;
      min-width: 170px;
      background: rgba(255, 240, 255, 0.32);
      border-color: rgba(255, 160, 255, 0.5);
    }
    .w2-3 {
      width: 28%;
      min-width: 160px;
      background: rgba(240, 255, 255, 0.32);
      border-color: rgba(160, 255, 255, 0.5);
    }

    @media (max-width: 840px) {
      header.section-header {
        text-align: center;
      }
      main {
        flex-direction: column;
        row-gap: 1.5rem;
        column-gap: 0;
        align-items: center;
      }
      .card {
        width: 100% !important;
        min-width: auto !important;
        height: auto;
        padding: 1.8rem 1.4rem;
        font-size: 1.25rem;
      }
    }
  

/* ---- next inline <style> block ---- */


    body {
      background: url('assets/contact1.png') no-repeat center center fixed;
      background-size: cover;
      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: #f9f6f1;
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-blend-mode: multiply;
    }
    section.contact-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: 32px;
      box-shadow: 0 12px 48px 0 rgba(255, 215, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.25);
      max-width: 900px;
      width: 100%;
      padding: 54px 60px;
      gap: 50px;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
      transition: box-shadow 0.3s ease;
    }
    section.contact-section:hover {
      box-shadow: 0 16px 64px 0 rgba(255, 215, 0, 0.85);
    }
    section.contact-section .contact-text {
      flex: 1;
      font-size: 1.35rem;
      font-weight: 500;
      line-height: 1.9;
      color: #000;
    }
    section.contact-section .contact-text strong {
      color: #d9b309; /* Warm light yellow */
      font-weight: 700;
      text-shadow: none;
    }
    section.contact-section .email-link {
      display: inline-block;
      margin-top: 30px;
      font-size: 1.6rem;
      font-weight: 300; /* Thin font weight */
      font-family: 'Montserrat', sans-serif;
      color: #332a00; /* Dark warm color */
      text-decoration: none;
      padding: 16px 48px;
      border-radius: 6px;
      background: #ffffff; /* Solid white background */
      box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.15);
      transition: background 0.4s ease, color 0.4s ease, transform 0.25s ease, box-shadow 0.25s ease;
      letter-spacing: 0.05em;
      user-select: none;
      backdrop-filter: none;
    }
    section.contact-section .email-link:hover,
    section.contact-section .email-link:focus {
      background: #f9f5d7; /* Light warm cream */
      color: #6b5500; /* Darker warm shade */
      box-shadow:
        0 6px 20px rgba(255, 215, 0, 0.5);
      outline: none;
      cursor: pointer;
      transform: translateY(-3px);
    }
    section.contact-section .contact-image {
      flex: 1;
      max-width: 340px;
      height: auto;
      border-radius: 28px;
      object-fit: contain;
      box-shadow: 0 12px 32px rgba(255, 215, 0, 0.5);
      background: rgba(255, 255, 255, 0.08);
      padding: 20px;
      backdrop-filter: blur(18px);
      transition: box-shadow 0.4s ease;
    }
    section.contact-section .contact-image:hover {
      box-shadow: 0 16px 48px rgba(255, 215, 0, 0.8);
    }
    @media (max-width: 720px) {
      section.contact-section {
        flex-direction: column;
        padding: 48px 30px;
      }
      section.contact-section .contact-image {
        max-width: 100%;
        margin-top: 36px;
      }
      section.contact-section .contact-text {
        font-size: 1.2rem;
      }
      section.contact-section .email-link {
        font-size: 1.4rem;
        margin-top: 24px;
        padding: 12px 36px;
      }
    }
  

/* ---- next inline <style> block ---- */


  
  
/* ---- next inline <style> block ---- */


  /* Section wrappers: isolate stacking & give breathing room */
  #index, #about, #blog, #contact {
    position: relative;
    isolation: isolate;
    contain: layout paint style; /* avoid cross bleed from abs/filters */
  }
  /* Gentle vertical spacing that won't fight page CSS */
  #about, #blog { --merge-pad: clamp(20px, 4vh, 48px); padding-block: var(--merge-pad); }
  #contact { --merge-pad: clamp(24px, 5vh, 56px); padding-block: var(--merge-pad); }

  /* Blog: remove only the root background to match overall look */
  #blog { background: transparent !important; }

  /* Text visibility tweaks (scoped) */
  #about, #blog { color: #0a0a0a; }
  #about h1, #about h2, #about h3, #about p, #about li,
  #blog  h1, #blog  h2, #blog  h3, #blog  p, #blog  li {
    color: #0a0a0a;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #about a, #blog a { color: #0c63ff; text-underline-offset: 3px; }

  /* Card/box polish (light glass, not heavy) */
  #about .card, #about .box, #about .panel, #about .container,
  #blog  .card, #blog  .box, #blog  .panel, #blog  .container {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(0,0,0,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: clamp(12px, 1.8vw, 22px);
    box-shadow: 0 8px 24px rgba(2,6,23,0.12);
    display: flow-root;
  }
  #about img, #blog img { max-width: 100%; height: auto; border-radius: 10px; }

  /* Ensure banners don't overlap following content */
  #index [class*="banner"], #about [class*="banner"], #blog [class*="banner"], #contact [class*="banner"],
  #index [class*="hero"],   #about [class*="hero"],   #blog [class*="hero"],   #contact [class*="hero"] {
    position: relative;
    z-index: 0;
  }


/* ---- next inline <style> block ---- */


  /* Scope blog layout to avoid cross-section collisions */
  #blog header.section-header {
    width: 100%;
    max-width: 960px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 0.8rem;
    margin: 0 auto 2rem;
  }
  #blog header.section-header h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.9rem;
    color: #f3f4f6;
    letter-spacing: 0.04em;
  }
  #blog header.section-header p.caption {
    margin: 0.3rem 0 0;
    font-weight: 500;
    font-size: 1rem;
    color: #cbd5e1;
  }

  /* Use attached dark background just for the blog section */
  
/* Full-bleed background for Blog using pseudo-element breakout */
#blog { position: relative; isolation: isolate; }
#blog::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: url('bkg/aboutbkg3.png') center / cover no-repeat fixed;
  opacity: 1; /* adjust if you want subtler background */
}
/* Blog grid scoped */
  #blog main {
    max-width: 960px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1.5rem;
    justify-content: center;
    margin-inline: auto;
  }

  /* Dark glassmorphism cards for readability on dark bg */
  #blog .card {
    background: rgba(17, 24, 39, 0.55);           /* ~slate-900 with transparency */
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45), inset 0 0 18px rgba(255,255,255,0.08);
    color: #e5e7eb;                                /* text-slate-200 */
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  #blog .card .title { color: #f8fafc; }          /* near white */
  #blog .card .description { color: #d1d5db; }    /* slate-300 */
  #blog .card:hover {
    box-shadow: 0 16px 38px rgba(0,0,0,0.6), inset 0 0 22px rgba(255,255,255,0.10);
    transform: translateY(-6px);
    color: #ffffff;
    background: rgba(17, 24, 39, 0.65);
  }

  /* Neutralize the pastel tints to consistent dark-glass cards */
  #blog .w1-1, #blog .w1-2, #blog .w1-3,
  #blog .w2-1, #blog .w2-2, #blog .w2-3 {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.22) !important;
  }

  /* Responsive: keep growth behavior */
  @media (max-width: 840px) {
    #blog header.section-header { text-align: center; }
    #blog .card { width: 100% !important; min-width: auto !important; }
  }

  /* === Overflow fixes for About & Blog cards === */
  #about .card, #blog .card { overflow: hidden; }
  #about .card *, #blog .card * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
  }


/* ---- next inline <style> block ---- */


/* ===== Hard reset to ensure banner is first and visible, and blog has full-bleed background ===== */

/* Kill global body flex & backgrounds that were collapsing/centering sections */
body {
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  flex-direction: initial !important;
  margin: 0 !important;
  padding: 0 !important;
  background-image:url('bkg/aboutbkg2.png') !important; /* neutral page base to avoid bleed-through */
  overflow-x: hidden !important;
  min-height: 100vh !important;
}

/* Disable any scroll snapping that might jump past the banner */
html, body, main, #index, #about, #blog, #contact {
  scroll-snap-type: none !important;
  scroll-snap-align: none !important;
}

/* Smooth anchors + header offset */
html { scroll-behavior: smooth; }
#index, #about, #blog, #contact { scroll-margin-top: 80px; }

/* ---------- Banner always visible at the very top ---------- */
#index { position: relative !important; isolation: isolate !important; }
#bannerWall {
  position: relative !important;
  display: block !important;
  min-height: 100vh !important;      /* claim full viewport height */
  overflow: hidden !important;
  background: linear-gradient(135deg, #0b1424 0%, #0c1e3f 60%, #0b1424 100%) !important;
}
#gradientOverlay { position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; }
#lightPulse { position: absolute !important; inset: -20% !important; z-index: 2 !important; pointer-events: none !important; }
#canvasParticles { position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; }
#bannerText, #bannerHero, .banner-text {
  position: absolute !important; inset: 0 !important; z-index: 4 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  text-align: center !important; padding: 16px !important;
}
#bannerText h1, #bannerHero h1, .banner-text h1 { color: #fff !important; margin: 0 !important; font-size: clamp(28px, 6vw, 64px) !important; line-height: 1.05 !important; text-shadow: 0 4px 18px rgba(0,0,0,.45) !important; }
#bannerText p,  #bannerHero p,  .banner-text p  { color: #ff9c00 !important; margin: 10px 0 0 !important; font-size: clamp(14px, 2.2vw, 20px) !important; opacity: .96 !important; text-shadow: 0 2px 8px rgba(0,0,0,.35) !important; }

/* ---------- Blog: background full-bleed; content centered ---------- */
#blog {
  position: relative !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; left: auto !important; right: auto !important;
  isolation: isolate !important;
  overflow: visible !important;
}
#blog::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important; height: 100% !important;
  z-index: -1 !important;
  background: url('bkg/aboutbkg1.png') center / cover no-repeat !important;
  pointer-events: none !important;
}
#blog .blog-inner {
  box-sizing: border-box !important;
  max-width: min(1100px, 92vw) !important;
  margin: 0 auto !important;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 32px) !important;
  text-align: initial !important;
}
#blog, #blog .blog-inner, #blog .card, #blog .panel, #blog .box, #blog .container {
  overflow: visible !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}


/* ---- next inline <style> block ---- */


/* === Contact section centering fix (no‑JS) === */
#contact {
  position: relative !important;
  width: 100% !important;
}
/* Center the main contact block regardless of parent layout */
#contact .contact-section,
#contact .container,
#contact .contact-card,
#contact form {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(900px, 94vw) !important;
}
/* Optional: make the card look balanced on wide screens */
#contact .contact-card {
  box-sizing: border-box !important;
  padding: clamp(16px, 3vw, 28px) !important;
}
/* Guard against inherited text-align that could look off */
#contact,
#contact .contact-section,
#contact .container,
#contact .contact-card,
#contact form {
  text-align: initial !important;
}


/* ---- next inline <style> block ---- */


/* === Section-specific backgrounds (full-bleed) === */
#about, #contact { position: relative; isolation: isolate; overflow: visible; }
#about::before, #contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
/* About background image */
#about::before {
  background: url('bkg/smudge2.png') center / cover no-repeat;
}
/* Contact background image */
#contact::before {
  background: url('assets/contact1.png') center / cover no-repeat;
}


/* ---- next inline <style> block ---- */


  html,body{height:100%;margin:0}
  /* Fullscreen canvas with a dark firey background */
  #canvasParticles{
    position:fixed; inset:0; display:block;
    background: radial-gradient(1200px 700px at 50% 100%, #1a0f08, #0b0705 60%, #070505);
  }

  
  /* press block css

  /* Scoped colors so it doesn't fight your global styles */
.press{
  --press-bg:#ffffff; --press-text:#fff; --press-meta:#4b5563; --press-border:#e5e7eb;
  --press-btn-bg:#f3f4f6; --press-btn-text:#111827;
}
@media (prefers-color-scheme: light){
  .press{
    --press-bg:#13161b; --press-text:#e8eef6; --press-meta:#9aa6b2; --press-border:#2a2f36;
    --press-btn-bg:#1b2027; --press-btn-text:#e8eef6;
  }
}

.press{max-width:1100px;margin:40px auto;padding:0 16px; font-family: 'Montserrat'; }
.press-heading{margin:0 0 14px;font-size:24px;color:var(--press-text);}
.press-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}

.press-card{
  background:var(--press-bg); color:var(--press-text);
  border:1px solid var(--press-border); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;
}
.press-thumb{position:relative;aspect-ratio:16/9;display:block;background:#000;}
.press-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.press-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;background:rgba(0,0,0,.18);}

.press-body{display:flex;flex-direction:column;gap:6px;padding:10px 12px;}
.press-title{font-weight:700;line-height:1.3;}
.press-title a{color:var(--press-text);text-decoration:none;}
.press-title a:hover{text-decoration:underline;}
.press-meta{font-size:13px;color:var(--press-meta);}
.press-blurb{margin:0;color:var(--press-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.press-watch{align-self:flex-start;margin-top:6px;border:1px solid var(--press-border);border-radius:8px;
  padding:6px 10px;text-decoration:none;color:var(--press-text);background:transparent;}
.press-watch:hover{background:var(--press-btn-bg);}

.press-btn{display:block;margin:16px auto 0;border:1px solid var(--press-border);border-radius:10px;
  padding:8px 12px;background:var(--press-btn-bg);color:var(--press-btn-text);font-weight:600;cursor:pointer;}
.is-hidden{display:none;}

/* speaking section */
 .speak { 
    color-scheme: light dark;
    --fg: #0f172a; 
    --fg-dim: #475569; 
    --border: rgba(255,255,255,0.25);
    --glass: rgba(255,255,255,0.10);           /* tweak intensity */
    --pill: rgba(255,255,255,0.14);
    --shadow: 0 12px 30px rgba(0,0,0,0.25);
  }
  @media (prefers-color-scheme: dark) {
    .speak { 
      --fg: #e6edf7; 
      --fg-dim: #a0afc1; 
      --border: rgba(255,255,255,0.22);
      --glass: rgba(20,24,30,0.35);
      --pill: rgba(255,255,255,0.08);
      --shadow: 0 12px 30px rgba(0,0,0,0.45);
    }
  }

  .speak { max-width: 1100px; margin: 40px auto; padding: 0 16px; }
  .speak-wrap {
    position: relative; isolation: isolate;
    display: flex; gap: 22px; align-items: center;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px;
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    overflow: hidden;
  }
  /* subtle watercolor glow */
  .speak-wrap::before {
    content: ""; position: absolute; inset: -40px -10px;
    background:
      radial-gradient(600px 220px at 12% 15%, rgba(124,195,255,0.22), transparent 60%),
      radial-gradient(520px 200px at 88% 12%, rgba(255,151,151,0.16), transparent 60%),
      radial-gradient(560px 220px at 15% 88%, rgba(146,255,195,0.14), transparent 60%);
    pointer-events: none;
    z-index: -1;
  }

  /* image side */
  .speak-media { flex: 0 0 420px; max-width: 100%; }
  .speak-media img { width: 100%; height: auto; display: block; border-radius: 12px; object-fit: cover; }

  /* content side */
  .speak-body { display: flex; flex-direction: column; gap: 10px; color: var(--fg); }
  .speak-title { margin: 0 0 4px; font-size: 26px; }
  .speak-lede { margin: 0; opacity: 0.95; }
  .speak-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
  .speak-badge {
    display: inline-block; font-size: 13px; padding: 6px 10px; border-radius: 999px;
    background: var(--pill); border: 1px solid var(--border); color:blueviolet;
  }
  .speak-list { margin: 6px 0 0 18px; color: var(--fg-dim); }

  .speak-btn {
    align-self: flex-start; margin-top: 10px; text-decoration: none; font-weight: 700;
    border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; 
    color: var(--fg); background:rgba(138, 43, 226, 0.12);
    backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  }
  .speak-btn:hover { background: rgba(255,255,255,0.18); }

  /* stack on small screens */
  @media (max-width: 860px) {
    .speak-wrap { flex-direction: column; padding: 16px; }
    .speak-media { width: 100%; }
  }

  /* graceful fallback if backdrop-filter isn’t supported */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .speak-wrap { background: rgba(255,255,255,0.75); }
    @media (prefers-color-scheme: dark) {
      .speak-wrap { background: rgba(20,24,30,0.85); }
    }
  }