/* ============================================
   VARIABLES
   ============================================ */
:root {
    --font-display: 'Syne', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --accent: #6C63FF;
    --accent-2: #FF6B6B;
    --accent-soft: rgba(108,99,255,0.1);
    --accent-glow: rgba(108,99,255,0.3);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0, 1);
    --container: 1340px;
    --container-narrow: 900px;
}

[data-theme="dark"] {
    --bg: #08080c;
    --bg-alt: #0e0e14;
    --bg-card: #141420;
    --bg-elevated: #1a1a28;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.12);
    --text-1: #f0f0f5;
    --text-2: #8888a0;
    --text-3: #4e4e64;
    --nav-bg: rgba(8,8,12,0.82);
    --img-overlay: rgba(8,8,12,0.3);
}

[data-theme="light"] {
    --bg: #f8f8f6;
    --bg-alt: #f0f0ec;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --border: rgba(0,0,0,0.07);
    --border-hover: rgba(0,0,0,0.14);
    --text-1: #0e0e14;
    --text-2: #5a5a6e;
    --text-3: #9898aa;
    --nav-bg: rgba(248,248,246,0.88);
    --img-overlay: rgba(248,248,246,0.15);
}

/* ============================================
   RESET
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:80px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text-1);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img{max-width:100%;display:block;height:auto}
button{background:none;border:none;cursor:pointer;font-family:inherit;color:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.container-wide{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ============================================
   CURSOR — With Text Label
   ============================================ */
.cursor,.cursor-trail{display:none;position:fixed;border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%)}
@media(hover:hover) and (pointer:fine){
    body{cursor:none}
    a,button,input,textarea{cursor:none}
    .cursor{display:flex;align-items:center;justify-content:center;width:12px;height:12px;background:var(--accent);z-index:100000;transition:width .4s var(--ease-expo),height .4s var(--ease-expo),background .3s,border-radius .3s}
    .cursor-trail{display:block;width:44px;height:44px;border:1.5px solid rgba(108,99,255,0.4);transition:width .5s var(--ease-expo),height .5s var(--ease-expo),opacity .3s,border-color .3s}
    .cursor.is-hover{width:80px;height:80px;background:rgba(108,99,255,0.08);border:1.5px solid var(--accent)}
    .cursor-trail.is-hover{width:0;height:0;opacity:0}
    .cursor.has-text{width:100px;height:100px;background:var(--accent);border-radius:50%}
    .cursor-text{font-size:12px;font-weight:700;color:#fff;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .3s}
    .cursor.has-text .cursor-text{opacity:1}
}

/* ============================================
   PARTICLES
   ============================================ */
.particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.particle{position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;opacity:0.15;animation:float-particle 20s linear infinite}
@keyframes float-particle{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:0.15}90%{opacity:0.15}100%{transform:translateY(-100px) rotate(720deg);opacity:0}}

/* ============================================
   LOADER
   ============================================ */
.loader{position:fixed;inset:0;z-index:100000;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .8s var(--ease-expo),visibility .8s}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center}
.loader-logo{font-family:var(--font-display);font-weight:800;font-size:3rem;margin-bottom:24px;display:flex;align-items:baseline;justify-content:center;gap:2px}
.ll-t{display:inline-block;animation:loader-bounce 1s ease infinite}
.ll-dot{color:var(--accent);animation:loader-bounce 1s ease infinite .15s}
@keyframes loader-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.loader-bar{width:120px;height:3px;background:var(--border);border-radius:3px;margin:0 auto 12px;overflow:hidden}
.loader-bar-fill{height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .1s}
.loader-percent{font-family:var(--font-mono);font-size:.82rem;color:var(--text-3);letter-spacing:.1em}

/* ============================================
   HEADER
   ============================================ */
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:20px 0;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:padding .3s,box-shadow .3s}
.header.scrolled{padding:12px 0;box-shadow:0 4px 30px rgba(0,0,0,.08)}
.header-inner{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between}

.logo{font-family:var(--font-display);font-size:1.4rem;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline}
.logo-dot{color:var(--accent);font-size:2rem;line-height:0}
.footer-logo span{color:var(--accent)}

.nav-desktop{display:flex;gap:4px}
.nav-item{padding:8px 20px;font-size:.88rem;font-weight:500;color:var(--text-2);border-radius:100px;transition:all .3s;position:relative;overflow:hidden}
.nav-item span{position:relative;z-index:1}
.nav-item::before{content:'';position:absolute;inset:0;background:var(--accent-soft);border-radius:100px;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-expo)}
.nav-item:hover::before{transform:scaleX(1);transform-origin:left}
.nav-item:hover{color:var(--text-1)}
.nav-item.active{color:var(--accent)}
.nav-item.active::before{transform:scaleX(1);transform-origin:left}

.header-actions{display:flex;align-items:center;gap:12px}

.theme-btn{position:relative;padding:4px}
.theme-btn-track{width:52px;height:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;position:relative;transition:all .3s}
.theme-btn-thumb{width:22px;height:22px;background:var(--accent);border-radius:50%;position:absolute;top:2px;left:2px;transition:all .4s var(--ease-expo);display:flex;align-items:center;justify-content:center}
[data-theme="light"] .theme-btn-thumb{left:26px}
.sun-icon,.moon-icon{font-size:10px;color:#fff;position:absolute;transition:all .3s}
[data-theme="dark"] .sun-icon{opacity:0;transform:rotate(-90deg)}
[data-theme="dark"] .moon-icon{opacity:1;transform:rotate(0)}
[data-theme="light"] .sun-icon{opacity:1;transform:rotate(0)}
[data-theme="light"] .moon-icon{opacity:0;transform:rotate(90deg)}
.theme-btn:hover .theme-btn-track{border-color:var(--accent)}

.btn-download{display:flex;align-items:center;gap:8px;padding:10px 22px;background:var(--text-1);color:var(--bg);font-size:.85rem;font-weight:600;border-radius:100px;transition:all .3s;overflow:hidden;position:relative}
.btn-download .bd-text{position:relative;z-index:1}
.btn-download .bd-icon{position:relative;z-index:1;display:flex;font-size:.75rem}
.btn-download::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateY(100%);transition:transform .4s var(--ease-expo)}
.btn-download:hover::before{transform:translateY(0)}
.btn-download:hover{color:#fff}

.menu-trigger{display:none;align-items:center;gap:10px}
.menu-lines{display:flex;flex-direction:column;gap:6px;width:22px}
.menu-lines span{height:2px;background:var(--text-1);border-radius:2px;transition:all .4s var(--ease-expo)}
.menu-lines span:last-child{width:14px;margin-left:auto}
.mt-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2)}
.menu-trigger.active .menu-lines span:first-child{transform:rotate(45deg) translate(3px,3px)}
.menu-trigger.active .menu-lines span:last-child{transform:rotate(-45deg) translate(5px,-5px);width:22px}

/* Fullscreen Menu */
.fullscreen-menu{position:fixed;inset:0;z-index:998;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,8vw,80px) 60px;clip-path:circle(0% at calc(100% - 48px) 32px);transition:clip-path .8s var(--ease-expo);pointer-events:none}
.fullscreen-menu.active{clip-path:circle(150% at calc(100% - 48px) 32px);pointer-events:all}

.menu-bg-columns{position:absolute;inset:0;display:flex;z-index:-1}
.menu-col{flex:1;border-right:1px solid var(--border);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease-expo)}
.fullscreen-menu.active .menu-col{transform:scaleY(1)}
.menu-col:nth-child(1){transition-delay:0s}.menu-col:nth-child(2){transition-delay:.04s}.menu-col:nth-child(3){transition-delay:.08s}.menu-col:nth-child(4){transition-delay:.12s}.menu-col:nth-child(5){transition-delay:.16s;border:none}

.menu-nav{display:flex;flex-direction:column}
.menu-link{display:flex;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--border);position:relative;overflow:hidden;opacity:0;transform:translateY(40px);transition:opacity .6s,transform .6s var(--ease-expo)}
.fullscreen-menu.active .menu-link{opacity:1;transform:translateY(0)}
.fullscreen-menu.active .menu-link:nth-child(1){transition-delay:.2s}
.fullscreen-menu.active .menu-link:nth-child(2){transition-delay:.25s}
.fullscreen-menu.active .menu-link:nth-child(3){transition-delay:.3s}
.fullscreen-menu.active .menu-link:nth-child(4){transition-delay:.35s}
.fullscreen-menu.active .menu-link:nth-child(5){transition-delay:.4s}
.fullscreen-menu.active .menu-link:nth-child(6){transition-delay:.45s}

.menu-link::before{content:attr(data-index);font-family:var(--font-mono);font-size:.8rem;color:var(--text-3);font-weight:400;min-width:24px}
.menu-link-inner{overflow:hidden}
.menu-link-text{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:700;letter-spacing:-.03em;display:inline-block;transition:transform .5s var(--ease-expo),color .3s}
.menu-link-label{font-size:.85rem;color:var(--text-3);margin-left:auto;opacity:0;transition:opacity .3s,transform .3s;transform:translateX(-10px)}
.menu-link:hover .menu-link-text{transform:translateX(20px);color:var(--accent)}
.menu-link:hover .menu-link-label{opacity:1;transform:translateX(0)}

.menu-footer{margin-top:auto;padding-top:32px;display:flex;align-items:center;justify-content:space-between}
.menu-socials{display:flex;gap:24px}
.menu-socials a{font-size:.85rem;color:var(--text-3);transition:color .3s}
.menu-socials a:hover{color:var(--accent)}
.menu-copyright{font-size:.82rem;color:var(--text-3)}

.back-link{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500;color:var(--text-2);transition:all .3s}
.back-link:hover{color:var(--accent);gap:14px}

/* ============================================
   HERO — YouTube BG + Big Type
   ============================================ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 clamp(60px,8vw,120px);position:relative;overflow:hidden}

.hero-video-bg{position:absolute;inset:0;z-index:0}
.video-wrapper{position:absolute;top:50%;left:50%;width:110vw;height:110vh;transform:translate(-50%,-50%)}
.video-wrapper iframe{width:100%;height:100%;object-fit:cover;pointer-events:none}
.video-overlay{position:absolute;inset:0;background:var(--bg);opacity:.82;transition:opacity .5s}
[data-theme="light"] .video-overlay{opacity:.88}
.video-grain{position:absolute;inset:0;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)' opacity='0.03'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px;opacity:.5;pointer-events:none}

.hero-content{position:relative;z-index:2;padding:0 clamp(20px,8vw,120px)}

.hero-overtitle{display:inline-flex;align-items:center;gap:12px;font-size:.85rem;color:var(--text-2);font-weight:500;margin-bottom:clamp(24px,4vw,48px);letter-spacing:.02em}
.dot-pulse{width:8px;height:8px;background:#4ADE80;border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 12px rgba(74,222,128,.4)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.8)}}

.hero-title{font-family:var(--font-display);font-size:clamp(3.2rem,8.5vw,8.5rem);font-weight:800;line-height:.92;letter-spacing:-.05em;margin-bottom:clamp(32px,5vw,64px)}
.title-row{display:block;overflow:hidden}
.title-word{display:inline-block}
.accent-word{color:var(--accent);position:relative}
.accent-word::after{content:'';position:absolute;bottom:5%;left:0;width:100%;height:8%;background:var(--accent);opacity:.3;border-radius:4px}

.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.hero-description{max-width:440px}
.hero-description p{font-size:clamp(1rem,1.2vw,1.15rem);color:var(--text-2);line-height:1.7}

.hero-cta-group{display:flex;gap:14px;flex-shrink:0}

.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--accent);color:#fff;font-size:.9rem;font-weight:600;border-radius:100px;transition:all .3s;position:relative;overflow:hidden}
.btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:0;transition:opacity .4s}
.btn-primary:hover::before{opacity:1}
.btn-primary span,.btn-primary .btn-arrow{position:relative;z-index:1}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--accent-glow)}
.btn-arrow{display:flex;transition:transform .3s}
.btn-primary:hover .btn-arrow{transform:translate(3px,-3px)}

.btn-ghost{display:inline-flex;align-items:center;padding:14px 28px;border:1.5px solid var(--border);color:var(--text-1);font-size:.9rem;font-weight:600;border-radius:100px;transition:all .3s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

/* Scroll Indicator */
.hero-scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.scroll-mouse{width:22px;height:34px;border:2px solid var(--text-3);border-radius:12px;position:relative}
.scroll-wheel{width:3px;height:8px;background:var(--accent);border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);animation:scroll-wheel 2s ease infinite}
@keyframes scroll-wheel{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(10px)}}
.hero-scroll-indicator span{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-3);font-weight:500}

/* Floating Badge */
.hero-floating-badge{position:absolute;right:clamp(20px,6vw,80px);bottom:clamp(80px,12vw,180px);z-index:2;width:120px;height:120px}
.hfb-ring{width:100%;height:100%;animation:spin-slow 12s linear infinite}
.hfb-ring svg{width:100%;height:100%}
.rotating-text{font-size:8.5px;fill:var(--text-3);letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
.hfb-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .3s}
.hero-floating-badge:hover .hfb-center{transform:translate(-50%,-50%) scale(1.15)}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* ============================================
   MARQUEE
   ============================================ */
.marquee-section{padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.marquee-track{display:flex;width:max-content;animation:marquee 35s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-content{display:flex;align-items:center;gap:clamp(24px,3vw,40px);font-family:var(--font-display);font-size:clamp(1rem,1.3vw,1.25rem);font-weight:600;color:var(--text-3);white-space:nowrap;padding-right:clamp(24px,3vw,40px)}
.marquee-dot{color:var(--accent);font-size:.7rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================
   SECTIONS
   ============================================ */
.section{padding:clamp(80px,12vw,160px) 0}

.section-label{display:flex;align-items:center;gap:16px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--text-3);margin-bottom:24px}
.label-line{width:32px;height:1.5px;background:var(--accent);border-radius:1px}

.section-headline{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5.5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:24px}
.section-headline-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:64px}
.section-sub{font-size:.95rem;color:var(--text-2);max-width:320px;text-align:right}

.section-intro{margin-bottom:64px}

/* ============================================
   PROJECTS — With Real Images
   ============================================ */
.project-block{display:grid;grid-template-columns:1.2fr 1fr;min-height:70vh;border-top:1px solid var(--border);transition:all .5s var(--ease-expo);position:relative;overflow:hidden}
.project-block::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--border)}
.project-block:hover{background:var(--bg-alt)}

.project-media{position:relative;overflow:hidden}
.project-image-wrapper{width:100%;height:100%;overflow:hidden}
.project-img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-expo),filter .5s}
.project-block:hover .project-img{transform:scale(1.06)}
.project-img-overlay{position:absolute;inset:0;background:var(--img-overlay);transition:opacity .5s}
.project-block:hover .project-img-overlay{opacity:.6}

.project-info{display:flex;align-items:center;padding:clamp(32px,5vw,64px)}
.project-info-inner{max-width:420px}
.project-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px}
.project-year{margin-left:auto;font-family:var(--font-mono);font-size:.75rem}
.project-name{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px}
.project-tagline{font-size:1.02rem;color:var(--text-2);line-height:1.6;margin-bottom:32px}
.project-cta-row{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:600;color:var(--accent);transition:gap .3s var(--ease-expo)}
.project-block:hover .project-cta-row{gap:20px}
.project-arrow{width:44px;height:44px;border:1.5px solid var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease-expo)}
.project-block:hover .project-arrow{background:var(--accent);color:#fff;transform:rotate(0deg)}

/* Duo Cards */
.projects-duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px}
.project-card-duo{display:flex;flex-direction:column;border:1px solid var(--border);overflow:hidden;transition:all .5s var(--ease-expo)}
.project-card-duo:hover{background:var(--bg-alt)}

.pcd-media{aspect-ratio:4/3;overflow:hidden;position:relative}
.pcd-img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-expo)}
.pcd-img-overlay{position:absolute;inset:0;background:var(--img-overlay);transition:opacity .5s}
.project-card-duo:hover .pcd-img{transform:scale(1.05)}
.project-card-duo:hover .pcd-img-overlay{opacity:.5}

.pcd-info{padding:clamp(24px,3vw,40px)}
.pcd-meta{font-size:.78rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:500;margin-bottom:12px;display:block}
.pcd-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pcd-desc{font-size:.95rem;color:var(--text-2);line-height:1.5;margin-bottom:20px}
.pcd-arrow{width:36px;height:36px;border:1.5px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);transition:all .3s}
.project-card-duo:hover .pcd-arrow{border-color:var(--accent);color:var(--accent)}

/* View All Projects Button */
.view-all-wrap{display:flex;justify-content:center;padding:clamp(48px,6vw,80px) 0}
.btn-view-all{display:inline-flex;align-items:center;gap:14px;padding:18px 40px;border:2px solid var(--border);border-radius:100px;font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-1);transition:all .4s var(--ease-expo);position:relative;overflow:hidden}
.btn-view-all::before{content:'';position:absolute;inset:0;background:var(--accent);border-radius:100px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)}
.btn-view-all:hover::before{transform:scaleX(1)}
.btn-view-all span,.btn-view-all .bva-arrow{position:relative;z-index:1}
.btn-view-all:hover{border-color:var(--accent);color:#fff;transform:translateY(-4px);box-shadow:0 16px 40px var(--accent-glow)}
.bva-arrow{display:flex;transition:transform .3s}
.btn-view-all:hover .bva-arrow{transform:translateX(4px)}

/* ============================================
   ABOUT
   ============================================ */
.about-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,100px)}

.about-headline{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:40px}

/* Portrait */
.about-portrait{position:relative;width:100%;max-width:340px;aspect-ratio:3/4;border-radius:16px;overflow:visible}
.portrait-img{width:100%;height:100%;object-fit:cover;border-radius:16px;transition:transform .6s var(--ease-expo)}
.about-portrait:hover .portrait-img{transform:scale(1.03)}
.portrait-border{position:absolute;inset:-10px;border:1.5px dashed var(--accent);border-radius:20px;opacity:.2;animation:portrait-pulse 4s ease infinite}
@keyframes portrait-pulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.1;transform:scale(1.02)}}
.portrait-tag{position:absolute;bottom:-12px;right:-12px;background:var(--accent);color:#fff;padding:8px 18px;border-radius:100px;font-size:.78rem;font-weight:600;box-shadow:0 8px 24px var(--accent-glow)}

.about-bio{margin-bottom:48px}
.bio-large{font-size:clamp(1.15rem,1.5vw,1.35rem);color:var(--text-1);line-height:1.6;margin-bottom:24px}
.about-bio p{color:var(--text-2);font-size:.96rem;margin-bottom:16px;line-height:1.7}
.about-bio em{color:var(--accent);font-style:normal;font-weight:600}

.about-details{display:flex;flex-direction:column;border-top:1px solid var(--border);margin-bottom:40px}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--border);transition:all .3s}
.detail-row:hover{padding-left:8px}
.detail-label{font-size:.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.detail-value{font-size:.92rem;font-weight:500}
.detail-value.highlight{color:var(--accent)}

.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:1.5px solid var(--border);border-radius:100px;font-size:.9rem;font-weight:600;transition:all .3s;position:relative;overflow:hidden}
.btn-outline::before{content:'';position:absolute;inset:0;background:var(--accent-soft);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-expo)}
.btn-outline:hover::before{transform:scaleX(1);transform-origin:left}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-outline span,.btn-outline svg{position:relative;z-index:1}

/* Stats */
.stats-row{display:flex;justify-content:center;padding:clamp(48px,8vw,100px) clamp(20px,4vw,48px);border-top:1px solid var(--border)}
.stat-block{text-align:center;flex:1;max-width:250px}
.stat-num{font-family:var(--font-display);font-size:clamp(3rem,6vw,5rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat-suffix{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--accent)}
.stat-text{display:block;font-size:.82rem;color:var(--text-3);margin-top:8px;line-height:1.4}
.stat-divider{width:1px;background:var(--border);margin:0 clamp(16px,3vw,48px)}

/* ============================================
   EXPERTISE
   ============================================ */
.expertise-section{background:var(--bg-alt)}
.expertise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;border:1px solid var(--border);border-radius:16px;overflow:hidden}
.expertise-card{padding:clamp(28px,4vw,48px);background:var(--bg-card);transition:all .4s;position:relative;overflow:hidden}
.ec-glow{position:absolute;width:200px;height:200px;background:var(--accent);border-radius:50%;filter:blur(100px);opacity:0;transition:opacity .6s;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}
.expertise-card:hover .ec-glow{opacity:.06}
.expertise-card:hover{background:var(--bg-elevated)}

.ec-number{font-family:var(--font-display);font-size:3.5rem;font-weight:800;color:var(--accent);opacity:.1;line-height:1;margin-bottom:16px;transition:opacity .3s}
.expertise-card:hover .ec-number{opacity:.25}
.ec-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.ec-desc{color:var(--text-2);font-size:.9rem;line-height:1.6;margin-bottom:20px}
.ec-tools{display:flex;flex-wrap:wrap;gap:6px}
.ec-tools span{padding:5px 14px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:600;border-radius:100px;transition:all .3s}
.ec-tools span:hover{background:var(--accent);color:#fff}

/* ============================================
   EXPERIENCE
   ============================================ */
.exp-list{display:flex;flex-direction:column}
.exp-item{display:grid;grid-template-columns:200px 1fr auto;gap:32px;padding:36px 0;border-bottom:1px solid var(--border);align-items:start;transition:all .3s}
.exp-item:first-child{border-top:1px solid var(--border)}
.exp-item:hover{padding-left:12px;background:var(--bg-alt);margin:0 -24px;padding-right:24px;padding-left:36px;border-radius:12px}

.exp-period{font-size:.82rem;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding-top:4px;display:flex;align-items:center;gap:10px}
.exp-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;flex-shrink:0}
.exp-role{font-family:var(--font-display);font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.exp-company{font-size:.92rem;color:var(--accent);font-weight:500;display:block;margin-bottom:8px}
.exp-desc{color:var(--text-2);font-size:.9rem;line-height:1.6}
.exp-tags{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.exp-tags span{padding:4px 12px;background:var(--accent-soft);color:var(--accent);font-size:.72rem;font-weight:600;border-radius:100px}

/* ============================================
   CONTACT
   ============================================ */
.contact-section{background:var(--bg-alt)}
.contact-headline{font-family:var(--font-display);font-size:clamp(2.5rem,5.5vw,5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:64px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.contact-intro{font-size:1.05rem;color:var(--text-2);line-height:1.6;margin-bottom:36px}

.contact-links{display:flex;flex-direction:column;margin-bottom:36px}
.contact-link-item{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);transition:all .3s}
.contact-link-item:first-child{border-top:1px solid var(--border)}
.contact-link-item:hover{padding-left:8px}
.contact-link-item:hover svg{color:var(--accent)}
.cli-label{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;min-width:52px}
.cli-value{font-size:.95rem;font-weight:500;flex:1}
.contact-link-item svg{color:var(--text-3);transition:all .3s}

.contact-social{display:flex;gap:20px}
.cs-link{font-size:.88rem;color:var(--text-3);font-weight:500;transition:all .3s}
.cs-link:hover{color:var(--accent)}

/* Form */
.contact-form{display:flex;flex-direction:column}
.form-field{padding:24px 0;border-bottom:1px solid var(--border);position:relative}
.form-field:first-child{border-top:1px solid var(--border)}
.form-field label{display:block;font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-bottom:8px}
.form-field input,.form-field textarea{width:100%;background:transparent;border:none;outline:none;color:var(--text-1);font-family:var(--font-body);font-size:1.1rem;padding:4px 0;line-height:1.5}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--text-3)}
.form-field textarea{resize:vertical;min-height:100px}
.field-line{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent);transition:width .5s var(--ease-expo)}
.form-field:focus-within .field-line{width:100%}

.form-submit{display:inline-flex;align-items:center;gap:12px;margin-top:32px;padding:16px 32px;background:var(--text-1);color:var(--bg);font-size:.9rem;font-weight:600;border-radius:100px;transition:all .3s;position:relative;overflow:hidden;align-self:flex-start}
.form-submit::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);transition:transform .4s var(--ease-expo)}
.form-submit:hover::before{transform:translateX(0)}
.form-submit span,.fs-icon{position:relative;z-index:1}
.form-submit:hover{color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px var(--accent-glow)}

/* ============================================
   FOOTER
   ============================================ */
.footer{padding:48px 0;border-top:1px solid var(--border)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-logo{font-family:var(--font-display);font-size:1.2rem;font-weight:800;margin-bottom:6px;display:block}
.footer-left p,.footer-right p{font-size:.82rem;color:var(--text-3)}
.footer-right{text-align:right}
.footer-center{text-align:center}
.back-to-top{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-3);font-weight:600;transition:color .3s}
.back-to-top:hover{color:var(--accent)}
.back-to-top svg{transition:transform .3s}
.back-to-top:hover svg{transform:translateY(-4px)}

/* ============================================
   CASE STUDY
   ============================================ */
.cs-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:10001;background:var(--border)}
.cs-progress-fill{height:100%;width:0;background:var(--accent);transition:width .1s}

.cs-hero-section{padding:140px 0 0;overflow:hidden}
.cs-hero-text{text-align:center;margin-bottom:48px;position:relative;z-index:2}
.cs-hero-meta{display:flex;justify-content:center;align-items:center;gap:12px;font-size:.82rem;color:var(--text-3);font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin-bottom:24px}
.meta-sep{opacity:.3}
.cs-hero-title{font-family:var(--font-display);font-size:clamp(3.5rem,10vw,9rem);font-weight:800;line-height:.92;letter-spacing:-.05em;margin-bottom:24px}
.cs-hero-subtitle{font-size:clamp(1.1rem,1.5vw,1.35rem);color:var(--text-2);max-width:500px;margin:0 auto}

/* CS Hero Banner Background */
.cs-hero-with-banner{position:relative}
.cs-hero-banner-bg{position:absolute;top:0;left:0;width:100%;height:70%;overflow:hidden;z-index:0}
.cs-banner-bg-img{width:100%;height:100%;object-fit:cover;filter:blur(2px);transform:scale(1.05)}
.cs-banner-overlay{position:absolute;inset:0;background:var(--bg);opacity:.78}
[data-theme="light"] .cs-banner-overlay{opacity:.85}
.cs-banner-grain{position:absolute;inset:0;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)' opacity='0.03'/%3E%3C/svg%3E");background-repeat:repeat;background-size:128px;opacity:.5;pointer-events:none}

/* CS Hero Image — Full Width */
.cs-hero-image{width:100%;overflow:hidden;position:relative;z-index:2}
.cs-hero-img-wrapper{position:relative;width:100%;max-height:70vh;overflow:hidden}
.cs-hero-img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-expo)}
.cs-hero-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,var(--bg) 100%)}

/* CS Win Card */
.cs-win-section{padding:clamp(40px,6vw,80px) 0}
.cs-win-card{display:flex;gap:24px;padding:clamp(24px,4vw,40px);background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px}
.csw-icon{color:var(--accent);flex-shrink:0;padding-top:2px}
.csw-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);font-weight:700;margin-bottom:6px;display:block;font-family:var(--font-mono)}
.csw-text{color:var(--text-2);font-size:1rem;line-height:1.7}
.csw-text strong{color:var(--text-1)}

/* CS Meta */
.cs-meta-section{padding:0 0 clamp(40px,6vw,80px)}
.cs-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cs-meta-item{padding:24px;background:var(--bg-card);display:flex;flex-direction:column;gap:6px}
.csm-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);font-weight:600;font-family:var(--font-mono)}
.csm-value{font-size:.95rem;font-weight:600}

/* CS Blocks */
.cs-block{padding:clamp(64px,10vw,120px) 0}
.cs-block-alt{background:var(--bg-alt)}

.cs-two-col{display:grid;grid-template-columns:1fr 2fr;gap:clamp(32px,5vw,80px);align-items:start}
.cs-col-label{position:sticky;top:100px}
.center-label{text-align:center;margin-bottom:48px;position:static}

.cs-block-num{font-family:var(--font-display);font-size:clamp(3rem,5vw,5rem);font-weight:800;color:var(--accent);opacity:.1;line-height:1;display:block;margin-bottom:12px}
.cs-block-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}

.cs-quote{font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.45rem);font-weight:500;line-height:1.5;padding-left:24px;border-left:3px solid var(--accent);margin-bottom:40px}
.cs-quote strong{color:var(--accent)}

.cs-text-block{margin-bottom:32px}
.cs-text-block h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:10px}
.cs-text-block p{color:var(--text-2);font-size:.95rem;line-height:1.7}
.cs-text-block em{color:var(--accent);font-style:normal;font-weight:600}

/* CS Full-Width Images */
.cs-full-image{width:100%;overflow:hidden;margin:clamp(32px,5vw,64px) 0}
.cs-fi-wrapper{width:100%;max-height:60vh;overflow:hidden;position:relative}
.cs-fi-img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-expo)}
.cs-full-image:hover .cs-fi-img{transform:scale(1.03)}
.cs-fi-caption{margin-top:16px}
.cs-fi-caption span{font-size:.85rem;color:var(--text-3);font-style:italic}

/* Challenge Cards */
.cs-challenge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cs-challenge-card{padding:clamp(24px,3vw,36px);background:var(--bg-card);transition:all .3s}
.cs-challenge-card:hover{background:var(--bg-elevated)}
.ccc-icon{color:var(--accent);margin-bottom:16px}
.cs-challenge-card h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.cs-challenge-card p{color:var(--text-2);font-size:.88rem;line-height:1.6}

/* Metrics */
.cs-metric-stack{display:flex;flex-direction:column;gap:20px}
.cs-metric{display:flex;gap:20px;padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;transition:all .3s}
.cs-metric:hover{border-color:var(--accent);transform:translateX(6px)}
.csm-icon-wrap{width:48px;height:48px;background:var(--accent-soft);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.csm-body h4{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:6px}
.csm-body p{color:var(--text-2);font-size:.88rem;line-height:1.6;margin-bottom:10px}
.csm-tag{display:inline-block;padding:5px 14px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;font-weight:600;border-radius:100px}

/* Process */
.cs-process-list{display:flex;flex-direction:column}
.cs-process-item{display:flex;gap:24px;padding:32px 0;border-bottom:1px solid var(--border);transition:all .3s}
.cs-process-item:first-child{border-top:1px solid var(--border)}
.cs-process-item:hover{padding-left:8px}
.cspi-num{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--accent);min-width:28px;padding-top:3px}
.cspi-body h4{font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:8px}
.cspi-body p{color:var(--text-2);font-size:.9rem;line-height:1.6}

/* CS Solution Frames — Image Based */
.cs-solution-frame{margin-bottom:clamp(48px,8vw,100px)}
.csf-header{margin-bottom:32px;max-width:600px}
.csf-tag{display:inline-block;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.8rem);font-weight:700;margin-bottom:10px}
.csf-caption{color:var(--text-2);font-size:1rem;line-height:1.7}

.csf-image{width:100%;overflow:hidden;border-radius:16px;margin:0 clamp(20px,4vw,48px)}
.csf-img-wrapper{position:relative;width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--border)}
.csf-img{width:100%;display:block;transition:transform 1s var(--ease-expo)}
.csf-image:hover .csf-img{transform:scale(1.03)}

/* Tech Card */
.cs-tech-card{padding:clamp(28px,4vw,48px);background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:12px}
.cs-tech-card h3{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:12px}
.cs-tech-card>p{color:var(--text-2);font-size:.98rem;line-height:1.7;margin-bottom:28px}
.cs-tech-list{display:flex;flex-direction:column;gap:14px}
.cs-tech-list li{display:flex;align-items:flex-start;gap:12px;font-size:.92rem;color:var(--text-2)}
.cs-tech-list svg{color:var(--accent);flex-shrink:0;margin-top:2px}

/* CS Next */
.cs-next{padding:clamp(80px,14vw,180px) 0;text-align:center;background:var(--bg-alt)}
.cs-next-label{font-size:.82rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:20px;display:block}
.cs-next-title{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:40px}
.cs-next-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn-solid{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:var(--text-1);color:var(--bg);font-size:.9rem;font-weight:600;border-radius:100px;transition:all .3s;position:relative;overflow:hidden}
.btn-solid::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);transition:transform .4s var(--ease-expo)}
.btn-solid:hover::before{transform:translateX(0)}
.btn-solid span,.btn-solid svg{position:relative;z-index:1}
.btn-solid:hover{color:#fff;transform:translateY(-3px);box-shadow:0 12px 32px var(--accent-glow)}

/* ============================================
   HERO PROFILE BADGE (Right Side)
   ============================================ */
.hero-profile-badge{position:absolute;right:clamp(20px,6vw,80px);top:50%;transform:translateY(-50%);z-index:3}
.hpb-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px 24px;text-align:center;min-width:180px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,0.15);transition:all .4s var(--ease-expo)}
.hpb-card:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(0,0,0,0.2);border-color:var(--accent-glow)}
.hpb-avatar{width:72px;height:72px;border-radius:50%;background:var(--bg-alt);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:border-color .3s}
.hpb-card:hover .hpb-avatar{border-color:var(--accent)}
.hpb-initials{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--text-2);letter-spacing:.02em}
.hpb-info{margin-bottom:14px}
.hpb-name{display:block;font-family:var(--font-display);font-size:.95rem;font-weight:700;margin-bottom:4px}
.hpb-role{display:block;font-size:.78rem;color:var(--text-2);line-height:1.5}
.hpb-location{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;color:var(--accent);font-weight:500}
.hpb-location svg{color:var(--accent)}

/* ============================================
   PAGE HERO (Projects & Blog Pages)
   ============================================ */
.page-hero{padding:clamp(140px,18vw,200px) 0 clamp(40px,6vw,80px)}
.page-hero-inner{max-width:700px}
.page-hero-title{font-family:var(--font-display);font-size:clamp(3rem,8vw,7rem);font-weight:800;line-height:.92;letter-spacing:-.05em;margin-bottom:24px}
.page-hero-desc{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--text-2);line-height:1.7;max-width:560px}

/* ============================================
   PROJECTS PAGE — Filter & Grid
   ============================================ */
.projects-filter{padding:0 0 clamp(32px,5vw,64px)}
.filter-tags{display:flex;flex-wrap:wrap;gap:8px}
.filter-tag{padding:8px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:100px;font-size:.82rem;font-weight:600;color:var(--text-2);transition:all .3s;cursor:pointer}
.filter-tag:hover{border-color:var(--accent);color:var(--accent)}
.filter-tag.active{background:var(--accent);border-color:var(--accent);color:#fff}

.projects-grid-section{padding:0 0 clamp(80px,12vw,160px)}
.projects-grid-all{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}

.project-grid-card{display:flex;flex-direction:column;border:1px solid var(--border);overflow:hidden;transition:all .5s var(--ease-expo);background:var(--bg-card)}
.project-grid-card:hover{background:var(--bg-elevated);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.1)}
.project-grid-card.hidden{display:none}

.pgc-media{aspect-ratio:4/3;overflow:hidden;position:relative}
.pgc-img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-expo)}
.pgc-overlay{position:absolute;inset:0;background:var(--img-overlay);transition:opacity .5s}
.project-grid-card:hover .pgc-img{transform:scale(1.06)}
.project-grid-card:hover .pgc-overlay{opacity:.5}

.pgc-info{padding:clamp(20px,2.5vw,32px);flex:1;display:flex;flex-direction:column}
.pgc-meta{font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:500;margin-bottom:10px;display:block}
.pgc-title{font-family:var(--font-display);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pgc-desc{font-size:.88rem;color:var(--text-2);line-height:1.5;margin-bottom:16px;flex:1}
.pgc-arrow{width:32px;height:32px;border:1.5px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);transition:all .3s;align-self:flex-start}
.project-grid-card:hover .pgc-arrow{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* ============================================
   BLOG PAGE
   ============================================ */
.blog-featured{padding:0 0 clamp(48px,6vw,80px)}
.blog-featured-card{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .5s var(--ease-expo);background:var(--bg-card)}
.blog-featured-card:hover{background:var(--bg-elevated);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.1)}

.bfc-media{position:relative;overflow:hidden;min-height:360px}
.bfc-img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-expo)}
.blog-featured-card:hover .bfc-img{transform:scale(1.06)}
.bfc-overlay{position:absolute;inset:0;background:var(--img-overlay);transition:opacity .5s}
.bfc-badge{position:absolute;top:20px;left:20px;padding:6px 16px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;border-radius:100px;text-transform:uppercase;letter-spacing:.1em}

.bfc-content{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.bfc-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:var(--text-3);font-weight:500;margin-bottom:16px;flex-wrap:wrap}
.bfc-category{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.bfc-title{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.bfc-excerpt{color:var(--text-2);font-size:.95rem;line-height:1.6;margin-bottom:24px}
.bfc-arrow-row{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:var(--accent);transition:gap .3s}
.blog-featured-card:hover .bfc-arrow-row{gap:16px}

/* Blog Grid */
.blog-grid-section{padding:0 0 clamp(80px,12vw,160px)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-grid-3{grid-template-columns:repeat(3,1fr)}

.blog-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .5s var(--ease-expo);background:var(--bg-card)}
.blog-card:hover{background:var(--bg-elevated);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.08)}

.bc-media{aspect-ratio:16/10;overflow:hidden;position:relative}
.bc-img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-expo)}
.bc-overlay{position:absolute;inset:0;background:var(--img-overlay);transition:opacity .5s}
.blog-card:hover .bc-img{transform:scale(1.05)}

.bc-content{padding:clamp(18px,2.5vw,28px);flex:1;display:flex;flex-direction:column}
.bc-meta{display:flex;align-items:center;gap:12px;font-size:.72rem;color:var(--text-3);font-weight:500;margin-bottom:10px}
.bc-category{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.bc-title{font-family:var(--font-display);font-size:clamp(1rem,1.4vw,1.2rem);font-weight:700;letter-spacing:-.01em;line-height:1.3;margin-bottom:8px}
.bc-excerpt{color:var(--text-2);font-size:.85rem;line-height:1.5;margin-bottom:14px;flex:1}
.bc-read{font-size:.75rem;color:var(--text-3);font-weight:500}

/* ============================================
   BLOG DETAIL PAGE
   ============================================ */
.blog-detail-hero{position:relative;padding:clamp(140px,18vw,200px) 0 clamp(48px,6vw,80px);overflow:hidden}
.blog-hero-banner{position:absolute;top:0;left:0;width:100%;height:60%;overflow:hidden;z-index:0}
.blog-banner-img{width:100%;height:100%;object-fit:cover;filter:blur(3px);transform:scale(1.05)}
.blog-banner-overlay{position:absolute;inset:0;background:var(--bg);opacity:.8}
[data-theme="light"] .blog-banner-overlay{opacity:.88}

.blog-detail-header{position:relative;z-index:2}
.bdh-meta{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--text-3);font-weight:500;margin-bottom:24px;flex-wrap:wrap}
.bdh-category{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.bdh-sep{opacity:.3}
.bdh-title{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4rem);font-weight:800;line-height:1.05;letter-spacing:-.04em;margin-bottom:32px}

.bdh-author{display:flex;align-items:center;gap:14px}
.bdh-author-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center}
.bdh-author-avatar span{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--accent)}
.bdh-author-name{display:block;font-size:.92rem;font-weight:600}
.bdh-author-role{display:block;font-size:.78rem;color:var(--text-3)}

/* Blog Body */
.blog-detail-content{padding:0 0 clamp(48px,6vw,80px)}
.blog-body{font-size:1.05rem;line-height:1.8;color:var(--text-2)}
.blog-body h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:700;color:var(--text-1);margin:clamp(36px,5vw,56px) 0 16px;letter-spacing:-.02em}
.blog-body h3{font-family:var(--font-display);font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:700;color:var(--text-1);margin:32px 0 12px}
.blog-body p{margin-bottom:20px}
.blog-body strong{color:var(--text-1);font-weight:600}
.blog-body em{color:var(--accent);font-style:italic}
.blog-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.blog-body a:hover{opacity:.8}

.blog-body ul,.blog-body ol{padding-left:24px;margin-bottom:24px}
.blog-body ul{list-style:disc}
.blog-body ol{list-style:decimal}
.blog-body li{margin-bottom:10px;padding-left:4px}

.blog-body blockquote{margin:clamp(24px,4vw,48px) 0;padding:24px 28px;border-left:4px solid var(--accent);background:var(--bg-card);border-radius:0 12px 12px 0}
.blog-body blockquote p{margin-bottom:0;font-family:var(--font-display);font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:500;color:var(--text-1);line-height:1.6}

.blog-lead{font-size:clamp(1.15rem,1.5vw,1.35rem)!important;color:var(--text-1)!important;line-height:1.7!important;margin-bottom:32px!important}

.blog-figure{margin:clamp(24px,4vw,48px) 0;border-radius:12px;overflow:hidden}
.blog-figure img{width:100%;border-radius:12px;border:1px solid var(--border)}
.blog-figure figcaption{margin-top:12px;font-size:.82rem;color:var(--text-3);font-style:italic;text-align:center}

.blog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--border)}
.blog-tag{padding:6px 16px;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:600;border-radius:100px;transition:all .3s}
.blog-tag:hover{background:var(--accent);color:#fff}

/* Blog Detail Footer */
.blog-detail-footer{padding:0 0 clamp(48px,6vw,80px)}

.bdf-share{display:flex;align-items:center;gap:20px;padding-bottom:32px;border-bottom:1px solid var(--border);margin-bottom:32px}
.bdf-share-label{font-size:.82rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.bdf-share-links{display:flex;gap:10px}
.bdf-share-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:.9rem;transition:all .3s}
.bdf-share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.bdf-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.bdf-nav-link{padding:24px;border:1px solid var(--border);border-radius:12px;transition:all .3s;display:flex;flex-direction:column;gap:8px}
.bdf-nav-link:hover{border-color:var(--accent);background:var(--bg-card)}
.bdf-nav-link.next{text-align:right}
.bdf-nav-label{font-size:.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600;display:flex;align-items:center;gap:6px}
.bdf-nav-link.next .bdf-nav-label{justify-content:flex-end}
.bdf-nav-title{font-family:var(--font-display);font-size:1rem;font-weight:700;line-height:1.3}

/* Blog More */
.blog-more{padding:clamp(48px,8vw,100px) 0;background:var(--bg-alt)}
.blog-more-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin-bottom:32px}

/* ============================================
   ANIMATIONS
   ============================================ */
.anim-reveal{opacity:0;transform:translateY(40px);transition:all 1s var(--ease-expo);transition-delay:var(--delay,0s)}
.anim-reveal.revealed{opacity:1;transform:translateY(0)}

.anim-reveal-title .title-word{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease-expo);transition-delay:var(--delay,0s)}
.anim-reveal-title.revealed .title-word{transform:translateY(0)}

/* Stagger children */
.anim-reveal.stagger-children > *{opacity:0;transform:translateY(20px);transition:all .6s var(--ease-expo)}
.anim-reveal.stagger-children.revealed > *{opacity:1;transform:translateY(0)}
.anim-reveal.stagger-children.revealed > *:nth-child(1){transition-delay:.05s}
.anim-reveal.stagger-children.revealed > *:nth-child(2){transition-delay:.1s}
.anim-reveal.stagger-children.revealed > *:nth-child(3){transition-delay:.15s}
.anim-reveal.stagger-children.revealed > *:nth-child(4){transition-delay:.2s}

/* ============================================
   FLOATING BUTTONS (WhatsApp + Calendly)
   ============================================ */
.float-btns{position:fixed;bottom:28px;right:28px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:14px}

.float-btn{display:flex;align-items:center;gap:12px;border-radius:100px;transition:all .4s var(--ease-expo);position:relative;text-decoration:none}

/* WhatsApp Button */
.whatsapp-btn{width:60px;height:60px;background:#25D366;color:#fff;font-size:1.6rem;justify-content:center;border-radius:50%;box-shadow:0 8px 28px rgba(37,211,102,0.35)}
.whatsapp-btn:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 14px 40px rgba(37,211,102,0.45)}
.float-btn-pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;animation:float-pulse 2.5s ease infinite;pointer-events:none}
@keyframes float-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}

/* Calendly Button */
.calendly-btn{padding:14px 24px;background:var(--accent);color:#fff;font-size:.88rem;font-weight:600;box-shadow:0 8px 28px var(--accent-glow);overflow:hidden}
.calendly-btn i{font-size:1.1rem;flex-shrink:0}
.calendly-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 40px var(--accent-glow)}
.float-btn-label{white-space:nowrap;font-size:.85rem;font-weight:600;letter-spacing:.01em}

@media(max-width:768px){
    .float-btns{bottom:20px;right:16px;gap:10px}
    .whatsapp-btn{width:52px;height:52px;font-size:1.4rem}
    .calendly-btn{padding:12px 18px;font-size:.8rem}
    .float-btn-label{display:none}
    .calendly-btn{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
}

/* ============================================
   CERTIFICATIONS SECTION
   ============================================ */
.certifications-section{background:var(--bg-alt);padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(80px,12vw,140px)}

.cert-intro{font-size:1.02rem;color:var(--text-2);line-height:1.6;margin-bottom:clamp(36px,5vw,56px);max-width:560px}

.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.cert-card{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all .5s var(--ease-expo);position:relative}
.cert-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 20px 60px rgba(108,99,255,0.12)}
.cert-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)}
.cert-card:hover::before{transform:scaleX(1)}

.cert-card-inner{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;height:100%;position:relative}

.cert-logo-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cert-logo{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--bg-alt);border-radius:14px;border:1px solid var(--border);transition:all .3s}
.cert-card:hover .cert-logo{border-color:var(--accent-glow)}
.cert-logo.ibm{color:var(--text-1)}
.cert-logo.credly{background:rgba(255,107,43,0.06);border-color:rgba(255,107,43,0.15)}

.cert-verify-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;background:rgba(74,222,128,0.08);border:1px solid rgba(74,222,128,0.2);border-radius:100px;color:#4ADE80;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cert-verify-badge.credly-badge{background:rgba(255,107,43,0.08);border-color:rgba(255,107,43,0.2);color:#FF6B2B}

.cert-info{flex:1}
.cert-issuer{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);font-weight:700;font-family:var(--font-mono);margin-bottom:8px}
.cert-issuer.credly-issuer{color:#FF6B2B}
.cert-title{font-family:var(--font-display);font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.01em;margin-bottom:10px;line-height:1.3}
.cert-desc{color:var(--text-2);font-size:.88rem;line-height:1.6;margin-bottom:18px}

.cert-meta-row{display:flex;align-items:center;gap:16px;font-size:.78rem;color:var(--text-3);font-weight:500}
.cert-platform{display:flex;align-items:center;gap:5px}
.cert-platform.credly-platform{color:#FF6B2B}
.cert-year{font-family:var(--font-mono);font-size:.72rem}

.cert-arrow{position:absolute;top:clamp(24px,3vw,36px);right:clamp(24px,3vw,36px);width:36px;height:36px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-3);transition:all .4s var(--ease-expo);opacity:0;transform:translateY(6px)}
.cert-card:hover .cert-arrow{opacity:1;transform:translateY(0);border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* Credly Specific */
.cert-card-credly{border-color:rgba(255,107,43,0.12)}
.cert-card-credly:hover{border-color:#FF6B2B;box-shadow:0 20px 60px rgba(255,107,43,0.12)}
.cert-card-credly::before{background:linear-gradient(90deg,#FF6B2B,#FF9A5C)}

/* Responsive */
@media(max-width:1024px){
    .cert-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
    .cert-grid{grid-template-columns:1fr}
    .cert-card{max-width:100%}
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px){
    .nav-desktop{display:none}
    .menu-trigger{display:flex}
    .project-block{grid-template-columns:1fr;min-height:auto}
    .project-media{min-height:50vh}
    .about-layout{grid-template-columns:1fr;gap:40px}
    .about-headline{position:static!important}
    .about-portrait{margin-bottom:32px}
    .expertise-grid{grid-template-columns:1fr}
    .exp-item{grid-template-columns:1fr;gap:12px}
    .exp-tags{padding-top:12px}
    .contact-grid{grid-template-columns:1fr}
    .cs-two-col{grid-template-columns:1fr;gap:32px}
    .cs-col-label{position:static!important}
    .cs-meta-grid{grid-template-columns:repeat(2,1fr)}
    .cs-challenge-grid{grid-template-columns:1fr}
    .section-headline-wrap{flex-direction:column;align-items:flex-start}
    .section-sub{text-align:left}
    .projects-grid-all{grid-template-columns:repeat(2,1fr)}
    .blog-featured-card{grid-template-columns:1fr}
    .bfc-media{min-height:280px}
    .blog-grid{grid-template-columns:repeat(2,1fr)}
    .blog-grid-3{grid-template-columns:repeat(2,1fr)}
    .hero-profile-badge{position:absolute;right:20px;top:auto;bottom:clamp(80px,14vw,200px);transform:none}
}

@media(max-width:768px){
    .projects-duo{grid-template-columns:1fr}
    .hero-bottom{flex-direction:column;gap:32px}
    .hero-cta-group{width:100%}
    .hero-cta-group .btn-primary,.hero-cta-group .btn-ghost{flex:1;justify-content:center}
    .hero-scroll-indicator{display:none}
    .hero-floating-badge{display:none}
    .hero-profile-badge{display:none}
    .stats-row{flex-wrap:wrap;gap:32px}
    .stat-divider{display:none}
    .stat-block{min-width:40%}
    .btn-download .bd-text{display:none}
    .btn-download{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%}
    .cs-meta-grid{grid-template-columns:1fr 1fr}
    .cs-win-card{flex-direction:column}
    .cs-metric{flex-direction:column}
    .csf-image{margin:0;border-radius:0}
    .csf-img-wrapper{border-radius:0}
    .footer-inner{flex-direction:column;gap:20px;text-align:center}
    .footer-right{text-align:center}
    .exp-item:hover{margin:0;padding-left:0;padding-right:0;border-radius:0}
    .projects-grid-all{grid-template-columns:1fr 1fr}
    .blog-grid{grid-template-columns:1fr}
    .blog-grid-3{grid-template-columns:1fr}
    .bdf-nav{grid-template-columns:1fr}
    .bdf-nav-link.next{text-align:left}
    .bdf-nav-link.next .bdf-nav-label{justify-content:flex-start}
    .bdf-share{flex-direction:column;align-items:flex-start;gap:12px}
}

@media(max-width:480px){
    .hero-title{font-size:clamp(2.6rem,12vw,3.8rem)}
    .cs-hero-title{font-size:clamp(2.6rem,12vw,3.8rem)}
    .cs-meta-grid{grid-template-columns:1fr}
    .hero-cta-group{flex-direction:column}
    .projects-grid-all{grid-template-columns:1fr}
    .page-hero-title{font-size:clamp(2.6rem,12vw,4rem)}
    .bdh-title{font-size:clamp(1.8rem,6vw,2.5rem)}
}