/*
Theme Name: Shahadat Digital
Theme URI: https://example.com/shahadat-digital
Author: Shahadat Digital
Author URI: https://example.com
Description: Responsive one-page portfolio theme converted from the Shahadat Digital HTML portfolio.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: shahadat-digital
*/

:root {
      --bg: #020617;
      --panel: rgba(15, 23, 42, 0.72);
      --panel-strong: rgba(15, 23, 42, 0.92);
      --text: #f8fafc;
      --muted: #94a3b8;
      --line: rgba(255, 255, 255, 0.10);
      --accent: #38bdf8;
      --accent-2: #a855f7;
    }

    body.light-mode {
      --bg: #eef2ff;
      --panel: rgba(255, 255, 255, 0.74);
      --panel-strong: rgba(255, 255, 255, 0.94);
      --text: #020617;
      --muted: #475569;
      --line: rgba(15, 23, 42, 0.10);
      --glow-sky: rgba(56, 189, 248, 0.24);
      --glow-purple: rgba(168, 85, 247, 0.18);
      --glow-cyan: rgba(14, 165, 233, 0.14);
    }

    * { scroll-behavior: smooth; }

    body {
      font-family: Inter, sans-serif;
      transition: background 0.55s ease, color 0.55s ease;
      background:
        radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.22), transparent 28%),
        radial-gradient(circle at 90% 8%, rgba(168, 85, 247, 0.18), transparent 32%),
        radial-gradient(circle at 50% 100%, rgba(14, 165, 233, 0.10), transparent 38%),
        linear-gradient(180deg, #020617 0%, #030712 35%, #020617 100%);
      color: var(--text);
      overflow-x: hidden;
    }

    body.light-mode {
      background:
        radial-gradient(circle at top left, rgba(56,189,248,0.10), transparent 22%),
        radial-gradient(circle at top right, rgba(168,85,247,0.08), transparent 24%),
        linear-gradient(
          180deg,
          #f8fafc 0%,
          #eef2f7 35%,
          #f8fafc 70%,
          #ffffff 100%
        );
      background-attachment: fixed;
    }

    ::selection { background: rgba(56, 189, 248, 0.35); color: white; }

    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -5;
      opacity: 0.026;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }

    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 9997;
      pointer-events: none;
      background: radial-gradient(circle at center, rgba(56,189,248,0.12), transparent 55%);
      opacity: 0;
      transition: opacity 0.45s ease;
    }

    body.transitioning .page-transition { opacity: 1; }

    .terminal-window {
      background: linear-gradient(145deg, rgba(2,6,23,0.95), rgba(15,23,42,0.88));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 40px 120px rgba(2,6,23,0.6);
    }

    .terminal-line { opacity: 0; transform: translateY(8px); }
    .typing-cursor { animation: blinkCursor 1s infinite; }

    @keyframes blinkCursor {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    .mesh-gradient {
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(circle at 20% 20%, rgba(56,189,248,0.18), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(168,85,247,0.18), transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(34,197,94,0.12), transparent 35%);
      filter: blur(90px);
      animation: meshMove 18s ease-in-out infinite alternate;
    }

    @keyframes meshMove {
      from { transform: translate3d(-2%, -1%, 0) scale(1); }
      to { transform: translate3d(2%, 1%, 0) scale(1.08); }
    }

    .cursor-glow {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      pointer-events: none;
      transform: translate(-50%, -50%);
      background: rgba(56, 189, 248, 0.24);
      box-shadow: 0 0 70px rgba(56, 189, 248, 0.45);
      transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
    }

    .grid-bg {
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(circle at center, black, transparent 74%);
      animation: gridMove 22s linear infinite;
    }

    body.light-mode .grid-bg {
      background-image:
        linear-gradient(rgba(15,23,42,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,0.045) 1px, transparent 1px);
      opacity: 0.55;
    }

    @keyframes gridMove {
      from { background-position: 0 0; }
      to { background-position: 64px 64px; }
    }

    .orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(120px);
      opacity: 0.36;
      animation: orbPulse 7s ease-in-out infinite;
    }

    .orb:nth-child(2) { animation-delay: 1.2s; }
    .orb:nth-child(3) { animation-delay: 2.4s; }

    @keyframes orbPulse {
      0%, 100% { transform: scale(1); opacity: 0.33; }
      50% { transform: scale(1.08); opacity: 0.50; }
    }

    .theme-flash {
      position: fixed;
      right: 24px;
      top: 24px;
      z-index: 9998;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      pointer-events: none;
      background: radial-gradient(circle, rgba(56,189,248,0.55), rgba(168,85,247,0.20), transparent 70%);
      transform: scale(0);
      opacity: 0;
    }

    body.theme-changing .theme-flash { animation: themeFlash 0.75s ease forwards; }

    @keyframes themeFlash {
      0% { transform: scale(0); opacity: 0.9; }
      55% { transform: scale(95); opacity: 0.25; }
      100% { transform: scale(120); opacity: 0; }
    }

    .theme-toggle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 1.25rem;
      width: 1.25rem;
      transition: transform 0.35s ease;
    }

    #themeToggle:hover .theme-toggle-icon { transform: rotate(18deg) scale(1.08); }

    body, .card, .soft-card, .metric-card, header, section, button, a, input, textarea {
      transition:
        background 0.45s ease,
        color 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        opacity 0.45s ease;
    }

    .card {
      background: linear-gradient(145deg, var(--panel-strong), rgba(15, 23, 42, 0.58));
      border: 1px solid var(--line);
      box-shadow: 0 24px 76px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(22px);
      position: relative;
      overflow: hidden;
    }

    body.light-mode .card {
      background: rgba(255,255,255,0.97);
      border: 1px solid rgba(15,23,42,0.08);
      box-shadow:
        0 4px 12px rgba(15,23,42,0.04),
        0 18px 40px rgba(15,23,42,0.05);
      backdrop-filter: blur(12px);
    }

    .card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.035), transparent 40%);
      pointer-events: none;
    }

    .soft-card, .metric-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
      border: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }

    body.light-mode .soft-card,
    body.light-mode .metric-card {
      background: #ffffff;
      border-color: rgba(15,23,42,0.10);
      box-shadow: 0 8px 24px rgba(15,23,42,0.05);
    }

    .premium-border {
      position: relative;
      border: 1px solid transparent;
      background:
        linear-gradient(#0f172a,#0f172a) padding-box,
        linear-gradient(135deg, rgba(56,189,248,0.38), rgba(168,85,247,0.30)) border-box;
    }

    body.light-mode .premium-border {
      background:
        linear-gradient(#ffffff,#ffffff) padding-box,
        linear-gradient(135deg, rgba(14,165,233,0.38), rgba(168,85,247,0.30)) border-box;
    }

    .gradient-text {
      background: linear-gradient(90deg, #38bdf8 0%, #818cf8 45%, #c084fc 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .shine { position: relative; overflow: hidden; }
    .shine::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 -120%;
      width: 70%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      transform: skewX(-18deg);
      transition: 0.75s;
    }
    .shine:hover::before { left: 130%; }

    .hover-lift {
      transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    }

    .hover-lift:hover {
      transform: translateY(-10px) scale(1.01);
      border-color: rgba(56, 189, 248, 0.30);
      box-shadow: 0 32px 90px rgba(14, 165, 233, 0.16), 0 0 0 1px rgba(56,189,248,0.12);
    }

    .floating-card { animation: floatCard 7s ease-in-out infinite; transform-style: preserve-3d; }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

    .glass-line { position: relative; }
    .glass-line::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
    }

    body.light-mode .glass-line::before {
      background: linear-gradient(90deg, transparent, rgba(15,23,42,0.15), transparent);
    }

    .section-title {
      line-height: 0.9;
      letter-spacing: -0.075em;
      text-wrap: balance;
    }

    .premium-panel { position: relative; isolation: isolate; }

    .premium-panel::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, rgba(56,189,248,0.45), rgba(168,85,247,0.28), transparent 70%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .spotlight {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(56,189,248,0.16), transparent 30%);
      pointer-events: none;
    }

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

    .glass-nav {
      background: rgba(2,6,23,0.55);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 18px 50px rgba(2,6,23,0.35);
    }

    body.light-mode .glass-nav {
      background: rgba(255,255,255,0.9);
      border-color: rgba(15,23,42,0.10);
      box-shadow: 0 10px 28px rgba(15,23,42,0.08);
      backdrop-filter: blur(12px);
    }

    body.light-mode section {
      position: relative;
      z-index: 1;
    }

    body.light-mode section:nth-child(even) {
      background:
        linear-gradient(
          180deg,
          rgba(255,255,255,0.45),
          rgba(241,245,249,0.65)
        );
    }

    body.light-mode section::before {
      content: none !important;
      display: none !important;
    }

    body.light-mode .orb,
    body.light-mode .mesh-gradient {
      opacity: 0.04;
    }

    .hero-badge { box-shadow: 0 10px 40px rgba(56,189,248,0.12); }

    .metric-glow { position: relative; overflow: hidden; }
    .metric-glow::after {
      content: "";
      position: absolute;
      inset: auto -30% -60% auto;
      width: 180px;
      height: 180px;
      border-radius: 999px;
      background: rgba(56,189,248,0.16);
      filter: blur(50px);
    }

    .mockup-grid {
      background-image:
        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .dashboard-pulse { animation: dashboardPulse 2.4s ease-in-out infinite; }

    @keyframes dashboardPulse {
      0%, 100% { opacity: 0.55; transform: scaleX(0.72); transform-origin: left; }
      50% { opacity: 1; transform: scaleX(1); transform-origin: left; }
    }

    .fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
    .fade-up.show { opacity: 1; transform: translateY(0); }

    .stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.75s ease, transform 0.75s ease; }
    .stagger.show > * { opacity: 1; transform: translateY(0); }
    .stagger.show > *:nth-child(1) { transition-delay: 0.05s; }
    .stagger.show > *:nth-child(2) { transition-delay: 0.12s; }
    .stagger.show > *:nth-child(3) { transition-delay: 0.19s; }
    .stagger.show > *:nth-child(4) { transition-delay: 0.26s; }
    .stagger.show > *:nth-child(5) { transition-delay: 0.33s; }
    .stagger.show > *:nth-child(6) { transition-delay: 0.40s; }

    .hero-reveal { opacity: 0; animation: heroReveal 0.85s ease forwards; }
    .delay-1 { animation-delay: 0.08s; }
    .delay-2 { animation-delay: 0.18s; }
    .delay-3 { animation-delay: 0.30s; }
    .delay-4 { animation-delay: 0.42s; }
    .delay-5 { animation-delay: 0.54s; }

    @keyframes heroReveal {
      from { opacity: 0; transform: translateY(30px); filter: blur(10px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
    .marquee-track { display: inline-flex; gap: 3rem; animation: marqueeMove 24s linear infinite; }

    @keyframes marqueeMove {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .filter-btn.active { background: #38bdf8; color: #020617; border-color: transparent; }

    .case-study-timeline { position: relative; }
    .case-study-timeline::before {
      content: "";
      position: absolute;
      left: 18px;
      top: 14px;
      bottom: 14px;
      width: 1px;
      background: linear-gradient(to bottom, #38bdf8, rgba(168,85,247,0.45), transparent);
    }

    .story-step { position: relative; padding-left: 52px; }
    .story-step::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 8px;
      height: 17px;
      width: 17px;
      border-radius: 999px;
      background: #38bdf8;
      box-shadow: 0 0 30px rgba(56,189,248,0.5);
    }

    .project-card { display: block; }
    .project-card.hide { display: none; }
    .tilt-card { transform-style: preserve-3d; }

    .real-shot {
      min-height: 18rem;
      border: 1px dashed rgba(255,255,255,0.26);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        radial-gradient(circle at 30% 20%, rgba(56,189,248,0.25), transparent 35%);
    }

    body.light-mode .real-shot {
      border-color: rgba(15,23,42,0.16);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(248,250,252,0.72)),
        radial-gradient(circle at 30% 20%, rgba(14,165,233,0.18), transparent 35%);
    }

    /* Final reliable light-mode overrides */
    body.light-mode header {
      background: rgba(255,255,255,0.94) !important;
      border-color: rgba(15,23,42,0.08) !important;
      box-shadow: 0 10px 30px rgba(15,23,42,0.08) !important;
    }

    body.light-mode h1,
    body.light-mode h2,
    body.light-mode h3,
    body.light-mode h4,
    body.light-mode .section-title,
    body.light-mode .card .font-black,
    body.light-mode .soft-card,
    body.light-mode .metric-card {
      color: #020617 !important;
      text-shadow: none !important;
      letter-spacing: -0.055em;
    }

    body.light-mode p,
    body.light-mode .text-slate-300,
    body.light-mode .text-slate-400,
    body.light-mode .text-slate-500 {
      color: #334155 !important;
    }

    body.light-mode .text-white {
      color: #020617 !important;
    }

    body.light-mode a.text-white,
    body.light-mode button.text-white {
      color: #020617 !important;
    }

    body.light-mode .leading-8,
    body.light-mode .leading-9,
    body.light-mode .leading-7 {
      color: #334155 !important;
    }

    body.light-mode .gradient-text {
      color: transparent !important;
    }

    body.light-mode .text-sky-300,
    body.light-mode .text-sky-200 {
      color: #0284c7 !important;
    }

    body.light-mode .border-white\/10,
    body.light-mode .border-white\/15,
    body.light-mode .border-white\/20 {
      border-color: rgba(15,23,42,0.12) !important;
    }

    body.light-mode .bg-white\/5,
    body.light-mode .bg-white\/10,
    body.light-mode .bg-white\/15 {
      background-color: rgba(255,255,255,0.9) !important;
    }

    body.light-mode .bg-slate-950\/70 {
      background-color: #ffffff !important;
    }

    body.light-mode input,
    body.light-mode textarea {
      background: #ffffff !important;
      color: #020617 !important;
      border-color: rgba(15,23,42,0.12) !important;
    }

    body.light-mode input::placeholder,
    body.light-mode textarea::placeholder {
      color: #64748b !important;
    }

    body.light-mode .terminal-window,
    body.light-mode .mockup-grid,
    body.light-mode footer {
      background-color: #020617 !important;
      color: #f8fafc !important;
    }

    body.light-mode .terminal-window *,
    body.light-mode .mockup-grid *,
    body.light-mode footer * {
      color: #f8fafc !important;
    }

    body.light-mode .rounded-\[2\.4rem\].bg-gradient-to-br,
    body.light-mode .from-slate-950\/95,
    body.light-mode .to-slate-900\/90 {
      background: #020617 !important;
      color: #f8fafc !important;
    }

    body.light-mode .rounded-\[2\.4rem\].bg-gradient-to-br * {
      color: #f8fafc !important;
    }

    body.light-mode .rounded-\[1\.6rem\].bg-white,
    body.light-mode .rounded-\[1\.6rem\].bg-white * {
      color: #020617 !important;
    }

    body.light-mode .bg-sky-400,
    body.light-mode .filter-btn.active {
      color: #020617 !important;
    }



    /* Responsive navigation and mobile refinements */
    .mobile-menu {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
    }

    .mobile-menu.open {
      max-height: 28rem;
      opacity: 1;
      transform: translateY(0);
    }

    .menu-icon-line {
      display: block;
      width: 1.25rem;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    #mobileMenuToggle.open .menu-icon-line:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
    }

    #mobileMenuToggle.open .menu-icon-line:nth-child(2) {
      opacity: 0;
    }

    #mobileMenuToggle.open .menu-icon-line:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
    }

    @media (max-width: 1023px) {
      header nav {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
      }

      #themeToggle {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
      }

      #themeToggle .theme-toggle-label {
        display: none;
      }

      .mobile-compact-cta {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    @media (max-width: 639px) {
      .brand-text {
        font-size: 1rem;
      }

      .brand-mark {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.85rem;
        font-size: 0.8rem;
      }

      .mobile-compact-cta {
        display: none;
      }

      #home {
        padding-top: 5.5rem;
      }

      .hero-actions > * {
        width: 100%;
        text-align: center;
      }

      .section-title {
        line-height: 1;
        letter-spacing: -0.05em;
      }

      .dashboard-stats {
        grid-template-columns: 1fr;
      }

      .hero-metrics {
        grid-template-columns: 1fr 1fr;
      }

      .project-action-row > * {
        width: 100%;
        text-align: center;
      }

      .contact-links a {
        overflow-wrap: anywhere;
      }
    }


    /* Polished cross-device layout */
    html, body {
      width: 100%;
      max-width: 100%;
    }

    img, svg, video, canvas {
      max-width: 100%;
      height: auto;
    }

    section[id] {
      scroll-margin-top: 5.5rem;
    }

    @media (hover: none), (pointer: coarse) {
      .hover-lift:hover,
      .tilt-card:hover {
        transform: none;
      }

      .shine::before,
      .cursor-glow {
        display: none !important;
      }
    }

    @media (max-width: 1023px) {
      main section.py-32,
      main section.py-28,
      main section.py-24 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
      }

      .card,
      .soft-card,
      .metric-card {
        backdrop-filter: blur(14px);
      }

      .floating-card {
        animation: none;
      }

      .marquee-track {
        animation-duration: 34s;
      }
    }

    @media (max-width: 767px) {
      body {
        background-attachment: scroll;
      }

      main section.py-32,
      main section.py-28,
      main section.py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
      }

      #home > div.mx-auto {
        padding-top: 3.5rem !important;
        padding-bottom: 4rem !important;
        gap: 3rem !important;
      }

      #home h1 {
        font-size: clamp(2.55rem, 11vw, 4.5rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.055em !important;
      }

      #home .hero-badge {
        margin-bottom: 1.5rem !important;
        padding: 0.65rem 0.9rem !important;
        font-size: 0.78rem !important;
        line-height: 1.35;
      }

      #home > div.mx-auto > div:first-child > p {
        margin-top: 1.5rem !important;
        font-size: 1rem !important;
        line-height: 1.8 !important;
      }

      .hero-actions {
        margin-top: 1.5rem !important;
      }

      .hero-actions > a {
        min-height: 3.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.85rem 1.25rem !important;
      }

      .hero-metrics {
        margin-top: 2rem !important;
        gap: 0.75rem !important;
      }

      .hero-metrics > div {
        padding: 1.1rem !important;
        border-radius: 1.35rem !important;
      }

      .hero-metrics .text-4xl {
        font-size: 1.55rem !important;
      }

      .hero-metrics .text-sm {
        font-size: 0.67rem !important;
        letter-spacing: 0.12em !important;
      }

      .section-title,
      section h2.text-4xl,
      section h2.md\:text-5xl,
      section h2.md\:text-6xl {
        font-size: clamp(2rem, 9vw, 3.5rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -0.045em !important;
      }

      .card,
      .premium-panel,
      .rounded-\[2\.8rem\],
      .rounded-\[2\.5rem\] {
        border-radius: 1.75rem !important;
      }

      .card.p-8,
      .card.md\:p-10,
      .card.md\:p-12,
      .glass-line.p-8 {
        padding: 1.35rem !important;
      }

      .real-shot,
      .project-card > .mockup-grid {
        min-height: 13rem;
        height: 13rem !important;
      }

      .project-card h3.text-3xl {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
      }

      .project-card p.text-lg,
      section p.text-lg {
        font-size: 1rem !important;
        line-height: 1.75 !important;
      }

      .case-study-timeline {
        padding: 1.25rem !important;
      }

      .story-step {
        padding-left: 2.5rem;
      }

      .case-study-timeline::before {
        left: 0.82rem;
      }

      .story-step::before {
        left: 0.32rem;
      }

      .terminal-window {
        padding: 1.25rem !important;
      }

      .terminal-window .font-mono {
        font-size: 0.75rem !important;
        overflow-wrap: anywhere;
      }

      .marquee {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
      }

      footer {
        padding-left: 1rem;
        padding-right: 1rem;
        line-height: 1.7;
      }
    }

    @media (max-width: 479px) {
      header nav {
        gap: 0.5rem;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
      }

      .brand-text {
        max-width: 8.6rem;
        font-size: 0.92rem !important;
      }

      #themeToggle,
      #mobileMenuToggle {
        width: 2.35rem;
        height: 2.35rem;
        padding: 0 !important;
        flex: 0 0 auto;
      }

      #themeToggle .theme-toggle-icon {
        font-size: 0.95rem;
      }

      #mobileMenu {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
      }

      #mobileMenu > div {
        border-radius: 1.3rem !important;
      }

      #home {
        min-height: auto;
      }

      .hero-metrics {
        grid-template-columns: 1fr !important;
      }

      .dashboard-stats,
      .mockup-grid .grid-cols-3 {
        grid-template-columns: 1fr !important;
      }

      .filter-btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        text-align: center;
      }

      .project-card .grid.sm\:grid-cols-3,
      .project-card .grid.grid-cols-3,
      .stagger.grid.sm\:grid-cols-2,
      .grid.sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
      }

      input, textarea, button, a {
        -webkit-tap-highlight-color: transparent;
      }
    }



    /* Dedicated narrow-phone layout: 320px to 359px */
    @media (max-width: 359px) {
      html, body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: clip !important;
      }

      body * {
        min-width: 0;
      }

      header {
        width: 100vw !important;
        max-width: 100vw !important;
      }

      header nav {
        width: 100%;
        padding: 0.65rem 0.65rem !important;
        gap: 0.35rem !important;
      }

      header nav > a {
        flex: 0 1 auto;
        gap: 0.4rem !important;
      }

      .brand-mark {
        width: 2rem !important;
        height: 2rem !important;
        border-radius: 0.7rem !important;
        font-size: 0.68rem !important;
      }

      .brand-text {
        display: none !important;
      }

      header nav > div:last-child {
        gap: 0.35rem !important;
      }

      #themeToggle,
      #mobileMenuToggle {
        width: 2rem !important;
        height: 2rem !important;
        min-width: 2rem !important;
      }

      #themeToggle .theme-toggle-icon {
        width: 1rem !important;
        height: 1rem !important;
        font-size: 0.82rem !important;
      }

      .menu-icon-line {
        width: 1rem !important;
      }

      #mobileMenu {
        width: 100%;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
      }

      #home {
        display: block !important;
        min-height: auto !important;
        padding-top: 4.5rem !important;
      }

      #home > .mx-auto {
        width: 100% !important;
        padding: 2.25rem 0.75rem 3rem !important;
        gap: 2rem !important;
      }

      .hero-badge {
        max-width: 100%;
        margin-bottom: 1.25rem !important;
        padding: 0.55rem 0.75rem !important;
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
      }

      #home h1 {
        max-width: 100% !important;
        font-size: clamp(2rem, 10.5vw, 2.2rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.055em !important;
        overflow-wrap: anywhere;
      }

      #home h1 .gradient-text {
        display: inline;
      }

      #home h1 + p {
        margin-top: 1.25rem !important;
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
      }

      .hero-actions {
        margin-top: 1.35rem !important;
        gap: 0.65rem !important;
      }

      .hero-actions > a {
        width: 100% !important;
        padding: 0.85rem 0.75rem !important;
        font-size: 0.82rem !important;
      }

      .hero-metrics {
        margin-top: 1.5rem !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
      }

      .hero-metrics .metric-card {
        border-radius: 1.25rem !important;
        padding: 1rem !important;
      }

      .hero-metrics .metric-card p:first-child {
        font-size: 1.55rem !important;
      }

      .hero-metrics .metric-card p:last-child {
        font-size: 0.65rem !important;
        letter-spacing: 0.12em !important;
      }

      #home .hero-reveal.relative {
        width: 100% !important;
      }

      #home .floating-card,
      #home .tilt-card {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        animation: none !important;
        border-radius: 1.5rem !important;
        padding: 0.55rem !important;
      }

      #home .rounded-\[2\.4rem\] {
        border-radius: 1.2rem !important;
        padding: 0.65rem !important;
      }

      #home .mockup-grid {
        border-radius: 1rem !important;
        padding: 0.65rem !important;
      }

      #home .rounded-\[1\.6rem\].bg-white {
        border-radius: 0.85rem !important;
        padding: 0.75rem !important;
      }

      .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
      }

      main section.py-32,
      main section.py-28,
      main section.py-24 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
      }

      main section > .mx-auto {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
      }

      .section-title,
      section h2 {
        font-size: 2rem !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em !important;
        overflow-wrap: anywhere;
      }

      section h3 {
        overflow-wrap: anywhere;
      }

      .card,
      .soft-card,
      .metric-card,
      .project-card {
        max-width: 100% !important;
        border-radius: 1.35rem !important;
      }

      .project-card .p-8,
      .card.p-8,
      .card.md\:p-10,
      .card.md\:p-12 {
        padding: 1rem !important;
      }

      .real-shot,
      .project-card .h-72 {
        height: 12rem !important;
        min-height: 12rem !important;
        padding: 1rem !important;
      }

      .filter-btn {
        flex: 1 1 100% !important;
        width: 100%;
      }

      .marquee-track {
        gap: 1.5rem !important;
        font-size: 0.7rem !important;
      }

      .terminal-window {
        padding: 1rem !important;
        border-radius: 1.25rem !important;
      }

      .terminal-line {
        white-space: normal !important;
        overflow-wrap: anywhere;
      }

      #contact form,
      #contact .card {
        padding: 1rem !important;
      }

      input, textarea {
        width: 100% !important;
        padding: 0.85rem !important;
        font-size: 0.9rem !important;
      }

      footer {
        font-size: 0.72rem !important;
      }
    }


    /* Strict compact-phone layout: 320px to 479px */
    @media screen and (max-width: 479px) {
      html {
        font-size: 16px !important;
        width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
      }

      *, *::before, *::after {
        box-sizing: border-box !important;
      }

      .orb, .mesh-gradient, .grid-bg, .noise, .cursor-glow,
      .page-transition, .theme-flash {
        display: none !important;
      }

      header {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
      }

      header nav {
        min-height: 3.75rem !important;
        padding: 0.6rem 0.75rem !important;
      }

      .brand-text {
        display: inline !important;
        max-width: 9.5rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.88rem !important;
      }

      .brand-mark {
        width: 2rem !important;
        height: 2rem !important;
        flex: 0 0 2rem !important;
      }

      #themeToggle, #mobileMenuToggle {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem !important;
      }

      #mobileMenu {
        top: 3.75rem !important;
      }

      main {
        width: 100% !important;
        overflow: hidden !important;
      }

      main > section,
      main > section.py-32,
      main > section.py-28,
      main > section.py-24,
      main > section.py-16,
      main > section.py-10 {
        width: 100% !important;
        min-height: 0 !important;
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
        margin: 0 !important;
        transform: none !important;
      }

      main > section > .mx-auto,
      #home > .mx-auto {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
      }

      #home {
        display: block !important;
        min-height: 0 !important;
        padding-top: 1.25rem !important;
      }

      #home > .mx-auto {
        display: block !important;
        padding-top: 1.5rem !important;
        padding-bottom: 2.75rem !important;
      }

      #home > .mx-auto > div + div {
        margin-top: 2rem !important;
      }

      #home h1 {
        font-size: 2rem !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
        max-width: none !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
      }

      #home h1 + p {
        font-size: 0.94rem !important;
        line-height: 1.65 !important;
      }

      .hero-badge {
        display: flex !important;
        width: 100% !important;
        font-size: 0.68rem !important;
        padding: 0.65rem 0.75rem !important;
      }

      .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
      }

      .hero-actions > a {
        width: 100% !important;
        min-height: 2.85rem !important;
        font-size: 0.8rem !important;
        padding: 0.7rem 0.8rem !important;
      }

      .hero-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
      }

      .hero-metrics > div {
        min-width: 0 !important;
        padding: 0.85rem !important;
      }

      .hero-metrics p:first-child {
        font-size: 1.15rem !important;
      }

      .hero-metrics p:last-child {
        font-size: 0.55rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.08em !important;
      }

      #home .floating-card,
      #home .tilt-card {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        animation: none !important;
      }

      #home .floating-card {
        padding: 0.5rem !important;
      }

      #home .floating-card > div {
        padding: 0.65rem !important;
      }

      #home .mockup-grid {
        padding: 0.55rem !important;
      }

      #home .mockup-grid > div {
        padding: 0.7rem !important;
      }

      .dashboard-stats,
      #home .grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.3rem !important;
      }

      #home .grid-cols-3 > div {
        padding: 0.5rem !important;
      }

      #home .grid-cols-3 .text-2xl {
        font-size: 0.95rem !important;
      }

      #home .grid-cols-3 .text-xs {
        font-size: 0.52rem !important;
      }

      .marquee {
        display: none !important;
      }

      .section-title,
      section h2,
      section h2.text-4xl,
      section h2.md\:text-5xl,
      section h2.md\:text-6xl {
        font-size: 1.75rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.035em !important;
      }

      section p.text-lg,
      .project-card p.text-lg {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
      }

      .stagger,
      .grid.grid-cols-12,
      .grid.sm\:grid-cols-2,
      .grid.sm\:grid-cols-3,
      .grid.md\:grid-cols-2,
      .grid.md\:grid-cols-3,
      .grid.lg\:grid-cols-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }

      .project-card,
      .project-card[class*="col-span"] {
        width: 100% !important;
        grid-column: 1 / -1 !important;
      }

      .card, .soft-card, .metric-card, .project-card,
      .rounded-\[2\.8rem\], .rounded-\[2\.5rem\], .rounded-\[2\.4rem\] {
        border-radius: 1.15rem !important;
      }

      .card.p-8, .card.md\:p-10, .card.md\:p-12,
      .glass-line.p-8, .project-card .p-8 {
        padding: 1rem !important;
      }

      .real-shot, .project-card > .mockup-grid,
      .project-card .h-72 {
        height: 10.5rem !important;
        min-height: 10.5rem !important;
      }

      .project-card h3.text-3xl {
        font-size: 1.3rem !important;
      }

      .filter-btn {
        flex: 1 1 calc(50% - 0.35rem) !important;
        width: auto !important;
        padding: 0.65rem 0.5rem !important;
        font-size: 0.7rem !important;
      }

      .story-step {
        padding-left: 2rem !important;
      }

      .case-study-timeline::before {
        left: 0.55rem !important;
      }

      .story-step::before {
        left: 0 !important;
      }

      .terminal-window {
        padding: 0.9rem !important;
      }

      .terminal-window .font-mono {
        font-size: 0.66rem !important;
        line-height: 1.6 !important;
      }

      #github img {
        width: 100% !important;
      }

      #contact {
        padding-bottom: 2rem !important;
      }

      #contact .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
      }

      #contact input, #contact textarea {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0.8rem !important;
      }

      footer {
        padding: 1.5rem 0.85rem !important;
        font-size: 0.67rem !important;
      }

      .fade-up, .stagger, .hero-reveal, .terminal-line {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }