/* =========================================================
   Mahfuzur Rahman Mridul — Portfolio
   Modern, minimal, premium. Orange accent. Light only.
   ========================================================= */

:root {
   --brand: #ff6a00;
   --brand-600: #f25c00;
   --brand-50: #fff2e6;
   --ink: #0f1115;
   --ink-2: #2a2f3a;
   --muted: #6b7280;
   --line: #ececf1;
   --bg: #ffffff;
   --bg-soft: #fafafa;
   --card: #ffffff;
   --radius: 18px;
   --radius-sm: 12px;
   --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 3px rgba(15, 17, 21, 0.04);
   --shadow-md: 0 8px 24px rgba(15, 17, 21, 0.06);
   --shadow-lg: 0 20px 50px rgba(15, 17, 21, 0.08);
   --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
html {
   scroll-behavior: smooth;
}
body {
   font-family:
      "Inter",
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      sans-serif;
   color: var(--ink);
   background: var(--bg);
   line-height: 1.6;
   font-size: 16px;
}
h1,
h2,
h3,
h4,
h5 {
   font-family: "Space Grotesk", "Inter", sans-serif;
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--ink);
}
h1 {
   font-weight: 700;
   letter-spacing: -0.035em;
}
a {
   color: var(--ink);
   text-decoration: none;
   transition: color 0.2s var(--ease);
}
a:hover {
   color: var(--brand);
}
p {
   color: var(--ink-2);
}
img {
   max-width: 100%;
   display: block;
}

/* Layout */
section {
   padding: 120px 0;
   position: relative;
}
.section-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--brand);
   background: var(--brand-50);
   padding: 6px 12px;
   border-radius: 999px;
   margin-bottom: 18px;
}
.section-title {
   font-size: clamp(28px, 3.4vw, 44px);
   margin-bottom: 14px;
}
.section-lead {
   color: var(--muted);
   font-size: 17px;
   max-width: 640px;
}

/* Buttons */
.btn {
   border-radius: 999px;
   padding: 12px 22px;
   font-weight: 500;
   font-size: 15px;
   transition:
      transform 0.25s var(--ease),
      box-shadow 0.25s var(--ease),
      background 0.25s var(--ease),
      color 0.25s var(--ease);
   border: 1px solid transparent;
}
.btn-brand {
   background: var(--brand);
   color: #fff;
   box-shadow: 0 10px 24px rgba(255, 106, 0, 0.28);
}
.btn-brand:hover {
   background: var(--brand-600);
   color: #fff;
   transform: translateY(-2px);
   box-shadow: 0 14px 30px rgba(255, 106, 0, 0.35);
}
.btn-ghost {
   background: #fff;
   color: var(--ink);
   border-color: var(--line);
}
.btn-ghost:hover {
   border-color: var(--ink);
   color: var(--ink);
   transform: translateY(-2px);
}
.btn-sm {
   padding: 8px 16px;
   font-size: 13px;
}

/* ========== Navbar ========== */
.navbar {
   padding: 14px 0;
   background: rgba(255, 255, 255, 0.75);
   backdrop-filter: saturate(180%) blur(14px);
   -webkit-backdrop-filter: saturate(180%) blur(14px);
   border-bottom: 1px solid transparent;
   transition:
      background 0.3s var(--ease),
      border-color 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
}
.navbar.scrolled {
   background: rgba(255, 255, 255, 0.92);
   border-bottom-color: var(--line);
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.navbar-brand {
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   font-size: 20px;
   letter-spacing: -0.02em;
}
.navbar-brand .dot {
   color: var(--brand);
}
.navbar .nav-link {
   color: var(--ink-2);
   font-size: 14.5px;
   font-weight: 500;
   padding: 8px 14px !important;
   position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
   color: var(--ink);
}
.navbar .nav-link::after {
   content: "";
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 4px;
   height: 2px;
   background: var(--brand);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.3s var(--ease);
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
   transform: scaleX(1);
   transform-origin: left;
}
.navbar-toggler {
   border: none;
   padding: 6px;
}
.navbar-toggler:focus {
   box-shadow: none;
}

/* ========== Hero ========== */
.hero {
   padding: 160px 0 120px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}
.hero-shape {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: 0.55;
   pointer-events: none;
}
.hero-shape.s1 {
   width: 480px;
   height: 480px;
   background: #ffd7b3;
   top: -120px;
   right: -100px;
}
.hero-shape.s2 {
   width: 380px;
   height: 380px;
   background: #ffe9d1;
   bottom: -140px;
   left: -80px;
}
.hero-grid {
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(15, 17, 21, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 17, 21, 0.035) 1px, transparent 1px);
   background-size: 44px 44px;
   mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
   -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.hero-inner {
   position: relative;
   z-index: 2;
   text-align: center;
}
.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #fff;
   border: 1px solid var(--line);
   padding: 6px 14px;
   border-radius: 999px;
   font-size: 13px;
   color: var(--ink-2);
   box-shadow: var(--shadow-sm);
}
.hero-badge .pulse {
   width: 8px;
   height: 8px;
   background: #22c55e;
   border-radius: 50%;
   box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
   animation: pulse 2s infinite;
}
@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
   }
   70% {
      box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
   }
   100% {
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
   }
}
.hero h1 {
   font-size: clamp(42px, 6.8vw, 88px);
   line-height: 1.02;
   margin: 24px 0 10px;
}
.hero h1 .accent {
   color: var(--brand);
}
.hero .typed-wrap {
   font-size: clamp(20px, 2.4vw, 30px);
   font-weight: 500;
   color: var(--ink-2);
   font-family: "Space Grotesk", sans-serif;
}
.hero .typed-cursor {
   color: var(--brand);
}
.hero .lead {
   max-width: 680px;
   margin: 22px auto 34px;
   color: var(--muted);
   font-size: 17px;
}
.hero-cta {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
}
.hero-scroll {
   position: absolute;
   bottom: -130px;
   left: 50%;
   transform: translateX(-50%);
   color: var(--muted);
   font-size: 12px;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   display: flex;
   display: none !important;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}
.hero-scroll .line {
   width: 1px;
   height: 40px;
   background: linear-gradient(to bottom, transparent, var(--muted));
   animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
   0%,
   100% {
      opacity: 0.3;
   }
   50% {
      opacity: 1;
   }
}

/* ========== About ========== */
.about {
   background: var(--bg);
}
.about-card {
   background: var(--bg-soft);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 28px;
   height: 100%;
   transition:
      transform 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
}
.about-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}
.about-card .icon {
   width: 46px;
   height: 46px;
   border-radius: 12px;
   background: var(--brand-50);
   color: var(--brand);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 16px;
}
.about-card h4 {
   font-size: 17px;
   margin-bottom: 8px;
}
.about-card p {
   font-size: 14.5px;
   color: var(--muted);
   margin: 0;
}

.counters {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 64px;
}
.counter {
   text-align: center;
   padding: 24px 12px;
   border-radius: var(--radius-sm);
   background: #fff;
   border: 1px solid var(--line);
}
.counter .num {
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   font-size: 36px;
   color: var(--ink);
}
.counter .num .plus {
   color: var(--brand);
}
.counter .label {
   color: var(--muted);
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-top: 4px;
}
@media (max-width: 767px) {
   .counters {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* ========== Experience ========== */
.experience {
   background: var(--bg-soft);
}
.timeline {
   position: relative;
   margin-top: 40px;
   padding-left: 0;
}
.timeline::before {
   content: "";
   position: absolute;
   left: 20px;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background: linear-gradient(to bottom, var(--brand), var(--line));
}
.tl-item {
   position: relative;
   padding: 0 0 32px 60px;
}
.tl-item:last-child {
   padding-bottom: 0;
}
.tl-dot {
   position: absolute;
   left: 12px;
   top: 22px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: #fff;
   border: 3px solid var(--brand);
   box-shadow: 0 0 0 6px rgba(255, 106, 0, 0.12);
}
.tl-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 26px 28px;
   transition:
      transform 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
}
.tl-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
}
.tl-role {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 10px;
}
.tl-role h4 {
   font-size: 20px;
   margin: 0;
}
.tl-company {
   color: var(--brand);
   font-weight: 500;
   font-size: 14.5px;
}
.tl-date {
   font-size: 13px;
   color: var(--muted);
   background: var(--bg-soft);
   padding: 4px 12px;
   border-radius: 999px;
   border: 1px solid var(--line);
}
.tl-list {
   list-style: none;
   padding: 16px 0 0;
   margin: 0;
}
.tl-list li {
   position: relative;
   padding: 6px 0 6px 22px;
   color: var(--ink-2);
   font-size: 15px;
}
.tl-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 15px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--brand);
}

/* ========== Skills ========== */
.skills-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
   margin-top: 40px;
}
@media (max-width: 991px) {
   .skills-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}
@media (max-width: 575px) {
   .skills-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}
.skill-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius-sm);
   padding: 22px 14px;
   text-align: center;
   transition: all 0.3s var(--ease);
   cursor: default;
}
.skill-card:hover {
   transform: translateY(-4px);
   border-color: var(--brand);
   box-shadow: 0 10px 24px rgba(255, 106, 0, 0.12);
}
.skill-card .ico {
   width: 44px;
   height: 44px;
   margin: 0 auto 12px;
   border-radius: 12px;
   background: var(--brand-50);
   color: var(--brand);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   transition: all 0.3s var(--ease);
}
.skill-card:hover .ico {
   background: var(--brand);
   color: #fff;
}
.skill-card .name {
   font-size: 14px;
   font-weight: 500;
   color: var(--ink);
}

/* ========== Projects ========== */
.projects {
   background: var(--bg);
}
.filters {
   display: inline-flex;
   gap: 6px;
   padding: 6px;
   background: var(--bg-soft);
   border: 1px solid var(--line);
   border-radius: 999px;
   margin: 24px 0 40px;
}
.filter-btn {
   border: none;
   background: transparent;
   color: var(--ink-2);
   font-size: 14px;
   font-weight: 500;
   padding: 8px 18px;
   border-radius: 999px;
   cursor: pointer;
   transition: all 0.25s var(--ease);
}
.filter-btn:hover {
   color: var(--ink);
}
.filter-btn.active {
   background: var(--ink);
   color: #fff;
}

.project-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow: hidden;
   height: 100%;
   transition:
      transform 0.35s var(--ease),
      box-shadow 0.35s var(--ease),
      border-color 0.35s var(--ease);
   display: flex;
   flex-direction: column;
}
.project-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
   border-color: transparent;
}
.project-thumb {
   position: relative;
   aspect-ratio: 16/10;
   overflow: hidden;
   background: linear-gradient(135deg, #fff2e6 0%, #ffd7b3 100%);
   display: flex;
   align-items: center;
   justify-content: center;
}
.project-thumb .thumb-mark {
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   font-size: 42px;
   color: rgba(15, 17, 21, 0.14);
   letter-spacing: -0.03em;
}
.project-thumb .cat-badge {
   position: absolute;
   top: 14px;
   left: 14px;
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(6px);
   color: var(--ink);
   font-size: 11px;
   font-weight: 600;
   padding: 5px 10px;
   border-radius: 999px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}
.project-card:hover .project-thumb .thumb-emoji {
   transform: scale(1.1) rotate(-3deg);
}
.thumb-emoji {
   font-size: 4rem;
   transition: transform 0.4s var(--ease);
   z-index: 1;
}
/* Unique thumb gradients per project */
.thumb-travel {
   background: linear-gradient(135deg, #ffedd5 0%, #ffd8a8 100%);
}
.thumb-chain {
   background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}
.thumb-bill {
   background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}
.thumb-hyip {
   background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.thumb-exrate {
   background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.thumb-saas {
   background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
}
.thumb-hyip-flutter {
   background: linear-gradient(135deg, #ffe4d2 0%, #ffd0aa 100%);
}
.thumb-etrendz {
   background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
}
.thumb-restaront {
   background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
}
.thumb-bullion {
   background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
}
.thumb-docfinder {
   background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
}
.thumb-docfinder2 {
   background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
}
.thumb-gamers {
   background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
}
.thumb-smm {
   background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
}
.thumb-construm {
   background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}
.thumb-wedding {
   background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
}
.thumb-finounce {
   background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
}
.thumb-starryhire {
   background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
}
.thumb-chain-web {
   background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}
.thumb-ptc {
   background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}
.thumb-listplace {
   background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.thumb-icogenie {
   background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.thumb-foody {
   background: linear-gradient(135deg, #ffe4d2 0%, #ffd0aa 100%);
}
.project-body {
   padding: 22px;
   display: flex;
   flex-direction: column;
   flex: 1;
}
.project-body h4 {
   font-size: 18px;
   margin: 0 0 8px;
}
.project-body p {
   font-size: 14px;
   color: var(--muted);
   margin: 0 0 16px;
   flex: 1;
}
.tech-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 16px;
}
.tech-badge {
   font-size: 11px;
   font-weight: 500;
   color: var(--ink-2);
   background: var(--bg-soft);
   border: 1px solid var(--line);
   padding: 4px 10px;
   border-radius: 6px;
}
.project-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--brand);
   align-self: flex-start;
}
.project-link:hover {
   color: var(--brand-600);
   gap: 10px;
}
.project-item.hidden-project {
   display: none;
}
.projects-more {
   text-align: center;
   margin-top: 48px;
}

/* ========== Contact ========== */
.contact {
   background: var(--bg-soft);
}
.contact-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 40px;
   display: flex;
   align-items: center;
   gap: 20px;
   transition:
      transform 0.3s var(--ease),
      box-shadow 0.3s var(--ease);
}
.contact-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
}
.contact-card .ico {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   background: var(--brand-50);
   color: var(--brand);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   flex-shrink: 0;
}
.contact-card .label {
   font-size: 12px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: 0.12em;
}
.contact-card .value {
   font-size: 18px;
   font-weight: 500;
   color: var(--ink);
   word-break: break-all;
}

/* ========== Footer ========== */
.footer {
   padding: 40px 0;
   border-top: 1px solid var(--line);
}
.footer p {
   margin: 0;
   color: var(--muted);
   font-size: 14px;
}
.footer .foot-brand {
   font-family: "Space Grotesk", sans-serif;
   font-weight: 700;
   color: var(--ink);
}

/* Back to top */
.back-top {
   position: fixed;
   right: 24px;
   bottom: 24px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--ink);
   color: #fff;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transform: translateY(10px);
   transition: all 0.3s var(--ease);
   z-index: 60;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.back-top.show {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
}
.back-top:hover {
   background: var(--brand);
   transform: translateY(-3px);
}

/* Responsive tuning */
@media (max-width: 991px) {
   section {
      padding: 90px 0;
   }
   .hero {
      padding: 130px 0 90px;
   }
   .contact-card {
      padding: 28px;
   }
}
@media (max-width: 575px) {
   section {
      padding: 72px 0;
   }
   .hero {
      padding: 110px 0 72px;
   }
   .tl-item {
      padding-left: 48px;
   }
   .tl-card {
      padding: 20px;
   }
   .about-card {
      padding: 22px;
   }
}