/* ================================================================
   MAIN.CSS v2.0 — KISHAN KANANI — FULL REDESIGN
   Bricolage Grotesque + DM Sans
   Obsidian Black · Deep Violet · Electric Mint
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,700;12..96,800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root{
  /* Backgrounds */
  --bg-void:    #020205;
  --bg-base:    #080810;
  --bg-surface: #0E0E1A;
  --bg-raised:  #141425;
  --bg-float:   #1C1C32;

  /* Accent palette */
  --violet:     #7C3AED;
  --violet-lt:  #A78BFA;
  --violet-dim: rgba(124,58,237,.15);
  --mint:       #00E5C3;
  --mint-dim:   rgba(0,229,195,.12);
  --gold:       #F4C542;
  --gold-dim:   rgba(244,197,66,.1);
  --red-acc:    #FF4D6D;

  /* Text */
  --text-1: #FAFAFA;
  --text-2: #A1A1C0;
  --text-3: #5C5C80;
  --text-4: #333350;

  /* Glass */
  --glass:        rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.07);
  --glass-hover:  rgba(255,255,255,0.06);

  /* Gradients */
  --grad-violet:  linear-gradient(135deg,#7C3AED,#4F46E5);
  --grad-mint:    linear-gradient(135deg,#00E5C3,#0EA5E9);
  --grad-glow:    linear-gradient(135deg,#A78BFA,#00E5C3);
  --grad-title:   linear-gradient(135deg,#FAFAFA 40%,#A78BFA);
  --grad-warm:    linear-gradient(135deg,#F4C542,#FF4D6D);

  /* Spacing */
  --section-py: clamp(100px,12vw,160px);
  --page-px:    clamp(24px,6vw,96px);

  /* Radius */
  --r-xs:  6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-2xl:60px;

  /* Easing */
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --ease-in:   cubic-bezier(0.4,0,1,1);
  --t:         0.45s;
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg-void);
  color:var(--text-1);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:none}

/* ── CURSOR ─────────────────────────────────────────────────── */
#cursor-dot{
  position:fixed;z-index:9999;pointer-events:none;
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:opacity .3s;
}
#cursor-ring{
  position:fixed;z-index:9998;pointer-events:none;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(167,139,250,.4);
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease),height .4s var(--ease),
             border-color .2s,opacity .3s;
}
body.cursor-hover #cursor-ring{width:56px;height:56px;border-color:var(--violet-lt)}

/* ── SCROLL PROGRESS ────────────────────────────────────────── */
#scroll-progress{
  position:fixed;top:0;left:0;height:1px;width:0%;
  background:var(--grad-glow);z-index:10000;
}

/* ── PRELOADER ──────────────────────────────────────────────── */
#preloader{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg-void);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:20px;
}
.preloader-logo{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(32px,5vw,56px);font-weight:800;
  letter-spacing:-2px;color:var(--text-1);
  opacity:0;transform:translateY(24px);
}
.preloader-logo em{
  font-style:normal;
  background:var(--grad-glow);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.preloader-line{
  width:120px;height:1px;background:var(--glass-border);
  position:relative;overflow:hidden;
}
.preloader-line::after{
  content:'';position:absolute;inset:0;background:var(--grad-glow);
  transform:translateX(-100%);
  animation:preload-swipe 1.8s var(--ease) forwards .2s;
}
@keyframes preload-swipe{to{transform:translateX(0)}}
.preloader-sub{
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  color:var(--text-3);opacity:0;margin-top:4px;
}

/* ── NAV ────────────────────────────────────────────────────── */
#nav{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:1000;width:calc(100% - var(--page-px));max-width:1300px;
  padding:14px 24px;border-radius:999px;
  background:rgba(8,8,16,.6);backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  transition:background var(--t) var(--ease),border-color var(--t);
}
#nav.scrolled{background:rgba(8,8,16,.9);border-color:rgba(255,255,255,.1)}
.nav-logo{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:16px;font-weight:800;letter-spacing:-.3px;
  color:var(--text-1);
}
.nav-logo span{color:var(--violet-lt)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  font-size:13px;font-weight:500;color:var(--text-2);
  letter-spacing:.2px;
  transition:color .2s;
  position:relative;
}
.nav-links a:hover{color:var(--text-1)}
.nav-cta,
.nav-links a.nav-cta{
  font-size:13px;font-weight:600;
  padding:9px 22px;border-radius:999px;
  background:var(--grad-violet);
  color:#fff !important;border:none;
  transition:opacity .25s,transform .3s var(--ease);
  letter-spacing:.2px;
}
.nav-cta:hover,.nav-links a.nav-cta:hover{opacity:.85;transform:scale(1.04)}
.nav-hamburger{
  display:none;flex-direction:column;gap:4.5px;
  background:none;border:none;padding:4px;
}
.nav-hamburger span{
  width:20px;height:1.5px;background:var(--text-2);
  display:block;transition:var(--t);
}

/* ── MOBILE NAV ─────────────────────────────────────────────── */
#mobile-nav{
  position:fixed;inset:0;z-index:9999;
  background:rgba(2,2,5,.97);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;opacity:0;pointer-events:none;transition:opacity .4s;
}
#mobile-nav.open{opacity:1;pointer-events:all}
#mobile-nav a{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(32px,7vw,52px);font-weight:800;
  color:var(--text-3);letter-spacing:-1px;
  transition:color .2s;
}
#mobile-nav a:hover{color:var(--text-1)}
.mobile-close{
  position:absolute;top:20px;right:20px;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  font-size:24px;color:#fff;cursor:pointer;
  transition:background 0.3s;
}
.mobile-close:hover{background:rgba(255,255,255,0.1)}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 36px;border-radius:999px;
  font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:600;
  border:none;transition:transform .4s var(--ease),box-shadow .4s,opacity .3s;
  position:relative;overflow:hidden;
  letter-spacing:.2px;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .5s;
}
.btn:hover::after{transform:translateX(100%)}
.btn-primary{background:var(--grad-glow);color:#000;font-weight:700}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 50px rgba(0,229,195,.2)}
.btn-ghost{
  background:transparent;color:var(--text-1);
  border:1px solid var(--glass-border);
}
.btn-ghost:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);background:var(--glass-hover)}

/* Ripple */
.btn .ripple{
  position:absolute;border-radius:50%;
  width:8px;height:8px;
  background:rgba(255,255,255,.3);
  transform:scale(0);pointer-events:none;
  animation:ripple-out .6s linear;
}
@keyframes ripple-out{to{transform:scale(5);opacity:0}}

/* ── CONTAINERS & LAYOUT ────────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;width:100%;padding:0 var(--page-px)}
.section{padding:var(--section-py) 0}

/* ── SECTION LABELS ─────────────────────────────────────────── */
.label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:600;letter-spacing:5px;
  text-transform:uppercase;color:var(--violet-lt);
  margin-bottom:20px;
}
.label::before{
  content:'';display:block;width:20px;height:1px;
  background:var(--violet-lt);
}
.section-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(40px,6vw,76px);
  font-weight:800;line-height:1.0;
  letter-spacing:-2.5px;
  color:var(--text-1);
  margin-bottom:20px;
}
.section-sub{
  font-size:clamp(15px,1.8vw,18px);
  color:var(--text-2);line-height:1.8;
  max-width:520px;font-weight:400;
}
.text-grad{
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.text-violet{
  background:var(--grad-violet);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── HERO 2.0 ───────────────────────────────────────────────── */
#hero{
  min-height:100svh;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--page-px) 80px;
}
#hero-canvas{position:absolute;inset:0;z-index:0;opacity:.6}

/* Ambient glow blobs */
.hero-blob{position:absolute;pointer-events:none;z-index:0}
.hero-blob-1{
  top:-15%;right:-10%;
  width:clamp(400px,60vw,900px);height:clamp(400px,60vw,900px);
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(124,58,237,.22),transparent 65%);
  animation:blob-drift 18s ease-in-out infinite;
}
.hero-blob-2{
  bottom:-20%;left:-15%;
  width:clamp(300px,50vw,700px);height:clamp(300px,50vw,700px);
  border-radius:50%;
  background:radial-gradient(circle at 60% 60%,rgba(0,229,195,.1),transparent 65%);
  animation:blob-drift 22s ease-in-out infinite reverse;
}
@keyframes blob-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-30px) scale(1.05)}
  66%{transform:translate(-20px,40px) scale(.97)}
}

/* Hero top strip */
.hero-strip{
  position:absolute;top:0;left:0;right:0;
  padding:calc(20px + 70px) var(--page-px) 0;
  display:flex;align-items:center;justify-content:space-between;
  z-index:3;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-3);
}
.hero-strip-right{display:flex;align-items:center;gap:20px}
.hero-avail{
  display:flex;align-items:center;gap:8px;
  color:var(--mint);font-size:11px;font-weight:600;
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(0,229,195,.25);
  background:rgba(0,229,195,.07);
  letter-spacing:2px;text-transform:uppercase;
}
.hero-avail-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 8px var(--mint);
  animation:dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* Hero main text — CSS animated (not JS-dependent) */
.hero-content{position:relative;z-index:2}
.hero-eyebrow{
  font-size:clamp(12px,1.5vw,15px);
  font-weight:500;color:var(--text-3);
  letter-spacing:4px;text-transform:uppercase;
  margin-bottom:20px;
  animation:fade-up .9s var(--ease) .3s both;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
.hero-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(72px,13vw,200px);
  font-weight:800;
  line-height:.9;
  letter-spacing:-5px;
  color:var(--text-1);
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  animation:fade-up 1s var(--ease) .55s both;
}
.hero-name .outline{
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero-meta{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:28px;gap:20px;flex-wrap:wrap;
  animation:fade-up .9s var(--ease) .8s both;
}
.hero-role{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(18px,3vw,42px);
  font-weight:700;letter-spacing:-1px;
  color:var(--text-2);line-height:1.1;
}
.hero-role .highlight{
  color:var(--text-1);background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-right{
  display:flex;flex-direction:column;gap:20px;
  align-items:flex-end;
}
.hero-desc{
  font-size:15px;color:var(--text-2);line-height:1.7;
  max-width:340px;text-align:right;
}
.hero-ctas{display:flex;gap:12px;align-items:center}

/* Scroll indicator */
.hero-scroll-wrap{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  z-index:3;
  animation:fade-up .8s var(--ease) 1.2s both;
}
.hero-scroll-line{
  width:1px;height:56px;
  background:linear-gradient(to bottom,var(--violet-lt),transparent);
  animation:scroll-grow 2.5s ease-in-out infinite;
}
.hero-scroll-text{
  font-size:9px;letter-spacing:4px;text-transform:uppercase;
  color:var(--text-3);writing-mode:vertical-lr;
}
@keyframes scroll-grow{0%{scaleY:0;opacity:0}50%{opacity:1}100%{scaleY:1;opacity:0}}

/* ── HERO NAME — letter-level hover magic ───────────────────── */
/* Each .hl span is an individual character */
.hero-word{display:inline-block;position:relative}
.hl{
  display:inline-block;
  transition:
    transform   .35s cubic-bezier(0.34,1.56,0.64,1),
    color        .3s ease,
    text-shadow  .4s ease,
    letter-spacing .4s var(--ease);
  transform-origin:50% 100%;
  cursor:default;
}

/* When hovering the whole name — staggered letter lift */
#hero-name:hover .hl{
  transform:translateY(-8px) scaleY(1.05);
  text-shadow:
    0 0 40px rgba(167,139,250,.5),
    0 0 80px rgba(0,229,195,.2);
  transition-delay:calc(var(--i) * 0.04s);
}
/* Individual letter hover — stronger highlight */
.hl:hover{
  transform:translateY(-18px) scaleY(1.1) !important;
  text-shadow:
    0 0 60px rgba(167,139,250,.9),
    0 0 100px rgba(0,229,195,.5),
    0 20px 40px rgba(0,0,0,.4) !important;
  transition-delay:0s !important;
}

/* .outline word — outlined chars hover to fill */
.hero-word.outline .hl{
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:
    transform .35s cubic-bezier(0.34,1.56,0.64,1),
    -webkit-text-stroke .4s ease,
    -webkit-text-fill-color .4s ease,
    text-shadow .4s ease;
}
#hero-name:hover .hero-word.outline .hl,
.hero-word.outline .hl:hover{
  -webkit-text-stroke:1px var(--violet-lt);
  -webkit-text-fill-color:rgba(167,139,250,.15);
}
.hero-word.outline .hl:hover{
  -webkit-text-fill-color:rgba(167,139,250,.3) !important;
}


/* ── ABOUT 2.0 ─────────────────────────────────────────────── */
#about{padding:var(--section-py) 0;background:var(--bg-void)}
.about-inner{padding:0 var(--page-px)}
.about-layout{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:80px;align-items:start;
}
.about-left{flex:1}

/* ── PROFILE CARD (about right column) ─────────────────────── */
.profile-card{
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  padding:28px;
  display:flex;flex-direction:column;gap:20px;
  transition:border-color .3s;
}
.profile-card:hover{border-color:rgba(167,139,250,.25)}
.pc-top{display:flex;align-items:center;gap:16px}
.pc-avatar{
  position:relative;flex-shrink:0;
  width:64px;height:64px;
}
.pc-headshot{
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--r-md);
}
.pc-avail-ring{
  display:none;
}
.pc-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:18px;font-weight:800;letter-spacing:-.3px;
}
.pc-role{font-size:13px;color:var(--text-2);margin-top:2px}
.pc-location{font-size:12px;color:var(--text-3);margin-top:4px}
.pc-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--glass-border);
  border:1px solid var(--glass-border);
  border-radius:var(--r-md);overflow:hidden;
}
.pc-stat{
  padding:16px 12px;background:var(--bg-raised);
  text-align:center;transition:background .3s;
}
.pc-stat:hover{background:var(--bg-float)}
.pc-stat-val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-1px;
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.pc-stat-lbl{font-size:10px;color:var(--text-3);margin-top:3px;letter-spacing:.5px}
.pc-social{display:flex;gap:8px}
.pc-soc{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-raised);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--text-2);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.pc-soc:hover{
  background:var(--violet-dim);border-color:rgba(124,58,237,.4);
  color:var(--violet-lt);transform:translateY(-3px);
}
.pc-badges{display:flex;flex-wrap:wrap;gap:7px}
.pc-badge{
  padding:6px 14px;border-radius:999px;
  background:var(--bg-raised);border:1px solid var(--glass-border);
  font-size:11px;color:var(--text-2);font-weight:500;
  transition:background .3s,color .3s,border-color .3s;
}
.pc-badge:hover{
  background:var(--violet-dim);border-color:rgba(124,58,237,.3);
  color:var(--violet-lt);
}
.about-opener{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(28px,4vw,52px);font-weight:700;
  color:var(--text-1);line-height:1.15;
  letter-spacing:-1.5px;margin-bottom:28px;
}
.about-opener em{
  font-style:normal;
  background:var(--grad-glow);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.about-p{
  font-size:16px;color:var(--text-2);line-height:1.85;
  margin-bottom:20px;font-weight:400;
}
.about-quote{
  margin:32px 0;
  padding:0 0 0 20px;
  border-left:2px solid var(--violet);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(16px,2vw,20px);
  font-weight:600;color:var(--text-1);
  font-style:italic;line-height:1.5;
}
/* Metric counters */
.about-metrics{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--glass-border);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);overflow:hidden;
  margin-top:40px;
}
.metric-item{
  padding:28px 24px;background:var(--bg-surface);
  position:relative;
  transition:background var(--t);
}
.metric-item:hover{background:var(--bg-raised)}
.metric-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(36px,4.5vw,56px);font-weight:800;
  letter-spacing:-2px;
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:6px;
}
.metric-lbl{font-size:12px;color:var(--text-3);letter-spacing:.5px;font-weight:500}

/* About right — photo & timeline */
.about-photo-frame{
  border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:3/4;background:var(--bg-raised);
  position:relative;border:1px solid var(--glass-border);
  margin-bottom:32px;
}
.about-photo-frame img{
  width:100%;height:100%;object-fit:cover;
}
.about-photo-frame .overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg-void) 0%,transparent 50%);
}
.photo-badge{
  position:absolute;bottom:20px;left:20px;right:20px;
  padding:14px 18px;border-radius:var(--r-md);
  background:rgba(8,8,16,.85);backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  display:flex;align-items:center;gap:12px;
}
.photo-badge-pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--mint);flex-shrink:0;
  box-shadow:0 0 10px var(--mint);
  animation:dot-pulse 2s ease-in-out infinite;
}
.photo-badge-copy strong{font-size:14px;display:block;font-weight:600}
.photo-badge-copy span{font-size:12px;color:var(--text-3)}

/* Journey strip */
.journey{margin-top:4px}
.journey-title{
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:20px;font-weight:600;
}
.journey-item{
  display:flex;gap:18px;padding-bottom:20px;
  position:relative;
}
.journey-item::before{
  content:'';position:absolute;left:11px;top:24px;bottom:0;
  width:1px;background:var(--glass-border);
}
.journey-item:last-child::before{display:none}
.j-dot{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--glass-border);background:var(--bg-surface);
  display:flex;align-items:center;justify-content:center;
  font-size:8px;color:var(--violet-lt);font-weight:700;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.journey-item.lit .j-dot{
  border-color:var(--violet);background:var(--violet-dim);
  box-shadow:0 0 12px rgba(124,58,237,.4);
}
.j-body{padding-top:2px}
.j-year{font-size:10px;color:var(--violet-lt);font-weight:700;letter-spacing:2px;margin-bottom:3px}
.j-title{font-size:14px;font-weight:600;margin-bottom:2px}
.j-desc{font-size:13px;color:var(--text-2);line-height:1.55}

/* ── PRODUCTS 2.0 ──────────────────────────────────────────── */
#products{padding:var(--section-py) 0;background:linear-gradient(var(--bg-void),var(--bg-base))}
.products-hd{padding:0 var(--page-px);margin-bottom:56px}
.products-grid{
  padding:0 var(--page-px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:20px;
}
.pcard{
  border-radius:var(--r-lg);
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .3s,box-shadow .5s;
  position:relative;
}
.pcard:hover{
  transform:translateY(-8px);
  border-color:rgba(167,139,250,.25);
  box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(167,139,250,.1),
             inset 0 1px 0 rgba(255,255,255,.06);
}
.pcard-cover{
  height:200px;background:var(--bg-raised);
  position:relative;overflow:hidden;
}
.pcard-cover img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--ease);
  opacity:.85;
}
.pcard:hover .pcard-cover img{transform:scale(1.07)}
.pcard-cover-mask{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 40%,var(--bg-surface));
}
.pcard-accent{
  position:absolute;inset:0;opacity:.6;
  mix-blend-mode:screen;
}
.pcard-status{
  position:absolute;top:14px;right:14px;z-index:2;
  font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(0,229,195,.3);color:var(--mint);
}
.pcard-body{padding:22px;flex:1;display:flex;flex-direction:column}
.pcard-cat{
  font-size:10px;color:var(--text-3);letter-spacing:3px;
  text-transform:uppercase;font-weight:600;margin-bottom:8px;
}
.pcard-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-0.5px;
  margin-bottom:6px;
}
.pcard-tagline{font-size:14px;color:var(--text-2);line-height:1.55;flex:1;margin-bottom:18px}
.pcard-metrics{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.pcard-m{
  font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);
  color:var(--violet-lt);letter-spacing:.5px;
}
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--glass-border);padding-top:14px;
}
.pcard-link{
  font-size:13px;font-weight:700;color:var(--violet-lt);
  display:flex;align-items:center;gap:6px;
  transition:gap .3s var(--ease),color .2s;
}
.pcard:hover .pcard-link{gap:12px;color:var(--mint)}
.pcard-live{
  font-size:12px;color:var(--text-3);
  transition:color .2s;
}
.pcard:hover .pcard-live{color:var(--mint)}

/* ── CASE STUDIES 2.0 ──────────────────────────────────────── */
#case-studies{padding:var(--section-py) 0;overflow:hidden;background:var(--bg-base)}
.cs-header{padding:0 var(--page-px);margin-bottom:56px}
.cs-track{
  display:flex;gap:24px;
  padding:8px var(--page-px) 8px;
  width: max-content; /* Crucial for scrollWidth calculations */
  overflow-x:hidden; /* GSAP takes over scrolling */
  will-change: transform;
}
.cs-card{
  flex-shrink:0;width:clamp(300px,38vw,480px);
  scroll-snap-align:start;
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--bg-surface);
  border:1px solid var(--glass-border);
  display:flex;flex-direction:column;
  transition:border-color .4s,transform .4s var(--ease),box-shadow .4s var(--ease);
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
}
.cs-card::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent 40%,rgba(255,255,255,0.05));
  -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;
  pointer-events:none;
}
.cs-card:hover{
  border-color:rgba(167,139,250,0.4);
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 30px 60px rgba(0,0,0,0.4), 0 0 20px rgba(124,58,237,0.1);
}
.cs-img{height:260px;background:var(--bg-raised);position:relative;overflow:hidden}
.cs-img img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--ease);
}
.cs-card:hover .cs-img img{transform:scale(1.05)}
.cs-body{padding:24px;flex:1;display:flex;flex-direction:column}
.cs-cat{font-size:10px;color:var(--violet-lt);letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.cs-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(22px,2.5vw,26px);
  font-weight:800;letter-spacing:-.8px;
  margin-bottom:12px;line-height:1.2;
  color:var(--text-1);
}
.cs-prob{
  font-size:14px;color:var(--text-2);
  line-height:1.7;margin-bottom:20px;
  flex:1;font-weight:400;
}
.cs-impacts{display:flex;gap:8px;flex-wrap:wrap}
.cs-tag{
  font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(0,229,195,.08);border:1px solid rgba(0,229,195,.18);
  color:var(--mint);letter-spacing:.5px;
}
.cs-read{
  margin-top:16px;font-size:12px;color:var(--text-3);
  font-weight:600;display:inline-flex;align-items:center;gap:6px;
  transition:color .2s,gap .3s var(--ease);
}
.cs-card:hover .cs-read{color:var(--violet-lt);gap:10px}

/* CTA Card styling */
.cs-cta-card{
  background:var(--grad-glow);border:none;
}
.cs-cta-card .cs-body{
  background:rgba(8,8,16,0.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.cs-cta-card .cs-cat{color:rgba(255,255,255,0.7)}
.cs-cta-card .cs-title{color:#fff;font-size:24px}
.cs-cta-card .cs-prob{color:rgba(255,255,255,0.8)}
.cs-cta-card .btn-primary{background:#fff;color:#000}

/* ── SKILLS 2.0 ─────────────────────────────────────────────── */
#skills{padding:var(--section-py) 0;background:var(--bg-void)}
.skills-inner{padding:0 var(--page-px)}
.skills-cloud{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;
}
.s-pill{
  padding:11px 22px;border-radius:999px;
  background:var(--bg-surface);border:1px solid var(--glass-border);
  font-size:14px;color:var(--text-2);font-weight:500;
  transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease);
  cursor:default;
}
.s-pill:hover{
  background:var(--violet-dim);border-color:rgba(124,58,237,.4);
  color:var(--violet-lt);transform:translateY(-3px) scale(1.04);
}
.skills-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--glass-border);
  border:1px solid var(--glass-border);border-radius:var(--r-xl);
  overflow:hidden;margin-top:64px;
}
.sk-stat{
  padding:36px 32px;background:var(--bg-surface);
  transition:background .3s;
}
.sk-stat:hover{background:var(--bg-raised)}
.sk-val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(44px,5.5vw,68px);font-weight:800;
  letter-spacing:-3px;line-height:1;
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:8px;
}
.sk-lbl{font-size:13px;color:var(--text-3);font-weight:500}

/* ── EXPERIENCE 2.0 ─────────────────────────────────────────── */
#experience{padding:var(--section-py) 0;background:linear-gradient(var(--bg-void),var(--bg-base))}
.exp-inner{padding:0 var(--page-px)}
.exp-list{max-width:800px;margin:56px auto 0;position:relative}
.exp-list::before{
  content:'';position:absolute;left:19px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--violet) 20%,var(--violet) 80%,transparent);
  opacity:.3;
}
.ei{
  display:flex;gap:28px;padding-bottom:44px;
  animation:fade-up .7s var(--ease) both;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.ei.in{animation:none;opacity:1;transform:none}
.ei-node{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--bg-surface);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  transition:border-color .4s,box-shadow .4s,background .4s;
  z-index:1;
}
.ei.in .ei-node{
  border-color:var(--violet);background:var(--violet-dim);
  box-shadow:0 0 18px rgba(124,58,237,.5);
}
.ei-body{padding-top:6px}
.ei-period{font-size:10px;color:var(--violet-lt);letter-spacing:3px;font-weight:700;margin-bottom:6px;text-transform:uppercase}
.ei-role{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;margin-bottom:2px}
.ei-co{font-size:14px;color:var(--text-3);margin-bottom:10px}
.ei-desc{font-size:14px;color:var(--text-2);line-height:1.7}
.ei-badge{
  display:inline-block;margin-top:10px;
  font-size:10px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;padding:4px 12px;border-radius:999px;
}
.type-founder{background:var(--violet-dim);color:var(--violet-lt);border:1px solid rgba(124,58,237,.3)}
.type-role{background:rgba(0,229,195,.08);color:var(--mint);border:1px solid rgba(0,229,195,.2)}
.type-collab{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(244,197,66,.2)}
.type-freelance{background:rgba(255,77,109,.08);color:var(--red-acc);border:1px solid rgba(255,77,109,.2)}

/* ── TESTIMONIALS 2.0 ───────────────────────────────────────── */
#testimonials{
  padding:var(--section-py) 0;overflow:hidden;
  background:var(--bg-base);
}
.testi-hd{padding:0 var(--page-px);margin-bottom:56px}
.testi-marquee{display:flex;gap:20px;width:max-content;animation:marquee 36s linear infinite}
.testi-marquee:hover{animation-play-state:paused}
.tcard{
  flex-shrink:0;width:380px;padding:28px;
  border-radius:var(--r-xl);
  background:var(--bg-surface);border:1px solid var(--glass-border);
  transition:border-color .3s,transform .35s var(--ease);
}
.tcard:hover{border-color:rgba(167,139,250,.25);transform:translateY(-4px)}
.tcard-stars{color:var(--gold);font-size:12px;letter-spacing:3px;margin-bottom:16px}
.tcard-quote{
  font-size:15px;color:var(--text-2);line-height:1.8;
  margin-bottom:24px;font-style:italic;font-weight:400;
}
.tcard-auth{display:flex;align-items:center;gap:12px}
.tcard-ava{
  width:42px;height:42px;border-radius:50%;
  background:var(--bg-raised);border:1px solid var(--glass-border);
  overflow:hidden;flex-shrink:0;
}
.tcard-ava img{width:100%;height:100%;object-fit:cover}
.tcard-name{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800}
.tcard-role{font-size:11px;color:var(--text-3);margin-top:2px}

/* ── GLOBAL MAP 2.0 ─────────────────────────────────────────── */
#global{padding:var(--section-py) 0;background:var(--bg-void)}
.global-inner{padding:0 var(--page-px)}
.global-wrap{
  margin-top:56px;
  border-radius:var(--r-xl);
  background:var(--bg-surface);border:1px solid var(--glass-border);
  padding:48px;position:relative;overflow:hidden;
}
.global-wrap::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 50%,rgba(124,58,237,.06),transparent 70%);
}
.global-svg{width:100%;max-width:880px;margin:0 auto;display:block;opacity:.35}
.global-markers{position:absolute;inset:48px;pointer-events:none}
.gm-wrap{position:absolute;transform:translate(-50%,-50%);z-index:2;}
.gm-wrap::before{
  content:'';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--violet);
  opacity:0;pointer-events:none;
}
.gm-wrap.is-active::before{
  animation: pulse-ring 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring {
  0% { transform:translate(-50%,-50%) scale(0.6); opacity: 0.8; }
  100% { transform:translate(-50%,-50%) scale(2.8); opacity: 0; }
}

.gm-dot{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--violet-lt);
  box-shadow:0 0 10px var(--violet);
  transition:transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.gm-wrap.is-active .gm-dot{
  transform:translate(-50%,-50%) scale(1.6);
  box-shadow:0 0 20px var(--violet);
}

.gm-tip{
  position:absolute;bottom:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(10px);
  white-space:nowrap;
  background:rgba(20,20,30,0.85);border:1px solid rgba(255,255,255,0.1);
  padding:10px 16px;border-radius:12px;
  font-size:12px;backdrop-filter:blur(12px);
  pointer-events:none;
  opacity:0;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  transition:all 0.5s var(--ease);
}
.gm-tip::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border-width:6px;border-style:solid;
  border-color: rgba(255,255,255,0.1) transparent transparent transparent;
}
.gm-wrap.is-active .gm-tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.gm-tip strong{font-weight:700;display:block;margin-bottom:2px;font-size:14px;}
.gm-tip span{color:var(--text-3);font-size:11px}
.map-wire{
  stroke:rgba(255,255,255,0.15);stroke-width:1.5;
  stroke-dasharray:4 8;animation:dash-flow 30s linear infinite;
  stroke-linecap:round;
}
@keyframes dash-flow{to{stroke-dashoffset:-200}}

.globe-pills{
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:center;margin-top:36px;
}
.globe-pill{
  display:flex;align-items:center;gap:12px;
  padding:14px 24px;border-radius:999px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--glass-border);
  font-size:14px;
  transition:all .5s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.globe-pill:hover, .globe-pill.is-active{
  border-color:rgba(167,139,250,.5);
  background:var(--violet-dim);
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(124,58,237,0.15);
}
.globe-pill .flag{font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}
.globe-pill .name{font-weight:600;color:var(--text-1);letter-spacing:0.2px}
.globe-pill .cnt{
  font-size:11px;color:var(--text-3);margin-left:4px;
  display:flex;align-items:center;gap:6px;
  font-weight:700;text-transform:uppercase;letter-spacing:1px;
}
.globe-pill.is-active .cnt{color:var(--mint)}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 10px var(--mint);
  display:inline-block;
}
.globe-pill.is-active .status-dot{
  animation:dot-pulse 2s ease-in-out infinite;
}

/* ── CTA 2.0 ────────────────────────────────────────────────── */
#cta{
  padding:var(--section-py) var(--page-px);
  position:relative;overflow:hidden;
  background:var(--bg-base);
  display:flex;flex-direction:column;
  align-items:center;
}
.cta-glow-mesh{
  position:absolute;inset:0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(124,58,237, 0.12), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0,229,195, 0.08), transparent 50%);
  filter:blur(100px);
  z-index:0;pointer-events:none;
  animation:mesh-drift 20s ease-in-out infinite alternate;
}
@keyframes mesh-drift{
  0%{transform:scale(1) rotate(0deg)}
  100%{transform:scale(1.2) rotate(10deg)}
}

.cta-top-meta{
  width:100%;max-width:1300px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:60px;position:relative;z-index:1;
}
.cta-avail-badge{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:999px;
  background:rgba(0,229,195,.06);
  border:1px solid rgba(0,229,195,.2);
  backdrop-filter:blur(10px);
}
.cab-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 12px var(--mint);
  animation:dot-pulse 2s ease-in-out infinite;
}
.cab-text{
  font-size:12px;font-weight:700;color:var(--mint);
  letter-spacing:1px;text-transform:uppercase;
}

.cta-mega{
  width:100%;max-width:1300px;
  position:relative;z-index:1;
  margin-bottom:80px;
}
.cta-mega-line{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(56px,10vw,160px);
  font-weight:800;line-height:0.85;letter-spacing:-4px;
  text-transform:lowercase;
}
.cta-mega-line.line-1{text-align:left;color:var(--text-1)}
.cta-mega-line.line-2{text-align:center;color:var(--violet-lt)}
.cta-mega-line.line-3{text-align:right}
.cta-mega-line.outline{
  -webkit-text-stroke:1px rgba(255,255,255,.2);
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:-webkit-text-stroke .4s var(--ease);
}
#cta:hover .cta-mega-line.outline{
  -webkit-text-stroke:1px var(--mint);
}

.cta-ticker{
  width:100vw;margin-left:calc(-1 * var(--page-px));
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
  padding:24px 0;overflow:hidden;
  position:relative;z-index:1;background:rgba(255,255,255,0.02);
  margin-bottom:80px;
}
.cta-ticker-track{
  display:flex;width:max-content;
  animation:marquee 40s linear infinite;
  gap:60px;padding:0 30px;
}
.ticker-item{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:18px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:2px;
  white-space:nowrap;transition:color .3s;
}
.ticker-item:hover{color:var(--text-1)}

.cta-sub-row{
  width:100%;max-width:1300px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:100px;align-items:center;
  text-align:left;position:relative;z-index:1;
  margin-bottom:100px;
}
.cta-info-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:32px;font-weight:800;letter-spacing:-1px;
  margin-bottom:20px;color:var(--text-1);
}
.cta-sub-text{
  font-size:18px;color:var(--text-2);line-height:1.75;
  max-width:520px;
}
.cta-sub-btns{
  display:flex;flex-direction:column;gap:20px;
  align-items:flex-end;
}
.cta-sub-btns .btn-ghost{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:20px;letter-spacing:-.5px;
  color:var(--text-3);border:none;padding:0;
}
.cta-sub-btns .btn-ghost:hover{
  background:none;color:var(--violet-lt);transform:translateX(5px);
}

.cta-proof{
  width:100%;max-width:1300px;
  display:flex;justify-content:space-between;
  border-top:1px solid var(--glass-border);
  padding-top:40px;position:relative;z-index:1;
}
.proof-item{text-align:left}
.proof-val{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(32px,4vw,64px);font-weight:800;letter-spacing:-2px;
  background:var(--grad-glow);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text;
}
.proof-lbl{font-size:11px;color:var(--text-3);letter-spacing:1px;text-transform:uppercase;font-weight:600}

@media(max-width:1024px){
  .cta-sub-row{grid-template-columns:1fr;gap:40px;text-align:center}
  .cta-sub-text{margin:0 auto}
  .cta-sub-btns{align-items:center}
  .cta-mega-line{letter-spacing:-2px}
}
@media(max-width:768px){
  .cta-proof{grid-template-columns:1fr 1fr;display:grid;gap:30px}
  .cta-mega-line{font-size:62px}
}

/* ── FOOTER 2.0 ─────────────────────────────────────────────── */
#footer{
  padding:72px var(--page-px) 36px;
  border-top:1px solid var(--glass-border);
  background:var(--bg-void);
}
.f-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:56px;margin-bottom:56px;
}
.f-brand{
  display:flex;flex-direction:column;gap:0;
}
.f-logo{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:22px;font-weight:800;color:var(--text-1);
  margin-bottom:12px;letter-spacing:-0.5px;
}
.f-logo span{color:var(--violet-lt)}
.f-brand-p{font-size:14px;color:var(--text-3);line-height:1.7;max-width:240px;margin:12px 0 16px}
.f-tagline{font-size:14px;color:var(--text-3);line-height:1.7;max-width:240px;margin-bottom:20px}
.f-email{
  font-size:14px;color:var(--mint);font-weight:600;
  transition:opacity .2s;margin-bottom:20px;
}
.f-email:hover{opacity:.75}
.f-socs{display:flex;gap:10px;margin-top:4px}
.f-col h4{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--text-3);margin-bottom:20px;font-weight:600;
}
.f-col ul{display:flex;flex-direction:column;gap:12px}
.f-col ul a{
  font-size:14px;color:var(--text-2);
  transition:color .2s;
}
.f-col ul a:hover{color:var(--text-1)}
.f-newsletter label{font-size:13px;color:var(--text-2);display:block;margin-bottom:12px}
.f-form{
  display:flex;border-radius:999px;
  border:1px solid var(--glass-border);overflow:hidden;
  background:var(--bg-surface);
}
.f-form input{
  flex:1;padding:12px 20px;background:none;
  border:none;color:var(--text-1);font-size:14px;
  outline:none;font-family:'DM Sans',sans-serif;
}
.f-form input::placeholder{color:var(--text-3)}
.f-form button{
  padding:12px 22px;border:none;
  background:var(--grad-violet);color:#fff;
  font-size:13px;font-weight:600;white-space:nowrap;
  font-family:'DM Sans',sans-serif;
  transition:opacity .2s;cursor:none;
}
.f-form button:hover{opacity:.85}
.f-sub-confirm{font-size:12px;color:var(--mint);margin-top:8px;display:none}
.f-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:32px;border-top:1px solid var(--glass-border);
  flex-wrap:wrap;gap:16px;
}
.f-copy{font-size:13px;color:var(--text-3)}
.f-avail{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:20px;font-size:12px;color:var(--mint);
  font-weight:600;letter-spacing:.5px;
}
.f-avail-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);
  animation:dot-pulse 2s ease-in-out infinite;
}
.f-socials{display:flex;gap:10px}
.f-soc{
  width:36px;height:36px;border-radius:50%;
  background:var(--bg-surface);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--text-2);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.f-soc:hover{
  background:var(--violet-dim);border-color:rgba(124,58,237,.4);
  color:var(--violet-lt);transform:translateY(-3px);
}

/* ── DIVIDER ─────────────────────────────────────────────────── */
.divider{
  height:1px;
  background:linear-gradient(to right,transparent,var(--glass-border),transparent);
  margin:0 var(--page-px);
}

/* ── PRODUCT DETAIL ─────────────────────────────────────────── */
.detail-hero{
  min-height:65vh;display:flex;align-items:flex-end;
  position:relative;overflow:hidden;
  padding:calc(var(--section-py) + 60px) var(--page-px) 80px;
}
.detail-bg{position:absolute;inset:0;background:var(--bg-base)}
.detail-bg img{width:100%;height:100%;object-fit:cover;opacity:.25}
.detail-bg-mask{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg-void) 0%,rgba(2,2,5,.6) 100%);
}
.d-content{position:relative;z-index:2;max-width:800px}
.d-cat{font-size:10px;color:var(--violet-lt);letter-spacing:4px;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.d-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(40px,7vw,88px);
  font-weight:800;letter-spacing:-3px;margin-bottom:16px;line-height:.95;
}
.d-tagline{font-size:clamp(15px,2vw,20px);color:var(--text-2);margin-bottom:28px}
.d-metrics{display:flex;gap:10px;flex-wrap:wrap}
.d-metric{
  padding:7px 16px;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--violet-dim);border:1px solid rgba(124,58,237,.3);
  color:var(--violet-lt);
}
.d-body{max-width:960px;margin:0 auto;padding:80px var(--page-px)}
.d-section{margin-bottom:56px}
.d-section h3{
  font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-.5px;margin-bottom:14px;color:var(--text-2);
}
.d-section p{font-size:16px;color:var(--text-2);line-height:1.85}
.d-live{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;border-radius:999px;
  background:var(--grad-glow);color:#000;font-size:15px;font-weight:800;
  transition:transform .35s var(--ease),box-shadow .35s;margin-top:12px;
}
.d-live:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,229,195,.25)}
.d-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-3);margin-bottom:40px;transition:color .2s}
.d-back:hover{color:var(--violet-lt)}
.d-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.d-tag{padding:5px 14px;border-radius:999px;font-size:12px;font-weight:600;background:var(--bg-raised);border:1px solid var(--glass-border);color:var(--text-3)}

/* ── SCROLL ANIMATIONS ──────────────────────────────────────── */
/* Reveal classes are JS-enhanced. Default: visible. */
/* When JS adds '.on', nothing extra happens — content already visible */
/* JS can optionally add animation class for extra polish */
.reveal,.reveal-l,.reveal-r,.reveal-sc{
  opacity:0;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.reveal{transform:translateY(36px)}
.reveal-l{transform:translateX(-36px)}
.reveal-r{transform:translateX(36px)}
.reveal-sc{transform:scale(.93)}
.reveal.on,.reveal-l.on,.reveal-r.on,.reveal-sc.on{
  opacity:1;transform:none
}
/* CSS-only fallback: if no JS runs, show content after 2s */
@keyframes reveal-fallback{
  0%{opacity:0}
  100%{opacity:1;transform:none}
}
.reveal:not(.on),.reveal-l:not(.on),.reveal-r:not(.on),.reveal-sc:not(.on){
  animation:reveal-fallback .8s var(--ease) 2s both;
}
.d1{transition-delay:.1s;animation-delay:2.1s}
.d2{transition-delay:.2s;animation-delay:2.2s}
.d3{transition-delay:.3s;animation-delay:2.3s}
.d4{transition-delay:.4s;animation-delay:2.4s}
.d5{transition-delay:.5s;animation-delay:2.5s}
.d6{transition-delay:.6s;animation-delay:2.6s}

/* ── MARQUEE (testimonials) ─────────────────────────────────── */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .about-layout{grid-template-columns:1fr;gap:48px}
  .about-photo-frame{aspect-ratio:4/3;max-height:360px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero-right{display:none}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  .products-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .hero-name{font-size:clamp(64px,18vw,120px);letter-spacing:-3px;white-space:normal}
}
@media(max-width:480px){
  .hero-ctas{flex-direction:column}
  .cta-btns{flex-direction:column;align-items:center}
  .about-metrics{grid-template-columns:1fr 1fr}
  .hero-meta{flex-direction:column;align-items:flex-start}
}

/* Admin mobile */
@media(max-width:768px){
  .sidebar{display:none}
  .form-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   ✦ AWWWARDS ADDITIONS — Kishan Kanani v3.0
══════════════════════════════════════════════════════════ */

/* ── SECTION COUNTER STRIP ───────────────────────────── */
#section-counter{
  position:fixed;left:clamp(16px,2.5vw,40px);top:50%;
  transform:translateY(-50%);
  z-index:100;display:flex;flex-direction:column;
  align-items:center;gap:10px;pointer-events:none;
  opacity:0;animation:fade-up .8s var(--ease) 2.5s both;
}
.sc-nums{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:10px;font-weight:800;letter-spacing:2px;
  color:var(--text-4);
}
#sc-num{
  font-size:14px;color:var(--violet-lt);
  transition:all .4s var(--ease);display:block;
  margin-bottom:4px;
}
#sc-total{display:block}
.sc-sep{
  width:1px;height:20px;
  background:linear-gradient(to bottom,var(--violet-lt),var(--text-4));
  margin:2px 0;
}
.sc-line{
  width:1px;height:clamp(40px,5vh,70px);
  background:linear-gradient(to bottom,var(--glass-border),transparent);
}
@media(max-width:1100px){#section-counter{display:none}}

/* ── HERO NOISE CANVAS ───────────────────────────────── */
#hero-noise{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  border-radius:inherit;
}

/* ── HERO ORB ────────────────────────────────────────── */
#hero-orb{
  position:absolute;right:6%;top:12%;z-index:0;
  width:clamp(280px,32vw,560px);
  height:clamp(280px,32vw,560px);
  border-radius:50%;
  background:conic-gradient(from 180deg at 50% 50%,
    rgba(124,58,237,.55) 0deg,
    rgba(0,229,195,.35) 90deg,
    rgba(124,58,237,.04) 180deg,
    rgba(0,229,195,.25) 270deg,
    rgba(124,58,237,.55) 360deg);
  filter:blur(72px);
  animation:orb-spin 22s linear infinite;
  pointer-events:none;will-change:transform;
}
@keyframes orb-spin{to{transform:rotate(360deg)}}

/* ── HERO ACCENT LINES ───────────────────────────────── */
.hero-accent-line{
  position:absolute;pointer-events:none;z-index:1;
  border-radius:999px;opacity:.14;
}
.hal-1{
  width:1px;height:clamp(60px,11vw,160px);
  right:23%;top:8%;
  background:linear-gradient(to bottom,var(--violet-lt),transparent);
}
.hal-2{
  width:1px;height:clamp(50px,8vw,120px);
  right:17%;bottom:26%;
  background:linear-gradient(to bottom,var(--mint),transparent);
}
.hal-3{
  width:clamp(36px,5vw,80px);height:1px;
  right:32%;top:42%;
  background:linear-gradient(to right,var(--mint),transparent);
}

/* ── SPLIT TEXT ──────────────────────────────────────── */
.sc-char{
  display:inline-block;overflow:hidden;
  vertical-align:bottom;line-height:1.05;
}
.sc-inner{display:inline-block}
.sc-space{display:inline-block;width:.28em}

/* ── MAGNETIC BUTTON WRAPPER ─────────────────────────── */
.btn-magnetic{
  display:inline-block;will-change:transform;
}

/* ── 3D TILT CARD ────────────────────────────────────── */
.tilt-card{
  transform-style:preserve-3d;will-change:transform;
  position:relative;
}
.card-shine{
  position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:10;
  transition:background .12s;
}

/* ── ANIMATED DIVIDER ────────────────────────────────── */
.divider-animated{
  height:1px;
  background:linear-gradient(to right,transparent,var(--glass-border),transparent);
  margin:0 var(--page-px);
  transform-origin:left center;
}

/* ── DUAL COLUMN TESTIMONIAL ─────────────────────────── */
.testi-dual{
  overflow:hidden;display:flex;gap:20px;
  padding:0 var(--page-px);
  max-height:680px;
}
.testi-col{display:flex;flex-direction:column;gap:20px;flex:1}
.testi-col-inner{
  display:flex;flex-direction:column;gap:20px;
  animation:marquee-v 30s linear infinite;
}
.testi-col:nth-child(2) .testi-col-inner{
  animation-direction:reverse;animation-duration:34s;
}
@keyframes marquee-v{
  0%{transform:translateY(0)}
  100%{transform:translateY(-50%)}
}
.testi-dual .tcard{width:100%}

/* ── HERO AVAILABILITY PILL ──────────────────────────── */
.hero-avail{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--mint);font-size:11px;font-weight:700;
  padding:6px 14px;border-radius:999px;
  border:1px solid rgba(0,229,195,.25);
  background:rgba(0,229,195,.06);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:20px;
  animation:fade-up .9s var(--ease) .15s both;
}
.hero-avail-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--mint);box-shadow:0 0 8px var(--mint);
  animation:dot-pulse 2s ease-in-out infinite;
}

/* ── HERO SIGNATURE ──────────────────────────────────── */
.hero-sig{
  width:80px;height:80px;border-radius:24px;
  overflow:hidden;margin-bottom:20px;
  border:1px solid var(--glass-border);
  box-shadow:0 12px 24px rgba(0,0,0,.3);
  background:var(--bg-raised);
}
.hero-sig img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}

/* ── PROFILE CARD ENHANCEMENTS ───────────────────────── */
.pc-headshot{width:100%;height:100%;object-fit:cover;display:block}
.pc-avatar{overflow:hidden;background:var(--bg-void)}

/* ── MEGA CTA SECTION ────────────────────────────────── */
.cta-mega{
  position:relative;z-index:2;overflow:hidden;
  margin-bottom:clamp(12px,3vw,40px);
}
.cta-mega-line1,
.cta-mega-line2{
  display:block;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(40px,8.5vw,148px);
  font-weight:800;line-height:.88;letter-spacing:-4px;
  white-space:nowrap;will-change:transform;user-select:none;
}
.cta-mega-line1{color:var(--text-1);text-align:left}
.cta-mega-line2{
  text-align:right;
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.cta-sub-row{
  display:flex;align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;gap:28px;
  padding-top:48px;
  border-top:1px solid var(--glass-border);
  position:relative;z-index:2;
}
.cta-sub-text{
  font-size:clamp(14px,1.5vw,17px);
  color:var(--text-2);line-height:1.75;
  max-width:460px;text-align:left;
}
.cta-sub-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}



/* ── SECTION NUMBER LABEL ────────────────────────────── */
.section-num{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--text-4);font-weight:700;
  font-family:'DM Sans',sans-serif;
  margin-bottom:14px;display:block;
}

/* ── EXPERIENCE LINE DRAW ────────────────────────────── */
.exp-line-draw{
  position:absolute;left:19px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,var(--violet),var(--mint),transparent);
  transform-origin:top center;
}

/* ── NAV LOGO GRADIENT ───────────────────────────────── */
.nav-logo{
  background:var(--grad-glow);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-logo span{-webkit-text-fill-color:unset;color:inherit}

/* ── HORIZONTAL SCROLL ───────────────────────────────── */
#portfolio{overflow:hidden}
.cs-track{
  cursor:grab;user-select:none;
  padding-bottom:40px; /* Space for indicator */
}
.cs-track:active{cursor:grabbing}
.cs-track::after {
  content: '';
  position: absolute;
  bottom: 20px;
  left: var(--page-px);
  right: var(--page-px);
  height: 2px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
}

/* ── GLOBAL MAP ANIMATED ─────────────────────────────── */
.global-map-container{
  position:relative;width:100%;height:clamp(300px,50vh,600px);
  background:var(--bg-void);border-radius:32px;
  overflow:hidden;border:1px solid var(--glass-border);
  margin-bottom:64px;
}
.map-overlay-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(124,58,237, 0.05) 0%, transparent 70%);
  pointer-events:none;z-index:1;
}
.map-dots-svg{width:100%;height:100%;object-fit:fill;opacity:.8}
.map-wire{
  stroke:var(--violet);stroke-width:0.5;stroke-dasharray:4,4;
  opacity:0.2;stroke-linecap:round;
  animation:dash-scroll 10s linear infinite;
}
@keyframes dash-scroll{
  from{stroke-dashoffset:80}
  to{stroke-dashoffset:0}
}
.map-node{filter:drop-shadow(0 0 4px currentColor);transition:all .5s var(--ease)}
.map-node.is-active{r:7 !important;filter:drop-shadow(0 0 12px currentColor)}
.map-node-pulse{transform-origin:center;pointer-events:none;transition:opacity .5s var(--ease);opacity:0.2;}
.map-node-pulse.is-active{opacity:1 !important}

/* ── MAP WRAPPER INTERACTIONS ────────────────────────── */
.gm-wrap{pointer-events:all;cursor:pointer;transition:transform .5s var(--ease), opacity .5s var(--ease)}
.gm-wrap.is-active{transform:translate(-50%,-50%) scale(1.1);z-index:10}
.gm-wrap.is-active .gm-tip{opacity:1}
.gm-tip{opacity:0;transition:all .3s var(--ease);transform:translateX(-50%) translateY(10px)}
.gm-wrap:hover .gm-tip, .gm-wrap.is-active .gm-tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── RESPONSIVE ADDITIONS ────────────────────────────── */
@media(max-width:1100px){
  .cta-mega-line1,.cta-mega-line2{letter-spacing:-2px}
}
@media(max-width:768px){
  #hero-orb{opacity:.4;right:-8%;
    width:clamp(180px,52vw,300px);
    height:clamp(180px,52vw,300px)}
  .cta-mega-line1,.cta-mega-line2{
    font-size:clamp(36px,11vw,72px);
    letter-spacing:-2px;white-space:normal;
  }
  .testi-dual{display:block;max-height:none}
  .testi-col:nth-child(2){display:none}
  .f-top{grid-template-columns:1fr 1fr;gap:28px}
  .cta-sub-row{flex-direction:column}
}
@media(max-width:480px){
  .f-top{grid-template-columns:1fr}
  .cta-sub-btns{flex-direction:column;align-items:flex-start}
}

/* ── EXPERIENCE DUAL GRID ────────────────────────────── */
.exp-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);
  margin-top:64px;
}
.exp-side-title{
  font-family:var(--font-heading);font-size:12px;
  letter-spacing:4px;text-transform:uppercase;color:var(--text-3);
  margin-bottom:40px;display:flex;align-items:center;gap:12px;
}
.exp-side-title::after{content:'';flex:1;height:1px;background:var(--glass-border)}

/* Founder Timeline Style */
.founder-timeline{position:relative;padding-left:24px;border-left:1px solid var(--glass-border)}
.ft-item{margin-bottom:48px;position:relative}
.ft-item::before{
  content:'';position:absolute;left:-28.5px;top:4px;
  width:8px;height:8px;border-radius:50%;background:var(--violet);
  border:2px solid var(--bg-void);box-shadow:0 0 10px var(--violet);
}
.ft-year{
  font-family:var(--font-mono);font-size:13px;color:var(--violet);
  font-weight:700;margin-bottom:8px;
}
.ft-title{font-family:var(--font-heading);font-size:18px;margin-bottom:8px;color:var(--text-1)}
.ft-desc{font-size:14px;color:var(--text-2);line-height:1.6}

@media(max-width:992px){
  .exp-grid{grid-template-columns:1fr;gap:80px}
}

/* ── COMPREHENSIVE MOBILE OVERRIDES ──────────────────────── */
@media(max-width:768px){
  :root {
    --page-px: 20px;
    --section-py: 60px;
  }
  .f-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cs-track {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding-right: var(--page-px) !important;
  }
  .cs-card {
    width: 100% !important;
  }
  .global-map-container {
    height: 400px;
  }
  .about-layout {
    grid-template-columns: 1fr;
  }
  .about-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .metric-item {
    text-align: center;
    padding: 20px 12px;
  }
  .cta-mega-line {
    font-size: clamp(40px, 12vw, 60px);
    letter-spacing: -1px;
  }
  .bento-grid {
    display: flex;
    flex-direction: column;
  }
  /* Disable horizontal scroll pinning container height bug on mobile natively */
  #portfolio { overflow: hidden; height: auto !important; min-height: auto !important; }
  
  /* Hide scroll indicator on cover */
  .hero-scroll-wrap { display: none !important; }
  
  /* Disable testimonial animation on mobile so it doesn't leave blank space */
  .testi-col-inner { animation: none !important; transform: none !important; }
  
  /* Center CTA sub-text on mobile */
  .cta-sub-text { text-align: center !important; }
}

@media(max-width:480px){
  .about-metrics {
    grid-template-columns: 1fr;
  }
}