@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ================================================================
   01. THEME VARIABLES
   ================================================================ */
:root {
   --bg: #f5f7fb;
   --surface: #fff;
   --surface-2: #edf1f8;
   --text: #101522;
   --muted: #667085;
   --line: rgba(16, 21, 34, .11);
   --dark: #070b16;
   --dark-2: #0d1323;
   --dark-text: #f8fbff;
   --dark-muted: #a8b1c4;
   --cyan: #38e7ff;
   --violet: #8b5cf6;
   --pink: #f472b6;
   --green: #43f3a1;
   --shadow: 0 25px 80px rgba(10, 15, 30, .12);
   --radius: 26px;
   --max: 1180px;
   --header: 78px
}

html[data-theme="dark"] {
   --bg: #070b16;
   --surface: #0e1424;
   --surface-2: #111a2d;
   --text: #f6f8ff;
   --muted: #a9b2c5;
   --line: rgba(255, 255, 255, .1);
   --shadow: 0 25px 80px rgba(0, 0, 0, .32)
}

/* ================================================================
   02. RESET / GLOBAL BASE STYLES
   ================================================================ */
* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   overflow-x: hidden;
   line-height: 1.65
}

body,
button,
a {
   transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s
}

a {
   color: inherit;
   text-decoration: none
}

button {
   font: inherit;
   color: inherit
}

.container {
   width: min(calc(100% - 48px), var(--max));
   margin-inline: auto
}

.section-light,
.section-soft,
.process-section {
   background: var(--bg)
}

.section-dark,
.skills-section,
.experience-section {
   background: var(--dark);
   color: var(--dark-text)
}

.section-gradient {
   background: linear-gradient(135deg, #6d38ff 0%, #8b5cf6 43%, #21d8e9 100%);
   color: #fff
}

.skip-link {
   position: fixed;
   left: 15px;
   top: -60px;
   z-index: 9999;
   padding: 10px 16px;
   background: #fff;
   color: #000;
   border-radius: 8px
}

.skip-link:focus {
   top: 15px
}

.scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background: transparent;
   z-index: 1000
}

.scroll-progress span {
   display: block;
   width: 0;
   height: 100%;
   background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
   box-shadow: 0 0 18px rgba(56, 231, 255, .65)
}

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

/* ================================================================
   03. HEADER / NAVIGATION
   ================================================================ */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 800;
   height: var(--header);
   background: color-mix(in srgb, var(--bg) 78%, transparent);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid var(--line)
}

.nav-wrap {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.brand {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 11px;
   font-family: 'Space Grotesk', sans-serif
}

.brand-mark {
   width: 38px;
   height: 38px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   color: #fff;
   font-weight: 700;
   background: linear-gradient(135deg, var(--violet), var(--cyan));
   box-shadow: 0 10px 30px rgba(99, 102, 241, .25);
   padding-bottom: 2px;
}

.brand b {
   display: block;
   font-size: 15px;
   line-height: 1
}

.brand small {
   display: block;
   color: var(--muted);
   font-size: 10px;
   letter-spacing: .12em;
   text-transform: uppercase;
   margin-top: 5px
}

.desktop-nav {
   display: flex;
   align-items: center;
   gap: 25px
}

.desktop-nav a {
   font-size: 13px;
   color: var(--muted);
   font-weight: 600
}

.desktop-nav a:hover {
   color: var(--text)
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 10px
}

.theme-toggle,
.menu-btn {
   width: 42px;
   height: 42px;
   border: 1px solid var(--line);
   background: var(--surface);
   border-radius: 13px;
   display: grid;
   place-items: center;
   cursor: pointer
}

.theme-toggle:hover,
.menu-btn:hover {
   transform: translateY(-2px)
}

.menu-btn {
   display: none;
   padding: 10px
}

.menu-btn i {
   display: block;
   width: 18px;
   height: 1.5px;
   background: var(--text);
   margin: 3px auto
}

.mobile-nav {
   display: none
}

/* ================================================================
   04. BUTTONS / LINKS
   ================================================================ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 11px;
   border: 1px solid transparent;
   border-radius: 14px;
   font-weight: 700;
   cursor: pointer
}

.btn span {
   font-size: 16px
}

.btn-sm {
   padding: 10px 15px;
   font-size: 12px
}

.btn-lg {
   padding: 15px 21px;
   font-size: 13px
}

.btn-primary {
   background: linear-gradient(135deg, var(--violet), #6653ff 55%, var(--cyan));
   color: #fff;
   box-shadow: 0 15px 35px rgba(103, 80, 255, .25)
}

.btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 20px 45px rgba(103, 80, 255, .34)
}

.btn-dark {
   background: #0b1020;
   color: #fff;
   box-shadow: 0 15px 35px rgba(0, 0, 0, .22)
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 13px;
   color: var(--muted)
}

.text-link:hover {
   color: var(--text);
   transform: translateX(3px)
}

/* ================================================================
   05. SCROLL RAIL / ROCKET
   ================================================================ */
.scroll-rail {
   position: fixed;
   right: 25px;
   top: 50%;
   transform: translateY(-50%);
   height: 55vh;
   width: 42px;
   z-index: 700;
   display: flex;
   justify-content: center
}

.rail-line {
   position: absolute;
   top: 26px;
   bottom: 26px;
   width: 2px;
   border-radius: 99px;
   background: var(--line);
   overflow: visible
}

.rail-line>span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 0;
   background: linear-gradient(var(--violet), var(--cyan));
   box-shadow: 0 0 14px rgba(56, 231, 255, .7)
}

.rocket {
   position: absolute;
   top: 0;
   left: 50%;
   width: 30px;
   height: 30px;
   transform: translate(-50%, 0) rotate(-45deg);
   border-radius: 10px 10px 12px 12px;
   background: linear-gradient(135deg, #fff, #cbd5ff);
   box-shadow: 0 0 25px rgba(56, 231, 255, .5);
   border: 2px solid var(--violet)
}

.rocket:before,
.rocket:after {
   content: "";
   position: absolute;
   width: 7px;
   height: 11px;
   background: #8b5cf6;
   bottom: -6px;
   border-radius: 2px
}

.rocket:before {
   left: 3px
}

.rocket:after {
   right: 3px
}

.rocket-window {
   position: absolute;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #38e7ff;
   left: 9px;
   top: 7px;
   border: 2px solid #5b4ce6
}

.rocket-fire {
   position: absolute;
   width: 6px;
   height: 11px;
   background: linear-gradient(#f472b6, #ffb347);
   bottom: -12px;
   left: 10px;
   border-radius: 0 0 7px 7px;
   transform: rotate(45deg)
}

.rail-label {
   position: absolute;
   bottom: 0;
   transform: rotate(90deg) translateX(28px);
   font-size: 8px;
   letter-spacing: .3em;
   color: var(--muted)
}

/* ================================================================
   06. HERO / HOME SECTION
   ================================================================ */
.hero {
   min-height: 100svh;
   padding: 150px 0 90px;
   position: relative;
   display: grid;
   align-items: center;
   overflow: hidden
}

.hero-bg {
   position: absolute;
   inset: 0;
   pointer-events: none
}

.hero-bg span {
   position: absolute;
   border-radius: 50%;
   filter: blur(2px);
   opacity: .45
}

.hero-bg span:nth-child(1) {
   width: 460px;
   height: 460px;
   left: -180px;
   top: 10%;
   background: radial-gradient(circle, var(--violet), transparent 68%)
}

.hero-bg span:nth-child(2) {
   width: 420px;
   height: 420px;
   right: -140px;
   bottom: -80px;
   background: radial-gradient(circle, var(--cyan), transparent 68%)
}

.hero-bg span:nth-child(3) {
   width: 260px;
   height: 260px;
   right: 25%;
   top: 8%;
   background: radial-gradient(circle, var(--pink), transparent 68%);
   opacity: .18
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   align-items: center;
   gap: 70px;
   position: relative;
   z-index: 2
}

.overline {
   font-size: 10px;
   letter-spacing: .24em;
   color: #93a1ba;
   font-weight: 700;
   margin: 24px 0 12px
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   padding: 8px 12px;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 99px;
   color: #c6d0e3;
   background: rgba(255, 255, 255, .035);
   font-size: 11px
}

.eyebrow span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--green);
   box-shadow: 0 0 12px var(--green)
}

h1,
h2,
h3,
p {
   margin-top: 0
}

h1,
h2,
h3 {
   font-family: 'Space Grotesk', sans-serif;
   letter-spacing: -.045em
}

h1 {
   font-size: clamp(48px, 6vw, 82px);
   line-height: .98;
   max-width: 780px;
   margin-bottom: 25px
}

.gradient-text {
   background: linear-gradient(100deg, var(--cyan), #a78bfa 48%, var(--pink));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.hero-text {
   font-size: 17px;
   color: var(--dark-muted);
   max-width: 680px;
   line-height: 1.8
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 22px;
   margin: 31px 0 35px
}

.hero-stats {
   display: flex;
   gap: 28px
}

.hero-stats div {
   padding-left: 15px;
   border-left: 1px solid rgba(255, 255, 255, .12)
}

.hero-stats b {
   display: block;
   font: 700 21px 'Space Grotesk', sans-serif
}

.hero-stats span {
   display: block;
   color: #8995aa;
   font-size: 10px;
   margin-top: 3px
}

.hero-stage {
   min-height: 600px;
   position: relative;
   display: grid;
   place-items: center
}

.orbit {
   position: absolute;
   border: 1px dashed rgba(139, 92, 246, .3);
   border-radius: 50%;
   width: 500px;
   height: 500px;
   transform: rotate(20deg)
}

.orbit-a {
   border-color: rgba(56, 231, 255, .2)
}

.orbit-b {
   width: 390px;
   height: 390px
}

.code-card {
   position: absolute;
   width: 370px;
   right: 15px;
   top: 35px;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, .1);
   background: rgba(13, 19, 35, .78);
   backdrop-filter: blur(18px);
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 35px 80px rgba(0, 0, 0, .35);
   z-index: 2
}

.code-head {
   height: 38px;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 0 14px;
   border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.code-head span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #f472b6
}

.code-head span:nth-child(2) {
   background: #fbbf24
}

.code-head span:nth-child(3) {
   background: #43f3a1
}

.code-head small {
   margin-left: auto;
   color: #71809b;
   font: 10px monospace
}

.code-card pre {
   padding: 20px;
   margin: 0;
   overflow: auto;
   color: #bac5d9;
   font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace
}

.code-card em {
   color: #a78bfa;
   font-style: normal
}

.code-card b {
   color: #54e6ff;
   font-weight: 500
}

.portrait-card {
   position: absolute;
   left: 20px;
   bottom: 35px;
   width: 350px;
   padding: 13px;
   border: 1px solid rgba(255, 255, 255, .13);
   border-radius: 24px;
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(18px);
   display: flex;
   align-items: center;
   gap: 14px;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
   z-index: 3
}

.portrait {
   width: 78px;
   height: 78px;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .15);
   background: #dbe0e8
}

.portrait img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center top
}

.portrait-meta b {
   display: block;
   font: 600 15px 'Space Grotesk', sans-serif;
   color: #fff
}

.portrait-meta span {
   font-size: 11px;
   color: #a8b1c4
}

.online-dot {
   margin-left: auto;
   width: 9px;
   height: 9px;
   background: var(--green);
   border-radius: 50%;
   box-shadow: 0 0 14px var(--green)
}

.floating-chip {
   position: absolute;
   padding: 10px 13px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .1);
   backdrop-filter: blur(12px);
   font-size: 10px;
   color: #dbe4f3;
   box-shadow: 0 15px 40px rgba(0, 0, 0, .2);
   z-index: 4
}

.chip-one {
   right: -5px;
   bottom: 145px
}

.chip-two {
   left: -12px;
   top: 165px
}

.chip-three {
   right: 55px;
   bottom: 15px
}

.hero-scroll {
   position: absolute;
   bottom: 25px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 10px;
   color: #8e9ab0;
   font-size: 9px;
   letter-spacing: .2em;
   text-transform: uppercase
}

.hero-scroll span {
   width: 28px;
   height: 42px;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 99px;
   position: relative
}

.hero-scroll span:after {
   content: "";
   position: absolute;
   width: 4px;
   height: 8px;
   border-radius: 9px;
   left: 50%;
   top: 8px;
   transform: translateX(-50%);
   background: var(--cyan);
   animation: scrollDot 1.6s ease-in-out infinite
}

@keyframes scrollDot {

   0%,
   100% {
      transform: translate(-50%, 0);
      opacity: .5
   }

   50% {
      transform: translate(-50%, 15px);
      opacity: 1
   }
}

/* ================================================================
   07. ABOUT SECTION
   ================================================================ */
.section-light,
.section-soft,
.skills-section,
.services-section,
.work-section,
.experience-section,
.process-section,
.contact-section {
   padding: 125px 0;
   position: relative
}

.split-intro {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 80px
}

.section-kicker {
   font: 700 10px/1 'Space Grotesk', sans-serif;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--muted);
   display: flex;
   align-items: center;
   gap: 10px
}

.section-kicker span {
   color: var(--violet)
}

.intro-copy h2,
.section-title h2,
.skills-heading h2 {
   font-size: clamp(38px, 5vw, 62px);
   line-height: 1.02;
   margin: 0 0 25px
}

.intro-copy p {
   font-size: 17px;
   color: var(--muted);
   max-width: 760px
}

.tag-row,
.skill-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 25px;
 
}

.tag-row span,
.skill-tags span {
   padding: 8px 11px;
   border: 1px solid var(--line);
   border-radius: 99px;
   font-size: 10px;
   color: var(--muted);
   background: var(--surface);
     cursor: pointer;
   
}
.tag-row span:hover  {
  
   background: var(--surface-2);
     cursor: pointer;
   
}

/* ================================================================
   08. ENGINEERING SKILLS / ROADMAP
   ================================================================ */
.skills-section {
   overflow: hidden
}

.skills-heading {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 70px;
   align-items: end;
   margin-bottom: 70px
}

.skills-heading>p {
   color: var(--dark-muted);
   max-width: 440px;
   margin: 0
}

.skill-roadmap {
   position: relative;
   width: min(100%, 940px);
   margin: auto;
   padding: 10px 0
}

.road-line {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   width: 2px;
   background: rgba(255, 255, 255, .09);
   transform: translateX(-50%)
}

.road-line span {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(var(--violet), var(--cyan), var(--pink));
   transform-origin: top;
   transform: scaleY(0)
}

.skill-card {
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   align-items: center;
   gap: 22px;
   width: calc(50% - 35px);
   min-height: 250px;
   padding: 28px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 24px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
   box-shadow: 0 25px 70px rgba(0, 0, 0, .18);
   margin: 0 0 60px
}

.skill-card:nth-of-type(even) {
   margin-left: auto
}

.skill-card:last-child {
   margin-bottom: 0
}

.skill-index {
   position: absolute;
   top: 18px;
   right: 20px;
   color: #69758b;
   font: 700 9px 'Space Grotesk', sans-serif;
   letter-spacing: .12em
}

.skill-icon {
   width: 60px;
   height: 60px;
   border-radius: 18px;
   display: grid;
   place-items: center;
   color: #fff;
   font: 700 19px 'Space Grotesk', sans-serif;
   background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(56, 231, 255, .12));
   border: 1px solid rgba(139, 92, 246, .3)
}

.skill-card h3 {
   font-size: 24px;
   margin: 0 0 8px
}

.skill-card p {
   color: var(--dark-muted);
   font-size: 13px;
   margin: 0;
   max-width: 470px
}

.skill-card .skill-tags {
   margin-top: 16px
}

.skill-card .skill-tags span {
   background: rgba(255, 255, 255, .035);
   border-color: rgba(255, 255, 255, .08);
   color: #9eabc0
}

.skill-card:after {
   content: "";
   position: absolute;
   top: 50%;
   width: 70px;
   height: 1px;
   background: linear-gradient(90deg, var(--violet), transparent);
   right: -70px
}

.skill-card:nth-of-type(even):after {
   left: -70px;
   right: auto;
   background: linear-gradient(90deg, transparent, var(--cyan))
}

.skill-card:before {
   content: "";
   position: absolute;
   top: calc(50% - 6px);
   right: -77px;
   width: 11px;
   height: 11px;
   border-radius: 50%;
   background: var(--cyan);
   box-shadow: 0 0 0 5px #070b16, 0 0 22px var(--cyan)
}

.skill-card:nth-of-type(even):before {
   left: -77px;
   right: auto;
   background: var(--violet);
   box-shadow: 0 0 0 5px #070b16, 0 0 22px var(--violet)
}

/* ================================================================
   09. SERVICES SECTION
   ================================================================ */
.section-title {
   margin-bottom: 55px
}

.section-title>p:not(.section-kicker) {
   max-width: 500px;
   color: var(--muted)
}

.split-title {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 50px
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 15px
}

.service-card {
   padding: 28px;
   border: 1px solid var(--line);
   background: var(--surface);
   border-radius: 22px;
   min-height: 330px;
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow);
   position: relative;
   overflow: hidden
}

.service-card:before {
   content: "";
   position: absolute;
   inset: auto -20% -45% -20%;
   height: 190px;
   background: radial-gradient(circle, rgba(139, 92, 246, .18), transparent 65%);
   opacity: 0;
   transition: opacity .4s
}

.service-card:hover {
   transform: translateY(-7px);
   border-color: rgba(139, 92, 246, .35)
}

.service-card:hover:before {
   opacity: 1
}

.service-card.featured {
   background: linear-gradient(145deg, #171a35, #0c1624);
   color: #fff;
   border-color: rgba(139, 92, 246, .35)
}

.service-card.featured p,
.service-card.featured .service-no {
   color: #9fa9bd
}

.service-no {
   font: 700 10px 'Space Grotesk', sans-serif;
   color: var(--muted)
}

.service-symbol {
   width: 52px;
   height: 52px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(56, 231, 255, .1));
   color: var(--violet);
   font-weight: 700;
   font-size: 20px;
   margin: 35px 0 20px
}

.service-card h3 {
   font-size: 22px;
   margin: 0 0 10px
}

.service-card p {
   font-size: 12px;
   color: var(--muted);
   margin: 0
}

.service-card a {
   font-size: 11px;
   font-weight: 700;
   margin-top: auto;
   padding-top: 25px
}

.service-card a:hover {
   color: var(--violet)
}

/* ================================================================
   10. WORK / PROJECT CAROUSEL
   ================================================================ */
.project-swiper {
   overflow: visible
}

.project-slide {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   min-height: 500px;
   border: 1px solid var(--line);
   border-radius: 30px;
   overflow: hidden;
   background: var(--surface);
   box-shadow: var(--shadow)
}

.project-visual {
   position: relative;
   min-height: 500px;
   display: grid;
   place-items: center;
   overflow: hidden
}

.visual-a {
   background: radial-gradient(circle at 20% 20%, #6d5cff, transparent 40%), linear-gradient(135deg, #0d1328, #111b33)
}

.visual-b {
   background: radial-gradient(circle at 80% 15%, #38e7ff, transparent 34%), linear-gradient(135deg, #071827, #10122b)
}

.visual-c {
   background: radial-gradient(circle at 20% 80%, #f472b6, transparent 32%), linear-gradient(135deg, #19122c, #0e1725)
}

.visual-d {
   background: radial-gradient(circle at 80% 70%, #8b5cf6, transparent 35%), linear-gradient(135deg, #0b1525, #101020)
}

.project-visual label {
   position: absolute;
   top: 22px;
   left: 22px;
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, .16);
   border-radius: 99px;
   background: rgba(0, 0, 0, .18);
   color: #fff;
   font: 700 8px 'Space Grotesk', sans-serif;
   letter-spacing: .16em
}

.browser-ui {
   width: 70%;
   height: 55%;
   border-radius: 17px;
   background: #f5f7fb;
   box-shadow: 0 35px 70px rgba(0, 0, 0, .35);
   overflow: hidden;
   transform: rotate(-3deg)
}

.browser-bar {
   height: 30px;
   background: #e6e9ef;
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 0 10px
}

.browser-bar i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #a3a8b5
}

.browser-grid {
   padding: 28px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.browser-grid span {
   height: 90px;
   border-radius: 10px;
   background: linear-gradient(135deg, #cbd5ff, #f0f4ff)
}

.browser-grid span:first-child {
   grid-column: 1/-1;
   height: 110px;
   background: linear-gradient(135deg, #8b5cf6, #38e7ff)
}

.dashboard-ui {
   width: 74%;
   height: 62%;
   background: #f6f8fb;
   border-radius: 18px;
   display: grid;
   grid-template-columns: 26% 74%;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
   transform: rotate(2deg)
}

.dashboard-ui aside {
   background: #10162a
}

.dashboard-ui main {
   padding: 20px
}

.dashboard-ui main>b {
   display: block;
   width: 42%;
   height: 11px;
   background: #b7c2d7;
   border-radius: 8px;
   margin-bottom: 10px
}

.dashboard-ui main>b:nth-child(2) {
   width: 24%;
   margin-bottom: 22px
}

.dashboard-ui main>div {
   height: 80px;
   border-radius: 12px;
   background: linear-gradient(135deg, #dbe1ff, #eef3ff);
   margin-bottom: 12px
}

.phone-ui {
   width: 190px;
   height: 380px;
   border: 8px solid #151b2b;
   border-radius: 30px;
   background: #eef2ff;
   box-shadow: 0 35px 80px rgba(0, 0, 0, .4);
   padding: 45px 15px 15px;
   position: relative;
   transform: rotate(-5deg)
}

.phone-ui i {
   position: absolute;
   top: 13px;
   left: 50%;
   width: 58px;
   height: 6px;
   background: #343b4e;
   border-radius: 99px;
   transform: translateX(-50%)
}

.phone-ui b {
   display: block;
   height: 95px;
   border-radius: 14px;
   background: linear-gradient(135deg, #8b5cf6, #38e7ff);
   margin-bottom: 15px
}

.phone-ui span {
   display: block;
   height: 35px;
   background: #d5dded;
   border-radius: 10px;
   margin-bottom: 10px
}

.code-float {
   position: absolute;
   right: 16%;
   bottom: 22%;
   padding: 14px;
   background: rgba(4, 8, 18, .72);
   border: 1px solid rgba(255, 255, 255, .15);
   border-radius: 12px;
   color: #8ef5ff;
   font: 11px/1.6 monospace;
   transform: rotate(4deg)
}

.cms-ui {
   width: 75%;
   height: 60%;
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 35px 70px rgba(0, 0, 0, .35);
   overflow: hidden
}

.cms-ui header {
   height: 44px;
   background: #11172b
}

.cms-ui section {
   padding: 22px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px
}

.cms-ui i {
   height: 150px;
   border-radius: 10px;
   background: linear-gradient(135deg, #e7ddff, #c6f7ff)
}

.project-copy {
   padding: 55px 48px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.project-copy>span {
   font: 700 9px 'Space Grotesk', sans-serif;
   letter-spacing: .16em;
   color: var(--muted)
}

.project-copy h3 {
   font-size: 38px;
   line-height: 1.05;
   margin: 18px 0 15px
}

.project-copy p {
   color: var(--muted);
   font-size: 14px;
   max-width: 480px
}

.project-copy a {
   font-size: 12px;
   font-weight: 700;
   margin-top: 18px
}

.project-copy a:hover {
   color: var(--violet)
}

.slider-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 24px
}

.swiper-pagination {
   position: static !important;
   width: auto !important;
   display: flex;
   gap: 7px
}

.swiper-pagination-bullet {
   margin: 0 !important;
   width: 30px;
   height: 3px;
   border-radius: 0;
   background: var(--line);
   opacity: 1
}

.swiper-pagination-bullet-active {
   background: linear-gradient(90deg, var(--violet), var(--cyan))
}

.swiper-controls {
   display: flex;
   gap: 8px
}

.custom-arrow {
   position: static !important;
   margin: 0 !important;
   width: 45px !important;
   height: 45px !important;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: var(--surface);
   color: var(--text);
   font-size: 16px
}

.custom-arrow:after {
   display: none
}

.custom-arrow:hover {
   background: var(--text);
   color: var(--bg)
}

/* ================================================================
   11. EXPERIENCE + PROCESS SECTIONS
   ================================================================ */
.experience-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.experience-card {
   min-height: 300px;
   padding: 30px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 24px;
   background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
   position: relative
}

.experience-card:before {
   content: "";
   position: absolute;
   left: 30px;
   right: 30px;
   top: 0;
   height: 2px;
   background: linear-gradient(90deg, var(--violet), var(--cyan));
   transform: scaleX(.25);
   transform-origin: left;
   transition: transform .5s
}

.experience-card:hover:before {
   transform: scaleX(1)
}

.experience-card>span {
   font: 700 9px 'Space Grotesk';
   letter-spacing: .16em;
   color: #8d99af
}

.experience-card h3 {
   font-size: 25px;
   margin: 55px 0 14px
}

.experience-card p {
   color: var(--dark-muted);
   font-size: 13px
}

.process-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   border-top: 1px solid var(--line);
   position: relative
}

.process-track:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -1px;
   height: 1px;
   background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink))
}

.process-card {
   padding: 32px 25px;
   border-right: 1px solid var(--line);
   min-height: 230px
}

.process-card:last-child {
   border-right: 0
}

.process-card span {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--surface);
   border: 1px solid var(--line);
   font: 700 10px 'Space Grotesk';
   color: var(--violet);
   margin-top: -50px;
   margin-bottom: 35px
}

.process-card h3 {
   font-size: 22px;
   margin-bottom: 8px
}

.process-card p {
   color: var(--muted);
   font-size: 12px
}

/* ================================================================
   12. CONTACT SECTION
   ================================================================ */
.contact-section {
   min-height: 650px;
   display: grid;
   align-items: center;
   overflow: hidden
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center
}

.contact-section .section-kicker {
   color: rgba(255, 255, 255, .7)
}

.contact-section .section-kicker span {
   color: #fff
}

.contact-section h2 {
   font-size: clamp(45px, 6vw, 76px);
   line-height: 1;
   margin: 0 0 24px
}

.contact-section h2 span {
   display: block
}

.contact-section p {
   max-width: 600px;
   color: rgba(255, 255, 255, .8);
   font-size: 16px
}

.contact-orb {
   min-height: 380px;
   position: relative;
   display: grid;
   place-items: center
}

.contact-ring {
   width: 320px;
   height: 320px;
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: 50%;
   box-shadow: 0 0 80px rgba(255, 255, 255, .08), inset 0 0 80px rgba(255, 255, 255, .04);
   position: relative
}

.contact-ring:before,
.contact-ring:after {
   content: "";
   position: absolute;
   inset: 45px;
   border: 1px dashed rgba(255, 255, 255, .2);
   border-radius: 50%
}

.contact-ring:after {
   inset: 95px;
   background: radial-gradient(circle, #fff, rgba(255, 255, 255, .05) 15%, transparent 65%);
   filter: blur(5px)
}

.mini-code {
   position: absolute;
   z-index: 2;
   padding: 20px 24px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 17px;
   background: rgba(9, 12, 27, .5);
   backdrop-filter: blur(15px);
   font: 12px/1.8 monospace;
   color: #fff;
   box-shadow: 0 30px 60px rgba(0, 0, 0, .25)
}

.mini-code span {
   color: #8ef5ff;
   margin-right: 10px
}

.mini-code b {
   color: #fff
}

/* ================================================================
   13. FOOTER
   ================================================================ */
.footer {
   background: #050811;
   color: #fff;
   padding: 35px 0;
   border-top: 1px solid rgba(255, 255, 255, .08)
}

.footer-inner {
   display: grid;
   grid-template-columns: 1.3fr 1fr auto auto;
   align-items: center;
   gap: 25px
}

.footer p {
   font-size: 11px;
   color: #8995aa;
   margin: 0
}

.footer-links {
   display: flex;
   gap: 18px
}

.footer-links a {
   font-size: 11px;
   color: #8995aa
}

.footer-links a:hover {
   color: #fff
}

.footer-inner>span {
   font-size: 10px;
   color: #657086
}

.cw-sajib {
   color: var(--dark-text) !important ;
}
.dot-sajib{
   font-weight: 900;
   color: var(--green);
}
/* ================================================================
   14. RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width:1050px) {
   .desktop-nav {
      gap: 15px
   }

   .desktop-nav a {
      font-size: 11px
   }

   .hero-grid {
      gap: 30px
   }

   .code-card {
      right: -20px
   }

   .portrait-card {
      left: -10px
   }

   .service-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .skill-card {
      width: calc(50% - 28px)
   }

   .project-slide {
      grid-template-columns: 1fr
   }

   .project-visual {
      min-height: 390px
   }

   .project-copy {
      min-height: 320px
   }

   .footer-inner {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width:800px) {
   :root {
      --header: 70px
   }

   .container {
      width: min(calc(100% - 32px), var(--max))
   }

   .desktop-nav,
   .nav-actions .btn {
      display: none
   }

   .menu-btn {
      display: block
   }

   .mobile-nav {
      display: block;
      max-height: 0;
      overflow: hidden;
      background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(18px);
      border-bottom: 0;
      transition: max-height .35s ease
   }

   .mobile-nav.open {
      max-height: 360px;
      border-bottom: 1px solid var(--line)
   }

   .mobile-nav a {
      display: block;
      padding: 15px 24px;
      font-size: 13px;
      border-top: 1px solid var(--line);
      color: var(--muted)
   }

   .hero {
      padding: 120px 0 80px
   }

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

   .hero-stage {
      min-height: 550px;
      margin-top: 15px
   }

   .hero-copy {
      order: 1
   }

   .hero-stage {
      order: 2
   }

   .scroll-rail {
      display: none
   }

   .split-intro,
   .skills-heading,
   .contact-grid {
      grid-template-columns: 1fr;
      gap: 35px
   }

   .section-light,
   .section-soft,
   .skills-section,
   .services-section,
   .work-section,
   .experience-section,
   .process-section,
   .contact-section {
      padding: 90px 0
   }

   .skill-roadmap {
      padding-top: 0
   }

   .road-line {
      left: 18px
   }

   .skill-card,
   .skill-card:nth-of-type(even) {
      width: calc(100% - 52px);
      margin-left: 52px;
      margin-bottom: 25px;
      grid-template-columns: 60px 1fr;
      gap: 16px;
      padding: 24px
   }

   .skill-card .skill-icon {
      grid-row: 1/3
   }

   .skill-card:after,
   .skill-card:nth-of-type(even):after {
      left: -34px;
      right: auto;
      width: 34px;
      background: var(--violet)
   }

   .skill-card:before,
   .skill-card:nth-of-type(even):before {
      left: -40px;
      right: auto
   }

   .service-grid {
      grid-template-columns: 1fr
   }

   .split-title {
      display: block
   }

   .split-title>p {
      margin-top: 20px
   }

   .experience-grid {
      grid-template-columns: 1fr
   }

   .process-track {
      grid-template-columns: 1fr
   }

   .process-card {
      border-right: 0;
      border-bottom: 1px solid var(--line);
      min-height: 0;
      padding: 50px 5px 30px
   }

   .process-card:last-child {
      border-bottom: 0
   }

   .process-card span {
      margin-top: -67px
   }

   .footer-inner {
      grid-template-columns: 1fr;
      gap: 16px
   }
}

@media (max-width:560px) {
   h1 {
      font-size: 46px
   }

   .hero-text {
      font-size: 15px
   }

   .hero-actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 15px
   }

   .hero-stats {
      gap: 12px
   }

   .hero-stats div {
      padding-left: 10px
   }

   .hero-stats b {
      font-size: 18px
   }

   .hero-stats span {
      font-size: 9px
   }

   .hero-stage {
      min-height: 470px
   }

   .code-card {
      width: 310px;
      right: -5px;
      top: 10px
   }

   .portrait-card {
      width: 290px;
      left: 0;
      bottom: 5px
   }

   .portrait {
      width: 65px;
      height: 65px
   }

   .floating-chip {
      display: none
   }

   .orbit {
      width: 330px;
      height: 330px
   }

   .orbit-b {
      width: 270px;
      height: 270px
   }

   .project-visual {
      min-height: 300px
   }

   .browser-ui,
   .dashboard-ui,
   .cms-ui {
      width: 82%;
      height: 62%
   }

   .phone-ui {
      transform: scale(.8) rotate(-5deg)
   }

   .project-copy {
      padding: 35px 26px
   }

   .project-copy h3 {
      font-size: 30px
   }

   .section-title h2,
   .intro-copy h2,
   .skills-heading h2 {
      font-size: 42px
   }

   .skill-card {
      grid-template-columns: 52px 1fr
   }

   .skill-card .skill-icon {
      width: 52px;
      height: 52px
   }

   .skill-card h3 {
      font-size: 20px
   }

   .skill-card p {
      font-size: 12px
   }

   .contact-ring {
      width: 270px;
      height: 270px
   }

   .mini-code {
      font-size: 10px;
      padding: 15px
   }

   .footer-links {
      flex-wrap: wrap
   }
}

@media (prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      animation: none !important;
      transition: none !important
   }

   .gs-reveal {
      opacity: 1 !important;
      transform: none !important
   }
}

/* ================================================================
   15. CONTACT FORM DETAILS
   ================================================================ */
/* Contact form */
.contact-section .contact-grid {
   align-items: start
}

.contact-note {
   margin-top: 24px;
   max-width: 620px;
   padding: 14px 16px;
   border: 1px solid rgba(255, 255, 255, .18);
   background: rgba(255, 255, 255, .08);
   border-radius: 14px;
   font-size: .88rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, .82)
}

.contact-note span {
   color: #78f0c0;
   margin-right: 7px
}

.contact-form {
   padding: 26px;
   border: 1px solid rgba(255, 255, 255, .18);
   background: rgba(8, 11, 22, .62);
   backdrop-filter: blur(18px);
   border-radius: 24px;
   box-shadow: 0 24px 70px rgba(0, 0, 0, .2)
}

.contact-form label {
   display: block;
   margin-bottom: 16px
}

.contact-form label>span {
   display: block;
   margin-bottom: 8px;
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .76)
}

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

.contact-form input,
.contact-form textarea {
   width: 100%;
   border: 1px solid rgba(255, 255, 255, .16);
   background: rgba(255, 255, 255, .07);
   color: #fff;
   border-radius: 13px;
   padding: 13px 14px;
   font: inherit;
   outline: none;
   transition: border-color .2s, background .2s, box-shadow .2s;
   box-sizing: border-box
}

.contact-form textarea {
   resize: vertical;
   min-height: 150px
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: rgba(255, 255, 255, .42)
}

.contact-form input:focus,
.contact-form textarea:focus {
   border-color: rgba(120, 240, 192, .8);
   background: rgba(255, 255, 255, .1);
   box-shadow: 0 0 0 3px rgba(120, 240, 192, .1)
}

.form-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   margin-top: 8px
}

.form-footer small {
   max-width: 330px;
   color: rgba(255, 255, 255, .58);
   line-height: 1.5
}

.form-status {
   min-height: 22px;
   margin: 16px 0 0;
   font-weight: 700
}

.form-status.success {
   color: #78f0c0
}

.form-status.error {
   color: #ff9e9e
}

.form-honeypot {
   position: absolute !important;
   left: -9999px !important;
   width: 1px !important;
   height: 1px !important;
   opacity: 0 !important;
   pointer-events: none !important
}

@media(max-width:800px) {
   .form-row {
      grid-template-columns: 1fr
   }

   .form-footer {
      align-items: stretch;
      flex-direction: column
   }

   .form-footer .btn {
      width: 100%
   }

   .contact-form {
      padding: 20px
   }
}