:root {
      --bg-black: #050505;
      --accent-orange: #ff4d00;
      --text-white: #ffffff;
      --text-muted: #999999;
      --glass-bg: rgba(18, 18, 18, 0.45);
      --glass-border: rgba(255, 255, 255, 0.1);
      --font-main: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-display: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    }

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

    a, a:link, a:visited, a:hover, a:active, a:focus {
      text-decoration: none;
      color: inherit;
    }

    html, body {
      width: 100%;
      background-color: #070307;
      color: var(--text-white);
      font-family: var(--font-main);
      overflow-x: hidden;
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* Fixed background canvas for smooth frame scroll animation */
    canvas#animationCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      display: block;
      object-fit: cover;
      pointer-events: none;
      z-index: 0;
    }

    /* Mobile-only static portrait — hidden on desktop */
    .hero-mobile-portrait-wrap { display: none; }

    /* Fixed Base Overlay (Cinematic subtle dark vignette & side gradient) */
    .bg-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: 
        radial-gradient(circle at center, rgba(0, 0, 0, 0.12) 0%, rgba(5, 5, 5, 0.65) 100%),
        linear-gradient(90deg, #070308 0%, transparent 20%, transparent 80%, #070308 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* From About Me Onward: Unified seamless dark cinematic atmosphere
       PERF: backdrop-filter removed from section containers — it caused
       a new GPU compositing layer for every section, causing scroll lag.
       The fixed bg-overlay already provides the cinematic blur effect. */
    .section-about-me,
    .section-academic,
    .section-toolkit,
    .section-projects,
    .section-certifications,
    .section-lorven,
    .section-founders,
    .section-contact,
    footer.site-footer {
      position: relative;
      z-index: 2;
      background:
        radial-gradient(ellipse at 20% 40%, rgba(55, 12, 32, 0.32) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 60%, rgba(220, 20, 60, 0.09) 0%, transparent 55%),
        rgba(5, 2, 6, 0.88);
    }

    /* Preloader — "Loading Portfolio" premium text screen */
    .preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #050505;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      z-index: 9999;
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease;
      animation: preloaderAutoDismiss 2s ease 0s 1 forwards;
    }

    @keyframes preloaderAutoDismiss {
      0%, 85% { pointer-events: all; }
      100% { opacity: 0; visibility: hidden; pointer-events: none; }
    }

    .preloader.hidden {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      animation: none !important;
    }

    /* Main loading text */
    .preloader-text {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(1.3rem, 3.5vw, 1.75rem);
      font-weight: 700;
      letter-spacing: 0.5px;
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 0 28px rgba(255, 77, 0, 0.18);
      animation: preloaderPulse 1.8s ease-in-out infinite;
    }

    /* Thin orange scanning bar */
    .preloader-bar-wrap {
      width: 120px;
      height: 2px;
      background: rgba(255, 255, 255, 0.07);
      border-radius: 2px;
      overflow: hidden;
    }
    .preloader-bar {
      height: 100%;
      width: 45%;
      background: linear-gradient(90deg, transparent, #ff4d00 50%, transparent);
      border-radius: 2px;
      animation: preloaderSlide 1.3s ease-in-out infinite;
    }

    @keyframes preloaderPulse {
      0%, 100% { opacity: 0.72; }
      50%       { opacity: 1; }
    }
    @keyframes preloaderSlide {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(320%); }
    }

    .scroll-track-space {
      height: 450vh;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      pointer-events: none;
      z-index: -1;
    }

    /* Subtle Low Opacity Orange-Red Ambient Glows */
    .glow-orange-red {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 77, 0, 0.16) 0%, rgba(255, 30, 0, 0.06) 50%, transparent 70%);
      filter: blur(90px);
      transform: translateZ(0);
      will-change: transform;
      pointer-events: none;
      z-index: 0;
    }

    .glow-hero { top: 8%; right: -5%; width: 550px; height: 550px; }
    .glow-hero-left { top: 2%; left: -22%; width: 680px; height: 680px; background: radial-gradient(circle, rgba(220, 20, 60, 0.18) 0%, rgba(160, 10, 45, 0.05) 55%, transparent 75%); }
    .glow-hero-right { top: 2%; right: -22%; width: 680px; height: 680px; background: radial-gradient(circle, rgba(255, 77, 0, 0.16) 0%, rgba(200, 20, 60, 0.05) 55%, transparent 75%); }
    .glow-about { top: 35%; left: -10%; width: 600px; height: 600px; }
    .glow-pricing { top: 58%; right: -8%; width: 580px; height: 580px; }
    .glow-cert { top: 80%; left: -5%; width: 520px; height: 520px; }

    /* Content Wrapper — full viewport width, sections manage their own inner containers */
    .content-wrapper {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    /* Scroll Margin Offset for Fixed Navbar Clearance */
    section, [id] {
      scroll-margin-top: 110px;
    }

    /* Navbar Header */
    header.nav-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      padding: 22px 0;
      transition: background 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

    header.nav-header.scrolled {
      padding: 12px 0;
      background: rgba(5, 5, 8, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .nav-header .nav-container {
      max-width: 1680px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand-logo {
      font-family: 'Outfit', var(--font-main);
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.8px;
      color: var(--text-white);
      text-decoration: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .brand-logo:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }

    .nav-link {
      position: relative;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      padding: 4px 0;
      transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 2px;
      background: linear-gradient(90deg, var(--accent-orange), #ff1e56);
      border-radius: 2px;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-link:hover {
      color: #ffffff;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* Pill Buttons */
    .btn-header {
      background: #ffffff;
      color: #000000;
      border: none;
      padding: 6px 6px 6px 20px;
      border-radius: 100px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.2s ease, shadow 0.2s ease;
    }

    .btn-header:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
    }

    .btn-icon-orange {
      width: 32px;
      height: 32px;
      background: var(--accent-orange);
      border-radius: 50%;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .btn-orange {
      background: var(--accent-orange);
      color: #ffffff;
      border: none;
      padding: 6px 6px 6px 20px;
      border-radius: 100px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-orange:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255, 77, 0, 0.4);
    }

    .btn-icon-white {
      width: 32px;
      height: 32px;
      background: #ffffff;
      border-radius: 50%;
      color: var(--accent-orange);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    /* Hero Section */
    .hero-section {
      padding-top: 160px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
      max-width: 1680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: space-between;
      gap: 40px;
      align-items: flex-start;
      width: 100%;
      position: relative;
      z-index: 5;
    }

    .hero-left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-width: 440px;
      width: 100%;
      padding-top: 55px;
    }

    .hero-eyebrow {
      font-size: 18px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }

    .hero-title {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.4rem, 4.3vw, 3.8rem);
      font-weight: 800;
      line-height: 0.96;
      letter-spacing: -1.5px;
      color: var(--text-white);
      text-transform: uppercase;
      margin-bottom: 14px;
      max-width: 420px;
      word-break: break-word;
      text-shadow: 0 12px 35px rgba(0, 0, 0, 0.8);
    }

    /* Hero Social Buttons directly below name */
    .hero-social-buttons {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
      margin-bottom: 20px;
    }
    .hero-social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .hero-social-btn:hover {
      transform: translateY(-3px) scale(1.08);
      background: rgba(255, 77, 0, 0.15);
      border-color: rgba(255, 77, 0, 0.45);
      color: #ff4d00;
      box-shadow: 0 6px 20px rgba(255, 77, 0, 0.25), 0 0 12px rgba(255, 77, 0, 0.2);
    }

    .hero-chip {
      margin-top: 4px;
    }

    .hero-right {
      padding-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      max-width: 360px;
      width: 100%;
      margin-left: auto;
    }

    .hero-right-label {
      font-family: 'Outfit', var(--font-main);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent-orange);
      text-shadow: 0 0 16px rgba(255, 77, 0, 0.35);
    }

    /* Clickable milestone card — CVR and Bhashyam */
    a.milestone-card {
      display: block;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }
    a.milestone-card:focus-visible {
      outline: 2px solid rgba(255, 77, 0, 0.6);
      outline-offset: 4px;
      border-radius: 16px;
    }
    a.milestone-card:hover {
      border-color: rgba(255, 77, 0, 0.52) !important;
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.58),
        0 0 22px rgba(255, 77, 0, 0.15) !important;
      transform: translateY(-4px);
    }
    a.milestone-card:hover .node-dot {
      background: var(--accent-orange);
      box-shadow: 0 0 10px var(--accent-orange);
    }

    .hero-right-title {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.4rem, 4.2vw, 3.8rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -1.5px;
      color: var(--text-white);
      text-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .hero-right-sub {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .sub-accent-dash {
      width: 28px;
      height: 2px;
      background: var(--accent-orange);
      box-shadow: 0 0 10px var(--accent-orange);
      border-radius: 2px;
      display: inline-block;
    }

    .sub-text {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--accent-orange);
    }
    /* ═══════════════════════════════════════
       HERO ENTRANCE ANIMATIONS
       All GPU-composited: opacity + transform only
    ═══════════════════════════════════════ */
    @keyframes heroSlideUp {
      0%   { opacity: 0; transform: translateY(44px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroFadeIn {
      0%   { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes heroSlideRight {
      0%   { opacity: 0; transform: translateX(-28px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes dashReveal {
      0%   { opacity: 0; transform: scaleX(0); transform-origin: left; }
      100% { opacity: 1; transform: scaleX(1); transform-origin: left; }
    }

    /* Staggered hero entrance — triggers once on page load after preloader */
    .hero-eyebrow {
      opacity: 0;
      animation: heroSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;
    }
    .hero-title {
      opacity: 0;
      animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
    }
    .hero-chip {
      opacity: 0;
      animation: heroFadeIn 0.7s ease 1.0s forwards;
    }
    .hero-right-label {
      opacity: 0;
      animation: heroSlideRight 0.7s cubic-bezier(0.16,1,0.3,1) 0.75s forwards;
    }
    .hero-right-title {
      opacity: 0;
      animation: heroSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;
    }
    .hero-right-sub {
      opacity: 0;
      animation: heroFadeIn 0.7s ease 1.15s forwards;
    }

    /* ═══════════════════════════════════════
       FLOATING AMBIENT PARTICLES (hero)
       Tiny dots, opacity+translateY only
    ═══════════════════════════════════════ */
    .hero-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }
    .hero-particle {
      position: absolute;
      border-radius: 50%;
      opacity: 0;
      will-change: transform, opacity;
    }
    @keyframes particleFloat {
      0%   { opacity: 0;    transform: translateY(0) scale(1); }
      15%  { opacity: 0.65; }
      85%  { opacity: 0.45; }
      100% { opacity: 0;    transform: translateY(-80px) scale(0.6); }
    }
    .hp1  { width:3px; height:3px; background:rgba(255,77,0,0.75);  top:72%; left:18%;  animation: particleFloat 5.2s ease-in-out 0.3s infinite; }
    .hp2  { width:2px; height:2px; background:rgba(220,20,60,0.65); top:55%; left:35%;  animation: particleFloat 6.8s ease-in-out 1.1s infinite; }
    .hp3  { width:4px; height:4px; background:rgba(255,77,0,0.55);  top:80%; left:62%;  animation: particleFloat 7.4s ease-in-out 0.7s infinite; }
    .hp4  { width:2px; height:2px; background:rgba(255,120,0,0.7);  top:40%; left:75%;  animation: particleFloat 4.9s ease-in-out 2.0s infinite; }
    .hp5  { width:3px; height:3px; background:rgba(220,20,60,0.5);  top:65%; left:85%;  animation: particleFloat 8.1s ease-in-out 0.5s infinite; }
    .hp6  { width:2px; height:2px; background:rgba(255,77,0,0.6);   top:30%; left:10%;  animation: particleFloat 6.0s ease-in-out 1.6s infinite; }
    .hp7  { width:3px; height:3px; background:rgba(255,100,0,0.5);  top:85%; left:48%;  animation: particleFloat 9.3s ease-in-out 0.9s infinite; }
    .hp8  { width:2px; height:2px; background:rgba(220,20,60,0.6);  top:50%; left:92%;  animation: particleFloat 5.7s ease-in-out 1.4s infinite; }

    /* ═══════════════════════════════════════
       ORANGE LABEL GLOW PULSE
    ═══════════════════════════════════════ */
    @keyframes labelGlowPulse {
      0%, 100% { text-shadow: 0 0 12px rgba(255,77,0,0.18); }
      50%       { text-shadow: 0 0 22px rgba(255,77,0,0.42), 0 0 40px rgba(255,77,0,0.15); }
    }
    .about-label-text,
    .academic-label-text,
    .toolkit-label-text,
    .projects-label-text {
      animation: labelGlowPulse 3.5s ease-in-out infinite;
    }

    /* ═══════════════════════════════════════
       CARD LIGHT-SWEEP HOVER (proj + milestone)
       Pure CSS, GPU: opacity+transform on ::after
    ═══════════════════════════════════════ */
    .proj-card {
      overflow: hidden;
    }
    .proj-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,120,40,0.07) 50%,
        transparent 65%
      );
      transform: translateX(-100%);
      transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
      z-index: 1;
    }
    .proj-card:hover::after {
      transform: translateX(100%);
    }

    .milestone-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,77,0,0.06) 50%,
        transparent 65%
      );
      transform: translateX(-100%);
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
      z-index: 1;
    }
    .milestone-card:hover::after {
      transform: translateX(100%);
    }
    .milestone-card { position: relative; }

    /* ═══════════════════════════════════════
       BEYOND SECTION TITLE — subtle scan-reveal
    ═══════════════════════════════════════ */
    @keyframes scanReveal {
      0%   { opacity: 0; transform: translateY(20px); clip-path: inset(0 100% 0 0); }
      40%  { opacity: 1; }
      100% { opacity: 1; transform: translateY(0);   clip-path: inset(0 0% 0 0); }
    }
    .beyond-reveal.in-view .beyond-title {
      animation: scanReveal 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s both;
    }
    .beyond-reveal.in-view .beyond-accent-tag {
      animation: heroFadeIn 0.6s ease 0.05s both;
    }
    .beyond-reveal.in-view .beyond-desc {
      animation: heroSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) 0.45s both;
    }
    .beyond-reveal.in-view .beyond-scroll-hint {
      animation: heroFadeIn 0.6s ease 0.7s both;
    }

    /* ═══════════════════════════════════════
       NAV LINK — underline animate-in on hover
    ═══════════════════════════════════════ */
    @keyframes navUnderlineIn {
      from { transform: scaleX(0); transform-origin: left; }
      to   { transform: scaleX(1); transform-origin: left; }
    }
    .nav-link:hover::after {
      animation: navUnderlineIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards;
    }

    /* ═══════════════════════════════════════
       PREFERS-REDUCED-MOTION
    ═══════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      .hero-eyebrow, .hero-title, .hero-chip,
      .hero-right-label, .hero-right-title, .hero-right-sub {
        opacity: 1 !important;
        animation: none !important;
      }
      .hero-particle { display: none !important; }
      .about-label-text, .academic-label-text,
      .toolkit-label-text, .projects-label-text {
        animation: none !important;
      }
      .proj-card::after, .milestone-card::after { display: none !important; }
      .beyond-reveal.in-view .beyond-title,
      .beyond-reveal.in-view .beyond-accent-tag,
      .beyond-reveal.in-view .beyond-desc,
      .beyond-reveal.in-view .beyond-scroll-hint { animation: none !important; opacity: 1 !important; }
    }


    .section-behind {
      padding: 60px 0 120px 0;
    }

    .section-tag {
      font-size: 14px;
      font-weight: 700;
      color: var(--accent-orange);
      margin-bottom: 20px;
      display: inline-block;
    }

    .behind-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 60px;
      align-items: flex-start;
      margin-bottom: 60px;
    }

    .behind-title {
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1.5px;
      color: var(--text-white);
    }

    .behind-right {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .behind-desc {
      font-size: 18px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 500;
    }

    .behind-cta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .behind-subtext {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1.4;
    }

    /* 3 Portfolio Project Cards */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .card-item {
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      background: rgba(18, 18, 18, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      aspect-ratio: 4 / 5;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    }

    .card-item:hover {
      transform: translateY(-8px) scale(1.02);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      mix-blend-mode: lighten;
      filter: grayscale(100%) contrast(110%);
      transition: filter 0.4s ease, transform 0.6s ease;
    }

    .card-item:hover .card-img {
      filter: grayscale(0%) contrast(100%);
      transform: scale(1.06);
    }

    /* Pricing & Service Tiers Section */
    .section-pricing {
      position: relative;
      padding: 100px 0 80px 0;
      margin-top: 60px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      text-align: center;
      overflow: hidden;
    }

    .pricing-bg-text {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(6rem, 15vw, 15rem);
      font-weight: 900;
      letter-spacing: -4px;
      color: rgba(255, 255, 255, 0.03);
      text-transform: uppercase;
      pointer-events: none;
      white-space: nowrap;
      z-index: 0;
    }

    .pricing-header {
      position: relative;
      z-index: 1;
      margin-bottom: 60px;
    }

    .pricing-title {
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      font-weight: 800;
      letter-spacing: -1.5px;
      color: #ffffff;
      margin-top: 10px;
    }

    .pricing-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      align-items: stretch;
    }

    .price-card {
      background: rgba(18, 18, 22, 0.65);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 28px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .price-card:hover {
      transform: translateY(-8px);
      border-color: rgba(255, 255, 255, 0.25);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .price-card.featured {
      background: rgba(20, 24, 32, 0.85);
      border-color: rgba(0, 200, 255, 0.4);
      box-shadow: 0 0 35px rgba(0, 180, 255, 0.2);
    }

    .price-card.featured:hover {
      border-color: rgba(0, 220, 255, 0.7);
      box-shadow: 0 0 45px rgba(0, 200, 255, 0.35);
    }

    .price-tier-name {
      font-size: 20px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 8px;
    }

    .price-amount {
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      font-weight: 800;
      color: #ffffff;
      letter-spacing: -1px;
      margin-bottom: 12px;
    }

    .price-desc {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: 28px;
      min-height: 40px;
    }

    .price-features {
      list-style: none;
      padding: 0;
      margin: 0 0 36px 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .price-feature-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
    }

    .check-icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: #ffffff;
      flex-shrink: 0;
    }

    .price-card.featured .check-icon {
      background: rgba(0, 200, 255, 0.25);
      color: #00e5ff;
    }

    .btn-price {
      background: #ffffff;
      color: #000000;
      border: none;
      padding: 14px 28px;
      border-radius: 100px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-price:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25);
    }

    .pricing-toggle-row {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 40px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.8);
    }

    .toggle-switch {
      width: 46px;
      height: 26px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 100px;
      position: relative;
      cursor: pointer;
      padding: 3px;
      transition: background 0.3s ease;
    }

    .toggle-switch.active {
      background: var(--accent-orange);
    }

    .toggle-dot {
      width: 20px;
      height: 20px;
      background: #ffffff;
      border-radius: 50%;
      transition: transform 0.3s ease;
    }

    .toggle-switch.active .toggle-dot {
      transform: translateX(20px);
    }

    /* Certifications Section — first definition (legacy, kept for specificity)
       The second definition at ~line 1374 is the canonical one. */
    .section-certifications {
      margin-top: 0;
      border-top: none;
    }

    .cert-top-pill {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #ffffff;
      padding: 8px 22px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 24px;
      text-decoration: none;
      transition: border-color 0.3s ease, background 0.3s ease;
    }

    .cert-top-pill:hover {
      border-color: var(--accent-orange);
      background: rgba(255, 255, 255, 0.12);
    }

    .cert-main-title {
      font-size: clamp(2.5rem, 5vw, 4.2rem);
      font-weight: 800;
      letter-spacing: -2px;
      color: #ffffff;
      margin-bottom: 50px;
    }

    .cert-arc-viewport {
      position: relative;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 1200px;
    }

    .cert-arc-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      width: 100%;
      transform-style: preserve-3d;
    }

    .cert-card-item {
      position: relative;
      width: 220px;
      height: 300px;
      border-radius: 20px;
      overflow: hidden;
      background: rgba(18, 18, 18, 0.4);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
      flex-shrink: 0;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    /* 3D Arc Curve Positions */
    .cert-card-item:nth-child(1) { transform: rotateY(32deg) translateZ(-160px) scale(0.85); opacity: 0.7; }
    .cert-card-item:nth-child(2) { transform: rotateY(20deg) translateZ(-80px) scale(0.92); opacity: 0.85; }
    .cert-card-item:nth-child(3) { transform: rotateY(10deg) translateZ(-20px) scale(0.97); opacity: 0.95; }
    .cert-card-item:nth-child(4) { transform: rotateY(0deg) translateZ(50px) scale(1.08); border-color: rgba(255, 255, 255, 0.4); box-shadow: 0 0 35px rgba(255, 77, 0, 0.35); opacity: 1; z-index: 10; }
    .cert-card-item:nth-child(5) { transform: rotateY(-10deg) translateZ(-20px) scale(0.97); opacity: 0.95; }
    .cert-card-item:nth-child(6) { transform: rotateY(-20deg) translateZ(-80px) scale(0.92); opacity: 0.85; }
    .cert-card-item:nth-child(7) { transform: rotateY(-32deg) translateZ(-160px) scale(0.85); opacity: 0.7; }

    .cert-card-item:hover {
      transform: translateY(-10px) rotateY(0deg) scale(1.12) !important;
      border-color: var(--accent-orange) !important;
      box-shadow: 0 0 45px rgba(255, 77, 0, 0.5) !important;
      z-index: 20 !important;
      opacity: 1 !important;
    }

    .cert-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      mix-blend-mode: lighten;
    }

    .cert-card-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 16px;
      background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
    }

    .cert-name {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.25;
    }

    .cert-org {
      font-size: 11px;
      color: var(--accent-orange);
      font-weight: 600;
    }

    .cert-features-row {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin-top: 60px;
      flex-wrap: wrap;
    }

    .cert-feature-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .cert-feature-title {
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
    }

    .cert-feature-sub {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.5);
    }
    /* Scale & Lead Gen Contact Section */
    .section-scale {
      position: relative;
      padding: 100px 0 120px 0;
      margin-top: 80px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }



    .scale-header {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 32px;
      margin-bottom: 70px;
    }

    .scale-title-box {
      display: flex;
      flex-direction: column;
    }

    .scale-heading-top {
      font-size: clamp(3.2rem, 6.5vw, 6.2rem);
      font-weight: 800;
      letter-spacing: -2px;
      line-height: 0.95;
      color: #ffffff;
      text-transform: uppercase;
    }

    .scale-heading-main {
      display: flex;
      align-items: baseline;
      gap: 20px;
      flex-wrap: wrap;
    }

    .scale-grow-text {
      font-size: clamp(4.5rem, 9.5vw, 8.8rem);
      font-weight: 900;
      letter-spacing: -3px;
      line-height: 0.9;
      color: #ffffff;
      text-transform: uppercase;
    }

    .scale-company-box {
      display: flex;
      flex-direction: column;
      font-size: clamp(2rem, 3.8vw, 3.6rem);
      font-weight: 800;
      letter-spacing: -1.5px;
      line-height: 1.05;
      color: #ffffff;
      text-transform: uppercase;
    }

    .scale-talk-card {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      padding: 16px 20px;
      max-width: 220px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .talk-title {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .talk-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.6);
      line-height: 1.35;
    }

    .scale-form {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 44px;
    }

    .form-grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px 60px;
    }

    .field-group {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .field-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 12px;
    }

    .field-input, .field-select {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      color: #ffffff;
      font-family: var(--font-main);
      font-size: 15px;
      font-weight: 400;
      padding: 8px 0 14px 0;
      outline: none;
      transition: border-color 0.3s ease, color 0.3s ease;
    }

    .field-input::placeholder {
      color: rgba(255, 255, 255, 0.35);
    }

    .field-input:focus, .field-select:focus {
      border-bottom-color: var(--accent-orange);
    }

    .field-select {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      padding-right: 28px;
    }

    .field-select option {
      background: #111111;
      color: #ffffff;
      padding: 10px;
    }

    .select-wrapper {
      position: relative;
      width: 100%;
    }

    .select-wrapper::after {
      content: '';
      position: absolute;
      right: 4px;
      bottom: 18px;
      width: 8px;
      height: 8px;
      border-right: 2px solid rgba(255, 255, 255, 0.5);
      border-bottom: 2px solid rgba(255, 255, 255, 0.5);
      transform: rotate(45deg);
      pointer-events: none;
      transition: border-color 0.3s ease;
    }

    .select-wrapper:hover::after {
      border-color: var(--accent-orange);
    }

    .form-footer-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .scale-submit-pill {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      padding: 14px 44px;
      border-radius: 100px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-width: 220px;
      transition: all 0.3s ease;
    }

    .scale-submit-pill:hover {
      background: #ffffff;
      color: #000000;
      border-color: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
    }

    /* Footer / Bottom spacing */
    footer.site-footer {
      padding: 60px 0 40px 0;
      text-align: center;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.4);
    }

    /* ══════════════════════════════════════════════
       NAV CTA BUTTON
    ══════════════════════════════════════════════ */
    /* ══════════════════════════════════════════════
       NAV CTA — Premium pill + orange circle arrow
    ══════════════════════════════════════════════ */
    .nav-cta,
    a.nav-cta,
    a.nav-cta:link,
    a.nav-cta:visited,
    a.nav-cta:hover,
    a.nav-cta:active,
    a.nav-cta:focus {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      color: #111111 !important;
      text-decoration: none !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      padding: 5px 5px 5px 14px !important;
      border-radius: 100px !important;
      letter-spacing: 0.15px !important;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease !important;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22) !important;
      white-space: nowrap !important;
    }
    .nav-cta:hover,
    a.nav-cta:hover {
      transform: translateY(-1px) scale(1.025) !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32) !important;
      background: #ffffff !important;
      color: #111111 !important;
    }
    .nav-cta-text {
      color: #111111 !important;
    }
    .nav-cta-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #ff4d00;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
    }
    .nav-cta:hover .nav-cta-circle {
      transform: scale(1.08);
      background: #ff3300;
    }
    .nav-cta-circle svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: #fff;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.25s ease;
    }
    .nav-cta:hover .nav-cta-circle svg {
      transform: translateX(1px);
    }

    /* ══════════════════════════════════════════════
       CERTIFICATIONS SECTION
    ══════════════════════════════════════════════ */
    .section-certifications {
      position: relative;
      padding: 60px 0;
      overflow: hidden;
    }

    .cert-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .cert-header-block {
      margin-bottom: 56px;
      text-align: center;
    }

    .cert-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-bottom: 16px;
      justify-content: center;
    }

    .cert-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      color: var(--accent-orange);
      text-transform: uppercase;
      animation: labelGlowPulse 3.5s ease-in-out infinite;
    }

    .cert-main-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.2rem, 3.8vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -1.2px;
      color: #fff;
      margin-bottom: 14px;
    }

    .cert-subtext {
      font-size: 16px;
      color: rgba(255,255,255,0.6);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.65;
    }

    .cert-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .cert-card {
      position: relative;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 20px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      cursor: default;
      overflow: hidden;
      transition:
        transform 0.38s cubic-bezier(0.16,1,0.3,1),
        border-color 0.38s ease,
        box-shadow 0.38s ease;
      will-change: transform;
    }

    .cert-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,120,40,0.06) 50%, transparent 65%);
      transform: translateX(-100%);
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .cert-card:hover::after { transform: translateX(100%); }

    .cert-card:hover {
      transform: translateY(-6px) scale(1.012);
      border-color: rgba(255,77,0,0.28);
      box-shadow: 0 18px 42px rgba(0,0,0,0.55), 0 0 22px rgba(255,77,0,0.1);
    }

    .cert-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(255,77,0,0.12);
      border: 1px solid rgba(255,77,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease;
    }
    .cert-card:hover .cert-icon {
      transform: scale(1.12) rotate(-3deg);
      background: rgba(255,77,0,0.2);
    }

    .cert-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      font-family: 'Space Mono', monospace;
    }

    .cert-badge-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,0.25);
    }

    .cert-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
    }

    .cert-org {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      font-weight: 500;
    }

    .cert-year {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--accent-orange);
      letter-spacing: 1.5px;
    }

    .cert-view-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      margin-top: auto;
      transition: color 0.25s ease;
    }
    .cert-view-btn:hover { color: var(--accent-orange); }
    .cert-view-arrow { font-size: 12px; transition: transform 0.25s ease; }
    .cert-view-btn:hover .cert-view-arrow { transform: translateX(3px); }

    .cert-notice {
      text-align: center;
      margin-top: 40px;
      font-size: 13px;
      color: rgba(255,255,255,0.3);
      font-style: italic;
      font-family: 'Space Mono', monospace;
    }

    /* ══════════════════════════════════════════════
       LORVEN ENTERPRISE — FULL PREMIUM BOX LAYOUT
    ══════════════════════════════════════════════ */
    @keyframes lorvenGoldPulse {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50%       { opacity: 0.82; transform: scale(1.07); }
    }
    @keyframes lorvenLogoReveal {
      0%   { opacity: 0; transform: translateY(22px) scale(0.95); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes lorvenStreakLeft {
      0%   { opacity: 0; transform: translateX(-60px) scaleX(0.3); }
      60%  { opacity: 0.55; }
      100% { opacity: 0; transform: translateX(0) scaleX(1); }
    }
    @keyframes lorvenStreakRight {
      0%   { opacity: 0; transform: translateX(60px) scaleX(0.3); }
      60%  { opacity: 0.55; }
      100% { opacity: 0; transform: translateX(0) scaleX(1); }
    }
    @keyframes lorvenCornerPulse {
      0%, 100% { opacity: 0.35; }
      50%       { opacity: 0.7; }
    }

    .section-lorven {
      position: relative;
      padding: 40px 0 0;
      overflow: hidden;
    }

    /* Outer section keeps atmospheric background continuity — no overrides */
    .section-lorven::before { display: none; }

    .lorven-container {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 1;
    }

    /* THE PREMIUM BOX */
    .lorven-box {
      position: relative;
      background: linear-gradient(
        145deg,
        rgba(8, 14, 38, 0.92) 0%,
        rgba(5, 8, 22, 0.96) 40%,
        rgba(10, 18, 48, 0.90) 100%
      );
      border: 1px solid rgba(245, 166, 35, 0.22);
      border-radius: 28px;
      padding: 52px 56px 44px;
      overflow: hidden;
      transition:
        box-shadow 0.45s ease,
        border-color 0.45s ease;
    }

    /* Cursor-following glow layer */
    .lorven-cursor-glow {
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background: radial-gradient(
        ellipse at center,
        rgba(245,166,35,0.12) 0%,
        rgba(30,58,128,0.08) 40%,
        transparent 70%
      );
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: opacity 0.35s ease;
      opacity: 0;
      z-index: 0;
      will-change: transform;
    }
    .lorven-box:hover .lorven-cursor-glow { opacity: 1; }
    .lorven-box:hover {
      border-color: rgba(245,166,35,0.42);
      box-shadow:
        0 0 0 1px rgba(245,166,35,0.08),
        0 24px 64px rgba(0,0,0,0.7),
        0 0 50px rgba(245,166,35,0.07),
        inset 0 1px 0 rgba(245,166,35,0.12);
    }

    /* Corner accent decorations */
    .lorven-corner {
      position: absolute;
      width: 40px;
      height: 40px;
      pointer-events: none;
      z-index: 0;
      animation: lorvenCornerPulse 3.5s ease-in-out infinite;
    }
    .lorven-corner-tl { top: 14px; left: 14px; border-top: 1.5px solid rgba(245,166,35,0.55); border-left: 1.5px solid rgba(245,166,35,0.55); border-radius: 6px 0 0 0; }
    .lorven-corner-tr { top: 14px; right: 14px; border-top: 1.5px solid rgba(245,166,35,0.55); border-right: 1.5px solid rgba(245,166,35,0.55); border-radius: 0 6px 0 0; animation-delay: 0.9s; }
    .lorven-corner-bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid rgba(245,166,35,0.55); border-left: 1.5px solid rgba(245,166,35,0.55); border-radius: 0 0 0 6px; animation-delay: 1.8s; }
    .lorven-corner-br { bottom: 14px; right: 14px; border-bottom: 1.5px solid rgba(245,166,35,0.55); border-right: 1.5px solid rgba(245,166,35,0.55); border-radius: 0 0 6px 0; animation-delay: 2.7s; }

    /* Ambient blue glow in top-left inside box */
    .lorven-box-glow-blue {
      position: absolute;
      top: -80px;
      left: -80px;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(30,58,128,0.28) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    /* Ambient gold glow bottom-right inside box */
    .lorven-box-glow-gold {
      position: absolute;
      bottom: -60px;
      right: -40px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(245,166,35,0.13) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
      animation: lorvenGoldPulse 5s ease-in-out infinite;
    }

    /* Inner content z-index context */
    .lorven-box-inner {
      position: relative;
      z-index: 1;
    }

    /* Logo area */
    .lorven-logo-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 32px;
      position: relative;
    }
    .lorven-logo-glow {
      position: absolute;
      width: 280px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(245,166,35,0.2) 0%, transparent 70%);
      animation: lorvenGoldPulse 4s ease-in-out infinite;
      pointer-events: none;
    }
    .lorven-logo-img {
      width: min(300px, 65vw);
      height: auto;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 0 16px rgba(245,166,35,0.2));
      transition:
        transform 0.45s cubic-bezier(0.16,1,0.3,1),
        filter 0.45s ease;
      cursor: pointer;
    }
    .lorven-logo-img:hover {
      transform: scale(1.05);
      filter:
        drop-shadow(0 0 24px rgba(245,166,35,0.55))
        drop-shadow(0 0 6px rgba(245,166,35,0.3))
        brightness(1.1);
    }

    /* Header block inside box */
    .lorven-header-block {
      text-align: center;
      margin-bottom: 36px;
    }
    .lorven-label-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
    }
    .lorven-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: #F5A623;
      animation: labelGlowPulse 3.5s ease-in-out infinite;
    }
    @keyframes goldSubheadingGlow {
      0%, 100% {
        text-shadow: 0 0 10px rgba(245, 166, 35, 0.25), 0 0 20px rgba(245, 166, 35, 0.1);
        color: rgba(255, 255, 255, 0.85);
      }
      50% {
        text-shadow: 0 0 20px rgba(245, 166, 35, 0.5), 0 0 32px rgba(245, 166, 35, 0.28);
        color: #F5A623;
      }
    }

    .lorven-main-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2rem, 4.2vw, 3.2rem);
      font-weight: 800;
      letter-spacing: -1.2px;
      color: #ffffff;
      margin-bottom: 10px;
      line-height: 1.18;
      text-shadow: 0 0 24px rgba(245, 166, 35, 0.22), 0 2px 4px rgba(0, 0, 0, 0.5);
      transition: text-shadow 0.4s ease, color 0.4s ease;
    }
    .lorven-box:hover .lorven-main-heading {
      text-shadow: 0 0 32px rgba(245, 166, 35, 0.4), 0 0 14px rgba(245, 166, 35, 0.25);
    }
    .lorven-sub-heading {
      font-family: 'Outfit', var(--font-main);
      font-size: clamp(0.95rem, 1.6vw, 1.25rem);
      font-weight: 700;
      letter-spacing: 0.8px;
      margin-bottom: 16px;
      animation: goldSubheadingGlow 4.5s ease-in-out infinite;
    }
    .lorven-desc {
      font-size: 14.5px;
      line-height: 1.68;
      color: rgba(255,255,255,0.58);
      max-width: 580px;
      margin: 0 auto;
    }

    /* Thin gold divider line */
    .lorven-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(245,166,35,0.35) 40%, rgba(245,166,35,0.35) 60%, transparent 100%);
      margin: 32px 0;
    }

    /* Pillars — 4-col row */
    .lorven-pillars {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 32px;
    }
    .lorven-pillar {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(245,166,35,0.14);
      border-radius: 14px;
      padding: 20px 16px 18px;
      transition:
        transform 0.32s cubic-bezier(0.16,1,0.3,1),
        border-color 0.32s ease,
        box-shadow 0.32s ease;
      will-change: transform;
      position: relative;
      overflow: hidden;
    }
    .lorven-pillar::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(245,166,35,0.05) 50%, transparent 65%);
      transform: translateX(-100%);
      transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .lorven-pillar:hover::after { transform: translateX(100%); }
    .lorven-pillar:hover {
      transform: translateY(-4px) scale(1.02);
      border-color: rgba(245,166,35,0.38);
      box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 16px rgba(245,166,35,0.09);
    }
    .pillar-icon {
      font-size: 22px;
      margin-bottom: 9px;
      display: block;
    }
    .pillar-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #F5A623;
      margin-bottom: 8px;
    }
    .pillar-items {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .pillar-items li {
      font-size: 12.5px;
      color: rgba(255,255,255,0.58);
      padding-left: 12px;
      position: relative;
    }
    .pillar-items li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(245,166,35,0.5);
    }

    /* CTA */
    .lorven-cta-wrap {
      text-align: center;
      margin-top: 0;
    }
    .lorven-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #1E3A80 0%, #0F1F5C 100%);
      border: 1px solid rgba(245,166,35,0.42);
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      padding: 13px 28px;
      border-radius: 100px;
      letter-spacing: 0.3px;
      transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease, border-color 0.28s ease;
      box-shadow: 0 6px 20px rgba(15,31,92,0.45);
    }
    .lorven-cta-btn:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 12px 28px rgba(245,166,35,0.22), 0 0 0 1px rgba(245,166,35,0.45);
      border-color: rgba(245,166,35,0.62);
    }
    .lorven-cta-btn .cta-arrow { font-size: 13px; transition: transform 0.25s ease; }
    .lorven-cta-btn:hover .cta-arrow { transform: translateX(4px); }

    /* ══════════════════════════════════════════════
       FOUNDERS SECTION
    ══════════════════════════════════════════════ */
    .section-founders {
      position: relative;
      padding: 24px 0 50px;
      overflow: hidden;
    }

    .founders-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .founders-header-block {
      text-align: center;
      margin-bottom: 36px;
    }

    .founders-label-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .founders-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--accent-orange);
      animation: labelGlowPulse 3.5s ease-in-out infinite;
    }

    .founders-main-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.2rem, 3.8vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -1.2px;
      color: #fff;
      margin-bottom: 12px;
    }

    .founders-subtext {
      font-size: 16px;
      color: rgba(255,255,255,0.58);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.65;
    }

    .founders-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .founder-card {
      position: relative;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 22px;
      padding: 36px 28px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
      overflow: hidden;
      transition:
        transform 0.38s cubic-bezier(0.16,1,0.3,1),
        border-color 0.38s ease,
        box-shadow 0.38s ease;
      will-change: transform;
    }

    .founder-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 35%, rgba(255,77,0,0.05) 50%, transparent 65%);
      transform: translateX(-100%);
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .founder-card:hover::after { transform: translateX(100%); }

    .founder-card:hover {
      transform: translateY(-7px) scale(1.015);
      border-color: rgba(255,77,0,0.28);
      box-shadow: 0 22px 48px rgba(0,0,0,0.55), 0 0 24px rgba(255,77,0,0.1);
    }

    .founder-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,77,0,0.2) 0%, rgba(30,58,128,0.35) 100%);
      border: 2px solid rgba(255,77,0,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    }
    .founder-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      border-radius: 50%;
      display: block;
    }
    .founder-card:hover .founder-avatar {
      transform: scale(1.08);
      border-color: rgba(255,77,0,0.55);
      box-shadow: 0 0 22px rgba(255,77,0,0.35);
    }

    .founder-name {
      font-family: 'Outfit', var(--font-main);
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }

    .founder-role-primary {
      font-family: 'Outfit', var(--font-main);
      font-size: 13.5px;
      font-weight: 700;
      color: var(--accent-orange);
      letter-spacing: 0.3px;
      margin-bottom: 3px;
    }

    .founder-role-secondary {
      font-family: 'Space Mono', monospace;
      font-size: 10.5px;
      color: rgba(255,255,255,0.38);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .founder-bio {
      font-size: 13.5px;
      line-height: 1.62;
      color: rgba(255,255,255,0.55);
      margin-bottom: 24px;
    }

    .founder-socials {
      display: flex;
      gap: 10px;
      margin-top: auto;
      justify-content: center;
    }

    .founder-social-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .founder-social-btn:hover {
      background: rgba(255,77,0,0.15);
      border-color: rgba(255,77,0,0.35);
      color: var(--accent-orange);
      transform: translateY(-2px);
    }

    /* Founder website button */
    .founder-website-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 100px;
      padding: 8px 18px;
      margin-top: auto;
      transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
    .founder-website-btn:hover {
      color: var(--accent-orange);
      border-color: rgba(255,77,0,0.35);
      box-shadow: 0 4px 14px rgba(255,77,0,0.15);
      transform: translateY(-2px);
    }
    .founder-website-arrow { font-size: 12px; transition: transform 0.25s ease; }
    .founder-website-btn:hover .founder-website-arrow { transform: translateX(3px); }

    /* ══════════════════════════════════════════════
       CONTACT SECTION — REDESIGNED TWO-COLUMN
    ══════════════════════════════════════════════ */
    .section-contact {
      position: relative;
      padding: 60px 0 90px;
      overflow: hidden;
    }

    .contact-container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .contact-header-block {
      text-align: center;
      margin-bottom: 52px;
    }

    .contact-label-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .contact-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--accent-orange);
      animation: labelGlowPulse 3.5s ease-in-out infinite;
    }

    .contact-main-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.4rem, 4vw, 3.8rem);
      font-weight: 800;
      letter-spacing: -1.4px;
      color: #fff;
      margin-bottom: 12px;
    }

    .contact-subtext {
      font-size: 16px;
      color: rgba(255,255,255,0.58);
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.65;
    }

    /* Two-column layout */
    .contact-body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
    }

    /* ==========================================================================
       CONTACT SECTION — PREMIUM SAAS-LEVEL MICRO-INTERACTIONS
       ========================================================================== */

    /* LEFT: FORM PANEL (MAIN CONTAINER) */
    .contact-form-panel {
      position: relative;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 22px;
      padding: 36px 32px;
      overflow: hidden;
      transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
      will-change: transform;
    }
    .contact-form-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 77, 0, 0.65) 50%, transparent 100%);
      opacity: 0.45;
      transition: opacity 0.35s ease, height 0.35s ease;
      pointer-events: none;
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-form-panel:hover {
        transform: translateY(-3px) scale(1.006);
        border-color: rgba(255, 77, 0, 0.32);
        box-shadow:
          0 20px 48px rgba(0, 0, 0, 0.6),
          0 0 28px rgba(255, 77, 0, 0.12),
          inset 0 1px 0 rgba(255, 77, 0, 0.15);
        background: rgba(255, 255, 255, 0.038);
      }
      .contact-form-panel:hover::before {
        opacity: 1;
        height: 2.5px;
      }
    }
    .contact-panel-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 24px;
      letter-spacing: -0.2px;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .contact-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .contact-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .contact-field label {
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
      transition: color 0.25s ease;
    }
    .contact-field:focus-within label {
      color: rgba(255, 77, 0, 0.85);
    }

    /* Input & Textarea Micro-interactions */
    .contact-field input,
    .contact-field textarea,
    .contact-field select {
      width: 100%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 14px;
      font-family: var(--font-main);
      color: #fff;
      outline: none;
      box-sizing: border-box;
      transition:
        border-color 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.26s ease;
    }

    .contact-field input::placeholder,
    .contact-field textarea::placeholder {
      color: rgba(255, 255, 255, 0.32);
      transition: opacity 0.25s ease, color 0.25s ease;
    }

    @media (hover: hover) and (pointer: fine) {
      .contact-field input:hover,
      .contact-field textarea:hover,
      .contact-field select:hover {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.055);
        box-shadow: 0 0 12px rgba(255, 77, 0, 0.06);
      }
    }

    .contact-field input:focus,
    .contact-field textarea:focus,
    .contact-field select:focus {
      border-color: rgba(255, 77, 0, 0.65);
      background: rgba(255, 255, 255, 0.065);
      box-shadow:
        0 0 0 3px rgba(255, 77, 0, 0.12),
        0 0 18px rgba(255, 77, 0, 0.10);
    }
    .contact-field input:focus::placeholder,
    .contact-field textarea:focus::placeholder {
      opacity: 0.45;
    }

    .contact-field input.invalid,
    .contact-field textarea.invalid {
      border-color: rgba(220, 50, 50, 0.65);
      box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.12);
    }

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

    /* Send Message Button Micro-interactions */
    .contact-submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #ff4d00 0%, #ff1e56 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      border: none;
      padding: 14px 28px;
      border-radius: 100px;
      cursor: pointer;
      letter-spacing: 0.3px;
      box-shadow: 0 6px 22px rgba(255, 77, 0, 0.28);
      transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        background 0.28s ease;
      width: 100%;
      will-change: transform;
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-submit-btn:hover {
        transform: translateY(-2px) scale(1.015);
        box-shadow:
          0 12px 32px rgba(255, 77, 0, 0.42),
          0 0 16px rgba(255, 77, 0, 0.22);
      }
    }
    .contact-submit-btn:active {
      transform: translateY(0) scale(0.98) !important;
      transition-duration: 0.1s !important;
    }
    .contact-submit-btn .cta-arrow {
      font-size: 14px;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      display: inline-block;
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-submit-btn:hover .cta-arrow {
        transform: translateX(4px);
      }
    }

    .contact-form-notice {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.3);
      margin-top: 10px;
      font-style: italic;
      min-height: 20px;
      transition: color 0.3s ease;
    }
    .contact-form-notice.state-success {
      color: #22d65f;
      font-style: normal;
      font-weight: 600;
    }
    .contact-form-notice.state-error {
      color: rgba(240, 80, 80, 0.9);
      font-style: normal;
      font-weight: 600;
    }
    /* Button loading state */
    .contact-submit-btn.is-loading {
      opacity: 0.72;
      cursor: not-allowed;
      pointer-events: none;
    }
    .contact-submit-btn.is-loading .btn-send-text { display: none; }
    .contact-submit-btn .btn-loading-text { display: none; }
    .contact-submit-btn.is-loading .btn-loading-text { display: inline; }

    /* Keyboard focus states for accessibility */
    :focus-visible {
      outline: 2px solid var(--accent-orange);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .contact-field input:focus-visible,
    .contact-field textarea:focus-visible {
      outline: none;
      border-color: rgba(255, 77, 0, 0.65);
      box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.14);
    }

    /* RIGHT: INFO PANEL */
    .contact-info-panel {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .contact-info-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 18px;
      padding: 24px 24px;
      transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.32s ease,
        background 0.3s ease;
      will-change: transform;
    }
    .contact-email-card {
      display: block;
      text-decoration: none;
      cursor: pointer;
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-email-card:hover {
        transform: translateY(-3px) scale(1.01);
        border-color: rgba(255, 77, 0, 0.38);
        background: rgba(255, 77, 0, 0.06);
        box-shadow:
          0 14px 32px rgba(0, 0, 0, 0.5),
          0 0 22px rgba(255, 77, 0, 0.14);
      }
      .contact-email-card:hover .contact-info-icon {
        background: rgba(255, 77, 0, 0.22);
        border-color: rgba(255, 77, 0, 0.42);
        transform: scale(1.08);
      }
    }

    .contact-info-section-title {
      font-family: 'Space Mono', monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.35);
      margin-bottom: 16px;
    }

    .contact-info-item {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
      margin-bottom: 14px;
      transition: opacity 0.25s ease;
    }
    .contact-info-item:last-child { margin-bottom: 0; }
    .contact-info-item:hover { opacity: 0.82; }

    .contact-info-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 77, 0, 0.1);
      border: 1px solid rgba(255, 77, 0, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      transition:
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-info-item:hover .contact-info-icon {
        background: rgba(255, 77, 0, 0.2);
        transform: scale(1.08);
      }
    }

    .contact-info-detail {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .contact-info-label {
      font-family: 'Space Mono', monospace;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.32);
    }
    .contact-info-value {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.82);
      word-break: break-all;
    }

    /* Social links — full-width stacked rows */
    .contact-socials {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .contact-social-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 14px 18px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.75);
      transition:
        background 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease;
      position: relative;
      overflow: hidden;
      will-change: transform;
    }
    .contact-social-btn::after {
      content: '';
      position: absolute;
      right: 18px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid rgba(255, 255, 255, 0.3);
      border-top: 2px solid rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) rotate(45deg);
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .contact-social-btn:hover {
        background: rgba(255, 77, 0, 0.09);
        border-color: rgba(255, 77, 0, 0.35);
        color: #fff;
        transform: translateX(4px) scale(1.01);
        box-shadow:
          0 6px 20px rgba(0, 0, 0, 0.4),
          0 0 16px rgba(255, 77, 0, 0.12),
          inset 0 0 0 1px rgba(255, 77, 0, 0.15);
      }
      .contact-social-btn:hover::after {
        border-color: var(--accent-orange);
        transform: translateY(-50%) rotate(45deg) translateX(3px);
      }
      .contact-social-btn:hover .contact-social-icon {
        background: rgba(255, 77, 0, 0.22);
        border-color: rgba(255, 77, 0, 0.4);
        transform: scale(1.08);
      }
    }
    .contact-social-btn:active {
      transform: translateY(0) scale(0.98) !important;
      transition-duration: 0.1s !important;
    }
    .contact-social-icon {
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 77, 0, 0.08);
      border: 1px solid rgba(255, 77, 0, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition:
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .contact-social-label {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
    }

    /* =====================================================================
       COMPREHENSIVE RESPONSIVE SYSTEM + PREMIUM ANIMATIONS
       ===================================================================== */

    /* -- Premium scroll-reveal animation (JS adds .in-view) -- */
    /* Note: second definition at line ~3208 is the canonical one (.in-view)
       This block kept for legacy compatibility but .in-view takes precedence. */

    /* -- Subtle ambient section-level pulse (behind all content) -- */
    @keyframes ambientFloat {
      0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
      50%       { transform: translateY(-18px) scale(1.04); opacity: 1; }
    }

    /* -- Mobile Hamburger Nav -- */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      z-index: 1001;
      -webkit-tap-highlight-color: transparent;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    .nav-hamburger span {
      display: block;
      height: 2px;
      background: rgba(255,255,255,0.85);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    }
    .nav-hamburger span:nth-child(2) { width: 70%; }
    /* When mobile navigation overlay is open, hide the hamburger toggle button so only the dedicated #mobileNavClose button is visible */
    .nav-hamburger.open {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1002;
      background: rgba(5,2,6,0.97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 80px 32px 40px;
      overflow-y: auto;
    }
    .mobile-nav-overlay.open { display: flex; }
    .mobile-nav-link {
      display: block;
      width: 100%;
      text-align: center;
      font-family: 'Outfit', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      letter-spacing: -0.3px;
      transition: color 0.22s ease, transform 0.22s ease;
    }
    .mobile-nav-link:hover, .mobile-nav-link:focus {
      color: var(--accent-orange);
      transform: translateX(4px);
    }
    .mobile-nav-cta,
    a.mobile-nav-cta,
    a.mobile-nav-cta:link,
    a.mobile-nav-cta:visited,
    a.mobile-nav-cta:hover,
    a.mobile-nav-cta:active,
    a.mobile-nav-cta:focus {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      margin-top: 28px !important;
      background: rgba(255, 255, 255, 0.95) !important;
      color: #111111 !important;
      text-decoration: none !important;
      font-size: 16px !important;
      font-weight: 700 !important;
      padding: 12px 12px 12px 22px !important;
      border-radius: 100px !important;
      letter-spacing: 0.15px !important;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
      transition: transform 0.25s ease !important;
    }
    .mobile-nav-cta:hover,
    a.mobile-nav-cta:hover {
      transform: scale(1.03) !important;
      color: #111111 !important;
    }
    .mobile-nav-cta-text {
      color: #111111 !important;
    }
    .mobile-nav-cta-circle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #ff4d00;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .mobile-nav-close {
      position: absolute;
      top: 18px;
      right: 18px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      font-size: 28px;
      cursor: pointer;
      padding: 8px;
      line-height: 1;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-close:hover { color: #fff; }

    /* =====================================================================
       LARGE / DESKTOP SCREEN CLAMP  (≥ 1500px)
       Caps hero + nav at 1366px (a very common laptop width) so the layout
       never stretches too wide on large desktop monitors.
       Starts at 1500px so genuine laptop screens (1280-1440px) are untouched.
       Mobile is NOT affected by this min-width rule.
    ===================================================================== */
    @media (min-width: 1500px) {
      .nav-header .nav-container {
        max-width: 1366px;
      }
      .hero-section {
        max-width: 1366px;
      }
    }

    /* =====================================
       RESPONSIVE BREAKPOINTS
    ===================================== */

    /* Tablet: 1024px */
    /* =====================================================================
       RESPONSIVE SYSTEM
       Desktop (>1024px): unchanged — all rules below only apply mobile
    ===================================================================== */

    /* Tablet 1024px */
    @media (max-width: 1024px) {
      .lorven-pillars { grid-template-columns: repeat(2, 1fr); }
      .contact-body  { grid-template-columns: 1fr; }
      .lorven-box    { padding: 40px 36px 34px; }
    }

    /* Tablet 900px */
    @media (max-width: 900px) {
      .cert-grid           { grid-template-columns: repeat(2, 1fr); }
      .founders-grid       { grid-template-columns: 1fr 1fr; gap: 20px; }
      .contact-form-row    { grid-template-columns: 1fr; }
      .projects-grid       { grid-template-columns: repeat(2, 1fr) !important; }
      .about-me-container  { padding: 0 28px; }
    }

    /* Mobile nav triggers at 860px */
    @media (max-width: 860px) {
      .nav-menu      { display: none !important; }
      .nav-hamburger { display: flex; }
    }

    /* ── Mobile: 768px and below ── */
    @media (max-width: 768px) {

      /* ── Global: no horizontal overflow ── */
      body, html { overflow-x: hidden; }

      /* ── Continuous background — no black gaps between sections ── */
      .section-about-me,
      .section-academic,
      .section-toolkit,
      .section-projects,
      .section-certifications,
      .section-lorven,
      .section-founders,
      .section-contact,
      footer.site-footer {
        background:
          radial-gradient(ellipse at 20% 40%, rgba(55,12,32,0.28) 0%, transparent 65%),
          radial-gradient(ellipse at 80% 60%, rgba(220,20,60,0.07) 0%, transparent 60%),
          rgba(5, 2, 6, 0.92);
        /* Remove contain on mobile — causes separate background layers */
        contain: none;
      }

      /* ── Section padding tighten ── */
      .section-about-me, .section-academic, .section-toolkit,
      .section-projects, .section-certifications,
      .section-founders, .section-contact {
        padding: 60px 0;
      }
      .section-lorven   { padding: 36px 0; }
      .section-contact  { padding: 60px 0 70px; }

      /* ── Containers → consistent side padding ── */
      .cert-container, .lorven-container, .founders-container,
      .contact-container, .about-me-container,
      .projects-container, .toolkit-container, .academic-container {
        padding: 0 18px;
      }

      /* ── HERO ── */
      .hero-section {
        padding-top: 100px;
        padding-left: 18px;
        padding-right: 18px;
        min-height: unset;
      }
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .hero-left {
        max-width: 100%;
        padding-top: 16px;
        text-align: center;
        align-items: center;
      }
      .hero-right {
        max-width: 100%;
        margin-left: 0;
        display: flex;
        justify-content: center;
      }
      .hero-eyebrow { font-size: 13px; }
      .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
        letter-spacing: -1px;
        text-align: center;
      }
      .hero-right-title {
        font-size: clamp(1.8rem, 7.5vw, 2.8rem);
        letter-spacing: -1px;
        text-align: center;
      }
      .hero-right-sub { text-align: center; }
      /* Hide horizontal social buttons on mobile — vertical icons now beside portrait */
      .hero-social-buttons { display: none; }
      /* Portrait canvas — hidden on mobile: in-flow wide background image replaces it */
      canvas#animationCanvas {
        opacity: 0;
        -webkit-mask-image: none;
        mask-image: none;
      }

      /* ── MOBILE PORTRAIT WRAP ─────────────────────────────────────────────
         Wide hero portrait background spanning available viewport width
         with subtle dark atmospheric vignette overlay
      ────────────────────────────────────────────────────────────────────── */
      .hero-mobile-portrait-wrap {
        position: relative;
        display: block;
        width: calc(100% + 36px);
        margin-left: -18px;
        margin-right: -18px;
        margin-top: 16px;
        margin-bottom: 18px;
        line-height: 0;
        overflow: hidden;
      }

      .hero-mobile-portrait-wrap::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 40%, rgba(18, 6, 12, 0.2) 0%, rgba(5, 2, 6, 0.5) 85%),
                    linear-gradient(180deg, #070308 0%, transparent 20%, transparent 80%, #070308 100%);
        pointer-events: none;
        z-index: 2;
      }

      /* ── MOBILE PORTRAIT IMAGE ───────────────────────────────────────────
         Full viewport width, landscape 16:9, no circle, no card, no frame.
      ────────────────────────────────────────────────────────────────────── */
      .hero-mobile-portrait-img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: 50% 22%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        will-change: transform;
        transform: translate3d(0, 0, 0) scale(1.06);
        transform-origin: center top;
      }

      /* ── MOBILE SOCIAL COLUMN ────────────────────────────────────────────
         Vertical social icons — beside left side of portrait, NO outer box/panel
      ────────────────────────────────────────────────────────────────────── */
      .hero-mobile-social-col {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        outline: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .hero-mobile-social-col .hero-social-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.16);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
      }
      .hero-mobile-social-col .hero-social-btn:active,
      .hero-mobile-social-col .hero-social-btn:hover {
        transform: scale(1.1);
        background: rgba(255, 77, 0, 0.15);
        border-color: rgba(255, 77, 0, 0.45);
        color: #ff4d00;
        box-shadow: 0 6px 20px rgba(255, 77, 0, 0.25), 0 0 12px rgba(255, 77, 0, 0.2);
      }

      /* ── HERO CHIP — center "CYBER & TECH SYSTEMS" on mobile ── */
      .floating-cyber-chip.hero-chip {
        align-self: center;
        justify-content: center;
      }

      /* ── HERO RIGHT — center label and all content on mobile ── */
      .hero-right-label {
        display: block;
        text-align: center;
        width: 100%;
      }
      .hero-right {
        align-items: center;
        text-align: center;
      }
      .hero-right-sub {
        justify-content: center;
      }


      /* ── ABOUT ME ── */
      .section-about-me { padding: 60px 0; }
      .about-heading     { font-size: clamp(2rem, 7.5vw, 3rem); text-align: center; }
      .about-highlights  { flex-direction: column; gap: 10px; }
      .highlight-item    { width: 100%; padding: 12px 18px; }
      .currently-exploring-area { padding: 20px 18px; }
      .exploring-chips   { gap: 8px; }
      .exploring-chip    { font-size: 13px; padding: 8px 16px; }
      .about-cta-wrapper { justify-content: center; }

      /* ── ACADEMIC ── */
      .academic-heading  { font-size: clamp(1.8rem, 7vw, 2.6rem); }
      .academic-journey-track { padding-left: 20px; }
      .milestone-card    { padding: 20px 16px; }

      /* ── TOOLKIT ── */
      .toolkit-heading   { font-size: clamp(1.8rem, 7vw, 2.6rem); }
      .toolkit-dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
      .toolkit-directory-col  { overflow: visible; }
      .toolkit-showcase-col   { position: relative; top: 0; }
      /* Orbital viewport — responsive height with smooth pan scrolling */
      .section-toolkit        { overflow: hidden; touch-action: pan-y; }
      .orbital-showcase-viewport {
        height: 420px;
        touch-action: pan-y;
        overflow: hidden;
      }

      /* ── PROJECTS ── */
      .projects-grid  { grid-template-columns: 1fr !important; gap: 16px; }
      .proj-card      { padding: 16px 16px 14px 16px; }

      /* ── CERTIFICATIONS ── */
      .cert-grid      { grid-template-columns: 1fr; gap: 14px; }
      .cert-main-heading { font-size: clamp(1.8rem, 7vw, 2.8rem); }
      .cert-arc-track { flex-wrap: wrap; transform: none !important; }
      .cert-card-item { transform: none !important; opacity: 1 !important; }

      /* ── LORVEN ── */
      .lorven-box        { padding: 26px 18px 22px; border-radius: 16px; }
      .lorven-main-heading { font-size: clamp(1.4rem, 6vw, 2rem); }
      .lorven-pillars    { grid-template-columns: 1fr; gap: 12px; }
      .lorven-logo-img   { width: min(200px, 55vw); }
      .lorven-corner     { display: none; }

      /* ── FOUNDERS ── */
      .founders-grid     { grid-template-columns: 1fr; gap: 16px; }
      .founders-main-heading { font-size: clamp(1.8rem, 7vw, 2.8rem); }
      .founder-card      { padding: 24px 18px; }

      /* ── CONTACT ── */
      .contact-main-heading  { font-size: clamp(2rem, 8vw, 3rem); }
      .contact-body          { grid-template-columns: 1fr; gap: 20px; }
      .contact-form-row      { grid-template-columns: 1fr; gap: 12px; }
      .contact-form-panel, .contact-info-card { padding: 24px 18px; }

      /* ── TYPOGRAPHY ── */
      .brand-logo { font-size: 1.1rem; }

      /* ── FOOTER ── */
      .site-footer { padding: 24px 18px; }
      .footer-text  { font-size: 12px; text-align: center; }

      /* ── BEYOND PAUSE — tighten the Hero→About gap on mobile ── */
      .section-beyond-pause {
        padding: 40px 18px 32px;
      }
      .beyond-title { font-size: clamp(1.7rem, 6.5vw, 2.6rem); letter-spacing: -1px; }
      .beyond-desc  { font-size: 0.95rem; }

      /* ── CONTACT — prevent iOS double-tap font-size zoom on input focus ── */
      .contact-field input,
      .contact-field textarea,
      .contact-field select {
        font-size: 16px !important;
      }

      /* ── ABOUT — academic detail pill wraps cleanly at narrow widths ── */
      .about-academic-detail {
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
      }

      /* ── HERO RIGHT — center content on mobile ── */
      .hero-right {
        align-items: center;
      }

      /* ── CONTACT INFO VALUE — prevent email overflow ── */
      .contact-info-value {
        font-size: 12px;
        word-break: break-all;
      }
    }

    /* ── Small phones: 480px ── */
    @media (max-width: 480px) {
      .hero-title       { font-size: clamp(1.9rem, 8.5vw, 2.8rem); }
      .hero-right-title { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
      .proj-card        { padding: 14px 14px 12px 14px; }
      .lorven-box       { padding: 22px 14px 18px; }
      .founders-grid    { gap: 12px; }
      .contact-form-panel, .contact-info-card { padding: 20px 14px; }
      .mobile-nav-link  { font-size: 20px; padding: 14px 0; }
      /* Orbital responsive height */
      .orbital-showcase-viewport { height: 390px; }
      /* Further tighten the Hero→About gap on small phones */
      .section-beyond-pause { padding: 32px 16px 24px; }
      /* Lorven pillars — single column on very small screens */
      .lorven-pillars { grid-template-columns: 1fr; gap: 10px; }
      /* Contact form row fully single column */
      .contact-form-row { grid-template-columns: 1fr; gap: 12px; }
      /* Cert main heading */
      .cert-main-heading { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    }

    /* ── Very small phones: 430px ── */
    @media (max-width: 430px) {
      .hero-title       { font-size: clamp(1.8rem, 8vw, 2.6rem); }
      .hero-right-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
      .about-heading    { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
      /* Orbital responsive height */
      .orbital-showcase-viewport { height: 370px; }
    }

    /* ── Smallest phones: 375px ── */
    @media (max-width: 375px) {
      body, html { overflow-x: hidden; }
      .hero-title       { font-size: clamp(1.6rem, 8vw, 2.2rem); }
      .toolkit-heading  { font-size: 1.6rem; }
      .about-heading    { font-size: clamp(1.7rem, 7.5vw, 2.1rem); }
      .orbital-showcase-viewport { height: 350px; }
      /* Form fields: ensure never overflow at 360px */
      input, textarea, select, button { max-width: 100%; box-sizing: border-box; }
    }

    /* ── Touch devices: hide custom cursor, ensure no scroll trap ── */
    @media (hover: none) and (pointer: coarse) {
      .cinematic-cursor-system { display: none !important; }
      body { cursor: auto !important; }
      /* Critical: toolkit NEVER traps touch scroll */
      .section-toolkit,
      .toolkit-directory-col,
      .toolkit-dashboard-grid,
      .orbital-showcase-viewport,
      .orbital-nodes-layer,
      .orbital-svg-tracks {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
      }
    }


    /* Responsive adjustments (keeping existing 992px block intact) */
    @media (max-width: 992px) {
      .hero-grid, .behind-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }



      .cards-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .card-item {
        aspect-ratio: 16 / 10;
      }

      .scale-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .form-grid-2col {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .scale-grow-text {
        font-size: clamp(3.5rem, 15vw, 6rem);
      }

      .scale-company-box {
        font-size: clamp(1.6rem, 6vw, 2.5rem);
      }

      .pricing-grid {
        grid-template-columns: 1fr;
      }

      .cert-arc-track {
        flex-wrap: wrap;
        transform: none !important;
      }

      .cert-card-item {
        transform: none !important;
        opacity: 1 !important;
      }
    }

    /* ==========================================================================
       About Me Section - Premium Cinematic UI
       ========================================================================== */
    .section-about-me {
      position: relative;
      padding: 80px 0;
      overflow: hidden;
    }

    /* Ambient Burgundy/Red/Magenta Glows inside About Me */
    .about-glow-1 {
      position: absolute;
      top: -15%;
      left: -8%;
      width: 550px;
      height: 550px;
      background: radial-gradient(circle, rgba(220, 20, 60, 0.18) 0%, rgba(180, 10, 40, 0.05) 55%, transparent 75%);
      filter: blur(90px);
      transform: translateZ(0);
      will-change: transform;
      pointer-events: none;
      z-index: 0;
    }

    .about-glow-2 {
      position: absolute;
      bottom: -15%;
      right: -5%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(255, 77, 0, 0.14) 0%, rgba(200, 20, 60, 0.06) 50%, transparent 70%);
      filter: blur(100px);
      transform: translateZ(0);
      will-change: transform;
      pointer-events: none;
      z-index: 0;
    }

    .about-me-container {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: left;
    }

    .about-header-block {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 28px;
      width: 100%;
      text-align: center;
      align-items: center;
    }

    .about-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      justify-content: center;
    }

    .about-accent-line {
      display: none;
    }

    .about-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--accent-orange);
      text-shadow: 0 0 16px rgba(255, 77, 0, 0.22);
    }

    .about-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.5rem, 5vw, 4.2rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -1.5px;
      color: var(--text-white);
    }

    .about-intro-paragraphs {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 36px;
      max-width: 1000px;
      width: 100%;
    }

    .about-para {
      font-size: clamp(1.02rem, 1.4vw, 1.18rem);
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 400;
      letter-spacing: -0.1px;
    }

    /* Subtle Academic Detail Tag */
    .about-academic-detail {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
      padding: 8px 18px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 100px;
      width: fit-content;
    }

    .academic-dot {
      width: 6px;
      height: 6px;
      background: var(--accent-orange);
      border-radius: 50%;
      box-shadow: 0 0 8px var(--accent-orange);
    }

    .academic-text {
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: rgba(255, 255, 255, 0.8);
    }

    /* 3 Compact Highlights (Full-width Left Aligned Flex Grid) */
    .about-highlights {
      display: flex;
      gap: 18px;
      margin-bottom: 40px;
      flex-wrap: wrap;
      width: 100%;
    }

    .highlight-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 24px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 100px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .highlight-item:hover {
      background: rgba(255, 77, 0, 0.08);
      border-color: rgba(255, 77, 0, 0.35);
      transform: translateY(-2px);
    }

    .highlight-bullet {
      width: 7px;
      height: 7px;
      background: var(--accent-orange);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--accent-orange);
    }

    .highlight-text {
      font-size: 14.5px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.95);
      letter-spacing: -0.2px;
    }

    /* Currently Exploring Section (Full Width, Left Aligned) */
    .currently-exploring-area {
      width: 100%;
      margin-bottom: 40px;
      padding: 28px 32px;
      background: rgba(18, 10, 22, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 22px;
      backdrop-filter: blur(12px);
    }

    .exploring-label {
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: 18px;
      display: block;
    }

    .exploring-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .exploring-chip {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 10px 22px;
      border-radius: 10px;
      transition: all 0.25s ease;
    }

    .exploring-chip:hover {
      color: #ffffff;
      background: rgba(220, 20, 60, 0.16);
      border-color: rgba(255, 77, 109, 0.45);
      transform: translateY(-2px);
    }

    /* CTA Button (Left Aligned) */
    .about-cta-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .about-cta-btn {
      background: linear-gradient(135deg, var(--accent-orange) 0%, #e03e00 100%);
      color: #ffffff;
      border: none;
      padding: 15px 36px;
      border-radius: 100px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(255, 77, 0, 0.28);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about-cta-btn:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 14px 35px rgba(255, 77, 0, 0.45);
      background: linear-gradient(135deg, #ff5c14 0%, #ff2a00 100%);
    }

    .about-cta-btn .btn-arrow {
      font-size: 16px;
      transition: transform 0.3s ease;
    }

    .about-cta-btn:hover .btn-arrow {
      transform: translateX(4px);
    }

    /* Reveal Scroll Animations */
    .about-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about-reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    /* Media Queries for Responsive Design */
    @media (max-width: 992px) {
      section, [id] {
        scroll-margin-top: 90px;
      }

      .section-about-me {
        padding: 70px 0;
        border-radius: 28px;
      }

      .about-me-container {
        padding: 0 28px;
      }

      .currently-exploring-area {
        padding: 22px 24px;
      }
    }


    @media (max-width: 576px) {
      .section-about-me {
        padding: 60px 0;
      }

      .about-me-container {
        padding: 0 16px;
      }

      .about-visual-card {
        height: 250px;
      }

      .about-highlights {
        flex-direction: column;
        gap: 10px;
      }

      .highlight-item {
        width: 100%;
      }

      .exploring-chips {
        gap: 8px;
      }

      .exploring-chip {
        width: 100%;
        text-align: center;
      }
    }

    /* ==========================================================================
       Beyond The Portfolio - Minimal Cinematic Text Pause
       ========================================================================== */
    .section-beyond-pause {
      position: relative;
      z-index: 2;
      width: 100%;
      /* Reduced from 90px/70px — was creating a large blank gap between Hero and About */
      padding: 60px 24px 48px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .beyond-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      max-width: 820px;
    }

    .beyond-accent-tag {
      font-family: 'Outfit', var(--font-main);
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--accent-orange);
      text-shadow: 0 0 16px rgba(255, 77, 0, 0.3);
    }

    .beyond-title {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.8rem, 5.8vw, 4.8rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -2px;
      color: var(--text-white);
      text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .beyond-desc {
      font-size: clamp(1rem, 1.8vw, 1.25rem);
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 400;
      max-width: 680px;
      letter-spacing: -0.2px;
    }

    .beyond-scroll-hint {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: rgba(255, 255, 255, 0.55);
      transition: color 0.3s ease;
    }

    .beyond-scroll-hint .scroll-arrow {
      color: var(--accent-orange);
      font-size: 15px;
      animation: bounceSlow 2s ease-in-out infinite;
    }

    @keyframes bounceSlow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(5px); }
    }

    /* Beyond Scroll Reveal Animation */
    .beyond-reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .beyond-reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }



    /* ==========================================================================
       PREMIUM SMOOTH MICRO-INTERACTIONS SYSTEM (PERFORMANCE FIRST)
       ========================================================================== */

    /* 1. Universal Interactive Cards & Boxes Hover Effects */
    .card-item,
    .price-card,
    .cert-card-item,
    .highlight-item,
    .exploring-chip,
    .about-academic-detail,
    .scale-talk-card,
    .milestone-card,
    .founder-card,
    .contact-info-card,
    .contact-social-btn,
    .scale-company-box,
    .lorven-pillar {
      transition:
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.32s ease,
        background 0.3s ease;
      will-change: transform;
    }

    @media (hover: hover) and (pointer: fine) {
      .card-item:hover,
      .price-card:hover,
      .highlight-item:hover,
      .exploring-chip:hover,
      .about-academic-detail:hover,
      .scale-talk-card:hover,
      .contact-info-card:hover {
        transform: translateY(-4px) scale(1.015);
        border-color: rgba(255, 77, 0, 0.32);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 77, 0, 0.12);
      }

      .cert-card-item:hover {
        border-color: rgba(255, 77, 0, 0.45);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.65), 0 0 26px rgba(255, 77, 0, 0.22);
      }

      .academic-milestone-item:hover .milestone-card {
        transform: translateY(-4px) scale(1.012);
        border-color: rgba(255, 77, 0, 0.30);
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 77, 0, 0.12);
      }

      .proj-card.revealed:hover {
        transform: translateY(-6px) scale(1.015);
        border-color: rgba(255, 77, 0, 0.36);
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.58), 0 0 28px rgba(255, 77, 0, 0.14);
      }

      .founder-card:hover {
        transform: translateY(-5px) scale(1.012);
        border-color: rgba(255, 77, 0, 0.32);
        box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 77, 0, 0.12);
      }

      .founder-card:hover .founder-avatar {
        transform: scale(1.05);
        border-color: rgba(255, 77, 0, 0.55);
        box-shadow: 0 0 20px rgba(255, 77, 0, 0.32);
      }

      .lorven-box:hover {
        transform: translateY(-3px) scale(1.006);
        border-color: rgba(245, 166, 35, 0.42);
        box-shadow:
          0 0 0 1px rgba(245, 166, 35, 0.08),
          0 24px 64px rgba(0, 0, 0, 0.7),
          0 0 45px rgba(245, 166, 35, 0.08),
          inset 0 1px 0 rgba(245, 166, 35, 0.12);
      }

      .contact-social-btn:hover {
        transform: translateY(-2px) scale(1.015);
        border-color: rgba(255, 77, 0, 0.35);
        background: rgba(255, 77, 0, 0.08);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 77, 0, 0.12);
      }
    }

    /* 2. Premium Button Micro-interactions */
    .btn-header,
    .btn-orange,
    .about-cta-btn,
    .btn-price,
    .scale-submit-pill,
    .contact-submit-btn,
    .proj-view-btn,
    .lorven-link-btn {
      transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        color 0.28s ease;
      will-change: transform;
    }

    @media (hover: hover) and (pointer: fine) {
      .btn-header:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 22px rgba(255, 255, 255, 0.22);
      }
      .btn-orange:hover,
      .about-cta-btn:hover,
      .contact-submit-btn:hover,
      .scale-submit-pill:hover,
      .btn-price:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 28px rgba(255, 77, 0, 0.42);
      }
    }

    /* Button Active / Press-Down State */
    .btn-header:active,
    .btn-orange:active,
    .about-cta-btn:active,
    .contact-submit-btn:active,
    .scale-submit-pill:active,
    .btn-price:active,
    .directory-tool-pill:active,
    .hero-social-btn:active,
    .footer-social-btn:active {
      transform: translateY(0) scale(0.98) !important;
      transition-duration: 0.1s !important;
    }

    /* Button Icon / Arrow Micro-Nudge */
    .about-cta-btn .btn-arrow,
    .contact-submit-btn .cta-arrow,
    .btn-header .btn-icon-orange,
    .btn-orange .btn-icon-white {
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (hover: hover) and (pointer: fine) {
      .about-cta-btn:hover .btn-arrow,
      .contact-submit-btn:hover .cta-arrow {
        transform: translateX(4px);
      }
      .btn-header:hover .btn-icon-orange,
      .btn-orange:hover .btn-icon-white {
        transform: scale(1.08) translateX(1px);
      }
    }

    /* 3. Social Icons Micro-interactions */
    .hero-social-btn,
    .hero-mobile-social-icon,
    .footer-social-btn,
    .founder-social-btn {
      transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        color 0.28s ease;
      will-change: transform;
    }
    @media (hover: hover) and (pointer: fine) {
      .hero-social-btn:hover,
      .footer-social-btn:hover,
      .founder-social-btn:hover {
        transform: translateY(-2px) scale(1.08);
        border-color: rgba(255, 77, 0, 0.55);
        color: #ff4d00;
        box-shadow: 0 6px 18px rgba(255, 77, 0, 0.28), 0 0 12px rgba(255, 77, 0, 0.15);
      }
    }

    /* 4. Universal Scroll Reveal Base — premium lightweight GPU fade & upward drift */
    .scroll-reveal,
    .about-reveal,
    .beyond-reveal,
    .heading-reveal {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      transition:
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .scroll-reveal.in-view,
    .about-reveal.in-view,
    .beyond-reveal.in-view,
    .heading-reveal.in-view,
    .scroll-reveal.revealed,
    .about-reveal.revealed,
    .beyond-reveal.revealed,
    .heading-reveal.revealed {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    /* Stagger delay helpers */
    .delay-1 { transition-delay: 0.08s; }
    .delay-2 { transition-delay: 0.16s; }
    .delay-3 { transition-delay: 0.24s; }
    .delay-4 { transition-delay: 0.32s; }

    /* Ambient glow elements: static for maximum GPU performance */
    .about-glow-1,
    .about-glow-2,
    .academic-glow-bg,
    .toolkit-glow-bg {
      will-change: auto;
    }

    /* 5. Accessibility — prefers-reduced-motion: disable motion transitions */
    @media (prefers-reduced-motion: reduce) {
      .about-glow-1, .about-glow-2, .academic-glow-bg, .toolkit-glow-bg { animation: none !important; }
      .section-heading-shimmer.in-view { animation: none !important; -webkit-text-fill-color: #fff; }
      .milestone-card, .proj-card, .founder-card, .card-item, .price-card, .lorven-box { transition: none !important; }
      /* Skip scroll-reveal animation — show elements immediately */
      .scroll-reveal, .about-reveal, .beyond-reveal, .heading-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .scroll-reveal.in-view, .about-reveal.in-view, .beyond-reveal.in-view, .heading-reveal.in-view {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
      .orbit-node-chip { transition: none !important; }
    }    /* Two-Column Interactive Dashboard Toolkit Styling */
    .section-toolkit {
      position: relative;
      padding: 80px 0;
      overflow: hidden;
      /* CRITICAL: Always allow vertical page scrolling through this section,
         even when touch/pointer is hovering over interactive elements */
      touch-action: pan-y;
    }

    .toolkit-grid-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: radial-gradient(rgba(255, 77, 0, 0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      opacity: 0.6;
      z-index: 0;
    }

    .toolkit-glow-bg {
      position: absolute;
      top: 25%;
      right: 15%;
      width: 750px;
      height: 750px;
      /* PERF: filter:blur(100px) removed — caused a GPU compositing layer invalidation
         on every scroll frame inside the Toolkit section, causing scroll lag.
         Replaced with a soft multi-stop gradient that gives the same ambient glow. */
      background: radial-gradient(
        ellipse at center,
        rgba(255, 77, 0, 0.065) 0%,
        rgba(255, 77, 0, 0.035) 28%,
        rgba(220, 20, 60, 0.018) 52%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 0;
    }

    .toolkit-container {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .toolkit-header-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
      margin-bottom: 48px;
    }

    .toolkit-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-bottom: 12px;
      justify-content: center;
    }

    .toolkit-header-left {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .toolkit-accent-line {
      display: none;
    }

    .toolkit-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      color: var(--accent-orange);
      text-transform: uppercase;
    }

    .toolkit-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.2rem, 3.8vw, 3.2rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1.2px;
      color: var(--text-white);
      margin-bottom: 14px;
    }

    .toolkit-intro-desc {
      font-size: 16px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.72);
      max-width: 680px;
      margin: 0 auto;
    }

    .toolkit-header-right {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-top: 16px;
    }

    .toolkit-system-tag {
      font-family: 'Outfit', var(--font-main);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      color: var(--accent-orange);
      padding: 6px 16px;
      border-radius: 100px;
      background: rgba(255, 77, 0, 0.1);
      border: 1px solid rgba(255, 77, 0, 0.3);
    }

    .toolkit-count-pill {
      font-family: 'Outfit', var(--font-main);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, 0.7);
      padding: 6px 16px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }    /* 2-Column Dashboard Grid Layout: LEFT (Tool Directory) | RIGHT (Orbital System) */
    .toolkit-dashboard-grid {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 44px;
      align-items: start;
    }

    /* LEFT SIDE: Vertical Tool Directory
       CRITICAL: NO overflow-y:auto — that creates a nested scroll
       container which traps the user's wheel events and blocks page
       scrolling. The list is fully expanded naturally. */
    .toolkit-directory-col {
      display: flex;
      flex-direction: column;
      gap: 24px;
      /* No max-height, no overflow — let the list grow naturally */
      overflow: visible;
      padding-right: 0;
      /* Ensure wheel events always bubble up to the document */
      touch-action: pan-y;
    }

    .dir-category-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dir-category-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dir-category-title::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
    }

    .dir-tools-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .directory-tool-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 7px 16px;
      border-radius: 100px;
      background: rgba(16, 8, 18, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.9);
      font-family: 'Outfit', var(--font-main);
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
      user-select: none;
    }

    .directory-tool-pill .pill-logo-img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }

    .directory-tool-pill:hover, .directory-tool-pill.active {
      transform: translateY(-2px) scale(1.03);
      border-color: var(--accent-orange);
      background: rgba(255, 77, 0, 0.16);
      color: #ffffff;
      box-shadow: 0 0 18px rgba(255, 77, 0, 0.35);
    }

    .directory-tool-pill:hover .pill-logo-img, .directory-tool-pill.active .pill-logo-img {
      transform: scale(1.25);
    }

    /* RIGHT SIDE: Rotating Orbital System Viewport
       CRITICAL: NOT sticky — sticky columns can contribute to scroll
       confusion on touch devices and certain browsers. Use a normal
       flow column so page scrolling is never interrupted. */
    .toolkit-showcase-col {
      position: relative;
      top: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .orbital-showcase-viewport {
      position: relative;
      width: 100%;
      height: 540px;
      border-radius: 24px;
      background: rgba(6, 3, 8, 0.94);
      border: 1px solid rgba(255, 77, 0, 0.25);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(255, 77, 0, 0.12);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      contain: paint;
      touch-action: pan-y;
    }

    /* ── Orbital SVG Ring Tracks ── */
    .orbital-svg-tracks {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    /* Ring colors matching reference image */
    .orbit-ring-1 { fill: none; stroke: rgba(255, 100, 20, 0.65); stroke-width: 1.4px; }
    .orbit-ring-2 { fill: none; stroke: rgba(135, 95, 255, 0.50); stroke-width: 1.2px; stroke-dasharray: 6 4; }
    .orbit-ring-3 { fill: none; stroke: rgba(70, 160, 255, 0.45); stroke-width: 1.2px; stroke-dasharray: 4 6; }
    .orbit-ring-4 { fill: none; stroke: rgba(255, 120, 40, 0.38); stroke-width: 1.2px; stroke-dasharray: 3 6; }

    /* Active ring highlight on hover */
    .orbital-showcase-viewport.is-active .orbit-ring-1.ring-active,
    .orbital-showcase-viewport.is-active .orbit-ring-2.ring-active,
    .orbital-showcase-viewport.is-active .orbit-ring-3.ring-active,
    .orbital-showcase-viewport.is-active .orbit-ring-4.ring-active {
      stroke: rgba(255, 77, 0, 0.95);
      stroke-width: 1.8px;
      stroke-dasharray: none;
      filter: drop-shadow(0 0 8px rgba(255, 77, 0, 0.6));
    }

    /* ── TECH CORE Center Badge ── */
    .orbital-center-core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, #3a1008 0%, #0d0306 70%);
      border: 1.5px solid rgba(255, 77, 0, 0.65);
      box-shadow:
        0 0 0 8px rgba(255, 77, 0, 0.06),
        0 0 0 18px rgba(255, 77, 0, 0.03),
        0 0 40px rgba(255, 77, 0, 0.45),
        inset 0 0 20px rgba(255, 60, 0, 0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      user-select: none;
      transition: width 0.3s ease, height 0.3s ease;
    }

    .core-symbol {
      font-family: 'Outfit', var(--font-main);
      font-size: 20px;
      font-weight: 900;
      color: #ff6420;
      letter-spacing: -1px;
      line-height: 1;
      text-shadow: 0 0 12px rgba(255, 77, 0, 0.8);
    }

    .core-label {
      font-family: 'Outfit', var(--font-main);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: 1.5px;
      color: rgba(255, 255, 255, 0.75);
      margin-top: 4px;
    }

    /* ── Floating Orbital Nodes Container ── */
    .orbital-nodes-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    /* ── Individual Node Chip ── */
    .orbit-node-chip {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 12px 5px 8px;
      border-radius: 100px;
      background: rgba(10, 5, 14, 0.94);
      border: 1px solid rgba(255, 255, 255, 0.14);
      color: rgba(255, 255, 255, 0.92);
      font-family: 'Outfit', var(--font-main);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.2px;
      pointer-events: auto;
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      contain: layout style;
      /* GPU compositing — each chip on its own layer for transform animation */
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
      /* Transition only CSS-compositor-friendly props */
      transition:
        border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow   0.25s cubic-bezier(0.22, 1, 0.36, 1),
        opacity      0.25s ease,
        background   0.25s ease,
        filter       0.25s ease;
    }

    .orbit-node-chip .node-logo-img {
      width: 17px;
      height: 17px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 3px;
    }

    /* 1. Direct hover on orbit: subtle glow/highlight only, no dramatic scale or displacement */
    .orbit-node-chip:hover {
      border-color: rgba(255, 120, 40, 0.65);
      background: rgba(24, 12, 28, 0.96);
      color: #ffffff;
      box-shadow:
        0 0 14px rgba(255, 100, 20, 0.40),
        0 2px 12px rgba(0, 0, 0, 0.70);
      filter: brightness(1.18);
    }

    /* 2. Left-side trigger state: full pop-out highlight (triggered via left directory pills) */
    .orbit-node-chip.active {
      border-color: rgba(255, 90, 10, 0.95);
      background: rgba(30, 10, 18, 0.98);
      color: #ffffff;
      box-shadow:
        0 0 0 3px  rgba(255, 77,  0, 0.20),
        0 0 18px   rgba(255, 100, 0, 0.55),
        0 0 36px   rgba(255, 77,  0, 0.25),
        0 6px 24px rgba(0,   0,   0, 0.70);
      z-index: 90;
      filter: brightness(1.18) saturate(1.12);
    }

    /* Dim all non-active nodes when a tool is highlighted */
    .orbital-showcase-viewport.is-active .orbit-node-chip:not(.active) {
      opacity: 0.22;
      filter: brightness(0.7);
    }

    @media (max-width: 992px) {
      .toolkit-dashboard-grid {
        grid-template-columns: 1fr;
      }
      .toolkit-directory-col {
        overflow: visible;
      }
      .toolkit-showcase-col {
        position: relative;
        top: 0;
      }
      .orbital-showcase-viewport {
        height: 460px;
      }
    }

    @media (max-width: 600px) {
      .toolkit-container {
        padding: 0 20px;
      }
      .orbital-showcase-viewport {
        height: 380px;
      }
      .orbit-node-chip {
        font-size: 9.5px;
        padding: 3px 8px 3px 6px;
        gap: 5px;
      }
      .orbit-node-chip .node-logo-img {
        width: 13px;
        height: 13px;
      }
      .orbital-center-core {
        width: 68px;
        height: 68px;
      }
      .core-symbol {
        font-size: 16px;
      }
      .core-label {
        font-size: 6px;
        letter-spacing: 1px;
      }
    }

    /* Academic Background Section Styling */
    .section-academic {
      position: relative;
      padding: 80px 0;
      overflow: hidden;
    }

    .academic-glow-bg {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      width: 750px;
      height: 750px;
      background: radial-gradient(circle, rgba(220, 20, 60, 0.1) 0%, rgba(255, 77, 0, 0.04) 45%, transparent 70%);
      filter: blur(100px);
      pointer-events: none;
      z-index: 0;
    }

    .academic-container {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .academic-header-block {
      margin-bottom: 40px;
      text-align: center;
    }

    .academic-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-bottom: 14px;
      justify-content: center;
    }

    .academic-accent-line {
      display: none;
    }

    .academic-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      color: var(--accent-orange);
      text-transform: uppercase;
    }

    .academic-heading {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(2.2rem, 3.8vw, 3.2rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -1.2px;
      color: var(--text-white);
      margin-bottom: 18px;
    }

    .academic-intro-desc {
      font-size: 16px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.72);
      max-width: 780px;
      margin: 0 auto;
    }

    /* Vertical Timeline Journey Track */
    .academic-journey-track {
      position: relative;
      padding-left: 36px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .academic-timeline-line {
      position: absolute;
      top: 24px;
      bottom: 24px;
      left: 11px;
      width: 2px;
      background: linear-gradient(180deg, var(--accent-orange) 0%, rgba(255, 77, 0, 0.3) 50%, rgba(255, 255, 255, 0.1) 100%);
      transition: background 0.3s ease;
    }

    .academic-milestone-item {
      position: relative;
      display: flex;
      align-items: flex-start;
    }

    .milestone-node {
      position: absolute;
      left: -36px;
      top: 24px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateX(-50%);
      z-index: 3;
    }

    .node-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      border: 2px solid #060307;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
    }

    .node-dot.active {
      background: var(--accent-orange);
      box-shadow: 0 0 12px var(--accent-orange);
    }

    .node-pulse {
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--accent-orange);
      animation: pulseNode 2s infinite;
      pointer-events: none;
    }

    @keyframes pulseNode {
      0% { transform: scale(0.8); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    /* Milestone Cards */
    .milestone-card {
      width: 100%;
      background: rgba(14, 8, 16, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 28px 32px;
      backdrop-filter: blur(12px);
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
    }

    .academic-milestone-item.current-stage .milestone-card {
      background: rgba(20, 10, 22, 0.8);
      border-color: rgba(255, 77, 0, 0.35);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 77, 0, 0.12);
    }

    .academic-milestone-item:hover .milestone-card {
      transform: translateY(-4px);
      border-color: rgba(255, 77, 0, 0.45);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 77, 0, 0.16);
    }

    .academic-milestone-item:hover .node-dot {
      transform: scale(1.35);
      background: var(--accent-orange);
      box-shadow: 0 0 12px var(--accent-orange);
    }

    .milestone-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .milestone-num {
      font-family: 'Outfit', var(--font-main);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
    }

    .milestone-status-badge {
      font-family: 'Outfit', var(--font-main);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 1.5px;
      padding: 4px 12px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .milestone-status-badge.active {
      background: rgba(255, 77, 0, 0.15);
      color: var(--accent-orange);
      border-color: rgba(255, 77, 0, 0.4);
      box-shadow: 0 0 10px rgba(255, 77, 0, 0.2);
    }

    .milestone-title {
      font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
      font-size: clamp(1.4rem, 2.2vw, 1.8rem);
      font-weight: 700;
      color: var(--text-white);
      margin-bottom: 4px;
      letter-spacing: -0.5px;
    }

    .milestone-institution {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.90);
      margin-bottom: 4px;
    }

    .institution-logo {
      height: 26px;
      width: auto;
      max-width: 32px;
      object-fit: contain;
      flex-shrink: 0;
      border-radius: 4px;
      vertical-align: middle;
    }

    .milestone-year {
      font-size: 13px;
      font-weight: 500;
      color: var(--accent-orange);
      margin-bottom: 14px;
    }

    .milestone-desc {
      font-size: 14.5px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.72);
      font-style: italic;
    }

    /* Closing Block Banner */
    .academic-closing-block {
      margin-top: 56px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .academic-closing-line {
      width: 36px;
      height: 2px;
      background: var(--accent-orange);
      box-shadow: 0 0 10px var(--accent-orange);
      flex-shrink: 0;
    }

    .academic-closing-text {
      font-size: 15px;
      font-weight: 500;
      font-style: italic;
      color: rgba(255, 255, 255, 0.8);
      letter-spacing: 0.2px;
    }

    /* ══════════════════════════════════════════════
       PROJECTS SECTION
    ══════════════════════════════════════════════ */
    .section-projects {
      position: relative;
      padding: 80px 0 60px;
      overflow: hidden;
    }

    .projects-container {
      max-width: 1260px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* Section header */
    .projects-header-block {
      margin-bottom: 48px;
      text-align: center;
    }

    .projects-label-badge {
      display: inline-flex;
      align-items: center;
      gap: 0;
      margin-bottom: 18px;
      justify-content: center;
    }

    .projects-accent-line {
      display: none;
    }

    .projects-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 3.5px;
      color: var(--accent-orange);
      text-transform: uppercase;
    }

    .projects-heading {
      font-family: 'Outfit', var(--font-main);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 800;
      color: var(--text-white);
      letter-spacing: -1.5px;
      line-height: 1.08;
      margin-bottom: 18px;
    }

    .projects-intro-desc {
      font-size: 16px;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.58);
      max-width: 560px;
      margin: 0 auto;
    }

    /* 3-column compact grid on desktop */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    @media (max-width: 992px) {
      .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    }

    @media (max-width: 640px) {
      .projects-grid { grid-template-columns: 1fr; gap: 16px; }
      .projects-container { padding: 0 18px; }
    }

    /* Project card — Compact & Fully Clickable Anchor */
    a.proj-card,
    a.proj-card:link,
    a.proj-card:visited,
    a.proj-card:hover,
    a.proj-card:active,
    a.proj-card:focus,
    .proj-card,
    .proj-card * {
      text-decoration: none !important;
      -webkit-text-decoration: none !important;
    }

    .proj-card {
      position: relative;
      background: rgba(14, 6, 16, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 16px 18px 16px 18px;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      text-decoration: none !important;
      color: inherit !important;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
      contain: layout style;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
      /* Scroll reveal initial state */
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }

    .proj-card.revealed,
    .proj-card.in-view {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
    }

    .proj-card:hover {
      transform: translateY(-5px) scale(1.01);
      border-color: rgba(255, 77, 0, 0.38);
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 77, 0, 0.12);
    }

    .proj-card:active {
      transform: scale(0.985);
      transition-duration: 0.1s;
    }

    /* Subtle corner decorative accent */
    .proj-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 32px;
      height: 32px;
      border-top: 1.5px solid rgba(255, 77, 0, 0.25);
      border-right: 1.5px solid rgba(255, 77, 0, 0.25);
      border-radius: 0 14px 0 0;
      pointer-events: none;
      transition: border-color 0.3s ease;
    }

    .proj-card:hover::before {
      border-color: rgba(255, 77, 0, 0.6);
    }

    /* Radial cursor spotlight — scoped inside card */
    .proj-card-spotlight {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
      background: radial-gradient(
        circle 140px at var(--mx, 50%) var(--my, 50%),
        rgba(255, 110, 40, 0.08) 0%,
        transparent 80%
      );
    }

    .proj-card:hover .proj-card-spotlight {
      opacity: 1;
    }

    /* Card top row: number */
    .proj-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .proj-num {
      font-family: 'Outfit', var(--font-main);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.28);
      text-decoration: none !important;
      transition: color 0.3s ease, transform 0.3s ease;
    }

    .proj-card:hover .proj-num {
      color: var(--accent-orange);
      transform: translateY(-1px);
    }

    /* Category */
    .proj-category {
      font-family: 'Outfit', var(--font-main);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: rgba(255, 77, 0, 0.75);
      text-transform: uppercase;
      text-decoration: none !important;
      margin-bottom: 4px;
    }

    /* Title */
    .proj-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 1.18rem;
      font-weight: 800;
      color: var(--text-white);
      letter-spacing: -0.3px;
      margin-bottom: 5px;
      line-height: 1.22;
      text-decoration: none !important;
      transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
    }

    .proj-card:hover .proj-title {
      color: #ffffff;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
      transform: translateY(-1px);
    }

    /* Description */
    .proj-desc {
      font-size: 12.5px;
      line-height: 1.45;
      color: rgba(255, 255, 255, 0.58);
      text-decoration: none !important;
      margin-bottom: 10px;
    }

    /* Tech tags — Final Element */
    .proj-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 0;
      margin-bottom: 0;
      text-decoration: none !important;
    }

    .proj-tag {
      font-size: 10.5px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.05);
      color: rgba(255, 255, 255, 0.52);
      border: 1px solid rgba(255, 255, 255, 0.08);
      text-decoration: none !important;
      transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    }

    .proj-card:hover .proj-tag {
      color: rgba(255, 255, 255, 0.85);
      background: rgba(255, 77, 0, 0.1);
      border-color: rgba(255, 77, 0, 0.22);
    }

    @media (prefers-reduced-motion: reduce) {
      .proj-card { opacity: 1 !important; transform: none !important; transition: none !important; }
      .proj-card:hover { transform: none !important; }
    }

    /* ══════════════════════════════════════════════
       CERTIFICATIONS SECTION (Overlapping Fanned Stack)
    ══════════════════════════════════════════════ */
    .section-certifications {
      position: relative;
      padding: 70px 0 60px;
      overflow: hidden;
    }

    .cert-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .cert-header-block {
      text-align: center;
      margin-bottom: 28px;
    }

    .cert-label-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }

    .cert-label-text {
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3.5px;
      color: var(--accent-orange);
      text-transform: uppercase;
    }

    .cert-main-heading {
      font-family: 'Outfit', var(--font-main);
      font-size: clamp(2.2rem, 4.5vw, 3.4rem);
      font-weight: 800;
      color: var(--text-white);
      letter-spacing: -1.2px;
      line-height: 1.08;
      margin-bottom: 0;
    }

    .cert-subtext {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.6);
      max-width: 540px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* ══════════════════════════════════════════════
       SHARED CARD INTERNALS
    ══════════════════════════════════════════════ */
    .cert-fan-media {
      position: relative;
      width: 100%;
      aspect-ratio: 1.4 / 1;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
      margin-bottom: 10px;
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .cert-fan-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: rgba(5, 5, 5, 0.75);
      display: block;
      transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .cert-fan-card:hover .cert-fan-img,
    .cert-fan-card:focus-visible .cert-fan-img {
      transform: scale(1.03);
    }

    .cert-fan-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.42);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    .cert-fan-card:hover .cert-fan-overlay,
    .cert-fan-card:focus-visible .cert-fan-overlay {
      opacity: 1;
    }

    .cert-fan-hint {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: rgba(14, 6, 18, 0.92);
      border: 1px solid rgba(255, 77, 0, 0.45);
      border-radius: 16px;
      font-size: 11px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 0.3px;
    }

    .cert-fan-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .cert-fan-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 1.2px;
      margin-bottom: 2px;
    }

    .cert-fan-org {
      color: var(--accent-orange);
      text-transform: uppercase;
      font-family: 'Outfit', sans-serif;
    }

    .cert-fan-date {
      color: rgba(255, 255, 255, 0.4);
      font-family: 'Space Mono', monospace;
      font-size: 9px;
    }

    .cert-fan-title {
      font-family: 'Outfit', var(--font-main);
      font-size: 13px;
      font-weight: 700;
      color: var(--text-white);
      line-height: 1.25;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cert-fan-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.48);
      line-height: 1.35;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ══════════════════════════════════════════════
       DESKTOP & TABLET: FANNED ARC DECK (>= 768px)
    ══════════════════════════════════════════════ */
    @media (min-width: 768px) {
      .cert-stack-wrapper {
        position: relative;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding: 24px 0 32px;
      }

      .cert-stack-stage {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 30px 10px 40px;
        perspective: 1200px;
      }

      .cert-fan-card {
        --card-hover-y: -28px;
        position: relative;
        width: 216px;
        margin: 0 -50px; /* Controlled overlapping spread */
        background: rgba(14, 6, 18, 0.94);
        border: 1.2px solid rgba(255, 255, 255, 0.09);
        border-radius: 16px;
        padding: 12px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
        user-select: none;
        transform-origin: center center;
        transform: translateY(var(--card-y, 0px)) rotate(var(--card-rot, 0deg)) scale(var(--card-scale, 1));
        transition:
          transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 350ms ease,
          filter 350ms ease,
          border-color 350ms ease;
      }

      /* Hover footprint catcher: prevents cursor loss underneath during vertical lift */
      .cert-fan-card::after {
        content: '';
        position: absolute;
        inset: 0 0 0 0;
        pointer-events: none;
        border-radius: 16px;
        z-index: -1;
      }

      /* 10-Card Symmetrical Resting Positions */
      .cert-fan-card:nth-child(1)  { --card-y: 34px; --card-rot: -13deg; --card-scale: 0.86; z-index: 1; opacity: 0.85; }
      .cert-fan-card:nth-child(2)  { --card-y: 24px; --card-rot: -10deg; --card-scale: 0.89; z-index: 2; opacity: 0.88; }
      .cert-fan-card:nth-child(3)  { --card-y: 16px; --card-rot: -7deg;  --card-scale: 0.92; z-index: 3; opacity: 0.92; }
      .cert-fan-card:nth-child(4)  { --card-y: 9px;  --card-rot: -4deg;  --card-scale: 0.95; z-index: 4; opacity: 0.95; }
      .cert-fan-card:nth-child(5)  { --card-y: 2px;  --card-rot: -1deg;  --card-scale: 0.99; z-index: 5; opacity: 1; border-color: rgba(255, 255, 255, 0.16); }
      .cert-fan-card:nth-child(6)  { --card-y: 2px;  --card-rot: 1deg;   --card-scale: 0.99; z-index: 5; opacity: 1; border-color: rgba(255, 255, 255, 0.16); }
      .cert-fan-card:nth-child(7)  { --card-y: 9px;  --card-rot: 4deg;   --card-scale: 0.95; z-index: 4; opacity: 0.95; }
      .cert-fan-card:nth-child(8)  { --card-y: 16px; --card-rot: 7deg;   --card-scale: 0.92; z-index: 3; opacity: 0.92; }
      .cert-fan-card:nth-child(9)  { --card-y: 24px; --card-rot: 10deg;  --card-scale: 0.89; z-index: 2; opacity: 0.88; }
      .cert-fan-card:nth-child(10) { --card-y: 34px; --card-rot: 13deg;  --card-scale: 0.86; z-index: 1; opacity: 0.85; }

      /* Desktop & Pointer-fine Hover: Physical Upward Lift, Subtle Forward Scale, Premium Glow */
      @media (hover: hover) and (pointer: fine) {
        .cert-fan-card:hover,
        .cert-fan-card:focus-visible {
          transform: translateY(var(--card-hover-y, -28px)) rotate(0deg) scale(1.06) !important;
          z-index: 50 !important;
          opacity: 1 !important;
          border-color: rgba(255, 77, 0, 0.75) !important;
          filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 20px rgba(255, 77, 0, 0.28)) !important;
          will-change: transform;
          outline: none;
        }

        .cert-fan-card:hover::after,
        .cert-fan-card:focus-visible::after {
          bottom: -68px;
          pointer-events: auto;
        }
      }
    }

    @media (min-width: 768px) and (max-width: 1240px) {
      .cert-fan-card {
        --card-hover-y: -24px;
        width: 180px;
        margin: 0 -44px;
      }
      .cert-fan-card:nth-child(1)  { --card-y: 26px; --card-rot: -11deg; --card-scale: 0.86; }
      .cert-fan-card:nth-child(2)  { --card-y: 18px; --card-rot: -8deg;  --card-scale: 0.89; }
      .cert-fan-card:nth-child(3)  { --card-y: 12px; --card-rot: -5deg;  --card-scale: 0.92; }
      .cert-fan-card:nth-child(4)  { --card-y: 6px;  --card-rot: -3deg;  --card-scale: 0.95; }
      .cert-fan-card:nth-child(5)  { --card-y: 1px;  --card-rot: -1deg;  --card-scale: 0.99; }
      .cert-fan-card:nth-child(6)  { --card-y: 1px;  --card-rot: 1deg;   --card-scale: 0.99; }
      .cert-fan-card:nth-child(7)  { --card-y: 6px;  --card-rot: 3deg;   --card-scale: 0.95; }
      .cert-fan-card:nth-child(8)  { --card-y: 12px; --card-rot: 5deg;   --card-scale: 0.92; }
      .cert-fan-card:nth-child(9)  { --card-y: 18px; --card-rot: 8deg;   --card-scale: 0.89; }
      .cert-fan-card:nth-child(10) { --card-y: 26px; --card-rot: 11deg;  --card-scale: 0.86; }
    }

    @media (min-width: 768px) and (max-width: 960px) {
      .cert-fan-card {
        --card-hover-y: -20px;
        width: 150px;
        margin: 0 -40px;
        padding: 9px;
      }
      .cert-fan-card:nth-child(1)  { --card-y: 20px; --card-rot: -9deg; --card-scale: 0.86; }
      .cert-fan-card:nth-child(2)  { --card-y: 14px; --card-rot: -7deg; --card-scale: 0.89; }
      .cert-fan-card:nth-child(3)  { --card-y: 9px;  --card-rot: -5deg; --card-scale: 0.92; }
      .cert-fan-card:nth-child(4)  { --card-y: 4px;  --card-rot: -2deg; --card-scale: 0.95; }
      .cert-fan-card:nth-child(5)  { --card-y: 0px;  --card-rot: -1deg; --card-scale: 0.99; }
      .cert-fan-card:nth-child(6)  { --card-y: 0px;  --card-rot: 1deg;  --card-scale: 0.99; }
      .cert-fan-card:nth-child(7)  { --card-y: 4px;  --card-rot: 2deg;  --card-scale: 0.95; }
      .cert-fan-card:nth-child(8)  { --card-y: 9px;  --card-rot: 5deg;  --card-scale: 0.92; }
      .cert-fan-card:nth-child(9)  { --card-y: 14px; --card-rot: 7deg;  --card-scale: 0.89; }
      .cert-fan-card:nth-child(10) { --card-y: 20px; --card-rot: 9deg;  --card-scale: 0.86; }
    }

    /* ══════════════════════════════════════════════
       MOBILE: TRUE HORIZONTAL SCROLL STRIP (< 768px)
    ══════════════════════════════════════════════ */
    @media (max-width: 767px) {
      .section-certifications {
        padding: 50px 0 45px;
        overflow: hidden;
        width: 100%;
      }
      .cert-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
      }
      .cert-header-block {
        padding: 0 20px;
        margin-bottom: 20px;
      }
      /* Viewport Scroll Container */
      .cert-stack-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px 0 24px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
      }
      .cert-stack-wrapper::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
      }
      /* Content Track: Centered side padding allows every card to settle in exact center */
      .cert-stack-stage {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
        padding-top: 6px;
        padding-bottom: 12px;
        padding-left: max(24px, calc(50vw - 135px));
        padding-right: max(24px, calc(50vw - 135px));
        gap: 16px;
        margin: 0;
        transform: none;
        perspective: none;
        overflow: visible;
        box-sizing: border-box;
      }
      /* Standalone cards with uniform appearance — no active outline or following highlight */
      .cert-fan-card {
        flex: 0 0 270px;
        width: 270px;
        max-width: 78vw;
        min-width: 240px;
        margin: 0;
        transform: none;
        opacity: 1;
        scroll-snap-align: center;
        scroll-snap-stop: normal;
        background: rgba(14, 6, 18, 0.92);
        border: 1.2px solid rgba(255, 255, 255, 0.09);
        border-radius: 14px;
        padding: 13px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
        flex-shrink: 0;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        z-index: 1;
        transition: none;
      }
      .cert-fan-card:nth-child(n) {
        margin: 0;
        transform: none;
        opacity: 1;
        z-index: 1;
      }
      .cert-fan-card::before,
      .cert-fan-card::after {
        display: none !important;
      }
      .cert-fan-card:hover,
      .cert-fan-card:focus,
      .cert-fan-card:focus-visible,
      .cert-fan-card:active,
      .cert-fan-card.is-centered {
        transform: none !important;
        border-color: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        filter: none !important;
        outline: none !important;
      }
      .cert-fan-title {
        font-size: 13.5px;
      }
      .cert-fan-sub {
        font-size: 11px;
      }
      .cert-modal {
        padding: 16px;
      }
      .cert-modal-container {
        padding: 46px 14px 16px 14px;
        max-width: 90vw;
        max-height: 80vh;
      }
      .cert-modal-close-btn {
        top: 10px;
        right: 12px;
        width: 34px;
        height: 34px;
        z-index: 100;
      }
      .cert-modal-img {
        max-height: 55vh;
      }
      .cert-modal-caption {
        font-size: 13px;
        margin-top: 8px;
      }
    }

    /* ── FULLSCREEN CERTIFICATE VIEWER MODAL ── */
    .cert-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 999999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
    }

    .cert-modal.open {
      opacity: 1;
      visibility: visible;
    }

    .cert-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 2, 6, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .cert-modal-container {
      position: relative;
      z-index: 2;
      width: min(780px, 86vw);
      max-width: 780px;
      max-height: 82vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(14, 6, 18, 0.96);
      border: 1px solid rgba(255, 77, 0, 0.4);
      border-radius: 18px;
      padding: 46px 22px 18px 22px; /* Generous top padding ensures X button has clear dedicated space */
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 40px rgba(255, 77, 0, 0.18);
      transform: scale(0.94);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cert-modal.open .cert-modal-container {
      transform: scale(1);
    }

    .cert-modal-close-btn {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(26, 12, 32, 0.95);
      border: 1.5px solid rgba(255, 255, 255, 0.28);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 100;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .cert-modal-close-btn:hover {
      background: rgba(255, 77, 0, 0.25);
      border-color: var(--accent-orange);
      color: #ffffff;
      transform: scale(1.1);
      box-shadow: 0 0 14px rgba(255, 77, 0, 0.5);
    }

    .cert-modal-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-height: 100%;
      overflow: hidden;
    }

    .cert-modal-img {
      max-width: 100%;
      max-height: 55vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 10px;
      background: #000;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      display: block;
    }

    .cert-modal-caption {
      margin-top: 12px;
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.92);
      text-align: center;
      letter-spacing: -0.2px;
    }

    /* Unified Cinematic Orb Cursor System (Parent Container Architecture) */
    .cinematic-cursor-system {
      position: fixed;
      top: 0;
      left: 0;
      width: 48px;
      height: 48px;
      margin-top: -24px;
      margin-left: -24px;
      pointer-events: none;
      z-index: 99999;
      opacity: 0;
      transition: opacity 0.35s ease;
      will-change: transform;
    }

    .cursor-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 6px;
      height: 6px;
      margin-top: -3px;
      margin-left: -3px;
      border-radius: 50%;
      background: var(--accent-orange);
      box-shadow: 0 0 8px var(--accent-orange), 0 0 16px rgba(255, 77, 0, 0.7);
      pointer-events: none;
      transition: transform 0.25s ease;
    }

    .cursor-ring-inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      margin-top: -12px;
      margin-left: -12px;
      border-radius: 50%;
      border: 1.2px solid rgba(255, 77, 0, 0.5);
      background: radial-gradient(circle, rgba(255, 77, 0, 0.06) 0%, transparent 70%);
      pointer-events: none;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
      animation: slowRotateRing 14s linear infinite;
    }

    .cursor-ring-outer {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      margin-left: -22px;
      border-radius: 50%;
      border: 1px dashed rgba(220, 20, 60, 0.35);
      pointer-events: none;
      opacity: 0.4;
      transition: opacity 0.3s ease, width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), margin 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
      animation: reverseRotateRing 18s linear infinite;
    }

    /* Active / Hover / Click States (Unified Scaling) */
    .cinematic-cursor-system.hovering .cursor-ring-inner {
      width: 34px;
      height: 34px;
      margin-top: -17px;
      margin-left: -17px;
      border-color: rgba(255, 77, 0, 0.9);
      background: radial-gradient(circle, rgba(255, 77, 0, 0.12) 0%, transparent 75%);
    }

    .cinematic-cursor-system.hovering .cursor-ring-outer {
      opacity: 0.85;
      width: 52px;
      height: 52px;
      margin-top: -26px;
      margin-left: -26px;
      border-color: rgba(255, 30, 80, 0.6);
    }

    .cinematic-cursor-system.clicking .cursor-ring-inner {
      border-color: #ffffff;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
    }

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

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

    @media (prefers-reduced-motion: reduce) {
      .about-reveal, .beyond-reveal, .scroll-reveal, .cursor-glow, .cinematic-cursor-system {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        display: none !important;
      }
      .about-orb-glow, .pulse-ring, .pulse-ring-reverse, .cyber-chip-dot, .beyond-scroll-hint .scroll-arrow, .cursor-ring-inner, .cursor-ring-outer {
        animation: none !important;
      }
    }