/* ============================================
   VISMRUTHI — VISHNURAJ K V
   Digital Marketing Portfolio
   Main Stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --bg: #0C0C0C;
  --bg2: #111114;
  --fg: #D7E2EA;
  --accent: #B600A8;
  --accent2: #7621B0;
  --accent3: #BE4C00;
  --white: #fff;
  --muted: rgba(215,226,234,0.45);
  --border: rgba(215,226,234,0.15);
  --grad-btn: linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --grad-text: linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  --grad-glow: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(182,0,168,0.18) 0%, transparent 70%);
}

/* ── RESET ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--bg);font-family:'Kanit',sans-serif;color:var(--fg);overflow-x:hidden;cursor:none}

/* ── CUSTOM CURSOR ── */
.cursor{position:fixed;width:12px;height:12px;background:var(--accent);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:transform 0.1s,background 0.2s;mix-blend-mode:screen}
.cursor-ring{position:fixed;width:36px;height:36px;border:1.5px solid rgba(182,0,168,0.6);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:transform 0.15s ease-out,width 0.3s,height 0.3s,border-color 0.3s}
.cursor.hover{transform:translate(-50%,-50%) scale(2.5);background:var(--accent2)}
.cursor-ring.hover{width:60px;height:60px;border-color:rgba(118,33,176,0.8)}

/* ── NOISE OVERLAY ── */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:200px}

/* ── SCROLL PROGRESS ── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));z-index:9001;width:0;transition:width 0.1s linear}

/* ── NAV ── */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:28px 48px;position:fixed;top:0;left:0;right:0;z-index:8000;transition:background 0.4s,backdrop-filter 0.4s}
.navbar.scrolled{background:rgba(12,12,12,0.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{font-size:1.4rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--fg);text-decoration:none;position:relative}
.nav-logo span{background:var(--grad-btn);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--fg);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;text-decoration:none;position:relative;transition:opacity .2s}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--accent);transition:width 0.3s}
.nav-links a:hover::after{width:100%}
.nav-links a:hover{opacity:1}
.nav-cta{background:var(--grad-btn);border:none;color:#fff;font-family:'Kanit',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:10px 28px;font-size:.8rem;cursor:pointer;transition:opacity .2s,transform .2s}
.nav-cta:hover{opacity:.85;transform:scale(1.04)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{width:24px;height:2px;background:var(--fg);transition:all 0.3s}

/* ── BUTTONS ── */
.btn-primary{background:var(--grad-btn);border:2px solid white;outline:2px solid white;outline-offset:-4px;color:#fff;font-family:'Kanit',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.15em;border-radius:9999px;padding:14px 40px;font-size:.9rem;cursor:pointer;box-shadow:inset 4px 4px 12px rgba(119,33,177,.5),0px 4px 24px rgba(181,1,167,.3);transition:opacity .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:-2px;background:var(--grad-btn);opacity:0;filter:blur(12px);transition:opacity 0.3s;z-index:-1}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:inset 4px 4px 12px rgba(119,33,177,.5),0px 8px 32px rgba(181,1,167,.5)}
.btn-secondary{border:2px solid var(--fg);color:var(--fg);background:transparent;font-family:'Kanit',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.15em;border-radius:9999px;padding:12px 36px;font-size:.85rem;cursor:pointer;transition:background .2s,transform .2s}
.btn-secondary:hover{background:rgba(215,226,234,.1);transform:translateY(-2px)}

/* ── FADE IN ANIMATION ── */
.fadein{opacity:0;transition:opacity 0.8s cubic-bezier(.25,.1,.25,1),transform 0.8s cubic-bezier(.25,.1,.25,1)}
.fadein.visible{opacity:1;transform:none!important}

/* ── GRADIENT TEXT ── */
.grad-text{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-text-pink{background:linear-gradient(135deg,#B600A8,#7621B0,#BE4C00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ══════════════════════════════
   HERO SECTION
══════════════════════════════ */
.hero{min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--bg);overflow:hidden}
.hero-glow{position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;z-index:1}
.hero-grid{position:absolute;inset:0;opacity:.06;background-image:linear-gradient(var(--fg) 1px,transparent 1px),linear-gradient(90deg,var(--fg) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:1}
.hero-tagline{text-align:center;font-size:clamp(.7rem,.9vw,1rem);text-transform:uppercase;letter-spacing:.25em;color:var(--muted);padding-top:140px;position:relative;z-index:20;font-family:'Space Mono',monospace;animation:fadeDown 1s ease both 0.3s}
.hero-title{font-size:clamp(5rem,17.5vw,22rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:1;white-space:nowrap;width:100%;padding:0 24px;position:relative;z-index:20;animation:fadeUp 1s cubic-bezier(.25,.1,.25,1) both 0.5s}
.hero-sub{font-size:clamp(.85rem,1.2vw,1.1rem);text-align:center;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);position:relative;z-index:20;font-weight:300;margin-top:-8px;animation:fadeUp 1s ease both 0.7s}
.hero-sub span{color:var(--fg);font-weight:500}
.portrait-wrap{position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:10;width:clamp(240px,36vw,520px)}
.portrait-wrap img{width:100%;display:block;object-fit:contain;filter:drop-shadow(0 0 60px rgba(182,0,168,.25))}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding:0 48px 40px;margin-top:auto;position:relative;z-index:20}
.hero-desc{color:var(--fg);font-weight:300;text-transform:uppercase;letter-spacing:.05em;line-height:1.5;max-width:220px;font-size:clamp(.7rem,1.2vw,.95rem);animation:fadeUp 1s ease both 0.9s}
.hero-badge{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;animation:fadeUp 1s ease both 1.1s}
.hero-badge-inner{background:rgba(215,226,234,.06);border:1px solid var(--border);backdrop-filter:blur(10px);border-radius:999px;padding:8px 20px;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.scroll-hint{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--muted),transparent);animation:scrollPulse 2s ease-in-out infinite}

/* Floating particles */
.particle{position:absolute;border-radius:50%;pointer-events:none;z-index:2;animation:float linear infinite}
@keyframes float{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:.5}100%{transform:translateY(-100px) scale(1);opacity:0}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.8)}50%{opacity:1;transform:scaleY(1)}}

/* ══════════════════════════════
   MARQUEE / WORKS STRIP
══════════════════════════════ */
.marquee-section{background:var(--bg);padding:120px 0 60px;overflow:hidden}
.marquee-label{text-align:center;font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:var(--muted);margin-bottom:48px;font-family:'Space Mono',monospace}
.marquee-track{overflow:hidden;position:relative}
.marquee-track::before,.marquee-track::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.marquee-track::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marquee-track::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marquee-row{display:flex;gap:16px;will-change:transform;margin-bottom:16px}
.marquee-tile{flex-shrink:0;width:360px;height:230px;border-radius:20px;object-fit:cover;border:1px solid var(--border);transition:transform 0.3s,border-color 0.3s}
.marquee-tile:hover{transform:scale(1.03);border-color:var(--accent)}

/* ══════════════════════════════
   STATS STRIP
══════════════════════════════ */
.stats-strip{padding:80px 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stat-item{background:var(--bg);padding:48px 24px;text-align:center;position:relative;overflow:hidden;transition:background 0.3s}
.stat-item::before{content:'';position:absolute;inset:0;background:var(--grad-glow);opacity:0;transition:opacity 0.4s}
.stat-item:hover::before{opacity:1}
.stat-num{font-size:clamp(3rem,6vw,6rem);font-weight:900;line-height:1;letter-spacing:-.03em}
.stat-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-top:8px;font-family:'Space Mono',monospace}

/* ══════════════════════════════
   ABOUT SECTION
══════════════════════════════ */
.about-section{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:120px 24px;background:var(--bg)}
.about-bg-text{position:absolute;font-size:clamp(8rem,20vw,22rem);font-weight:900;text-transform:uppercase;color:rgba(215,226,234,.03);pointer-events:none;white-space:nowrap;letter-spacing:-.05em;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0}
.about-content{display:flex;flex-direction:column;align-items:center;gap:40px;position:relative;z-index:2;text-align:center;max-width:800px}
.about-heading{font-size:clamp(3rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.03em}
.about-text{color:var(--fg);font-weight:400;text-align:center;line-height:1.8;max-width:580px;font-size:clamp(1rem,1.6vw,1.2rem)}
.char{display:inline-block;opacity:.15;transition:opacity .12s}
.char.lit{opacity:1}
.about-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.about-tag{border:1px solid var(--border);border-radius:999px;padding:6px 16px;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);transition:border-color .3s,color .3s}
.about-tag:hover{border-color:var(--accent);color:var(--fg)}
.about-deco{position:absolute;pointer-events:none;animation:float-deco 6s ease-in-out infinite}
@keyframes float-deco{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* ══════════════════════════════
   SERVICES SECTION
══════════════════════════════ */
.services-section{background:#fff;border-radius:50px 50px 0 0;padding:100px 32px 120px;margin-top:-2px;position:relative;z-index:5}
.services-heading{font-size:clamp(3rem,12vw,10rem);font-weight:900;text-transform:uppercase;color:#0C0C0C;text-align:center;margin-bottom:16px;line-height:1;letter-spacing:-.03em}
.services-sub{text-align:center;color:rgba(12,12,12,.5);font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.05em;margin-bottom:80px;font-weight:400;max-width:500px;margin-left:auto;margin-right:auto}
.services-list{max-width:900px;margin:0 auto}
.service-item{display:flex;align-items:flex-start;gap:32px;border-top:1px solid rgba(12,12,12,.12);padding:44px 0;color:#0C0C0C;position:relative;overflow:hidden;cursor:pointer;transition:padding-left 0.3s}
.service-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(182,0,168,.06),transparent);transition:width 0.5s}
.service-item:hover::before{width:100%}
.service-item:hover{padding-left:16px}
.service-item:last-child{border-bottom:1px solid rgba(12,12,12,.12)}
.service-num{font-weight:900;font-size:clamp(3rem,8vw,8rem);line-height:1;color:rgba(12,12,12,.08);flex-shrink:0;min-width:80px;transition:color .3s}
.service-item:hover .service-num{color:rgba(182,0,168,.25)}
.service-info{padding-top:8px;flex:1}
.service-name{font-weight:700;text-transform:uppercase;font-size:clamp(1rem,2vw,1.8rem);margin-bottom:10px;letter-spacing:.02em}
.service-desc{font-weight:300;line-height:1.7;max-width:500px;font-size:clamp(.85rem,1.3vw,1.05rem);opacity:.55}
.service-icon{font-size:2.5rem;opacity:.6;flex-shrink:0;margin-left:auto;transition:transform 0.3s,opacity 0.3s}
.service-item:hover .service-icon{transform:scale(1.2) rotate(-5deg);opacity:1}

/* ══════════════════════════════
   WORKS / PROJECTS SECTION
══════════════════════════════ */
.projects-section{background:var(--bg);border-radius:50px 50px 0 0;margin-top:-50px;position:relative;z-index:10;padding:100px 32px 120px}
.projects-heading{font-size:clamp(3rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.03em;margin-bottom:16px;text-align:center}
.projects-sub{text-align:center;color:var(--muted);font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.05em;margin-bottom:24px}
.work-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:64px}
.filter-btn{border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Kanit',sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.1em;border-radius:999px;padding:8px 22px;font-size:.78rem;cursor:pointer;transition:all 0.3s}
.filter-btn.active,.filter-btn:hover{background:var(--grad-btn);color:#fff;border-color:transparent}

/* Stacked project cards */
.project-stack{position:relative}
.project-slot{height:85vh;display:flex;align-items:flex-start;position:relative}
.project-card{position:sticky;top:80px;width:100%;border-radius:48px;border:1px solid var(--border);background:rgba(17,17,20,.95);padding:32px;transform-origin:top center;will-change:transform;backdrop-filter:blur(10px);transition:border-color 0.3s}
.project-card:hover{border-color:rgba(182,0,168,.4)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.card-num{font-size:clamp(2.5rem,6vw,6rem);font-weight:900;color:rgba(215,226,234,.2);line-height:1}
.card-meta{display:flex;flex-direction:column}
.card-cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.card-name{font-size:clamp(1rem,2vw,1.8rem);font-weight:700;text-transform:uppercase;color:var(--fg)}
.card-imgs{display:grid;grid-template-columns:40% 60%;gap:14px}
.col1{display:flex;flex-direction:column;gap:14px}
.col1 img:first-child{height:clamp(120px,14vw,200px);width:100%;object-fit:cover;border-radius:24px;transition:transform 0.4s}
.col1 img:last-child{height:clamp(150px,20vw,280px);width:100%;object-fit:cover;border-radius:24px;transition:transform 0.4s}
.col2 img{height:100%;width:100%;object-fit:cover;border-radius:24px;min-height:300px;transition:transform 0.4s}
.project-card:hover .col1 img,.project-card:hover .col2 img{transform:scale(1.02)}

/* ══════════════════════════════
   WORKS SHOWCASE (Grid)
══════════════════════════════ */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.work-card{border-radius:24px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;border:1px solid var(--border)}
.work-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.work-card:hover img{transform:scale(1.06)}
.work-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,12,.9) 0%,transparent 60%);opacity:0;transition:opacity 0.4s;display:flex;align-items:flex-end;padding:24px}
.work-card:hover .work-card-overlay{opacity:1}
.work-card-info{}
.work-card-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.work-card-title{font-size:1.1rem;font-weight:700;text-transform:uppercase;color:var(--fg)}

/* ══════════════════════════════
   CLIENTS / TESTIMONIALS
══════════════════════════════ */
.clients-section{padding:100px 48px;background:var(--bg2);position:relative;overflow:hidden}
.clients-heading{font-size:clamp(2rem,8vw,7rem);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:64px;line-height:1;letter-spacing:-.03em}
.clients-geo{position:absolute;top:0;right:0;width:400px;height:400px;background:radial-gradient(circle,rgba(182,0,168,.12) 0%,transparent 70%);pointer-events:none}
.region-badges{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}
.region-badge{border:1px solid var(--border);border-radius:20px;padding:20px 32px;text-align:center;backdrop-filter:blur(10px);transition:border-color 0.3s,transform 0.3s}
.region-badge:hover{border-color:var(--accent);transform:translateY(-4px)}
.region-flag{font-size:2.5rem;margin-bottom:8px}
.region-name{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem}
.region-count{font-size:.8rem;color:var(--muted)}
.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;margin:0 auto}
.testimonial-card{border:1px solid var(--border);border-radius:24px;padding:32px;position:relative;transition:border-color 0.3s,transform 0.3s;background:rgba(17,17,20,.6)}
.testimonial-card:hover{border-color:rgba(182,0,168,.4);transform:translateY(-4px)}
.testimonial-quote{font-size:3rem;line-height:1;color:var(--accent);opacity:.4;font-weight:900;margin-bottom:8px}
.testimonial-text{font-weight:300;line-height:1.7;font-size:.95rem;color:var(--fg);margin-bottom:20px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:40px;height:40px;border-radius:50%;background:var(--grad-btn);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.testimonial-name{font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.testimonial-role{font-size:.75rem;color:var(--muted)}

/* ══════════════════════════════
   PROCESS SECTION
══════════════════════════════ */
.process-section{padding:100px 48px;background:var(--bg);position:relative}
.process-heading{font-size:clamp(3rem,10vw,9rem);font-weight:900;text-transform:uppercase;text-align:center;margin-bottom:80px;line-height:1;letter-spacing:-.03em}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:32px;overflow:hidden}
.process-step{background:var(--bg);padding:48px 32px;position:relative;overflow:hidden;transition:background 0.4s}
.process-step::before{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--grad-btn);transform:scaleX(0);transform-origin:left;transition:transform 0.5s}
.process-step:hover::before{transform:scaleX(1)}
.process-step:hover{background:rgba(182,0,168,.04)}
.step-num{font-size:5rem;font-weight:900;color:rgba(215,226,234,.06);line-height:1;margin-bottom:16px}
.step-icon{font-size:2rem;margin-bottom:16px}
.step-name{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;margin-bottom:10px}
.step-desc{font-weight:300;color:var(--muted);line-height:1.6;font-size:.85rem}

/* ══════════════════════════════
   CONTACT / FOOTER
══════════════════════════════ */
.contact-section{background:var(--bg);padding:120px 48px;text-align:center;position:relative;overflow:hidden}
.contact-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(182,0,168,.15) 0%,transparent 70%);pointer-events:none}
.contact-heading{font-size:clamp(3rem,15vw,14rem);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.04em;margin-bottom:32px}
.contact-sub{color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);margin-bottom:48px;font-weight:300;letter-spacing:.05em;max-width:480px;margin-left:auto;margin-right:auto}
.contact-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:80px}
.contact-link{border:1px solid var(--border);border-radius:999px;padding:12px 28px;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);text-decoration:none;transition:all 0.3s;font-family:'Space Mono',monospace}
.contact-link:hover{border-color:var(--accent);color:var(--fg);background:rgba(182,0,168,.08)}
.footer-bottom{border-top:1px solid var(--border);padding-top:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:gap}
.footer-copy{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-family:'Space Mono',monospace}
.footer-tagline{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(182,0,168,.6);font-style:italic}

/* ══════════════════════════════
   WORKS PAGE SPECIFIC
══════════════════════════════ */
.works-hero{padding:160px 48px 80px;text-align:center}
.works-hero h1{font-size:clamp(3.5rem,12vw,10rem);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.03em;margin-bottom:16px}
.works-hero p{color:var(--muted);font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.05em}
.category-section{padding:80px 48px}
.category-title{display:flex;align-items:center;gap:24px;margin-bottom:40px}
.category-title h2{font-size:clamp(2rem,6vw,5rem);font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:-.02em}
.category-title-line{flex:1;height:1px;background:var(--border)}
.category-title-count{font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-family:'Space Mono',monospace}
.works-masonry{columns:3;gap:16px}
.masonry-item{break-inside:avoid;margin-bottom:16px;border-radius:20px;overflow:hidden;position:relative;cursor:pointer;border:1px solid var(--border);transition:border-color 0.3s}
.masonry-item:hover{border-color:rgba(182,0,168,.5)}
.masonry-item img,.masonry-item video{width:100%;display:block;transition:transform 0.5s}
.masonry-item:hover img,.masonry-item:hover video{transform:scale(1.04)}
.masonry-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,12,.8) 0%,transparent 50%);opacity:0;transition:opacity 0.4s;display:flex;align-items:flex-end;padding:20px}
.masonry-item:hover .masonry-overlay{opacity:1}
.masonry-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--fg)}

/* Video placeholder style */
.video-thumb{background:rgba(17,17,20,.8);border-radius:20px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-size:3rem;position:relative;overflow:hidden}
.video-thumb::after{content:'▶';position:absolute;width:60px;height:60px;background:var(--grad-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;box-shadow:0 0 40px rgba(182,0,168,.4)}
.video-play-btn{width:64px;height:64px;background:var(--grad-btn);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 0 40px rgba(182,0,168,.5);transition:transform 0.3s}
.masonry-item:hover .video-play-btn{transform:scale(1.15)}

/* ══════════════════════════════
   PAGE TRANSITIONS
══════════════════════════════ */
.page-transition{position:fixed;inset:0;z-index:99000;background:var(--bg);transform:translateY(100%);transition:transform 0.5s cubic-bezier(.86,0,.07,1);pointer-events:none}
.page-transition.active{transform:translateY(0);pointer-events:all}

/* ══════════════════════════════
   ANIMATIONS LIBRARY
══════════════════════════════ */
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(182,0,168,.3)}50%{box-shadow:0 0 50px rgba(182,0,168,.7)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes data-stream{0%{background-position:0 0}100%{background-position:0 200px}}

/* Typing cursor */
.typing-cursor::after{content:'|';animation:blink 1s step-end infinite;color:var(--accent)}

/* Glitch text effect */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
.glitch::before{left:2px;text-shadow:-2px 0 var(--accent);clip:rect(44px,450px,56px,0);animation:glitch-1 2s infinite linear alternate-reverse}
.glitch::after{left:-2px;text-shadow:-2px 0 var(--accent2);clip:rect(44px,450px,56px,0);animation:glitch-2 3s infinite linear alternate-reverse}
@keyframes glitch-1{0%{clip:rect(42px,9999px,44px,0)}5%{clip:rect(12px,9999px,59px,0)}10%{clip:rect(48px,9999px,29px,0)}15%{clip:rect(42px,9999px,73px,0)}20%{clip:rect(63px,9999px,27px,0)}25%{clip:rect(34px,9999px,55px,0)}30%{clip:rect(86px,9999px,73px,0)}35%{clip:rect(20px,9999px,20px,0)}40%{clip:rect(26px,9999px,60px,0)}45%{clip:rect(25px,9999px,66px,0)}50%{clip:rect(57px,9999px,98px,0)}55%{clip:rect(5px,9999px,46px,0)}60%{clip:rect(82px,9999px,31px,0)}65%{clip:rect(54px,9999px,27px,0)}70%{clip:rect(28px,9999px,99px,0)}75%{clip:rect(45px,9999px,69px,0)}80%{clip:rect(23px,9999px,85px,0)}85%{clip:rect(54px,9999px,84px,0)}90%{clip:rect(45px,9999px,47px,0)}95%{clip:rect(37px,9999px,20px,0)}100%{clip:rect(4px,9999px,91px,0)}}
@keyframes glitch-2{0%{clip:rect(65px,9999px,100px,0)}5%{clip:rect(52px,9999px,74px,0)}10%{clip:rect(79px,9999px,85px,0)}15%{clip:rect(75px,9999px,5px,0)}20%{clip:rect(67px,9999px,61px,0)}25%{clip:rect(14px,9999px,79px,0)}30%{clip:rect(1px,9999px,66px,0)}35%{clip:rect(86px,9999px,30px,0)}40%{clip:rect(23px,9999px,98px,0)}45%{clip:rect(85px,9999px,72px,0)}50%{clip:rect(71px,9999px,75px,0)}55%{clip:rect(2px,9999px,48px,0)}60%{clip:rect(30px,9999px,16px,0)}65%{clip:rect(59px,9999px,50px,0)}70%{clip:rect(41px,9999px,62px,0)}75%{clip:rect(2px,9999px,82px,0)}80%{clip:rect(47px,9999px,73px,0)}85%{clip:rect(3px,9999px,27px,0)}90%{clip:rect(26px,9999px,55px,0)}95%{clip:rect(42px,9999px,97px,0)}100%{clip:rect(38px,9999px,19px,0)}}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:900px){
  .navbar{padding:20px 24px}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);align-items:center;justify-content:center;gap:32px;z-index:7999}
  .nav-links.open a{font-size:1.5rem}
  .hamburger{display:flex}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .works-masonry{columns:2}
  .testimonials{grid-template-columns:1fr}
  .hero-bottom{padding:0 24px 28px}
  .works-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .stats-strip{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr}
  .works-masonry{columns:1}
  .card-imgs{grid-template-columns:1fr}
  .col2{display:none}
  .works-grid{grid-template-columns:1fr}
  .hero-bottom{flex-direction:column;align-items:center;gap:20px;padding:0 20px 40px}
  .hero-desc{max-width:100%;text-align:center}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}

/* ══════════════════════════════
   LIGHTBOX
══════════════════════════════ */
.lightbox{position:fixed;inset:0;background:rgba(12,12,12,.95);z-index:98000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s;backdrop-filter:blur(20px)}
.lightbox.open{opacity:1;pointer-events:all}
.lightbox img{max-width:90vw;max-height:88vh;border-radius:16px;object-fit:contain;box-shadow:0 0 80px rgba(182,0,168,.3)}
.lightbox-close{position:absolute;top:32px;right:40px;font-size:2rem;cursor:pointer;color:var(--fg);opacity:.6;transition:opacity .2s;background:none;border:none;line-height:1}
.lightbox-close:hover{opacity:1}