/* ══════════════════════════════════════════════════
   BLNCR — Ultra-Premium Design System v2
   ══════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
    /* palette */
    --bg:         #05050a;
    --bg-surface: #0d0d14;
    --surface:    rgba(255,255,255,0.035);
    --surface-h:  rgba(255,255,255,0.065);
    --border:     rgba(255,255,255,0.07);
    --border-h:   rgba(255,255,255,0.22);

    --text:       #eeeef5;
    --muted:      #6e6e88;
    --faint:      #30304a;

    --p:   #7c3aff;  /* purple */
    --c:   #00d8ff;  /* cyan   */
    --pk:  #ff3a7c;  /* pink   */
    --g:   #22c55e;  /* green  */

    --grad-pp: linear-gradient(135deg, #7c3aff, #00d8ff);
    --grad-pk: linear-gradient(135deg, #ff3a7c, #7c3aff);
    --grad-text: linear-gradient(110deg, #c4b5fd 0%, #38bdf8 50%, #c4b5fd 100%);

    /* misc */
    --r-sm: 8px;
    --r:    16px;
    --r-lg: 24px;
    --r-xl: 36px;

    --nav-h: 68px;
    --max:  1220px;

    --f-head: 'Space Grotesk', sans-serif;
    --f-body: 'Inter', sans-serif;
    --f-mono: 'DM Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; cursor:none; }

html { scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#1c1c2e transparent; }

body {
    background: var(--bg);
    font-family: var(--f-body);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ── BACKGROUND ── */
#bg-canvas {
    position:fixed; inset:0; z-index:0; pointer-events:none;
}

.bg-grid {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(124,58,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,255,0.04) 1px, transparent 1px);
    background-size:60px 60px;
}

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

/* ── CURSORS ── */
.cursor-dot {
    position:fixed; top:0; left:0; z-index:10001; pointer-events:none;
    width:7px; height:7px; border-radius:50%;
    background: var(--c);
    transform:translate(-50%,-50%);
    transition:background 0.2s;
    mix-blend-mode:screen;
}

.cursor-ring {
    position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(124,58,255,0.6);
    transform:translate(-50%,-50%);
    transition:border-color 0.25s, transform 0.1s;
}

/* ── NAVBAR ── */
.navbar {
    position:fixed; top:0; left:0; right:0; z-index:999;
    padding:0 32px;
    transition:background 0.45s, box-shadow 0.45s, backdrop-filter 0.45s;
}
.navbar.scrolled {
    background:rgba(5,5,10,0.88);
    backdrop-filter:blur(24px) saturate(1.4);
    box-shadow:0 1px 0 var(--border);
}

.nav-inner {
    max-width:var(--max); margin:0 auto;
    height:var(--nav-h);
    display:flex; align-items:center; gap:40px;
}

/* Logo */
.logo {
    font-family:var(--f-head); font-weight:800;
    font-size:1.3rem; letter-spacing:-0.05em;
    display:inline-flex; align-items:baseline; gap:1px;
    flex-shrink:0;
}
.logo-mark {
    background:var(--grad-pp);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.logo-dot { color:var(--p); }

/* Nav links */
.nav-links {
    display:flex; align-items:center; gap:28px;
    margin-left:auto; list-style:none;
}
.nav-link {
    font-size:0.875rem; font-weight:500; color:var(--muted);
    position:relative; padding-bottom:3px;
    transition:color 0.25s;
}
.nav-link::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:1px;
    background:var(--grad-pp);
    transition:width 0.35s cubic-bezier(0.4,0,0.2,1);
}
.nav-link:hover { color:var(--text); }
.nav-link:hover::after { width:100%; }

/* Nav CTA */
.nav-cta {
    display:inline-flex; align-items:center; gap:8px;
    padding:9px 20px; border-radius:100px;
    border:1px solid var(--border);
    background:var(--surface);
    font-size:0.85rem; font-weight:600;
    transition:all 0.3s;
    white-space:nowrap;
}
.nav-cta:hover {
    background:var(--p); border-color:var(--p);
    box-shadow:0 0 28px rgba(124,58,255,0.45);
    transform:translateY(-1px);
}
.nav-cta svg { transition:transform 0.3s; }
.nav-cta:hover svg { transform:translateX(3px); }

/* Hamburger */
.hamburger {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; padding:8px;
    margin-left:auto;
}
.hamburger span {
    display:block; width:22px; height:1.5px;
    background:var(--text); border-radius:2px;
    transition:transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-5px); }

/* Mobile menu */
.mobile-menu {
    position:fixed; top:var(--nav-h); inset-x:0;
    background:rgba(5,5,10,0.97);
    backdrop-filter:blur(24px);
    padding:20px 32px 28px;
    display:flex; flex-direction:column; gap:4px;
    z-index:998; border-bottom:1px solid var(--border);
    transform:translateY(-110%); opacity:0;
    transition:transform 0.38s ease, opacity 0.3s;
    pointer-events:none;
}
.mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.mob-link {
    display:block; padding:14px 0;
    color:var(--muted); font-weight:600; font-size:1rem;
    border-bottom:1px solid var(--border);
    transition:color 0.2s;
}
.mob-link:hover { color:var(--text); }
.mob-cta {
    display:inline-flex; margin-top:16px; align-self:flex-start;
    padding:12px 24px; border-radius:100px;
    background:var(--p); color:#fff; font-weight:700; font-size:0.9rem;
}

/* ── BUTTONS ── */
.btn-primary {
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; border-radius:100px;
    background:var(--p); color:#fff;
    font-family:var(--f-head); font-weight:700; font-size:0.9rem;
    letter-spacing:0.01em;
    transition:transform 0.25s, box-shadow 0.25s;
    border:none;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(124,58,255,0.55); }
.btn-primary:active { transform:translateY(0); }

.btn-shine {
    position:absolute; top:0; left:-70%; width:40%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
    transform:skewX(-20deg); animation:shine-anim 3.5s infinite;
}
@keyframes shine-anim { 0%{left:-70%} 100%{left:130%} }

.btn-ghost {
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:100px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--muted); font-weight:600; font-size:0.9rem;
    transition:all 0.3s;
}
.btn-ghost:hover { border-color:var(--border-h); color:var(--text); transform:translateY(-2px); }
.btn-ghost i { transition:transform 0.3s; }
.btn-ghost:hover i { transform:translateY(3px); }

/* Pulsing glow */
.pulse-glow { animation:pglow 3s ease-in-out infinite; }
@keyframes pglow {
    0%,100%  { box-shadow:0 0 20px rgba(124,58,255,0.4); }
    50%      { box-shadow:0 0 45px rgba(124,58,255,0.7), 0 0 80px rgba(124,58,255,0.2); }
}

/* ── SECTION COMMONS ── */
.section { position:relative; z-index:2; padding:130px 32px; }
.container { max-width:var(--max); margin:0 auto; }

.lbl {
    display:inline-block; font-size:0.72rem; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--c); margin-bottom:18px;
}

.section-hd {
    text-align:center; max-width:620px; margin:0 auto 80px;
}
.section-hd h2 {
    font-family:var(--f-head);
    font-size:clamp(2rem,5vw,3.4rem);
    font-weight:700; line-height:1.08;
    letter-spacing:-0.035em; margin-bottom:20px;
}
.section-hd h2 em {
    font-style:normal;
    background:var(--grad-text); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:grad-move 5s linear infinite;
}
@keyframes grad-move { to{background-position:200% center} }

.section-hd p { color:var(--muted); font-size:1rem; max-width:460px; margin:0 auto; }

/* ── REVEAL ANIMATION ── */
.reveal, .in-anim {
    opacity:0; transform:translateY(28px);
    transition:opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible, .in-anim.visible { opacity:1; transform:translateY(0); }

.delay-0  { transition-delay:0s !important; }
.delay-1  { transition-delay:0.1s !important; }
.delay-2  { transition-delay:0.22s !important; }
.delay-3  { transition-delay:0.34s !important; }
.delay-4  { transition-delay:0.48s !important; }

/* ── HERO ── */
.hero {
    position:relative; z-index:2;
    min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:calc(var(--nav-h) + 80px) 32px 100px;
    overflow:hidden;
}

/* Orbs */
.orb {
    position:absolute; border-radius:50%; pointer-events:none;
    filter:blur(90px);
}
.orb-purple {
    width:660px; height:660px; top:-120px; left:-180px;
    background:radial-gradient(circle, rgba(124,58,255,0.22) 0%, transparent 70%);
    animation:orb-drift 9s ease-in-out infinite;
}
.orb-cyan {
    width:500px; height:500px; top:15%; right:-140px;
    background:radial-gradient(circle, rgba(0,216,255,0.14) 0%, transparent 70%);
    animation:orb-drift 11s ease-in-out infinite reverse;
}
.orb-pink {
    width:420px; height:420px; bottom:-60px; left:42%;
    background:radial-gradient(circle, rgba(255,58,124,0.1) 0%, transparent 70%);
    animation:orb-drift 13s ease-in-out infinite;
}
@keyframes orb-drift {
    0%,100%{ transform:translate(0,0) scale(1); }
    33%    { transform:translate(20px,-25px) scale(1.06); }
    66%    { transform:translate(-15px,15px) scale(0.96); }
}

.hero-wrap { position:relative; z-index:3; max-width:880px; margin:0 auto; }

/* Badge */
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(124,58,255,0.12); border:1px solid rgba(124,58,255,0.25);
    padding:7px 16px; border-radius:100px;
    font-size:0.8rem; font-weight:500; color:var(--muted);
    margin-bottom:36px;
    backdrop-filter:blur(8px);
}
.badge-dot {
    width:6px; height:6px; border-radius:50%; background:var(--g);
    animation:pulse-dot 2.2s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(34,197,94,0.5);
}
@keyframes pulse-dot {
    0%  { box-shadow:0 0 0 0 rgba(34,197,94,0.5); }
    70% { box-shadow:0 0 0 8px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.badge-sep { color:var(--faint); margin:0 2px; }
.badge-loc { color:var(--text); }

/* Hero title */
.hero-title {
    font-family:var(--f-head);
    font-size:clamp(3rem,7.5vw,6rem);
    font-weight:800; line-height:1.03;
    letter-spacing:-0.045em;
    margin-bottom:28px;
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
.ht-row { display:flex; align-items:center; gap:12px; }
.ht-typed {
    min-height:1.04em;
    display:flex; align-items:center;
}

.gradient-text {
    background:var(--grad-text); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:grad-move 4s linear infinite;
}

.tcursor {
    -webkit-text-fill-color:var(--p);
    animation:blink 0.75s step-end infinite;
    font-weight:200;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc {
    font-size:clamp(1rem,2vw,1.12rem);
    color:var(--muted); max-width:540px;
    margin:0 auto 44px; line-height:1.85;
}
.desk-br { display:block; }

.hero-btns {
    display:flex; align-items:center; justify-content:center;
    gap:14px; margin-bottom:72px; flex-wrap:wrap;
}

/* Stats */
.hero-stats {
    display:flex; align-items:center; justify-content:center;
    gap:36px; flex-wrap:wrap;
}
.hstat { display:flex; flex-direction:column; align-items:center; }
.hstat-n {
    font-family:var(--f-head); font-size:2.4rem; font-weight:800;
    line-height:1;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.hstat-suf {
    font-family:var(--f-head); font-size:1.4rem; font-weight:800;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.hstat-l {
    font-size:0.72rem; font-weight:600;
    text-transform:uppercase; letter-spacing:0.1em;
    color:var(--faint); margin-top:3px;
}
.hstat-div { width:1px; height:38px; background:var(--border); }

/* Scroll hint */
.scroll-hint {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--faint); animation:scroll-bounce 2.2s ease-in-out infinite;
}
.scroll-rail {
    width:22px; height:34px; border:1px solid var(--border); border-radius:20px;
    display:flex; justify-content:center; padding:4px 0;
}
.scroll-thumb {
    width:4px; height:10px; background:var(--p); border-radius:4px;
    animation:scroll-thumb 2.2s ease-in-out infinite;
}
@keyframes scroll-thumb {
    0%,100%{ transform:translateY(0); opacity:1; }
    75%    { transform:translateY(14px); opacity:0; }
}
@keyframes scroll-bounce {
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%    { transform:translateX(-50%) translateY(5px); }
}

/* ── MARQUEE ── */
.marquee-wrap {
    position:relative; z-index:2; overflow:hidden;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:18px 0;
    background:linear-gradient(90deg, var(--bg) 0%, rgba(124,58,255,0.04) 50%, var(--bg) 100%);
}
.marquee-track { overflow:hidden; }
.marquee-inner {
    display:flex; gap:0; white-space:nowrap;
    animation:marquee 28s linear infinite;
    width:max-content;
}
.marquee-inner span {
    padding:0 24px; font-family:var(--f-head);
    font-size:0.82rem; font-weight:600; letter-spacing:0.07em;
    text-transform:uppercase; color:var(--muted);
}
.msep { color:var(--p) !important; padding:0 6px !important; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SERVICES — BENTO ── */
.services-section { padding:130px 32px; }

.bento {
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows:auto;
    gap:16px;
}

/* base card */
.bcard {
    position:relative; overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:32px;
    transition:border-color 0.4s, transform 0.35s cubic-bezier(0.2,0,0,1), box-shadow 0.4s;
}

.bcard:hover {
    border-color:var(--border-h);
    box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(124,58,255,0.12);
}

/* animated gradient border on hover */
.bcard::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    padding:1px; /* trick thickness */
    background:var(--grad-pp);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.4s;
    pointer-events:none;
}
.bcard:hover::before { opacity:1; }

/* positions */
.bcard-1 { grid-column: 1 / 7; }
.bcard-2 { grid-column: 7 / 10; }
.bcard-3 { grid-column: 10 / 13; }
.bcard-4 { grid-column: 1 / 5; }
.bcard-5 { grid-column: 5 / 9; display:flex; flex-direction:column; justify-content:center; }
.bcard-6 { grid-column: 9 / 13; }

.bcard-num {
    font-family:var(--f-mono); font-size:0.7rem; font-weight:500;
    color:var(--faint); letter-spacing:0.12em;
    margin-bottom:20px;
}
.bcard-icon-wrap {
    width:52px; height:52px; border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    background:rgba(124,58,255,0.1); border:1px solid rgba(124,58,255,0.22);
    margin-bottom:22px; transition:all 0.35s;
}
.bcard:hover .bcard-icon-wrap {
    background:rgba(124,58,255,0.2);
    box-shadow:0 0 18px rgba(124,58,255,0.35);
}
.bcard-icon-wrap i {
    font-size:1.3rem;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}

.bcard h3 {
    font-family:var(--f-head); font-size:1.2rem; font-weight:700;
    letter-spacing:-0.025em; margin-bottom:12px; color:var(--text);
}
.bcard p { color:var(--muted); font-size:0.88rem; line-height:1.72; margin-bottom:20px; }

.btags { display:flex; flex-wrap:wrap; gap:8px; }
.btags li {
    font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
    padding:4px 10px; border-radius:100px;
    background:rgba(124,58,255,0.1); border:1px solid rgba(124,58,255,0.22);
    color:#a78bfa;
}

.bcard-arrow {
    position:absolute; top:28px; right:28px;
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); color:var(--faint);
    font-size:0.85rem; transition:all 0.35s;
}
.bcard:hover .bcard-arrow {
    background:var(--p); border-color:var(--p); color:#fff;
    transform:rotate(45deg);
}

.bcard-glow {
    position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(ellipse at 50% 0%, rgba(124,58,255,0.13), transparent 60%);
    opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.bcard:hover .bcard-glow { opacity:1; }

/* Accent card */
.bcard-accent {
    background:linear-gradient(135deg, rgba(124,58,255,0.14), rgba(0,216,255,0.07));
    border-color:rgba(124,58,255,0.25);
    text-align:center;
}
.bcard-accent::before { background:var(--grad-pp); }
.accent-icon { margin:0 auto 20px; }
.bcard-quote {
    font-family:var(--f-head); font-size:1rem; font-weight:500;
    color:var(--text); line-height:1.6; margin-bottom:12px;
}
.bcard-sig { font-size:0.78rem; color:var(--muted); font-style:italic; }

/* Mini stat card */
.bcard-6 .mini-stats {
    display:flex; flex-direction:column; gap:18px; list-style:none;
    height:100%; justify-content:center;
}
.mini-stats li {
    display:flex; align-items:baseline; gap:4px;
}
.mini-stats span.ms-n {
    font-family:var(--f-head); font-size:2rem; font-weight:800;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.mini-stats li > span:not(.ms-n) {
    font-family:var(--f-head); font-size:1.2rem; font-weight:800;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.mini-stats small {
    font-size:0.75rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--faint); margin-left:8px;
}

/* 3D Tilt */
.tilt-card { transform-style:preserve-3d; }

/* ── PROCESS ── */
.process-section {
    background:radial-gradient(ellipse at 50% 0%, rgba(124,58,255,0.06), transparent 65%);
}
.process-grid {
    max-width:740px; margin:0 auto;
    display:flex; flex-direction:column;
}

.pstep {
    display:grid; grid-template-columns: 80px 1fr;
    gap:20px; padding:28px 0;
    border-bottom:1px solid var(--border);
    transition:padding-left 0.3s;
    opacity:0; transform:translateY(24px);
    transition:opacity 0.6s ease, transform 0.6s ease, padding-left 0.3s;
}
.pstep.visible { opacity:1; transform:translateY(0); }
.pstep:last-child { border-bottom:none; }
.pstep:hover { padding-left:10px; }

.pstep-left { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pstep-num {
    font-family:var(--f-mono); font-size:0.72rem; font-weight:500;
    color:var(--p); letter-spacing:0.1em; white-space:nowrap;
}
.pstep-connector {
    flex:1; width:1px; min-height:16px;
    background:linear-gradient(to bottom, var(--p), transparent);
}

.pstep-right { padding-top:2px; }
.pstep-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:var(--r-sm);
    border:1px solid var(--border); background:var(--surface);
    color:var(--muted); font-size:0.9rem;
    margin-bottom:12px; transition:all 0.3s;
}
.pstep:hover .pstep-icon {
    background:rgba(124,58,255,0.12); border-color:rgba(124,58,255,0.3);
    color:var(--p); box-shadow:0 0 14px rgba(124,58,255,0.25);
}
.pstep-right h4 {
    font-family:var(--f-head); font-size:1.05rem; font-weight:700;
    color:var(--text); margin-bottom:8px; letter-spacing:-0.02em;
}
.pstep-right p { color:var(--muted); font-size:0.88rem; line-height:1.78; }

/* ── TECH STACK ── */
.stack-section { padding:130px 32px; }
.stack-grid {
    display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
    max-width:860px; margin:0 auto;
}
.sitem {
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); padding:26px 16px;
    position:relative; overflow:hidden;
    transition:all 0.35s cubic-bezier(0.2,0,0,1);
}
.sitem::after {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:var(--grad-pp);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    padding:1px; opacity:0; transition:opacity 0.35s;
    pointer-events:none;
}
.sitem:hover { background:var(--surface-h); transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,0.5); }
.sitem:hover::after { opacity:1; }
.sitem i {
    font-size:2rem;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.stxt b {
    font-family:var(--f-head); font-size:1.1rem; font-weight:800;
    background:var(--grad-pp); -webkit-background-clip:text;
    background-clip:text; -webkit-text-fill-color:transparent;
}
.sitem span:not(b) {
    font-size:0.68rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.07em; color:var(--faint);
}

/* ── CONTACT ── */
.contact-section {
    padding:130px 32px;
    background:linear-gradient(to bottom, transparent, rgba(124,58,255,0.04), transparent);
}
.contact-wrap {
    display:grid; grid-template-columns:1fr 1.45fr; gap:80px; align-items:start;
}
.contact-left > h2 {
    font-family:var(--f-head); font-size:clamp(2rem,4vw,3.1rem);
    font-weight:700; letter-spacing:-0.035em; line-height:1.08;
    margin-bottom:18px; color:var(--text);
}
.contact-left > h2 em {
    font-style:normal;
    background:var(--grad-text); background-size:200% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:grad-move 5s linear infinite;
}
.contact-left > p { color:var(--muted); font-size:0.93rem; line-height:1.78; margin-bottom:36px; }

.contact-meta { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.contact-meta li {
    display:flex; align-items:center; gap:14px;
    color:var(--muted); font-size:0.88rem;
}
.cmeta-icon {
    width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(124,58,255,0.1); border:1px solid rgba(124,58,255,0.2);
    color:var(--p); font-size:0.85rem;
}

.contact-links { display:flex; flex-direction:column; gap:10px; }
.clink {
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.9rem; font-weight:600; color:var(--muted);
    transition:color 0.25s;
}
.clink:hover { color:var(--text); }

/* form */
.cform {
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r-xl); padding:44px 40px;
    display:flex; flex-direction:column; gap:20px;
    position:relative; overflow:hidden;
}
.cform::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    padding:1px;
    background:var(--grad-pp);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.cform:focus-within::before { opacity:1; }

.cform-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cfield { display:flex; flex-direction:column; gap:7px; }
.cfield label {
    font-size:0.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.1em; color:var(--faint);
}
.cfield input, .cfield textarea {
    background:rgba(255,255,255,0.025); border:1px solid var(--border);
    border-radius:var(--r-sm); padding:12px 15px;
    color:var(--text); font-family:var(--f-body); font-size:0.88rem;
    outline:none; resize:none;
    transition:border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.cfield input::placeholder, .cfield textarea::placeholder { color:var(--faint); }
.cfield input:focus, .cfield textarea:focus {
    border-color:var(--p);
    background:rgba(124,58,255,0.06);
    box-shadow:0 0 0 3px rgba(124,58,255,0.18);
}

.btn-submit {
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:15px;
    border-radius:var(--r-sm); border:none;
    background:var(--p); color:#fff;
    font-family:var(--f-head); font-weight:700; font-size:0.92rem;
    letter-spacing:0.01em; transition:transform 0.25s, box-shadow 0.25s, background 0.3s;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(124,58,255,0.55); }
.btn-submit.success { background:#22c55e; box-shadow:0 8px 30px rgba(34,197,94,0.45); }
.btn-submit.error   { background:#ef4444; }
.sb-icon { font-size:0.85rem; transition:transform 0.3s; }
.btn-submit:hover .sb-icon { transform:translateX(4px); }

.cform-disc {
    text-align:center; font-size:0.74rem; color:var(--faint);
    display:flex; align-items:center; justify-content:center; gap:6px;
}

/* ── FOOTER ── */
.footer {
    position:relative; z-index:2;
    border-top:1px solid var(--border);
    background:var(--bg);
}
.footer-top {
    display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:48px; padding:72px 32px 48px;
    max-width:var(--max); margin:0 auto;
}
.footer-brand p { color:var(--faint); font-size:0.88rem; line-height:1.75; margin-top:14px; }
.footer-logo { font-size:1.15rem; }

.fn-head {
    display:block; font-size:0.68rem; font-weight:700;
    letter-spacing:0.14em; text-transform:uppercase;
    color:var(--faint); margin-bottom:16px;
}
.footer-nav { display:flex; flex-direction:column; gap:12px; }
.footer-nav a { font-size:0.88rem; font-weight:500; color:var(--muted); transition:color 0.25s; }
.footer-nav a:hover { color:var(--text); }

.footer-social { display:flex; flex-direction:column; gap:0; }
.s-icons { display:flex; gap:10px; margin-top:0; }
.sicon {
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); color:var(--muted); font-size:0.9rem;
    transition:all 0.3s;
}
.sicon:hover {
    border-color:var(--p); color:var(--p);
    box-shadow:0 0 16px rgba(124,58,255,0.35);
    transform:translateY(-2px);
}

.footer-bottom {
    max-width:var(--max); margin:0 auto;
    padding:22px 32px;
    border-top:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; flex-wrap:wrap;
}
.footer-bottom p { font-size:0.78rem; color:var(--faint); }
.footer-badge {
    display:flex; align-items:center; gap:8px;
    font-size:0.75rem; color:var(--muted);
}
.fbadge-dot {
    width:6px; height:6px; border-radius:50%; background:var(--g);
    animation:pulse-dot 2.4s ease-in-out infinite;
    box-shadow:0 0 0 0 rgba(34,197,94,0.5);
}

/* ── RESPONSIVE ── */
@media (max-width:1080px) {
    .bcard-1 { grid-column:1 / 8; }
    .bcard-2 { grid-column:8 / 13; }
    .bcard-3 { grid-column:1 / 7; }
    .bcard-4 { grid-column:7 / 13; }
    .bcard-5 { grid-column:1 / 7; }
    .bcard-6 { grid-column:7 / 13; }

    .stack-grid { grid-template-columns:repeat(4,1fr); }
    .contact-wrap { grid-template-columns:1fr; gap:52px; }
    .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:768px) {
    :root { --nav-h:60px; }
    .nav-links, .nav-cta { display:none; }
    .hamburger { display:flex; }

    .bento { grid-template-columns:1fr; }
    .bcard-1,.bcard-2,.bcard-3,.bcard-4,.bcard-5,.bcard-6 { grid-column:1; }

    .section { padding:90px 24px; }
    .services-section, .stack-section, .contact-section, .process-section { padding:90px 24px; }

    .hero-title { font-size:clamp(2.4rem,10vw,3.8rem); }
    .desk-br { display:none; }
    .hero-stats { gap:20px; }
    .hstat-div { height:28px; }

    .stack-grid { grid-template-columns:repeat(3,1fr); }
    .cform { padding:28px 22px; }
    .cform-row { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; gap:32px; padding:48px 24px 32px; }
    .footer-bottom { flex-direction:column; text-align:center; padding:18px 24px; }

    *, *::before, *::after { cursor:auto !important; }
    .cursor-dot, .cursor-ring { display:none !important; }
}

@media (max-width:480px) {
    .hero-btns { flex-direction:column; }
    .btn-primary, .btn-ghost { justify-content:center; width:100%; }
    .hero-stats { flex-direction:column; gap:14px; }
    .hstat-div { width:60px; height:1px; }
    .stack-grid { grid-template-columns:repeat(2,1fr); }
}