/* ================= TOKENS ================= */
:root {
    --canvas: #F4F5F8;
    --surface: #FFFFFF;
    --ink: #0C1119;
    --slate: #616C7A;
    --line: #E2E5EB;
    --line-2: #CBD1DA;
    --accent: #2547F0;
    --accent-soft: #EBEEFE;
    --signal: #FF7A3D;
    --grid: rgba(12, 17, 25, .032);

    --display: 'Archivo', system-ui, sans-serif;
    --body: 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    --r: 16px;
    --sh-1: 0 1px 2px rgba(12, 17, 25, .05), 0 4px 14px rgba(12, 17, 25, .05);
    --sh-2: 0 2px 6px rgba(12, 17, 25, .06), 0 18px 40px rgba(12, 17, 25, .10);
    --gut: clamp(20px, 5vw, 64px);
    --maxw: 1200px;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.62;
    overflow-x: hidden;
    background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 36px 36px;
}

body.lock {
    overflow: hidden
}

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

img {
    max-width: 100%;
    display: block
}

.zeeshan-tofiq-pic {
    object-fit: cover;
    object-position: 40% 20%;
    transform: scale(1.05);
}

::selection {
    background: var(--accent);
    color: #fff
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gut);
    padding-right: var(--gut)
}

/* ================= SCROLL PROGRESS ================= */
.progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #6D5CF6, var(--signal));
    z-index: 110;
    pointer-events: none
}

/* ================= TYPE ================= */
.mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--slate)
}

.disp {
    font-family: var(--display);
    font-variation-settings: 'wdth' 96, 'wght' 700;
    line-height: 1.03;
    letter-spacing: -.028em
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 7px 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--slate);
    box-shadow: var(--sh-1)
}

.pill .dotlive {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #18C08F;
    position: relative;
    flex: none
}

.pill .dotlive::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #18C08F;
    animation: ping 2.2s ease-out infinite
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: .65
    }

    100% {
        transform: scale(3.2);
        opacity: 0
    }
}

/* ================= LOGO ================= */
.logo {
    display: flex;
    align-items: center;
    gap: 11px
}

.logo .glyph {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none;
    box-shadow: 0 3px 10px rgba(37, 71, 240, .32);
    animation: glyphBreathe 4.5s ease-in-out infinite
}

.logo:hover .glyph {
    animation-play-state: paused;
    transform: rotate(-8deg) scale(1.08)
}

@keyframes glyphBreathe {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.045)
    }
}

.logo .wm {
    display: flex;
    flex-direction: column;
    line-height: 1.4
}

.logo .wm b {
    font-family: var(--display);
    font-variation-settings: 'wdth' 92, 'wght' 800;
    font-size: 16px;
    letter-spacing: -.02em
}

.logo .wm s {
    text-decoration: none;
    font-family: var(--mono);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--slate)
}

/* ================= NAV ================= */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease
}

header.stuck {
    background: rgba(244, 245, 248, .78);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 1px 0 var(--line)
}

/* When the mobile menu is open, the header must let the full-screen dark
   scrim show through behind it (instead of painting its own light/stuck
   background over the top), and its text needs to flip to white so it
   stays readable against that dark scrim. */
header.menu-open {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important
}

header.menu-open .logo .wm b,
header.menu-open .logo .wm s {
    color: #fff
}

.navrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 16px
}

.navlinks {
    display: flex;
    align-items: center;
    gap: 6px
}

.nl {
    font-size: 14px;
    color: var(--slate);
    padding: 9px 14px;
    border-radius: 100px;
    transition: color .25s, background .25s
}

.nl:hover {
    color: var(--ink);
    background: rgba(12, 17, 25, .05)
}

/* ---- BURGER (fixed, robust, doubles as close) ---- */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    position: relative;
    cursor: pointer;
    box-shadow: var(--sh-1);
    z-index: 101;
    transition: transform .3s var(--ease), background .35s ease, border-color .35s ease;
}

.burger:hover {
    transform: translateY(-2px)
}

.burger span {
    position: absolute;
    left: 13px;
    right: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .5s var(--ease), opacity .3s ease, top .4s var(--ease), background .3s ease;
}

.burger span:nth-child(1) {
    top: 16px
}

.burger span:nth-child(2) {
    top: 22px
}

.burger span:nth-child(3) {
    top: 28px
}

.burger.x {
    background: var(--ink);
    border-color: var(--ink)
}

.burger.x span {
    background: #fff
}

.burger.x span:nth-child(1) {
    top: 22px;
    transform: rotate(45deg)
}

.burger.x span:nth-child(2) {
    opacity: 0
}

.burger.x span:nth-child(3) {
    top: 22px;
    transform: rotate(-45deg)
}

/* ---- MOBILE OVERLAY MENU (centered, full screen) ---- */
.scrim {
    position: fixed;
    inset: 0;
    background: rgba(12, 17, 25, .97);
    backdrop-filter: blur(20px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--ease), visibility .5s;
    z-index: 90
}

.scrim.on {
    opacity: 1;
    visibility: visible
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s var(--ease), visibility .45s;
    padding: 110px 24px 40px;
}

.drawer.on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.dlabel {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease) .05s, transform .5s var(--ease) .05s;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .4)
}

.drawer.on .dlabel {
    opacity: 1;
    transform: none
}

.dlinks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center
}

.dlinks a {
    font-family: var(--display);
    font-variation-settings: 'wdth' 92, 'wght' 700;
    font-size: clamp(30px, 8vw, 44px);
    letter-spacing: -.02em;
    color: #fff;
    padding: 11px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transform: translateY(24px) scale(.94);
    transition: opacity .55s var(--ease), transform .55s var(--ease), color .25s, background .25s;
}

.drawer.on .dlinks a {
    opacity: 1;
    transform: none
}

.drawer.on .dlinks a:nth-child(1) {
    transition-delay: .12s
}

.drawer.on .dlinks a:nth-child(2) {
    transition-delay: .19s
}

.drawer.on .dlinks a:nth-child(3) {
    transition-delay: .26s
}

.drawer.on .dlinks a:nth-child(4) {
    transition-delay: .33s
}

.dlinks a:hover {
    color: var(--signal);
    background: rgba(255, 255, 255, .07)
}

.dlinks a em {
    font-family: var(--mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .4)
}

.dfoot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 42px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s var(--ease) .42s, transform .55s var(--ease) .42s;
}

.drawer.on .dfoot {
    opacity: 1;
    transform: none
}

/* ================= BUTTONS ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 100px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .32s var(--ease), box-shadow .32s var(--ease), background .28s, color .28s, border-color .28s;
}

.btn--primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px rgba(37, 71, 240, .30)
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(37, 71, 240, .38)
}

.btn--ghost {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--sh-1)
}

.btn--ghost:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
    border-color: var(--line-2)
}

.btn--dark {
    background: var(--ink);
    color: #fff
}

.btn--dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(12, 17, 25, .30)
}

.btn--wa {
    background: #25D366;
    color: #07301A
}

.btn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, .34)
}

.btn .arw {
    transition: transform .35s var(--ease)
}

.btn:hover .arw {
    transform: translateX(4px)
}

.btn svg {
    flex: none
}

/* ================= REVEAL ================= */
.rv {
    opacity: 0;
    transform: translateY(22px) scale(.985);
    transition: opacity .85s var(--ease), transform .85s var(--ease)
}

.rv.in {
    opacity: 1;
    transform: none
}

.clip {
    display: block;
    overflow: hidden;
    padding-bottom: .06em
}

.clip>i {
    display: block;
    font-style: normal;
    transform: translateY(108%);
    transition: transform 1.05s var(--ease)
}

.clip.in>i {
    transform: none
}

/* ================= HERO ================= */
.hero {
    padding: 132px 0 90px;
    position: relative;
    /* Clips the decorative ::before blob, which sits at right:-140px and
       would otherwise push the page 140px wider than the viewport and
       show as dead space on the right. Same approach as .contact/.glow. */
    overflow: hidden
}

.hero::before {
    content: "";
    position: absolute;
    top: -160px;
    right: -140px;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 71, 240, .13), transparent 65%);
    pointer-events: none;
    animation: float 16s ease-in-out infinite alternate;
}

@keyframes float {
    to {
        transform: translate(-60px, 50px) scale(1.12)
    }
}

.herogrid {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px
}

h1.head {
    font-size: clamp(40px, 6.4vw, 76px);
    font-variation-settings: 'wdth' 94, 'wght' 780
}

h1.head em {
    font-style: normal;
    background: linear-gradient(100deg, var(--accent), #6D5CF6 55%, var(--signal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.lede {
    margin-top: 26px;
    max-width: 48ch;
    font-size: clamp(16px, 1.6vw, 18.5px);
    color: var(--slate)
}

.lede b {
    color: var(--ink);
    font-weight: 600
}

.cta {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 34px
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 52px
}

.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px;
    box-shadow: var(--sh-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease)
}

.metric:hover {
    transform: translateY(-4px) rotate(-.5deg);
    box-shadow: var(--sh-2)
}

.metric .num {
    font-family: var(--display);
    font-variation-settings: 'wdth' 92, 'wght' 780;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1;
    letter-spacing: -.02em
}

.metric .lbl {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--slate);
    margin-top: 9px;
    line-height: 1.45
}

.scrollcue {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 2;
    color: var(--slate);
    opacity: 0;
    transform: translate(-50%, 0);
    animation: cueIn .8s var(--ease) 1.3s forwards, cuebounce 2.2s ease-in-out 2.1s infinite
}

@keyframes cueIn {
    to {
        opacity: .55
    }
}

@keyframes cuebounce {

    0%,
    100% {
        transform: translate(-50%, 0)
    }

    50% {
        transform: translate(-50%, 8px)
    }
}

@media(max-width:560px) {
    .scrollcue {
        display: none
    }
}

/* ---- SIGNATURE: STACK PANEL ---- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--sh-2);
    position: relative;
    overflow: hidden
}

.panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #6D5CF6, var(--signal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease) .3s
}

.panel.go::after {
    transform: scaleX(1)
}

.ptop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px
}

.stack {
    display: grid;
    gap: 11px
}

.layer {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--canvas);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    opacity: 0;
    transform: translateY(16px) scale(.97);
    transition: opacity .85s var(--ease), transform .85s var(--ease), border-color .3s, box-shadow .3s, background .3s;
}

.panel.go .layer {
    opacity: 1;
    transform: none
}

.panel.go .layer:nth-child(1) {
    transition-delay: .22s
}

.panel.go .layer:nth-child(2) {
    transition-delay: .40s
}

.panel.go .layer:nth-child(3) {
    transition-delay: .58s
}

.layer:hover {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(37, 71, 240, .14);
    transform: translateX(3px)
}

.lhead {
    display: flex;
    align-items: center;
    gap: 11px
}

.lnum {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 10px;
    flex: none
}

.lname {
    font-weight: 600;
    font-size: 14.5px
}

.ltech {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--slate);
    text-align: right;
    line-height: 1.6
}

.pfoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--line)
}

/* ================= TICKER ================= */
.ticker {
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    padding: 13px 0;
    cursor: default
}

.tkin {
    display: flex;
    width: max-content;
    animation: slide 36s linear infinite
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

.tkin span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 0 20px;
    white-space: nowrap;
    opacity: .72
}

.tkin span i {
    font-style: normal;
    color: var(--signal);
    padding-right: 20px
}

/* ================= SECTIONS ================= */
section {
    padding: 94px 0
}

.shead {
    margin-bottom: 48px;
    max-width: 640px
}

.shead .mono {
    margin-bottom: 14px;
    display: block
}

.shead h2 {
    font-size: clamp(30px, 4.4vw, 50px);
    margin-bottom: 14px
}

.shead p {
    font-size: 16.5px;
    color: var(--slate)
}

/* SERVICES */
.svcs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px
}

.svc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px 24px 30px;
    box-shadow: var(--sh-1);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s
}

.svc:hover {
    transform: translateY(-6px) rotate(-.5deg);
    box-shadow: var(--sh-2);
    border-color: var(--line-2)
}

.svc .ic {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    animation: iconBob 3.6s ease-in-out infinite;
    transition: background .3s, color .3s
}

.svc:nth-child(2) .ic {
    animation-delay: .3s
}

.svc:nth-child(3) .ic {
    animation-delay: .6s
}

.svc:nth-child(4) .ic {
    animation-delay: .9s
}

@keyframes iconBob {

    0%,
    100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-4px) rotate(-4deg)
    }
}

.svc:hover .ic {
    animation-play-state: paused;
    transform: scale(1.1) rotate(-8deg);
    background: var(--accent);
    color: #fff
}

.svc h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -.01em
}

.svc p {
    font-size: 14.5px;
    color: var(--slate)
}

/* TESTIMONIALS */
.testis {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start
}

.testis .testi {
    flex: 1 1 280px
}

.testi:first-child {
    flex-basis: 100%
}

.testi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 30px 24px 24px;
    box-shadow: var(--sh-1);
    position: relative;
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}

.testi:nth-child(odd):hover {
    transform: translateY(-6px) rotate(-.5deg);
    box-shadow: var(--sh-2);
    border-color: var(--line-2)
}

.testi:nth-child(even):hover {
    transform: translateY(-6px) rotate(.5deg);
    box-shadow: var(--sh-2);
    border-color: var(--line-2)
}

.testi .qmark {
    position: absolute;
    top: 2px;
    right: 16px;
    font-family: var(--display);
    font-variation-settings: 'wdth' 90, 'wght' 800;
    font-size: 80px;
    line-height: 1;
    color: var(--accent-soft);
    z-index: 0;
    user-select: none;
    pointer-events: none
}

.testi p {
    position: relative;
    z-index: 1;
    font-size: 14.5px;
    color: #3A4552;
    line-height: 1.68
}

.tfoot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    position: relative;
    z-index: 1
}

.tavatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: var(--display);
    font-variation-settings: 'wdth' 100, 'wght' 700;
    font-size: 13.5px;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--accent), #6D5CF6)
}

.testi:nth-child(3n+2) .tavatar {
    background: linear-gradient(135deg, #6D5CF6, var(--signal))
}

.testi:nth-child(3n) .tavatar {
    background: linear-gradient(135deg, var(--signal), var(--accent))
}

.twho {
    display: flex;
    flex-direction: column;
    line-height: 1.35
}

.twho b {
    font-size: 14px;
    font-weight: 600
}

.twho span {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate)
}

/* PROJECTS */
.projs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 16px
}

.proj {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px 24px 24px;
    box-shadow: var(--sh-1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}

.proj::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #6D5CF6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease)
}

.proj:hover {
    transform: translateY(-6px) rotate(.5deg);
    box-shadow: var(--sh-2);
    border-color: var(--line-2)
}

.proj:hover::before {
    transform: scaleX(1)
}

.ptopline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px
}

.badge {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 100px;
    background: var(--accent-soft);
    color: var(--accent);
    white-space: nowrap
}

.badge.live {
    background: rgba(24, 192, 143, .12);
    color: #0E8F69
}

.proj h3 {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 9px;
    letter-spacing: -.015em
}

.proj p {
    font-size: 14.5px;
    color: var(--slate);
    flex: 1
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px
}

.tag {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 4px 9px;
    color: var(--slate)
}

.plink {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent)
}

.plink .arw {
    transition: transform .35s var(--ease)
}

.proj:hover .plink .arw {
    transform: translateX(4px)
}

/* PROCESS */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px
}

.step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px 24px;
    box-shadow: var(--sh-1);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease)
}

.step:hover {
    transform: translateY(-6px) rotate(-.5deg);
    box-shadow: var(--sh-2)
}

.step .n {
    font-family: var(--display);
    font-variation-settings: 'wdth' 110, 'wght' 800;
    font-size: 46px;
    line-height: .8;
    color: var(--line);
    transition: color .45s ease
}

.step:hover .n {
    color: var(--accent)
}

.step h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 18px 0 10px
}

.step p {
    font-size: 14.5px;
    color: var(--slate)
}

/* ABOUT */
.about {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    align-items: start
}

.pfp {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--sh-2);
    aspect-ratio: 1/1;
    background: var(--surface);
    border: 1px solid var(--line)
}

.pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease)
}

.pfp:hover img {
    transform: scale(1.06) rotate(1deg)
}

.about p {
    font-size: clamp(15.5px, 1.7vw, 17.5px);
    color: var(--slate);
    margin-bottom: 16px;
    max-width: 64ch
}

.about p b {
    color: var(--ink);
    font-weight: 600
}

/* CONTACT */
.contact {
    background: var(--ink);
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden
}

.contact .wrap {
    position: relative;
    z-index: 2
}

.contact h2 {
    font-size: clamp(32px, 5.6vw, 62px);
    margin-bottom: 20px
}

.contact h2 em {
    font-style: normal;
    background: linear-gradient(100deg, #6D9CFF, #A78BFA 50%, var(--signal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.contact .sub {
    color: rgba(255, 255, 255, .60);
    max-width: 48ch;
    font-size: 16.5px;
    margin-bottom: 36px
}

.ways {
    display: flex;
    flex-wrap: wrap;
    gap: 11px
}

.btn--mail {
    background: #fff;
    color: var(--ink)
}

.btn--mail:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 255, 255, .20)
}

.btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .24)
}

.btn--outline:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-2px)
}

.glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 71, 240, .42), transparent 68%);
    top: -46%;
    right: -10%;
    z-index: 1;
    animation: float 17s ease-in-out infinite alternate
}

.glow2 {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 122, 61, .26), transparent 70%);
    bottom: -32%;
    left: -8%;
    z-index: 1;
    animation: float 13s ease-in-out infinite alternate-reverse
}

/* FOOTER */
footer {
    padding: 36px 0;
    border-top: 1px solid var(--line)
}

.frow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

/* ================= FLOATING (always visible) ================= */
.float {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.fbtn {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    box-shadow: var(--sh-2);
    opacity: 0;
    transform: translateY(14px) scale(.9);
    position: relative;
    transition: transform .5s var(--ease), opacity .5s var(--ease), box-shadow .3s;
}

.float.on .fbtn {
    opacity: 1;
    transform: none
}

.float.on .fbtn:nth-child(1) {
    transition-delay: .1s
}

.float.on .fbtn:nth-child(2) {
    transition-delay: .2s
}

.float.on .fbtn:nth-child(3) {
    transition-delay: .3s
}

.fbtn:hover {
    transform: translateY(-5px) scale(1.07) !important
}

/* Back-to-top: only appears once the page has been scrolled, independent
   of the .float.on entrance (which fires once, shortly after load). */
.fbtn--top {
    background: var(--ink);
    color: #fff
}

.float.on .fbtn--top {
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none
}

.float.on .fbtn--top.show {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.fbtn--wa {
    background: #25D366;
    color: #fff
}

.fbtn--wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: #25D366;
    animation: beacon 2.6s ease-out infinite;
    z-index: -1
}

@keyframes beacon {
    0% {
        transform: scale(1);
        opacity: .55
    }

    100% {
        transform: scale(1.7);
        opacity: 0
    }
}

.fbtn--mail {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink)
}

.fbob {
    display: grid;
    place-items: center;
    animation: bob 3s ease-in-out infinite
}

.fbtn--mail .fbob {
    animation-delay: .5s
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

/* ================= RESPONSIVE ================= */
@media(max-width:960px) {
    .herogrid {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .about {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .pfp {
        max-width: 200px
    }

    .navlinks {
        display: none
    }

    .burger {
        display: grid
    }
}

@media(max-width:560px) {
    .hero {
        padding: 106px 0 66px
    }

    section {
        padding: 70px 0
    }

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

    .metrics .metric:last-child {
        grid-column: 1/-1
    }

    .cta .btn {
        flex: 1 1 100%
    }

    .ways .btn {
        flex: 1 1 100%
    }

    .ltech {
        font-size: 9px
    }

    .float {
        right: 14px;
        bottom: 16px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .rv,
    .clip>i,
    .layer,
    .dlinks a,
    .fbtn {
        opacity: 1 !important;
        transform: none !important
    }
}