@layer components {
  .hero{

display:flex;
align-items:center;
/* justify-content was never set, defaulting to flex-start — this left
   .hero__container (max-width:1400px) flush against the left edge on any
   viewport wider than 1400px, with all leftover space dumped on the right.
   This was the real cause of the "left-heavy" composition. */
justify-content: center;
/* position:relative makes .hero the containing block for the scroll indicator,
   which must be centered relative to the full viewport-width section,
   not the max-width:1400px constrained .hero__container */
position: relative;

min-height: 100vh;

padding-top:40px;
padding-bottom: var(--space-24);

}

  .hero__container {
    /* isolation:isolate creates a stacking context for z-index on children
       without making this element a positioning ancestor.
       Previously position:relative was trapping the scroll indicator inside
       the max-width:1400px constraint and the min-height:100vh caused the
       indicator to render below the visible viewport. */
    isolation: isolate;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    padding: calc(var(--space-8) + 48px) var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    /*min-height: 100vh;*/
  }

  .hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
    width: 100%;
    max-width: 1200px;
  }

  .hero__portrait-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    /* Responsive sizing: width scales with viewport, height derives from aspect-ratio.
       The ratio 360/(440+24) = 360/464 accounts for the 440px slab + 24px portrait overhang.
       This gives absolute children a real containing block without any hardcoded height. */
    width: clamp(280px, 28vw, 360px);
    aspect-ratio: 360 / 464;
    align-self: start;
    margin-bottom: calc(var(--space-6) * -1);
  }

  .hero__portrait-slab {
    position: absolute;
    /* Anchor slab to the bottom of the wrapper, leaving 24px at the top for portrait emergence.
       Width and height expressed as percentages of the wrapper so they scale with clamp() width.
       Slab height = 440/464 of wrapper height. Left-center via left:50% + translateX(-50%). */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(100% * 440 / 464);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.03),
      0 8px 24px rgba(0, 0, 0, 0.05),
      0 16px 48px rgba(0, 0, 0, 0.04);
    z-index: 1;
  }

  .hero__portrait-mask {
    position: absolute;
    /* Fill the full wrapper: top 0 captures the 24px emergence zone above the slab,
       wrapper aspect-ratio already accounts for slab height + overhang. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
  }

  .hero__portrait {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 8%;
  }

  .hero__text-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-right: var(--space-8);
    padding-top: var(--space-4);
  }

  .hero__heading {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    margin: 0;
    /* Negative letter-spacing (-0.03em) shrinks the calculated text width,
       including the trailing gap after the last character — but the glyph's
       actual ink can extend past its own advance-width box in this display
       font. Combined with overflow:hidden, this clips the last character's
       trailing edge. padding-right compensates for the shrinkage (roughly
       double the letter-spacing magnitude as a safety margin) without
       affecting vertical flow, so no margin compensation is needed. */
    padding-right: 0.06em;
    overflow: hidden;
    white-space: nowrap;
  }

  .hero__heading-text {
    position: relative;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
  }

  .hero__heading-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--color-accent);
    opacity: 0;
    transition: opacity 180ms ease;
    white-space: nowrap;
  }

  .hero__heading:hover .hero__heading-hover,
  .hero__heading:focus-within .hero__heading-hover,
  .hero__heading-text.is-hovering .hero__heading-hover {
    opacity: 1;
  }

  .hero__heading:hover .hero__heading-text,
  .hero__heading:focus-within .hero__heading-text,
  .hero__heading-text.is-hovering {
    color: transparent;
  }

  .hero__statement {
    font-family: var(--font-ui);
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0;
    max-width: 600px;
  }

  .hero__focus {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .hero__focus-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all 200ms ease;
  }

  .hero__focus-item:hover {
    border-color: var(--color-text-tertiary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  .hero__focus-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .hero__focus-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  .hero__focus-item:nth-child(1) .hero__focus-icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3E%3C/path%3E%3C/svg%3E");
  }

  .hero__focus-item:nth-child(2) .hero__focus-icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-3 3.5A3 3 0 1 1 4 14.5 3 3 0 1 0 7 19a3 3 0 1 1 6-5.5 3 3 0 1 0 6 5.5 3 3 0 1 1 3-4.5 3 3 0 1 0-3-4.5z'%3E%3C/path%3E%3Cpath d='M17 3h4v4h-4'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-3 3.5A3 3 0 1 1 4 14.5 3 3 0 1 0 7 19a3 3 0 1 1 6-5.5 3 3 0 1 0 6 5.5 3 3 0 1 1 3-4.5 3 3 0 1 0-3-4.5z'%3E%3C/path%3E%3Cpath d='M17 3h4v4h-4'%3E%3C/path%3E%3C/svg%3E");
  }

  .hero__focus-item:nth-child(3) .hero__focus-icon::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpath d='M12 22V12'%3E%3C/path%3E%3Cpath d='M12 12l-8-4'%3E%3C/path%3E%3Cpath d='M3 16v-4h18v4'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpath d='M12 22V12'%3E%3C/path%3E%3Cpath d='M12 12l-8-4'%3E%3C/path%3E%3Cpath d='M3 16v-4h18v4'%3E%3C/path%3E%3C/svg%3E");
  }

  .hero__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .hero__scroll-indicator {
    position: absolute;
    bottom: var(--space-0);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    opacity: 0.7;
    animation: hero-scroll-bounce 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
  }

  @keyframes hero-scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
  }

  .hero__scroll-icon {
    color: var(--color-text-tertiary);
    transition: color 200ms ease;
  }

  .hero__scroll-text {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-tertiary);
  }
}

/* Optical centering nudge: applied on top of true centering (justify-content:center
   on .hero above). Only activates once .hero__container's max-width:1400px is
   meaningfully binding with guaranteed slack on both sides, avoiding any
   horizontal overflow risk at narrower laptop/tablet viewports. */
@media (min-width: 1300px) {
  @layer components {
    .hero__content {
      transform: translateX(var(--space-6));
    }
  }
}

@media (max-width: 1199px) {
  @layer components {
    /* Tablet: keep two-column layout — adapts from desktop, does not replace it.
       Only tighten gap and remove text padding-right to fit narrower columns. */
    .hero__content {
      gap: var(--space-8);
    }

    .hero__text-content {
      padding-right: var(--space-4);
    }

    .hero__scroll-indicator {
      bottom: var(--space-6);
    }
  }
}

@media (max-width: 767px) {
  @layer components {
    .hero {
      min-height: 100vh;
      padding: var(--space-6) var(--space-4);
    }

    .hero__container {
      padding: var(--space-6) var(--space-4);
    }

    /* Single-column collapse: only at mobile */
    .hero__content {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      max-width: 100%;
      text-align: center;
    }

    .hero__text-content {
      padding-right: 0;
      align-items: center;
    }

    .hero__statement {
      font-size: 1rem;
      line-height: 1.6;
      max-width: none;
      text-align: center;
    }

    .hero__focus {
      justify-content: center;
    }

    .hero__cta-group {
      flex-direction: column;
      width: 100%;
      max-width: 280px;
      justify-content: center;
    }

    .hero__cta-group .btn {
      width: 100%;
      justify-content: center;
    }

    /* Portrait above text on mobile */
    .hero__portrait-wrapper {
      order: -1;
      /* Narrower on mobile, same aspect-ratio as desktop (360/464).
         max-width: 90vw prevents overflow on very small screens.
         margin-inline:auto + justify-self:center centers the wrapper
         within the 1fr grid cell (the wrapper is narrower than the cell). */
      width: clamp(220px, 70vw, 300px);
      max-width: 90vw;
      margin-inline: auto;
      justify-self: center;
    }

    .hero__heading {
      font-size: clamp(2.5rem, 8vw, 3.5rem);
      /* white-space: normal allows wrapping on mobile but risks layout shift during
         identity morph since "Shivam Kumar Singh" wraps differently than "ShadowThakur".
         min-height set to 2 lines at the clamped size (line-height 1.1 × 2 lines × font-size)
         keeps the heading block stable regardless of which name is showing. */
      white-space: normal;
      text-align: center;
      min-height: calc(clamp(2.5rem, 8vw, 3.5rem) * 1.1 * 2);
    }

    .hero__portrait {
      object-position: center 6%;
    }

    .hero__scroll-indicator {
      bottom: var(--space-6);
    }
  }
}

@media (max-width: 480px) {
  @layer components {
    .hero__heading {
      font-size: clamp(2.25rem, 10vw, 2.75rem);
      /* Recalculate min-height for the smaller font-size at this breakpoint */
      min-height: calc(clamp(2.25rem, 10vw, 2.75rem) * 1.1 * 2);
    }

    /* Portrait wrapper gets a tighter clamp at very small screens */
    .hero__portrait-wrapper {
      width: clamp(200px, 65vw, 260px);
    }

    .hero__focus-item {
      font-size: 0.8125rem;
      padding: var(--space-1-5) var(--space-3);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .hero__scroll-indicator {
      animation: none;
    }

    .hero__heading-text,
    .hero__heading-hover,
    .hero__portrait {
      transition: none !important;
    }

    .reduce-motion .hero__heading-text.is-hovering .hero__heading-hover {
      opacity: 1;
      transition: none !important;
    }

    .reduce-motion .hero__heading-text.is-hovering {
      color: transparent;
      transition: none !important;
    }
  }
}

.reduce-motion .hero__heading-text.is-hovering .hero__heading-hover {
  opacity: 1;
  transition: none !important;
}

.reduce-motion .hero__heading-text.is-hovering {
  color: transparent;
  transition: none !important;
}