/* ===========================
       CSS CUSTOM PROPERTIES
    =========================== */
    :root {
      --white:       #FFFFFF;
      --off-white:   #FAFAFA;
      --light-gray:  #F5F5F7;
      --mid-gray:    #E8E8ED;
      --text-primary:   #110A0A;
      --text-secondary: #4A3A38;
      --text-muted:     #9A8A88;
      --bg:          #FFFFFF;

      /* Brand */
      --red:         #ff5863;
      --orange:      #fc9049;
      --red-light:   #ffb3b7;
      --orange-light:#fdd0aa;
      --silver:      #D0C8C0;

      /* Gradients */
      --grad-brand:  -webkit-linear-gradient(0deg, #ff5863 50%, #fc9049 50%);
      --grad-brand-smooth: linear-gradient(135deg, #ff5863 0%, #fc9049 100%);
      --grad-brand-diag:   linear-gradient(135deg, #ff5863, #fc9049);
      --grad-hero-bg:
        radial-gradient(ellipse 65% 55% at 95% 5%, rgba(252,144,73,.16), transparent),
        radial-gradient(ellipse 50% 50% at 5% 95%, rgba(255,88,99,.11), transparent),
        var(--bg);
      --grad-section-warm:
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(252,144,73,.08), transparent),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(255,88,99,.07), transparent),
        #FAFAFA;
      --grad-card:   linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,248,245,0.80) 100%);
      --grad-border: linear-gradient(135deg, var(--red-light), var(--orange-light), var(--silver));

      --shadow-sm:  0 2px 8px rgba(255,88,99,0.08);
      --shadow-md:  0 8px 32px rgba(255,88,99,0.14);
      --shadow-lg:  0 24px 64px rgba(255,88,99,0.18);
      --shadow-xl:  0 40px 100px rgba(255,88,99,0.22);
      --shadow-glow: 0 0 48px rgba(255,88,99,0.20), 0 16px 48px rgba(252,144,73,0.18);

      --radius-sm:  8px;
      --radius-md:  16px;
      --radius-lg:  24px;
      --radius-xl:  32px;

      --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

      --font-display: 'Sora', sans-serif;
      --font-body:    'Inter', sans-serif;

      --nav-h: 72px;
    }

    /* ===========================
       RESET & BASE
    =========================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    /* SVG grain texture */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: 0.028;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 180px;
    }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    button { cursor: pointer; border: none; background: none; font-family: var(--font-body); }
    input, textarea { font-family: var(--font-body); }

    /* ===========================
       UTILITY CLASSES
    =========================== */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-pad { padding: 120px 0; }
    .section-pad-sm { padding: 80px 0; }

    .label-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 18px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(255,88,99,0.07);
      color: var(--red);
      border: 1px solid rgba(255,88,99,0.20);
      backdrop-filter: blur(8px);
    }
    .label-chip::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--grad-brand-smooth);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .gradient-text {
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 15px 30px;
      border-radius: 100px;
      font-size: 15px;
      font-weight: 600;
      transition: var(--transition);
      white-space: nowrap;
      position: relative;
      overflow: hidden;
    }
    .btn-primary {
      background: var(--grad-brand-smooth);
      color: var(--white);
      box-shadow: 0 4px 24px rgba(255,88,99,0.38);
    }
    .btn-primary::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
      opacity: 0;
      transition: var(--transition-fast);
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(255,88,99,0.50), 0 0 0 1px rgba(255,88,99,0.2);
    }
    .btn-primary:hover::after { opacity: 1; }
    .btn-outline {
      background: rgba(255,255,255,0.8);
      color: var(--text-primary);
      border: 1.5px solid var(--mid-gray);
      backdrop-filter: blur(8px);
    }
    .btn-outline:hover {
      border-color: var(--red);
      color: var(--red);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(255,88,99,0.12);
    }

    .section-eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
      position: relative;
      padding-left: 20px;
    }
    .section-eyebrow::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 12px; height: 2px;
      background: var(--grad-brand-smooth);
      border-radius: 2px;
    }
    .section-heading {
      font-family: var(--font-display);
      font-size: clamp(36px, 5vw, 56px);
      font-weight: 700;
      line-height: 1.15;
      color: var(--text-primary);
      margin-bottom: 20px;
    }
    .section-subheading {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 560px;
      line-height: 1.7;
    }

    /* Reveal animation base */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }
    .reveal-delay-5 { transition-delay: 0.5s; }
    .reveal-delay-6 { transition-delay: 0.6s; }

    /* ===========================
       NAVIGATION
    =========================== */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      transition: var(--transition);
    }
    .nav.scrolled {
      background: rgba(255,255,255,0.86);
      backdrop-filter: blur(28px) saturate(200%);
      -webkit-backdrop-filter: blur(28px) saturate(200%);
      border-bottom: 1px solid rgba(255,88,99,0.08);
      box-shadow: 0 4px 32px rgba(255,88,99,0.06), 0 1px 0 rgba(255,88,99,0.04);
    }
    .nav-inner {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      background: var(--grad-brand);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.03em;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
    }
    .nav-links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-secondary);
      transition: var(--transition-fast);
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 0; height: 2px;
      background: var(--grad-brand-smooth);
      transition: var(--transition-fast);
      border-radius: 2px;
    }
    .nav-links a:hover { color: var(--text-primary); }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta {
      padding: 10px 22px !important;
      font-size: 14px !important;
    }
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .nav-hamburger span {
      display: block;
      width: 24px; height: 2px;
      background: var(--text-primary);
      border-radius: 2px;
      transition: var(--transition-fast);
    }

    /* Mobile nav */
    .mobile-nav {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0; right: 0;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--mid-gray);
      padding: 24px;
      z-index: 999;
      flex-direction: column;
      gap: 20px;
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-primary);
      padding: 8px 0;
      border-bottom: 1px solid var(--light-gray);
    }

    /* ===========================
       HERO — PREMIUM REDESIGN
    =========================== */
    .hero {
      min-height: 100vh;
      background: var(--grad-hero-bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: var(--nav-h);
      position: relative;
      overflow: hidden;
    }

    /* Dot-grid overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255,88,99,0.18) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, black 20%, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 60% 40%, black 20%, transparent 80%);
      pointer-events: none;
    }

    /* Aurora glow top-right */
    .hero::after {
      content: '';
      position: absolute;
      top: -10%; right: -10%;
      width: 65%; height: 80%;
      background:
        radial-gradient(ellipse 70% 60% at 80% 20%, rgba(252,144,73,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255,88,99,0.13) 0%, transparent 60%);
      pointer-events: none;
      animation: aurora-shift 12s ease-in-out infinite alternate;
    }

    .hero-orb-extra {
      position: absolute;
      bottom: -15%; left: -8%;
      width: 55%; height: 70%;
      background: radial-gradient(ellipse, rgba(255,88,99,0.09) 0%, transparent 65%);
      border-radius: 50%;
      animation: float-blob 14s ease-in-out infinite reverse;
      pointer-events: none;
    }

    /* Main inner grid */
    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 55fr 45fr;
      gap: 64px;
      align-items: center;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 24px 60px;
    }

    /* ── LEFT ── */
    .hero-content {}

    /* Animated role badge */
    .hero-role-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .hero-role-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--grad-brand-smooth);
      animation: pulse-dot 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    .hero-role-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }
    .hero-role-text span {
      color: var(--red);
      font-weight: 700;
    }

    /* Main heading */
    .hero-heading {
      font-family: var(--font-display);
      font-size: clamp(44px, 5.8vw, 78px);
      font-weight: 900;
      line-height: 1.04;
      letter-spacing: -0.035em;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .hero-heading-highlight {
      display: inline-block;
      position: relative;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    /* Underline swipe decoration */
    .hero-heading-highlight::after {
      content: '';
      position: absolute;
      left: 0; bottom: -4px;
      width: 100%; height: 4px;
      border-radius: 100px;
      background: var(--grad-brand-smooth);
      opacity: 0.35;
    }

    /* Typewriter subtitle */
    .hero-sub {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin: 20px 0 36px;
      max-width: 460px;
    }
    .hero-typewriter {
      display: inline;
      color: var(--red);
      font-weight: 600;
      border-right: 2px solid var(--red);
      animation: blink-caret 0.8s step-end infinite;
      white-space: nowrap;
      overflow: hidden;
    }

    /* Horizontal stat strip */
    .hero-stats {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 44px;
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.95);
      border-radius: var(--radius-lg);
      padding: 20px 28px;
      box-shadow: var(--shadow-md);
      width: fit-content;
    }
    .stat-item {
      text-align: center;
      padding: 0 28px;
      position: relative;
    }
    .stat-item + .stat-item::before {
      content: '';
      position: absolute;
      left: 0; top: 15%; bottom: 15%;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(255,88,99,0.25), transparent);
    }
    .stat-number {
      font-family: var(--font-display);
      font-size: 30px;
      font-weight: 900;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      white-space: nowrap;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }

    /* Scroll indicator */
    .hero-scroll {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .hero-scroll-line {
      width: 40px; height: 1px;
      background: linear-gradient(to right, var(--red), transparent);
    }

    /* ── RIGHT VISUAL — PROFILE CARD ── */
    .hero-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: visible;
      perspective: 900px;
    }

    /* ── Main profile card ── */
    .hv-profile-card {
      position: relative;
      z-index: 2;
      width: 368px;
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255,88,99,0.10),
        0 32px 72px rgba(0,0,0,0.13),
        0 8px 28px rgba(255,88,99,0.10);
      animation: float-card 9s ease-in-out infinite;
    }

    /* ── Card header (gradient bg) ── */
    .hv-card-head {
      background: var(--grad-brand-smooth);
      padding: 26px 22px 22px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }
    /* Decorative orbs inside header */
    .hv-head-orb {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
      pointer-events: none;
    }
    .hv-head-orb:first-child  { width: 130px; height: 130px; right: -28px; top: -28px; }
    .hv-head-orb-2            { width:  80px; height:  80px; right:  70px; top:  18px; background: rgba(255,255,255,0.07); }

    /* Avatar */
    .hv-avatar-wrap { position: relative; flex-shrink: 0; }
    .hv-avatar {
      width: 66px; height: 66px;
      border-radius: 18px;
      background: rgba(255,255,255,0.20);
      border: 2px solid rgba(255,255,255,0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.04em;
    }
    .hv-avail-dot {
      position: absolute;
      bottom: -3px; right: -3px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: #27C93F;
      border: 2.5px solid #fff;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Name / title block */
    .hv-id-block { flex: 1; min-width: 0; }
    .hv-full-name {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: 3px;
    }
    .hv-job-title {
      font-size: 11.5px;
      color: rgba(255,255,255,0.78);
      font-weight: 500;
      margin-bottom: 10px;
      line-height: 1.3;
    }
    .hv-open-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 11px;
      border-radius: 100px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.32);
      font-size: 11px;
      font-weight: 700;
      color: #fff;
    }
    .hv-open-pulse {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #27C93F;
      animation: pulse-dot 1.8s ease-in-out infinite;
      display: block;
    }
    .hv-exp-pill {
      align-self: flex-start;
      flex-shrink: 0;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.35);
      border-radius: 9px;
      padding: 6px 10px;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      white-space: nowrap;
    }

    /* ── Bio ── */
    .hv-bio-row {
      padding: 18px 22px 16px;
      border-bottom: 1px solid var(--light-gray);
    }
    .hv-bio {
      font-size: 13.5px;
      line-height: 1.72;
      color: var(--text-secondary);
      font-weight: 400;
      margin: 0;
    }

    /* ── Tech Stack ── */
    .hv-stack-row {
      padding: 14px 22px 16px;
      border-bottom: 1px solid var(--light-gray);
    }
    .hv-row-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .hv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .hv-tc {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 11.5px;
      font-weight: 700;
      border: 1.5px solid;
      line-height: 1;
      white-space: nowrap;
    }
    .hv-tc-react   { color: #0EA5E9; border-color: rgba(14,165,233,.22);  background: rgba(14,165,233,.06);  }
    .hv-tc-wp      { color: #21759B; border-color: rgba(33,117,155,.22);  background: rgba(33,117,155,.06);  }
    .hv-tc-node    { color: #16A34A; border-color: rgba(22,163,74,.22);   background: rgba(22,163,74,.06);   }
    .hv-tc-aws     { color: #D97706; border-color: rgba(217,119,6,.22);   background: rgba(217,119,6,.06);   }
    .hv-tc-shopify { color: #5E8E3E; border-color: rgba(94,142,62,.22);   background: rgba(94,142,62,.06);   }
    .hv-tc-php     { color: #6366F1; border-color: rgba(99,102,241,.22);  background: rgba(99,102,241,.06);  }
    .hv-tc-next    { color: #555;    border-color: rgba(0,0,0,.12);       background: rgba(0,0,0,.03);       }
    .hv-tc-docker  { color: #2496ED; border-color: rgba(36,150,237,.22);  background: rgba(36,150,237,.06);  }

    /* ── Stats bar ── */
    .hv-stats-bar { display: flex; }
    .hv-stat {
      flex: 1;
      text-align: center;
      padding: 16px 6px;
    }
    .hv-stat-sep {
      width: 1px;
      background: var(--light-gray);
      align-self: stretch;
    }
    .hv-stat-n {
      font-family: var(--font-display);
      font-size: 21px;
      font-weight: 900;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 4px;
    }
    .hv-stat-l {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }

    /* ── Floating notification (bottom-left) ── */
    .hv-delivery-notif {
      position: absolute;
      bottom: -14px; left: -28px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 16px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.98);
      border-radius: 14px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 6px rgba(255,88,99,0.08);
      white-space: nowrap;
      animation: float-card 7s ease-in-out infinite 1.5s;
    }
    .hv-dn-icon {
      width: 32px; height: 32px;
      border-radius: 10px;
      background: rgba(39,201,63,0.12);
      color: #27C93F;
      font-size: 16px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .hv-dn-title { font-size: 12px; font-weight: 700; color: var(--text-primary); }
    .hv-dn-sub   { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }

    /* ── Floating AWS cert badge (top-right) ── */
    .hv-cert-badge {
      position: absolute;
      top: -14px; right: -24px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.98);
      border-radius: 100px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.10);
      white-space: nowrap;
      animation: float-card 6s ease-in-out infinite 0.5s;
    }
    .hv-cert-icon { font-size: 16px; }
    .hv-cert-text {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
    }

    /* ── OLD (unused) classes kept below so nothing breaks ── */
    .hv-universe {
      position: relative;
      width: 420px;
      height: 420px;
      flex-shrink: 0;
    }
    #techCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /* ── Central RS monogram ── */
    .hv-monogram {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 5;
    }
    .hv-mono-border {
      width: 88px; height: 88px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, #ff5863, #fc9049, rgba(255,200,150,0.4), #ff5863);
      animation: spin-ring 4s linear infinite;
      padding: 3px;
      box-shadow:
        0 0 0 6px rgba(255,88,99,0.08),
        0 0 40px rgba(255,88,99,0.30),
        0 0 80px rgba(252,144,73,0.15);
    }
    .hv-mono-face {
      width: 100%; height: 100%;
      border-radius: 50%;
      background: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
    }
    .hv-mono-text {
      font-family: var(--font-display);
      font-size: 26px;
      font-weight: 900;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.05em;
      line-height: 1;
    }
    .hv-mono-sub {
      font-size: 7.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── Floating stat cards (positioned on .hero-visual) ── */
    .hv-float {
      position: absolute;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(28px);
      -webkit-backdrop-filter: blur(28px);
      border: 1px solid rgba(255,255,255,0.96);
      border-radius: 16px;
      box-shadow:
        0 8px 32px rgba(0,0,0,0.10),
        0 2px 8px rgba(255,88,99,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9);
      white-space: nowrap;
    }
    .hv-float-icon { font-size: 22px; flex-shrink: 0; }
    .hv-float-num {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 900;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .hv-float-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .hv-float-avail {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-primary);
    }
    .hv-float-pulse {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #27c93f;
      box-shadow: 0 0 0 4px rgba(39,201,63,0.18);
      animation: pulse-dot 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    /* Positions + float animations */
    .hv-float-1 {
      top: 18px; right: -28px;
      animation: float-card 7s ease-in-out infinite 0.3s;
    }
    .hv-float-2 {
      bottom: 60px; left: -32px;
      animation: float-card 8s ease-in-out infinite 1.5s;
    }
    .hv-float-3 {
      bottom: -4px; right: -16px;
      animation: float-card 6s ease-in-out infinite 2.4s;
    }

    /* ── OLD CLASSES BELOW — kept to avoid breaking anything ── */
    .hv-glow-blob {
      position: absolute;
      width: 340px; height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,88,99,0.18) 0%, rgba(252,144,73,0.10) 50%, transparent 72%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      filter: blur(32px);
      z-index: 0;
      animation: aurora-shift 8s ease-in-out infinite;
    }

    /* ── Terminal window ── */
    .hv-terminal {
      position: relative;
      z-index: 2;
      width: 380px;
      background: #0f1117;
      border-radius: 16px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 32px 80px rgba(0,0,0,0.45),
        0 0 60px rgba(255,88,99,0.10);
      overflow: hidden;
      animation: float-card 8s ease-in-out infinite;
    }

    /* macOS title bar */
    .hv-term-bar {
      display: flex;
      align-items: center;
      gap: 0;
      padding: 13px 18px;
      background: #1a1d27;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .hv-term-dots { display: flex; gap: 7px; align-items: center; }
    .hv-dot {
      width: 12px; height: 12px;
      border-radius: 50%;
    }
    .hv-dot-red    { background: #ff5f56; }
    .hv-dot-yellow { background: #ffbd2e; }
    .hv-dot-green  { background: #27c93f; }
    .hv-term-title {
      flex: 1;
      text-align: center;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 12px;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.03em;
    }
    .hv-term-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #27c93f;
      background: rgba(39,201,63,0.10);
      padding: 3px 9px;
      border-radius: 100px;
      border: 1px solid rgba(39,201,63,0.25);
    }
    .hv-live-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #27c93f;
      animation: pulse-dot 1.8s ease-in-out infinite;
      display: inline-block;
    }

    /* Code body */
    .hv-term-body {
      padding: 18px 20px 10px;
      font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
      font-size: 12.5px;
      line-height: 1.75;
    }
    .hv-code-line {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
    }
    .hv-ln {
      width: 22px;
      color: rgba(255,255,255,0.15);
      font-size: 11px;
      flex-shrink: 0;
      text-align: right;
      margin-right: 14px;
      user-select: none;
    }
    /* Syntax colours */
    .hv-kw   { color: #c792ea; }
    .hv-var  { color: #82aaff; }
    .hv-prop { color: #80cbc4; }
    .hv-str  { color: #c3e88d; }
    .hv-num  { color: #f78c6c; }
    .hv-bool { color: #ff5874; }
    .hv-op   { color: rgba(255,255,255,0.45); }
    .hv-prompt { color: var(--red); font-weight: 700; }

    /* Blinking cursor line */
    .hv-typing-line { margin-top: 2px; }
    .hv-typed { color: rgba(255,255,255,0.7); }
    .hv-caret {
      color: var(--orange);
      animation: blink-caret 1s step-end infinite;
    }

    /* Commit activity graph */
    .hv-commit-graph {
      padding: 10px 20px 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .hv-commit-label {
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 10px;
      color: rgba(255,255,255,0.25);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .hv-commit-grid {
      display: grid;
      grid-template-columns: repeat(26, 1fr);
      gap: 3px;
    }
    .hv-commit-cell {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 2px;
      background: rgba(255,255,255,0.06);
      transition: background 0.2s;
    }
    .hv-commit-cell.lvl1 { background: rgba(255,88,99,0.25); }
    .hv-commit-cell.lvl2 { background: rgba(255,88,99,0.50); }
    .hv-commit-cell.lvl3 { background: rgba(255,88,99,0.78); }
    .hv-commit-cell.lvl4 { background: #ff5863; box-shadow: 0 0 4px rgba(255,88,99,0.6); }

    /* ── Floating tech badges ── */
    .hv-badge {
      position: absolute;
      z-index: 10;
      padding: 7px 13px;
      border-radius: 100px;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.95);
      font-size: 12px;
      font-weight: 700;
      color: var(--text-primary);
      box-shadow: 0 4px 20px rgba(0,0,0,0.10);
      white-space: nowrap;
    }
    .hv-badge-1 { top: 12px;  left: -28px;  animation: float-card 6s ease-in-out infinite 0s; }
    .hv-badge-2 { top: 60px;  right: -22px; animation: float-card 7s ease-in-out infinite 0.8s; }
    .hv-badge-3 { bottom: 110px; right: -30px; animation: float-card 8s ease-in-out infinite 1.4s; }
    .hv-badge-4 { bottom: 52px; left: -20px; animation: float-card 6.5s ease-in-out infinite 2s; }
    .hv-badge-5 { top: 50%;   left: -36px;  transform: translateY(-50%); animation: float-card 9s ease-in-out infinite 0.4s; }

    /* ── Floating stat / status chips ── */
    .hv-chip {
      position: absolute;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.98);
      border-radius: 14px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(255,88,99,0.08);
      white-space: nowrap;
    }
    .hv-chip-icon { font-size: 20px; }
    .hv-chip-num {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 800;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .hv-chip-lbl {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 600;
      margin-top: 2px;
    }
    .hv-status-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #27c93f;
      box-shadow: 0 0 0 3px rgba(39,201,63,0.20);
      animation: pulse-dot 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    .hv-chip-1 { top: -10px;   right: -24px; animation: float-card 7s ease-in-out infinite 1s; }
    .hv-chip-2 { bottom: -2px; left: -20px;  animation: float-card 6s ease-in-out infinite 2.2s; }

    /* ── OLD CLASSES BELOW — kept for reference, not used ── */
    .hv-back-card {
      position: absolute;
      width: 320px;
      background: rgba(255,255,255,0.55);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.8);
      border-radius: var(--radius-xl);
      padding: 28px;
      box-shadow: var(--shadow-md);
      transform: rotate(-6deg) translateX(-16px) translateY(12px);
      z-index: 0;
    }
    .hv-back-bar {
      height: 10px;
      border-radius: 100px;
      background: var(--grad-brand-smooth);
      opacity: 0.35;
      margin-bottom: 16px;
      width: 60%;
    }
    .hv-back-line {
      height: 8px;
      border-radius: 100px;
      background: var(--light-gray);
      margin-bottom: 10px;
    }
    .hv-back-line.w80 { width: 80%; }
    .hv-back-line.w60 { width: 60%; }
    .hv-back-line.w70 { width: 70%; }

    /* ─ Main dashboard card ─ */
    .hv-main-card {
      position: relative;
      z-index: 2;
      width: 340px;
      background: var(--white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-xl);
      border: 1px solid rgba(255,88,99,0.08);
      overflow: hidden;
      animation: float-card 7s ease-in-out infinite;
    }

    /* Gradient header strip */
    .hv-header {
      background: var(--grad-brand-smooth);
      padding: 24px 24px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .hv-header::after {
      content: '';
      position: absolute;
      right: -30px; top: -30px;
      width: 100px; height: 100px;
      border-radius: 50%;
      background: rgba(255,255,255,0.10);
    }
    .hv-header-left { display: flex; align-items: center; gap: 14px; }
    .hv-avatar-wrap { position: relative; flex-shrink: 0; }
    .hv-avatar {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: rgba(255,255,255,0.22);
      border: 2.5px solid rgba(255,255,255,0.5);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      color: white;
      letter-spacing: -0.03em;
    }
    .hv-online {
      position: absolute;
      bottom: 2px; right: 2px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #34C759;
      border: 2px solid white;
    }
    .hv-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 800;
      color: white;
      letter-spacing: -0.02em;
    }
    .hv-role-label {
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      margin-top: 2px;
      font-weight: 500;
    }
    .hv-open-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 100px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.3);
      font-size: 11px;
      font-weight: 700;
      color: white;
      white-space: nowrap;
    }
    .hv-open-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #34C759;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Card body */
    .hv-card-divider {
      height: 1px;
      background: var(--light-gray);
    }
    .hv-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 16px 24px 8px;
    }

    /* Skill bars */
    .hv-skills-list { padding: 4px 24px 16px; }
    .hv-skill-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .hv-skill-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      width: 100px;
      flex-shrink: 0;
    }
    .hv-skill-bar {
      flex: 1;
      height: 6px;
      border-radius: 100px;
      background: var(--light-gray);
      overflow: hidden;
    }
    .hv-skill-fill {
      height: 100%;
      border-radius: 100px;
      background: var(--grad-brand-smooth);
      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hv-skill-pct {
      font-size: 11px;
      font-weight: 700;
      color: var(--red);
      width: 30px;
      text-align: right;
      flex-shrink: 0;
    }

    /* Stats footer */
    .hv-card-stats {
      display: flex;
      border-top: 1px solid var(--light-gray);
    }
    .hv-card-stat {
      flex: 1;
      text-align: center;
      padding: 16px 8px;
      border-right: 1px solid var(--light-gray);
    }
    .hv-card-stat:last-child { border-right: none; }
    .hv-cs-num {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 800;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 2px;
    }
    .hv-cs-lbl {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ─ Floating notification cards ─ */
    .hv-notif {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.98);
      border-radius: var(--radius-md);
      box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(255,88,99,0.08);
      white-space: nowrap;
      z-index: 10;
    }
    .hv-notif-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .hv-notif-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .hv-notif-sub   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

    .hv-notif-1 {
      top: 16px; right: -16px;
      animation: float-card 6s ease-in-out infinite;
    }
    .hv-notif-2 {
      bottom: 32px; left: -24px;
      animation: float-card 8s ease-in-out infinite 1.8s;
    }

    /* Marquee ticker at bottom of hero */
    .hero-ticker {
      position: relative;
      z-index: 2;
      width: 100%;
      border-top: 1px solid rgba(255,88,99,0.08);
      border-bottom: 1px solid rgba(255,88,99,0.08);
      overflow: hidden;
      background: rgba(255,255,255,0.5);
      backdrop-filter: blur(12px);
      padding: 14px 0;
      margin-top: auto;
    }
    .hero-ticker-track {
      display: flex;
      align-items: center;
      gap: 0;
      animation: ticker-scroll 30s linear infinite;
      width: max-content;
    }
    .ticker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 32px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      border-right: 1px solid rgba(255,88,99,0.10);
      white-space: nowrap;
    }
    .ticker-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--grad-brand-smooth);
      flex-shrink: 0;
    }

    /* Removed old classes no longer in use */
    .hero-card-main, .hero-card-name, .hero-card-role,
    .hero-card-skills, .hero-card-metric,
    .hero-float, .hero-float-1, .hero-float-2,
    .hero-avatar, .metric-pill, .metric-val, .metric-lbl,
    .fi-green, .fi-blue, .float-icon { display: none; }

    /* ===========================
       KEYFRAMES (new)
    =========================== */
    @keyframes spin-ring {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes orbit-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes aurora-shift {
      0%   { transform: translate(0,0) scale(1); opacity: 1; }
      50%  { transform: translate(-30px, 20px) scale(1.05); opacity: 0.85; }
      100% { transform: translate(20px, -10px) scale(0.95); opacity: 1; }
    }
    @keyframes ticker-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes blink-caret {
      0%, 100% { border-color: var(--red); }
      50%       { border-color: transparent; }
    }

    /* ===========================
       TRUSTED EXPERIENCE
    =========================== */
    .trusted {
      padding: 64px 0;
      background: var(--grad-section-warm);
      border-top: 1px solid rgba(255,88,99,0.08);
      border-bottom: 1px solid rgba(255,88,99,0.08);
    }
    .trusted-label {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 40px;
    }
    .trusted-logos {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px 32px;
    }
    .trusted-logo-item {
      padding: 14px 28px;
      border-radius: var(--radius-md);
      background: var(--white);
      border: 1px solid var(--mid-gray);
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 700;
      color: var(--text-secondary);
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
    }
    .trusted-logo-item:hover {
      color: var(--red);
      border-color: rgba(255,88,99,0.30);
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }

    /* ===========================
       ABOUT ME
    =========================== */
    /* ══════════════════════════════
       ABOUT — STORY GRID
    ══════════════════════════════ */
    .about { background: #f5f4f2; }

    /* ── Grid layout ── */
    .ag-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      margin-top: 24px;
    }
    .ag-story      { grid-column: 1 / 8;  grid-row: 1; }
    .ag-philosophy { grid-column: 8 / 13; grid-row: 1; }
    .ag-howwork    { grid-column: 1 / 6;  grid-row: 2; }
    .ag-focus      { grid-column: 6 / 10; grid-row: 2; }
    .ag-cert       { grid-column: 10 / 13; grid-row: 2; }

    /* ── Base card ── */
    .ag-card {
      background: #fff;
      border-radius: 20px;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 2px 16px rgba(0,0,0,0.05);
      padding: 32px;
      transition: transform 0.28s ease, box-shadow 0.28s ease;
    }
    .ag-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 36px rgba(0,0,0,0.09);
    }
    .ag-card-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 16px;
    }

    /* ── STORY card ── */
    .ag-story-heading {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.2vw, 30px);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.2;
      letter-spacing: -0.03em;
      margin-bottom: 18px;
    }
    .ag-story-text {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.82;
      margin-bottom: 14px;
    }
    /* Mini career timeline */
    .ag-timeline {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid var(--light-gray);
      position: relative;
    }
    .ag-timeline::before {
      content: '';
      position: absolute;
      top: 32px; left: 22px; right: 22px;
      height: 2px;
      background: linear-gradient(to right, var(--red), var(--orange));
      opacity: 0.20;
    }
    .ag-tl-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
    }
    .ag-tl-year {
      font-family: var(--font-display);
      font-size: 12px;
      font-weight: 800;
      color: var(--text-muted);
    }
    .ag-tl-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--light-gray);
      border: 2px solid #fff;
      box-shadow: 0 0 0 2px var(--light-gray);
      flex-shrink: 0;
    }
    .ag-tl-dot-active {
      background: var(--grad-brand-smooth);
      background: var(--red);
      box-shadow: 0 0 0 3px rgba(255,88,99,0.22);
    }
    .ag-tl-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      line-height: 1.3;
    }

    /* ── PHILOSOPHY card (dark) ── */
    .ag-philosophy {
      background: #111318;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    .ag-philosophy::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(255,88,99,0.18), transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    .ag-phi-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.40);
      margin-bottom: 20px;
    }
    .ag-phi-quote {
      font-family: var(--font-display);
      font-size: clamp(17px, 1.6vw, 22px);
      font-weight: 700;
      line-height: 1.45;
      color: #fff;
      font-style: italic;
      margin-bottom: 28px;
      flex: 1;
    }
    .ag-phi-points {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .ag-phi-point {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      color: rgba(255,255,255,0.60);
      line-height: 1.5;
      font-weight: 500;
    }
    .ag-phi-arrow {
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
      flex-shrink: 0;
    }

    /* ── HOW I WORK card ── */
    .ag-work-list { display: flex; flex-direction: column; gap: 18px; }
    .ag-work-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }
    .ag-work-icon {
      font-size: 22px;
      width: 42px; height: 42px;
      border-radius: 12px;
      background: rgba(255,88,99,0.06);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ag-work-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 3px;
    }
    .ag-work-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* ── CURRENT FOCUS card ── */
    .ag-focus-logo {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: var(--grad-brand-smooth);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 14px; font-weight: 900; color: #fff;
      margin-bottom: 12px;
    }
    .ag-focus-co {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 3px;
    }
    .ag-focus-role {
      font-size: 11.5px;
      color: var(--text-secondary);
      font-weight: 500;
      margin-bottom: 16px;
      line-height: 1.5;
    }
    .ag-focus-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ag-focus-tags span {
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600;
      background: rgba(255,88,99,0.06);
      border: 1px solid rgba(255,88,99,0.15);
      color: var(--red);
    }

    /* ── CERTIFICATIONS card ── */
    .ag-cert-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }
    .ag-cert-badge {
      width: 42px; height: 42px;
      border-radius: 12px;
      background: rgba(36,150,237,0.10);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .ag-cert-name {
      font-size: 14px; font-weight: 800;
      color: var(--text-primary);
    }
    .ag-cert-sub {
      font-size: 11.5px; color: var(--text-muted);
      font-weight: 500; margin-top: 2px;
    }
    .ag-cert-divider {
      height: 1px;
      background: var(--light-gray);
      margin-bottom: 16px;
    }
    .ag-cert-loc {
      font-size: 13px; font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .ag-cert-remote {
      font-size: 11.5px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* Responsive */
    /* (tablet / mobile overrides added in media queries below) */

    /* ── OLD mosaic classes (unused, kept for safety) ── */
    .about-mosaic {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto auto auto;
      gap: 14px;
    }

    /* Base card */
    .am-card {
      background: var(--white);
      border-radius: 20px;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
      padding: 28px;
      transition: transform 0.28s ease, box-shadow 0.28s ease;
    }
    .am-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(0,0,0,0.10);
    }

    /* ── Grid positions ── */
    .am-bio      { grid-column: 1 / 8;  grid-row: 1; }
    .am-identity { grid-column: 8 / 11; grid-row: 1; }
    .am-years    { grid-column: 11 / 13; grid-row: 1;
                   background: var(--grad-brand-smooth);
                   display: flex; flex-direction: column;
                   align-items: center; justify-content: center;
                   text-align: center; border: none; }
    .am-role     { grid-column: 1 / 4;  grid-row: 2; }
    .am-quote    { grid-column: 4 / 10; grid-row: 2;
                   background: linear-gradient(135deg, #fff8f7, #fff3ed);
                   border: 1px solid rgba(255,88,99,0.10); }
    .am-status   { grid-column: 10 / 13; grid-row: 2; }
    .am-skills   { grid-column: 1 / 13; grid-row: 3; }

    /* ── BIO card ── */
    .am-heading {
      font-family: var(--font-display);
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.3;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }
    .am-body {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.80;
      margin-bottom: 14px;
    }
    .am-body:last-child { margin-bottom: 0; }

    /* ── IDENTITY card ── */
    .am-identity {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .am-id-head {
      background: var(--grad-brand-smooth);
      margin: -28px -28px 0;
      padding: 22px 22px 18px;
      border-radius: 19px 19px 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .am-avatar {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: rgba(255,255,255,0.22);
      border: 2px solid rgba(255,255,255,0.45);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 20px; font-weight: 900;
      color: #fff; letter-spacing: -0.04em;
    }
    .am-avail-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 11px;
      border-radius: 100px;
      background: rgba(255,255,255,0.20);
      border: 1px solid rgba(255,255,255,0.35);
      font-size: 11px; font-weight: 700; color: #fff;
    }
    .am-avail-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #27C93F;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    .am-id-name {
      font-family: var(--font-display);
      font-size: 17px; font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 3px;
    }
    .am-id-role {
      font-size: 12.5px; font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .am-id-loc {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* ── YEARS card ── */
    .am-big-num {
      font-family: var(--font-display);
      font-size: 64px;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      letter-spacing: -0.05em;
    }
    .am-big-num sup {
      font-size: 32px;
      vertical-align: super;
    }
    .am-num-label {
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.80);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 8px;
      line-height: 1.4;
    }

    /* ── ROLE card ── */
    .am-role {
      position: relative;
      overflow: hidden;
    }
    .am-role::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--grad-brand-smooth);
    }
    .am-role-logo {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: var(--grad-brand-smooth);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 14px; font-weight: 900; color: #fff;
      margin-bottom: 14px;
    }
    .am-role-company {
      font-family: var(--font-display);
      font-size: 16px; font-weight: 800;
      color: var(--text-primary);
      margin-bottom: 3px;
    }
    .am-role-title {
      font-size: 12.5px; font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }
    .am-role-since {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .am-role-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: 100px;
      background: rgba(39,201,63,0.10);
      border: 1px solid rgba(39,201,63,0.22);
      font-size: 11px; font-weight: 700;
      color: #27C93F;
    }

    /* ── QUOTE card ── */
    .am-qmark {
      font-size: 72px;
      line-height: 0.7;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-family: Georgia, serif;
      display: block;
      margin-bottom: 14px;
    }
    .am-qtext {
      font-size: 17px;
      line-height: 1.70;
      color: var(--text-primary);
      font-style: italic;
      font-weight: 500;
      margin: 0 0 12px;
    }
    .am-qauthor {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* ── STATUS card ── */
    .am-status-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .am-status-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }
    .am-status-item:last-child { margin-bottom: 0; }
    .am-dot {
      width: 9px; height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .am-green  { background: #27C93F; box-shadow: 0 0 0 3px rgba(39,201,63,.18); }
    .am-orange { background: #FF9900; box-shadow: 0 0 0 3px rgba(255,153,0,.18); }
    .am-blue   { background: #2496ED; box-shadow: 0 0 0 3px rgba(36,150,237,.18); }
    .am-red    { background: var(--red); box-shadow: 0 0 0 3px rgba(255,88,99,.18); }

    /* ── SKILLS strip ── */
    .am-skills-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .am-skills-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .am-skills-chips span {
      padding: 8px 16px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 600;
      background: rgba(255,88,99,0.05);
      border: 1.5px solid rgba(255,88,99,0.14);
      color: var(--text-secondary);
      transition: all 0.2s;
    }
    .am-skills-chips span:hover {
      background: rgba(255,88,99,0.10);
      color: var(--red);
      border-color: rgba(255,88,99,0.30);
    }

    /* ===========================
       SERVICES
    =========================== */
    .services { background: var(--grad-section-warm); }
    .services-header { text-align: center; margin-bottom: 64px; }
    .services-header .section-subheading { margin: 0 auto; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .service-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 36px;
      border: 1px solid var(--mid-gray);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
      cursor: default;
    }
    .service-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius-lg);
      padding: 1px;
      background: var(--grad-border);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: var(--transition);
    }
    .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
    .service-card:hover::before { opacity: 1; }
    .service-icon {
      width: 56px; height: 56px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 24px;
    }
    .si-blue   { background: rgba(255,88,99,0.10); }
    .si-purple { background: rgba(252,144,73,0.12); }
    .si-teal   { background: rgba(255,88,99,0.07); }
    .service-title {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--text-primary);
    }
    .service-desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ===========================
       PROJECTS
    =========================== */
    .projects { background: var(--white); }
    .projects-header { text-align: center; margin-bottom: 64px; }
    .projects-header .section-subheading { margin: 0 auto; }
    .projects-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
    .project-card {
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: var(--off-white);
      border: 1px solid var(--mid-gray);
      transition: var(--transition);
      position: relative;
    }
    .project-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-xl);
      border-color: rgba(79,140,255,0.2);
    }
    .project-image {
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      position: relative;
      overflow: hidden;
    }
    .project-image-ink    { background: linear-gradient(135deg, #E8F0FF 0%, #D0DCFF 100%); }
    .project-image-hom    { background: linear-gradient(135deg, #F0E8FF 0%, #DDD0FF 100%); }
    .project-image-bulwark{ background: linear-gradient(135deg, #E8FFF0 0%, #C8F0D8 100%); }
    .project-image-shopify{ background: linear-gradient(135deg, #FFF5E8 0%, #FFE0C0 100%); }
    .project-badge {
      position: absolute;
      top: 16px; left: 16px;
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      color: var(--text-primary);
      box-shadow: var(--shadow-sm);
    }
    .project-body { padding: 32px; }
    .project-title {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .project-row {
      margin-bottom: 14px;
    }
    .project-row-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 4px;
    }
    .project-row-text {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .project-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 20px 0;
    }
    .project-tag {
      padding: 4px 12px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      background: var(--light-gray);
      color: var(--text-secondary);
    }
    .project-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--red);
      transition: var(--transition-fast);
    }
    .project-cta:hover { gap: 10px; }
    .project-cta svg { transition: var(--transition-fast); }

    /* ===========================
       EXPERIENCE — HORIZONTAL BENTO GRID
    =========================== */
    .experience { background: var(--grad-section-warm); overflow: hidden; }
    .experience-header { text-align: center; margin-bottom: 64px; }

    /* Bento grid */
    .exp-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto auto;
      gap: 20px;
    }
    .exp-card {
      background: var(--white);
      border-radius: var(--radius-xl);
      padding: 36px;
      border: 1px solid var(--mid-gray);
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }
    .exp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: rgba(255,88,99,0.18); }

    /* Card 1 – Primary, spans 7 cols, row 1 */
    .exp-card-primary {
      grid-column: 1 / 8;
      grid-row: 1;
      background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(252,144,73,0.14), transparent),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(255,88,99,0.10), transparent),
        var(--white);
    }
    /* Card 2 – spans 5 cols, row 1 */
    .exp-card-secondary {
      grid-column: 8 / 13;
      grid-row: 1;
    }
    /* Card 3 – spans 5 cols, row 2 */
    .exp-card-tertiary {
      grid-column: 1 / 6;
      grid-row: 2;
    }
    /* Card 4 – spans 7 cols, row 2, early career */
    .exp-card-early {
      grid-column: 6 / 13;
      grid-row: 2;
      background: var(--light-gray);
    }

    /* Decorative year badge */
    .exp-year-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      background: rgba(255,88,99,0.08);
      color: var(--red);
      border: 1px solid rgba(255,88,99,0.15);
      margin-bottom: 20px;
    }
    .exp-year-badge .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--grad-brand-smooth);
    }
    .exp-current-badge {
      background: rgba(255,88,99,0.10);
      color: var(--red);
    }

    /* Big number decoration */
    .exp-big-num {
      position: absolute;
      right: 24px; top: 20px;
      font-family: var(--font-display);
      font-size: 80px;
      font-weight: 900;
      line-height: 1;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 0.07;
      user-select: none;
      pointer-events: none;
    }
    .exp-card-primary .exp-big-num { font-size: 120px; opacity: 0.05; right: 16px; top: 8px; }

    /* Level tag */
    .exp-level {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .exp-level-lead { background: rgba(255,88,99,0.10); color: var(--red); }
    .exp-level-fe   { background: rgba(252,144,73,0.12); color: #c96b00; }
    .exp-level-sr   { background: rgba(100,100,100,0.08); color: var(--text-secondary); }
    .exp-level-jr   { background: rgba(100,100,100,0.06); color: var(--text-muted); }

    .exp-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 6px;
      color: var(--text-primary);
    }
    .exp-card-primary .exp-title { font-size: 28px; }

    .exp-company {
      font-size: 15px;
      font-weight: 600;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
      margin-bottom: 16px;
    }
    .exp-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 20px;
    }
    .exp-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .exp-tag {
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      background: var(--light-gray);
      color: var(--text-secondary);
      transition: var(--transition-fast);
    }
    .exp-card-primary .exp-tag:hover { background: rgba(255,88,99,0.08); color: var(--red); }

    /* Divider line inside primary */
    .exp-divider {
      height: 1px;
      background: linear-gradient(to right, rgba(255,88,99,0.2), rgba(252,144,73,0.2), transparent);
      margin: 24px 0;
    }

    /* Stat row inside primary card */
    .exp-stats-row {
      display: flex;
      gap: 32px;
      margin-top: 8px;
    }
    .exp-stat { }
    .exp-stat-val {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 800;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .exp-stat-lbl {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    @media (max-width: 1024px) {
      .exp-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
      .exp-card-primary, .exp-card-secondary,
      .exp-card-tertiary, .exp-card-early {
        grid-column: 1 / -1;
        grid-row: auto;
      }
    }

    /* ===========================
       TECH EXPERTISE
    =========================== */
    .tech { background: var(--white); }
    .tech-header { text-align: center; margin-bottom: 64px; }
    .tech-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .tech-category {
      background: var(--off-white);
      border-radius: var(--radius-lg);
      padding: 32px;
      border: 1px solid var(--mid-gray);
      transition: var(--transition);
    }
    .tech-category:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-4px);
    }
    .tech-cat-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .tech-cat-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .tech-cat-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
    }
    .tech-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .tech-tag {
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      background: var(--white);
      color: var(--text-primary);
      border: 1px solid var(--mid-gray);
      transition: var(--transition-fast);
      box-shadow: var(--shadow-sm);
    }
    .tech-tag:hover {
      border-color: var(--red);
      color: var(--red);
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(255,88,99,0.12);
    }

    /* ===========================
       CERTIFICATIONS
    =========================== */
    .certs { background: var(--grad-section-warm); }
    .certs-header { text-align: center; margin-bottom: 64px; }
    .certs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 900px;
      margin: 0 auto;
    }
    .cert-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 36px 28px;
      text-align: center;
      border: 1px solid var(--mid-gray);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .cert-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      background: var(--grad-brand-smooth);
      transform: scaleX(0);
      transition: var(--transition);
    }
    .cert-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }
    .cert-card:hover::after { transform: scaleX(1); }
    .cert-badge {
      width: 72px; height: 72px;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }
    .cb-aws    { background: linear-gradient(135deg, #FFD080, #FF9900); }
    .cb-react  { background: linear-gradient(135deg, #87CEEB, #00D4FF); }
    .cb-wf     { background: linear-gradient(135deg, #fdd0aa, #fc9049); }
    .cert-name {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .cert-issuer {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* ===========================
       CONTACT
    =========================== */
    .contact {
      background: var(--white);
      position: relative;
      overflow: hidden;
    }
    .contact::before {
      content: '';
      position: absolute;
      top: -200px; right: -200px;
      width: 600px; height: 600px;
      background: radial-gradient(ellipse, rgba(123,97,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .contact::after {
      content: '';
      position: absolute;
      bottom: -200px; left: -200px;
      width: 500px; height: 500px;
      background: radial-gradient(ellipse, rgba(79,140,255,0.06) 0%, transparent 70%);
      border-radius: 50%;
    }
    .contact-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: start;
    }
    .contact-left {}
    .contact-heading {
      font-family: var(--font-display);
      font-size: clamp(36px, 4vw, 52px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }
    .contact-sub {
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 40px;
    }
    .contact-links {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .contact-link {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: var(--radius-md);
      background: var(--off-white);
      border: 1px solid var(--mid-gray);
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 500;
      transition: var(--transition);
    }
    .contact-link:hover {
      border-color: var(--red);
      color: var(--red);
      transform: translateX(6px);
      box-shadow: var(--shadow-sm);
    }
    .cl-icon {
      width: 40px; height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background: var(--light-gray);
    }

    /* Form */
    .contact-form-wrap {
      background: var(--off-white);
      border-radius: var(--radius-xl);
      padding: 48px;
      border: 1px solid var(--mid-gray);
      box-shadow: var(--shadow-md);
    }
    .form-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 32px;
    }
    .form-group { margin-bottom: 20px; }
    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
      letter-spacing: 0.02em;
    }
    .form-input, .form-textarea {
      width: 100%;
      padding: 14px 18px;
      border-radius: var(--radius-md);
      border: 1.5px solid var(--mid-gray);
      background: var(--white);
      font-size: 15px;
      color: var(--text-primary);
      transition: var(--transition-fast);
      outline: none;
      resize: vertical;
    }
    .form-input:focus, .form-textarea:focus {
      border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(255,88,99,0.10);
    }
        .form-textarea { min-height: 120px; }
    .form-submit {
      width: 100%;
      padding: 16px;
      border-radius: var(--radius-md);
      background: var(--grad-brand-smooth);
      color: var(--white);
      font-size: 16px;
      font-weight: 600;
      transition: var(--transition);
      box-shadow: 0 4px 20px rgba(255,88,99,0.30);
    }
    .form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 36px rgba(255,88,99,0.44);
    }
    .form-success {
      display: none;
      text-align: center;
      padding: 20px;
      border-radius: var(--radius-md);
      background: rgba(52,199,89,0.07);
      border: 1px solid rgba(52,199,89,0.18);
      color: #1a8a3a;
      font-weight: 600;
      margin-top: 16px;
    }

    /* ===========================
       FOOTER
    =========================== */
    .footer {
      background: var(--text-primary);
      color: rgba(255,255,255,0.6);
      padding: 48px 0 32px;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
    }
    .footer-logo {
      font-family: var(--font-display);
      font-size: 20px;
      font-weight: 700;
      background: var(--grad-brand-smooth);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .footer-copy { font-size: 13px; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      transition: var(--transition-fast);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-links a:hover { color: var(--white); }

    /* ===========================
       SCROLL TO TOP
    =========================== */
    .scroll-top {
      position: fixed;
      bottom: 32px; right: 32px;
      width: 48px; height: 48px;
      border-radius: 50%;
      background: var(--grad-brand-smooth);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: var(--shadow-md);
      z-index: 100;
      opacity: 0;
      transform: translateY(16px);
      transition: var(--transition);
      pointer-events: none;
    }
    .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .scroll-top:hover   { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

    /* ===========================
       SHARED KEYFRAMES
    =========================== */
    @keyframes float-card {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-10px); }
    }
    @keyframes float-blob {
      0%, 100% { transform: translate(0,0) scale(1); }
      33%       { transform: translate(30px,-30px) scale(1.05); }
      66%       { transform: translate(-20px,20px) scale(0.95); }
    }
    @keyframes pulse-dot {
      0%, 100% { opacity:1; transform:scale(1); }
      50%       { opacity:0.4; transform:scale(0.8); }
    }

    /* ===========================
       RESPONSIVE
    =========================== */
    @media (max-width: 1024px) {
      .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 60px 24px 40px;
        text-align: center;
      }
      .hero-sub    { margin-left: auto; margin-right: auto; }
      .hero-stats  { margin: 0 auto 40px; }
      .hero-actions { justify-content: center; }
      .hero-scroll  { justify-content: center; }
      .hero-visual  { height: 380px; }
      .hero-orb-wrap  { width: 180px; height: 180px; }
      .hero-orb-inner { width: 180px; height: 180px; }
      .hero-orb-initials { font-size: 44px; }
      .hero-orbit-1 { width: 280px; height: 280px; inset: calc(50% - 140px); }
      .hero-orbit-2 { width: 380px; height: 380px; inset: calc(50% - 190px); }
      .hv-card-2    { display: none; }
      .ag-grid { grid-template-columns: 1fr 1fr; }
      .ag-story      { grid-column: 1 / 3; }
      .ag-philosophy { grid-column: 1 / 3; }
      .ag-howwork    { grid-column: 1 / 2; }
      .ag-focus      { grid-column: 2 / 3; }
      .ag-cert       { grid-column: 1 / 3; }
      .contact-inner { grid-template-columns: 1fr; gap: 48px; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .tech-grid     { grid-template-columns: repeat(2, 1fr); }
      .certs-grid    { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
    }

    @media (max-width: 768px) {
      .section-pad { padding: 80px 0; }
      .nav-links { display: none; }
      .nav-cta   { display: none; }
      .nav-hamburger { display: flex; }
      .services-grid { grid-template-columns: 1fr; }
      .projects-grid { grid-template-columns: 1fr; }
      .tech-grid     { grid-template-columns: 1fr; }
      .certs-grid    { grid-template-columns: 1fr; max-width: 400px; }
      .footer-inner  { flex-direction: column; text-align: center; }
      .contact-form-wrap { padding: 32px 24px; }
      .hero-stats  { padding: 16px 20px; }
      .stat-item   { padding: 0 16px; }
      .stat-number { font-size: 24px; }
      .hero-visual { height: 320px; }
      .hero-orbit-2 { display: none; }
      .hv-card-4    { display: none; }
    }

    @media (max-width: 480px) {
      .hero-heading { font-size: clamp(36px, 9vw, 52px); }
      .hero-stats   { flex-wrap: wrap; justify-content: center; width: 100%; }
      .stat-item    { padding: 12px 16px; }
      .ag-grid { grid-template-columns: 1fr; }
      .ag-story, .ag-philosophy, .ag-howwork,
      .ag-focus, .ag-cert { grid-column: 1 / 2; }
      .contact-form-wrap { padding: 24px 16px; }
    }