/* ============================================
   FAISAL SHABBIR PORTFOLIO v3
   Colors: #FF6B35 → #E8294A → #CC1F5A + White on Black
   Fonts: Bricolage Grotesque + DM Sans
   ============================================ */

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

/* ── VARIABLES ─────────────────────────────── */
:root {
  --black:   #000000;
  --b2:      #0D0D0D;
  --b3:      #141414;
  --b4:      #1C1C1C;
  --b5:      #252525;

  --o1: #FF6B35;   /* warm orange */
  --o2: #E8294A;   /* red-orange  */
  --cr: #CC1F5A;   /* deep crimson */

  --grad:      linear-gradient(90deg, #FF6B35 0%, #E8294A 50%, #CC1F5A 100%);
  --grad-text: linear-gradient(90deg, #FF6B35 0%, #E8294A 50%, #CC1F5A 100%);
  --grad-soft: linear-gradient(135deg,
    rgba(255,107,53,0.10) 0%,
    rgba(232,41,74,0.07)  50%,
    rgba(204,31,90,0.10)  100%);
  --grad-glow: 0 0 40px rgba(255,107,53,0.18), 0 0 80px rgba(204,31,90,0.10);

  --text:  #FFFFFF;
  --t2:    #AAAAAA;
  --t3:    #505050;
  --border: rgba(255,255,255,0.07);
  --b-hot:  rgba(255,107,53,0.28);

  --fd: 'Bricolage Grotesque', sans-serif;
  --fb: 'DM Sans', sans-serif;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 44px;

  --ease: cubic-bezier(0.22,1,0.36,1);
  --t:    all 0.36s cubic-bezier(0.22,1,0.36,1);
  --ts:   all 0.65s cubic-bezier(0.22,1,0.36,1);
}

/* ── RESET ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--black);color:var(--text);font-family:var(--fb);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* ── MOUSE TRACKER ──────────────────────────── */
#mouse-tracker{
  position:fixed;pointer-events:none;z-index:9999;
  opacity:0;  /* JS fades in on first move */
  will-change:transform;
}
.tracker-outer{
  width:36px;height:36px;
  border:1.5px solid rgba(255,107,53,.45);
  border-radius:50%;
  position:absolute;
  transform:translate(-50%,-50%);
  /* NO CSS transition — JS does lerp, CSS transition adds lag/flicker */
  pointer-events:none;
}
.tracker-inner{
  width:7px;height:7px;
  background:var(--grad);
  border-radius:50%;
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  /* inner moves instantly — no transition */
}
body.hovering .tracker-outer{
  width:56px;height:56px;
  border-color:rgba(232,41,74,.6);
  /* Only size/color use CSS transition, not position */
  transition:width .25s var(--ease),height .25s var(--ease),border-color .2s;
}

/* ── TYPOGRAPHY ─────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--fd);font-weight:800;line-height:1.1;letter-spacing:-.03em;}
h1{font-size:clamp(3rem,7vw,6.5rem);}
h2{font-size:clamp(2.2rem,4.5vw,4rem);}
h3{font-size:clamp(1.4rem,2.5vw,2rem);}
h4{font-size:1.2rem;}
p{color:var(--t2);line-height:1.75;font-size:.95rem;}

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.eyebrow{
  font-family:var(--fb);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--o1);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:1rem;
}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--grad);display:block;}

/* ── LAYOUT ─────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;padding:0 2rem;}
.section{padding:4.5rem 0;}
.section-sm{padding:2rem 0;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}

/* ── BUTTONS ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:.9rem 2rem;border-radius:100px;
  font-family:var(--fb);font-size:.88rem;font-weight:700;
  cursor:pointer;transition:var(--t);border:none;outline:none;
}
.btn-grad{
  background:var(--grad);color:#fff;
  position:relative;overflow:hidden;
}
.btn-grad::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#CC1F5A,#FF6B35);
  opacity:0;transition:opacity .35s;
  z-index:0;  /* behind text */
}
.btn-grad:hover::after{opacity:1;}
.btn-grad:hover{
  transform:translateY(-3px);
  box-shadow:0 0 18px rgba(255,107,53,.45), 0 12px 30px rgba(204,31,90,.3);
}
/* ALL children above the pseudo-element */
.btn-grad > *,
.btn-grad span,
.btn-grad i{position:relative;z-index:2;}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1.5px solid rgba(255,107,53,.45);
  border-radius:100px;
  position:relative;
  transition:var(--t);
  /* NO overflow:hidden — was hiding text */
}
/* all direct children above any pseudo-elements */
.btn-outline > *,
.btn-outline span,
.btn-outline i { position:relative; z-index:2; }
.btn-outline:hover{
  color:var(--o1);
  border-color:rgba(255,107,53,.8);
  transform:translateY(-3px);
  box-shadow:0 0 18px rgba(255,107,53,.28), 0 0 0 1px rgba(255,107,53,.2);
}
.btn-lg{padding:1.1rem 2.5rem;font-size:1rem;}

/* ── NAVBAR ─────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.4rem 0;transition:var(--t);}
.navbar.scrolled{background:rgba(0,0,0,.9);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);padding:.9rem 0;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;}
.nav-logo{font-family:var(--fd);font-size:1.7rem;font-weight:800;color:var(--text);}
.nav-logo span{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-links{display:flex;align-items:center;gap:2rem;}
.nav-links a{font-size:.85rem;font-weight:500;color:var(--t2);transition:var(--t);position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1.5px;background:var(--grad);transition:width .3s var(--ease);}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.hamburger span{width:24px;height:2px;background:var(--text);display:block;transition:var(--t);}

/* DROPDOWN — fixed */
.dropdown{position:relative;}
/* invisible bridge fills gap so cursor doesn't
   leave the hover zone when moving to the menu */
.dropdown::after{
  content:'';
  position:absolute;
  top:100%; left:-10px; right:-10px;
  height:20px;   /* covers the 14px gap + extra */
  background:transparent;
  z-index:299;
}
.dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:0;
  background:var(--b3);border:1px solid var(--border);
  border-radius:var(--r-md);padding:.6rem;min-width:210px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  z-index:300;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;visibility:visible;pointer-events:all;transform:translateY(0);
}
.dropdown-menu a{
  display:block;padding:.65rem .9rem;
  font-size:.84rem;color:var(--t2);
  border-radius:var(--r-sm);transition:var(--t);
}
.dropdown-menu a:hover{background:rgba(255,107,53,.08);color:var(--o1);}

/* ── MOBILE MENU ─────────────────────────────── */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:1000;opacity:0;pointer-events:none;transition:var(--ts);}
.mobile-overlay.open{opacity:1;pointer-events:all;}
.mobile-menu{position:fixed;top:0;right:-100%;width:280px;height:100vh;background:var(--b2);border-left:1px solid var(--border);z-index:1001;padding:5rem 2rem 2rem;display:flex;flex-direction:column;gap:1rem;transition:var(--ts);}
.mobile-menu.open{right:0;}
.mobile-menu a{font-family:var(--fd);font-size:1.2rem;color:var(--t2);padding:.5rem 0;border-bottom:1px solid var(--border);transition:var(--t);}
.mobile-menu a:hover{color:var(--o1);}
.close-menu{position:absolute;top:1.5rem;right:1.5rem;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;}

/* ── HERO ────────────────────────────────────── */
.hero{min-height:0;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px;padding-bottom:4rem;}
.hero-glow-1{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.16) 0%,transparent 70%);top:-150px;right:-100px;pointer-events:none;animation:glowFloat 6s ease-in-out infinite;}
.hero-glow-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(204,31,90,.12) 0%,transparent 70%);bottom:-150px;left:-100px;pointer-events:none;animation:glowFloat 8s ease-in-out 2s infinite reverse;}
.hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:flex-end;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.25);color:var(--o1);padding:.5rem 1rem;border-radius:100px;font-size:.78rem;font-weight:700;letter-spacing:.05em;margin-bottom:1.5rem;animation:fadeInDown .8s var(--ease) both;}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--o1);animation:pulse 2s infinite;}
.hero-title{animation:fadeInUp .8s var(--ease) .2s both;margin-bottom:1.5rem;line-height:1.05;}
.hero-subtitle{font-size:1.05rem;color:var(--t2);max-width:500px;margin-bottom:2.5rem;line-height:1.75;animation:fadeInUp .8s var(--ease) .35s both;}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem;animation:fadeInUp .8s var(--ease) .45s both;}
.hero-stats-row{display:flex;gap:2.5rem;animation:fadeInUp .8s var(--ease) .55s both;padding-top:1.25rem;border-top:1px solid var(--border);flex-wrap:wrap;}
.hero-stat strong{font-family:var(--fd);font-size:1.6rem;font-weight:800;display:block;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-stat span{font-size:.72rem;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;animation:fadeInRight .9s var(--ease) .3s both;}
/* No box — PNG floats freely */
.hero-frame{
  width:420px;height:500px;
  position:relative;
  background:transparent;
  border:none;
  overflow:visible;
}
.hero-frame-grad{display:none;}
.hero-frame img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:bottom center;
  position:relative;z-index:1;
  filter:drop-shadow(0 20px 60px rgba(255,107,53,.18))
         drop-shadow(0 0 40px rgba(204,31,90,.10));
}
.hero-frame-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:5rem;position:relative;z-index:1;}
.hero-frame::after{display:none;}
.float-pill{position:absolute;background:var(--b3);border:1px solid var(--border);border-radius:var(--r-md);padding:.85rem 1.2rem;backdrop-filter:blur(12px);}
.float-pill.p1{bottom:40px;left:-60px;animation:floatY 3s ease-in-out infinite;}
.float-pill.p2{top:40px;right:-60px;animation:floatY 4s ease-in-out 1.5s infinite;}
.float-pill strong{font-family:var(--fd);font-size:1.4rem;display:block;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.float-pill span{font-size:.72rem;color:var(--t3);}

/* ── MARQUEE ─────────────────────────────────── */
.marquee-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--b2);padding:.75rem 0;}
.marquee-track{display:flex;gap:2.5rem;width:max-content;animation:marquee 22s linear infinite;}
.marquee-item{display:flex;align-items:center;gap:.75rem;font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);white-space:nowrap;}
.marquee-sep{width:4px;height:4px;border-radius:50%;background:var(--grad);flex-shrink:0;}

/* ── STATS BAR ───────────────────────────────── */
.stats-bar{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--border);gap:1px;}
.stats-cell{background:var(--b2);padding:2.5rem 1.5rem;text-align:center;transition:var(--t);position:relative;overflow:hidden;}
.stats-cell::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.stats-cell:hover::before{transform:scaleX(1);}
.stats-cell:hover{}
.stats-num{font-family:var(--fd);font-size:2.2rem;font-weight:800;display:block;line-height:1;margin-bottom:.4rem;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.stats-lbl{font-size:.72rem;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;}

/* ── ABOUT ───────────────────────────────────── */
.about-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center;}
.about-img-wrap{position:relative;height:610px;}
.about-img-main{position:absolute;bottom:0;left:0;width:90%;height:504px;border-radius:var(--r-lg);overflow:hidden;background:var(--b3);border:1px solid var(--border);}
.about-img-main img{width:100%;height:100%;object-fit:cover;}
.about-img-accent{position:absolute;top:0;right:0;width:28%;height:140px;border-radius:var(--r-md);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.6rem;}
.about-badge{position:absolute;bottom:16px;right:0;background:var(--b3);border:1px solid var(--b-hot);padding:.75rem 1.25rem;border-radius:var(--r-md);display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:.85rem;font-weight:700;z-index:2;}
.about-text p{margin:1.25rem 0;}
.about-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0;}
.about-tag{background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.18);color:var(--o1);padding:.35rem 1rem;border-radius:100px;font-size:.78rem;font-weight:500;transition:var(--t);}
.about-tag:hover{background:rgba(255,107,53,.15);border-color:var(--o1);}

/* SKILLS */
.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;margin-top:2rem;}
.skill-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.skill-name-lbl{font-size:.84rem;font-weight:600;color:var(--t2);}
.skill-pct{font-family:var(--fd);font-size:.84rem;font-weight:800;color:var(--o1);}
.skill-bar{height:5px;background:var(--b4);border-radius:100px;overflow:hidden;}
.skill-fill{height:100%;background:var(--grad);border-radius:100px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1);}

/* ── SERVICES ────────────────────────────────── */
.svc-list{margin-top:3rem;}
.svc-item{display:flex;align-items:flex-start;gap:2rem;padding:2rem 0;border-bottom:1px solid var(--border);transition:padding-left .4s var(--ease);cursor:default;position:relative;}
.svc-item:hover{padding-left:.75rem;}
.svc-num{font-family:var(--fd);font-size:.9rem;font-weight:800;color:var(--t3);min-width:36px;padding-top:4px;transition:var(--t);}
.svc-item:hover .svc-num{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.svc-content h3{font-size:1.5rem;margin-bottom:.4rem;transition:var(--t);}
.svc-item:hover .svc-content h3{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.svc-content p{font-size:.88rem;}
.svc-tag{display:inline-block;margin-top:.6rem;background:var(--b4);color:var(--t3);padding:.25rem .75rem;border-radius:100px;font-size:.72rem;}
.svc-reveal{position:absolute;right:1rem;top:50%;transform:translateY(-50%) scale(.9);width:180px;height:130px;border-radius:var(--r-md);background:var(--b3);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:2.5rem;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);}
.svc-item:hover .svc-reveal{opacity:1;transform:translateY(-50%) scale(1);}

/* ── SERVICES PAGE — BOXES ───────────────────── */
.service-block{
  background:var(--b3);
  border:1px solid var(--border);
  border-radius:var(--r-lg);   /* rounder corners */
  padding:2.5rem;
  margin-bottom:2rem;
  transition:var(--t);
  position:relative;
  overflow:hidden;
}
.service-block::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.service-block:hover::before{transform:scaleX(1);}
.service-block:hover{
  border-color:rgba(255,107,53,.55);
  transform:translateY(-5px) rotate(-0.3deg);
  box-shadow:0 0 0 1px rgba(255,107,53,.25), 0 20px 60px rgba(255,107,53,.1);
}
/* glow on hover */
.service-block::after{
  content:'';position:absolute;
  inset:-1px;border-radius:var(--r-lg);
  background:var(--grad);
  opacity:0;z-index:-1;
  filter:blur(16px);
  transition:opacity .4s;
}
.service-block:hover::after{opacity:.18;}
.service-block-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem;}
.service-block-icon{width:52px;height:52px;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.22);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:var(--t);}
.service-block:hover .service-block-icon{background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.45);}
.service-block-header h3{font-size:1.3rem;}
.service-block-header p{font-size:.88rem;margin-top:.3rem;}
.note-box{background:rgba(255,107,53,.06);border:1px solid rgba(255,107,53,.18);border-radius:var(--r-md);padding:1.25rem 1.5rem;margin-top:2rem;}

/* TABLE */
.pricing-table{width:100%;border-collapse:collapse;margin-top:1.5rem;}
.pricing-table th{background:rgba(255,107,53,.08);color:var(--o1);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:1rem 1.25rem;text-align:left;border-bottom:1px solid rgba(255,107,53,.15);}
.pricing-table td{padding:.95rem 1.25rem;border-bottom:1px solid var(--border);font-size:.86rem;color:var(--t2);}
.pricing-table tr:hover td{background:rgba(255,107,53,.03);}
.pricing-table td:first-child{font-weight:700;color:var(--text);}
.pkg-name{display:inline-block;background:var(--b4);padding:.18rem .7rem;border-radius:100px;font-size:.75rem;color:var(--o2);font-weight:700;margin-left:.4rem;}
.price-badge{font-family:var(--fd);font-weight:800;font-size:1rem;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ── PORTFOLIO PAGE ──────────────────────────── */
.pf-filter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:3rem;}
.pf-btn{background:var(--b3);border:1px solid var(--border);color:var(--t2);padding:.5rem 1.3rem;border-radius:100px;font-size:.8rem;font-weight:700;cursor:pointer;transition:var(--t);outline:none;}
.pf-btn:hover,.pf-btn.active{background:var(--grad);border-color:transparent;color:#fff;}

/* New masonry-style grid */
.pf-masonry{
  columns:3;column-gap:1.5rem;
  margin-top:1rem;
}
@media(max-width:900px){.pf-masonry{columns:2;}}
@media(max-width:500px){.pf-masonry{columns:1;}}

.pf-card{
  break-inside:avoid;
  background:var(--b3);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  cursor:pointer;
  transition:var(--t);
  margin-bottom:1.5rem;
  position:relative;
}
.pf-card:hover{
  border-color:rgba(255,107,53,.55);
  transform:translateY(-8px) rotate(0.4deg);
  box-shadow:0 0 0 1px rgba(255,107,53,.2), 0 24px 60px rgba(255,107,53,.12);
}
.pf-card::before{
  content:'';position:absolute;
  inset:-1px;border-radius:var(--r-lg);
  background:var(--grad);
  opacity:0;z-index:-1;filter:blur(12px);
  transition:opacity .4s;
}
.pf-card:hover::before{opacity:.22;}
.pf-thumb{
  width:100%;
  background:var(--b4);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.pf-thumb-emoji{
  font-size:3rem;padding:3rem 2rem;
  position:relative;z-index:1;  /* stays above overlay */
  transition:transform .35s var(--ease);
}
.pf-card:hover .pf-thumb-emoji{transform:scale(.85);}
.pf-thumb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,107,53,.25),rgba(204,31,90,.2));
  opacity:0;transition:opacity .35s;
  display:flex;align-items:center;justify-content:center;
  z-index:2;  /* above emoji */
}
.pf-card:hover .pf-thumb-overlay{opacity:1;}
.pf-play-btn{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:#fff;
  transform:scale(.6) translateY(8px);
  transition:transform .35s var(--ease),opacity .35s;
  opacity:0;
}
.pf-card:hover .pf-play-btn{transform:scale(1) translateY(0);opacity:1;}
.pf-body{padding:1.5rem;}
.pf-cat{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--o1);margin-bottom:.4rem;}
.pf-card h4{font-size:1.05rem;margin-bottom:.4rem;}
.pf-card p{font-size:.82rem;}
.pf-meta{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);}
.pf-views{font-size:.75rem;color:var(--t3);font-weight:600;}
.pf-arrow{width:32px;height:32px;border-radius:50%;background:rgba(255,107,53,.1);border:1px solid rgba(255,107,53,.2);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--o1);transition:var(--t);}
.pf-card:hover .pf-arrow{background:var(--grad);border-color:transparent;color:#fff;}

/* ── BRANDS ──────────────────────────────────── */
.brands-grid{display:grid;grid-template-columns:repeat(5,1fr);background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;gap:1px;margin-top:3rem;}
.brand-cell{background:var(--b2);padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;transition:var(--t);position:relative;overflow:hidden;}
.brand-cell::after{content:'';position:absolute;inset:0;background:var(--grad-soft);opacity:0;transition:opacity .3s;}
.brand-cell:hover{}
.brand-cell:hover::after{opacity:1;}
.brand-icon{font-size:1.8rem;position:relative;z-index:1;}
.brand-name{font-size:.8rem;font-weight:700;color:var(--t2);position:relative;z-index:1;}
.brand-type{font-size:.68rem;color:var(--t3);position:relative;z-index:1;}

/* ── VENTURES ────────────────────────────────── */
.venture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.venture-card{background:var(--b2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;transition:var(--t);position:relative;overflow:hidden;}
.venture-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);}
.venture-card:hover::before{transform:scaleX(1);}
.venture-card:hover{border-color:rgba(255,107,53,.5);transform:translateY(-6px) rotate(0.4deg);box-shadow:0 0 0 1px rgba(255,107,53,.25), 0 20px 50px rgba(255,107,53,.12);}
.venture-icon{width:52px;height:52px;background:rgba(255,107,53,.08);border:1px solid rgba(255,107,53,.18);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.5rem;}
.venture-card h3{font-size:1.25rem;margin-bottom:.75rem;}
.venture-card p{font-size:.86rem;margin-bottom:1.5rem;}
.venture-link{font-size:.82rem;font-weight:700;display:inline-flex;align-items:center;gap:6px;color:var(--o1);transition:var(--t);}
.venture-link:hover{gap:12px;color:var(--o2);}

/* ── AWARDS ──────────────────────────────────── */
.award-cards{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem;}
.award-card{background:var(--b2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2.5rem;display:flex;gap:1.5rem;transition:var(--t);}
.award-card:hover{border-color:rgba(255,107,53,.55);box-shadow:0 0 0 1px rgba(255,107,53,.2), 0 20px 50px rgba(255,107,53,.12); transform:translateY(-5px) rotate(-0.5deg);}
.award-trophy{font-size:2.8rem;}
.award-year{font-size:.72rem;font-weight:700;color:var(--o1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem;}
.award-card h3{font-size:1.15rem;margin-bottom:.4rem;}
.award-card p{font-size:.84rem;}

/* ── TIMELINE ────────────────────────────────── */
.timeline{position:relative;margin-top:3rem;padding-left:1.5rem;}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);opacity:.5;}
.tl-item{position:relative;padding:0 0 2.5rem 2rem;}
.tl-item::before{content:'';position:absolute;left:-5px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--grad);border:2.5px solid var(--black);}
.tl-year{font-size:.72rem;font-weight:700;color:var(--o1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.2rem;}
.tl-item h4{font-size:.95rem;}

/* ── TESTIMONIALS ────────────────────────────── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.testi-card{background:var(--b2);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;transition:var(--t);}
.testi-card:hover{border-color:rgba(255,107,53,.5);transform:translateY(-5px) rotate(0.3deg);box-shadow:0 0 0 1px rgba(255,107,53,.2), 0 16px 50px rgba(255,107,53,.1);}
.testi-stars{font-size:.85rem;margin-bottom:1rem;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.testi-text{font-size:.88rem;line-height:1.75;font-style:italic;margin-bottom:1.5rem;color:var(--t2);}
.testi-author{display:flex;align-items:center;gap:.75rem;}
.testi-av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:1rem;font-weight:800;color:#fff;}
.testi-name{font-size:.88rem;font-weight:700;display:block;}
.testi-role{font-size:.72rem;color:var(--t3);}

/* ── CONTACT ─────────────────────────────────── */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start;}
.contact-item{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border);}
.c-icon{width:44px;height:44px;background:rgba(255,107,53,.09);border:1px solid rgba(255,107,53,.18);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:var(--t);}
.contact-item:hover .c-icon{background:rgba(255,107,53,.18);}
.c-txt strong{color:var(--text);display:block;font-size:.82rem;margin-bottom:2px;}
.c-txt span{font-size:.85rem;color:var(--t2);}
.contact-form{
  background:var(--b2);
  border:1.5px solid rgba(255,107,53,.35);
  border-radius:var(--r-lg);
  padding:2.5rem;
  position:relative;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
  /* No ::before tricks — just clean border */
}
.contact-form:hover{
  border-color:rgba(255,107,53,.7);
  box-shadow:0 0 20px rgba(255,107,53,.12), 0 0 0 1px rgba(255,107,53,.15);
}
.form-group{margin-bottom:1.25rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.form-group label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:.5rem;}
.form-control{width:100%;background:var(--black);border:1px solid var(--border);border-radius:var(--r-sm);padding:.85rem 1rem;color:var(--text);font-family:var(--fb);font-size:.88rem;outline:none;transition:var(--t);}
.form-control:focus{border-color:var(--o1);background:rgba(255,107,53,.03);}
.form-control::placeholder{color:var(--t3);}
select.form-control{cursor:pointer;}
textarea.form-control{resize:vertical;min-height:120px;}

/* ── CTA BANNER ──────────────────────────────── */
.cta-banner{background:var(--b2);border:1px solid var(--border);border-radius:var(--r-xl);padding:5rem 4rem;text-align:center;position:relative;overflow:hidden;}
.cta-banner::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,53,.1),transparent 70%);top:-150px;left:50%;transform:translateX(-50%);pointer-events:none;}
.cta-banner h2{margin-bottom:1rem;}
.cta-banner p{max-width:480px;margin:0 auto 2.5rem;}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ── AVAILABILITY BADGE ──────────────────────── */
.avail-badge{position:fixed;bottom:2rem;right:2rem;background:var(--b3);border:1px solid rgba(255,107,53,.3);border-radius:var(--r-md);padding:.85rem 1.25rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:var(--t);z-index:99;box-shadow:0 8px 30px rgba(255,107,53,.12);}
.avail-badge:hover{transform:translateY(-3px);border-color:rgba(255,107,53,.6);}
.avail-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite;}
.avail-txt strong{font-size:.82rem;font-weight:700;display:block;}
.avail-txt span{font-size:.7rem;color:var(--t3);}
.scroll-top{position:fixed;bottom:2rem;left:2rem;width:44px;height:44px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:var(--t);z-index:99;border:none;color:#fff;font-size:1rem;}
.scroll-top.visible{opacity:1;pointer-events:all;}
.scroll-top:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(255,107,53,.4);}

/* ── PAGE HEADER ─────────────────────────────── */
.page-header{padding:10rem 0 5rem;text-align:center;position:relative;overflow:hidden;}
.page-header::before{content:'';position:absolute;width:500px;height:200px;background:radial-gradient(ellipse,rgba(255,107,53,.1),transparent 70%);top:0;left:50%;transform:translateX(-50%);pointer-events:none;}

/* ── FOOTER ──────────────────────────────────── */
.footer{background:var(--b2);border-top:1px solid var(--border);padding:5rem 0 2rem;}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--border);}
.footer-logo{font-family:var(--fd);font-size:1.7rem;font-weight:800;margin-bottom:1rem;}
.footer-logo span{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.footer-tagline{font-size:.85rem;color:var(--t3);font-style:italic;margin-bottom:1.5rem;max-width:260px;}
.footer-col h5{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--t3);margin-bottom:1.25rem;}
.footer-links{display:flex;flex-direction:column;gap:.6rem;}
.footer-links a{font-size:.85rem;color:var(--t2);transition:var(--t);}
.footer-links a:hover{color:var(--o1);padding-left:4px;}
.footer-socials{display:flex;gap:.6rem;margin-top:1.5rem;}
.footer-social{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--t2);transition:var(--t);}
.footer-social:hover{border-color:var(--o1);color:var(--o1);background:rgba(255,107,53,.08);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;}
.footer-copy{font-size:.8rem;color:var(--t3);}
.footer-ventures{display:flex;gap:1.5rem;}
.footer-ventures a{font-size:.8rem;color:var(--t3);transition:var(--t);}
.footer-ventures a:hover{color:var(--o1);}

/* ── SCROLL REVEAL CLASSES ───────────────────── */
.rv          { opacity:0; transform:translateY(55px);              transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-left     { opacity:0; transform:translateX(-65px);             transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-right    { opacity:0; transform:translateX(65px);              transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-scale    { opacity:0; transform:scale(.85);                    transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv-rotate   { opacity:0; transform:translateY(40px) rotate(-3deg);transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv-blur     { opacity:0; filter:blur(14px);                       transition:opacity .7s var(--ease), filter .7s var(--ease); }
.rv-flip     { opacity:0; transform:perspective(600px) rotateX(18deg) translateY(30px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv-stagger > * { opacity:0; transform:translateY(35px);           transition:opacity .6s var(--ease), transform .6s var(--ease); }

.rv.in,.rv-left.in,.rv-right.in,.rv-rotate.in { opacity:1; transform:none; }
.rv-scale.in  { opacity:1; transform:scale(1); }
.rv-blur.in   { opacity:1; filter:blur(0); }
.rv-flip.in   { opacity:1; transform:perspective(600px) rotateX(0) translateY(0); }
.rv-stagger.in > * { opacity:1; transform:none; }
.rv-stagger.in > *:nth-child(1) { transition-delay:.05s; }
.rv-stagger.in > *:nth-child(2) { transition-delay:.15s; }
.rv-stagger.in > *:nth-child(3) { transition-delay:.25s; }
.rv-stagger.in > *:nth-child(4) { transition-delay:.35s; }
.rv-stagger.in > *:nth-child(5) { transition-delay:.45s; }

/* ── KEYFRAMES ───────────────────────────────── */
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(30px)}  to{opacity:1;transform:none} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:none} }
@keyframes marquee     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes floatY      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes glowFloat   { 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.05) translate(10px,-10px)} }
@keyframes pulse       { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
@keyframes shimmer     { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:1024px){
  .stats-bar{grid-template-columns:repeat(3,1fr);}
  .brands-grid{grid-template-columns:repeat(3,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:flex;}
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{display:flex;justify-content:center;margin-top:2rem;}
  .hero-img-wrap{width:100%;height:60vw;min-height:280px;max-height:420px;}
  .float-pill.p1{left:0px;bottom:10px;}
  .float-pill.p2{right:0px;top:10px;}
  .about-layout{grid-template-columns:1fr;}
  .about-img-wrap{height:300px;}
  .venture-grid{grid-template-columns:1fr;}
  .award-cards{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center;}
  .skills-grid{grid-template-columns:1fr;}
  .cta-banner{padding:3rem 2rem;}
  .form-row{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:1fr 1fr;}
  .brands-grid{grid-template-columns:repeat(2,1fr);}
  #mouse-tracker{display:none;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .container{padding:0 1.25rem;}
  .hero-btns{flex-direction:column;}
  .footer-top{grid-template-columns:1fr;}
}

/* ══════════════════════════════════════════════
   v4 ADDITIONS — All new features
   ══════════════════════════════════════════════ */

/* 1. GLOBAL TILT + GLOW on hover for ALL cards/boxes */
.tilt-card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 24px 60px rgba(255,107,53,.18), 0 0 0 1px rgba(255,107,53,.2);
}
/* universal glow wrapper */
.glow-box {
  position: relative;
}
.glow-box::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: #FF6B35;
  opacity: 0;
  z-index: -1;
  filter: blur(22px);
  transition: opacity 0.4s var(--ease);
}
.glow-box:hover::after { opacity: 0.18; }

/* 2. NAVBAR — static center gradient line, no animation */
.nav-grad-line {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #FF6B35, #E8294A, #CC1F5A, transparent);
  border-radius: 100px;
  opacity: 0.7;
}
.nav-grad-line::before { display:none; }
.nav-grad-line::after  { display:none; }

/* particles removed */

/* 4. SERVICES SECTION — New card grid design */
.svc-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media(max-width:900px){ .svc-cards-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .svc-cards-grid{grid-template-columns:1fr;} }

.svc-card {
  background: var(--b3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s;
  position: relative;
  overflow: hidden;
  cursor: default;
}
/* gradient top line */
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.svc-card:hover::before { transform: scaleX(1); }
/* glow behind card */
.svc-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--r-lg);
  background: var(--grad);
  opacity: 0;
  z-index: -1;
  filter: blur(20px);
  transition: opacity 0.45s;
}
.svc-card:hover::after { opacity: 0.16; }
.svc-card:hover {
  border-color: rgba(255,107,53, 0.6);
  box-shadow: 0 0 0 1px rgba(255,107,53,.25), 0 24px 60px rgba(255,107,53,.14);
}
.svc-card-icon {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  transition: transform 0.4s var(--ease);
  box-shadow: 0 8px 24px rgba(255,107,53,.25);
}
.svc-card:hover .svc-card-icon {
  transform: scale(1.1) rotate(-3deg);
}
.svc-card h3 {
  font-size: 1.15rem;
  margin-bottom: .6rem;
  transition: var(--t);
}
.svc-card:hover h3 {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.svc-card p { font-size: .86rem; margin-bottom: 1.25rem; }
.svc-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,107,53,.08);
  border: 1px solid rgba(255,107,53,.18);
  padding: .3rem .9rem;
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--o1);
}

/* 5. UNIVERSAL tilt effect via JS (apply to these) */
.tiltable {
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}

/* ── GRADIENT on single-color elements ──── */
.skill-pct {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.award-year, .tl-year {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pf-cat {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.eyebrow {
  color: transparent;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.eyebrow::before { background: var(--grad); }
.venture-link { 
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.avail-badge:hover .avail-txt strong {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.svc-tag { border: 1px solid rgba(255,107,53,.15); }
.footer-links a:hover {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-left: 4px;
}
.about-tag {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border-color: rgba(255,107,53,.25);
}

/* ══ v4.1 FINAL FIXES ════════════════════════ */

/* tracker defined above */

/* grad-border-form handled above */




  8%   { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-140px) scale(.4); opacity: 0; }
}

 to{opacity:1} }

/* ══ UNIVERSAL HOVER: no bg change, gradient border + glow only ══ */
.venture-card:hover,
.award-card:hover,
.testi-card:hover,
.pf-card:hover,
.service-block:hover,
.brand-cell:hover,
.stats-cell:hover,
.svc-card:hover,
.svc-big-card:hover,
.collab-rate-item:hover,
.float-pill:hover,
.cta-banner:hover {
  background: unset !important;
}

/* Gradient border on hover — all card types */
.venture-card:hover  { border-color: rgba(255,107,53,.55) !important; transform: translateY(-6px) rotate(0.4deg); box-shadow: 0 0 0 1px rgba(255,107,53,.2), 0 0 18px rgba(255,107,53,.18) !important; }
.award-card:hover    { border-color: rgba(255,107,53,.55) !important; transform: translateY(-5px) rotate(-0.4deg); box-shadow: 0 0 0 1px rgba(255,107,53,.2), 0 0 18px rgba(255,107,53,.15) !important; }
.testi-card:hover    { border-color: rgba(255,107,53,.55) !important; transform: translateY(-5px) rotate(0.3deg); box-shadow: 0 0 0 1px rgba(255,107,53,.18), 0 0 16px rgba(255,107,53,.14) !important; }
.pf-card:hover       { border-color: rgba(255,107,53,.55) !important; transform: translateY(-8px) rotate(0.4deg); box-shadow: 0 0 0 1px rgba(255,107,53,.2), 0 0 20px rgba(255,107,53,.15) !important; }
.service-block:hover { border-color: rgba(255,107,53,.55) !important; transform: translateY(-5px) rotate(-0.3deg); box-shadow: 0 0 0 1px rgba(255,107,53,.18), 0 0 16px rgba(255,107,53,.12) !important; }
.brand-cell:hover    { border-color: rgba(255,107,53,.5)  !important; box-shadow: 0 0 14px rgba(255,107,53,.14) !important; }
.stats-cell:hover    { border-color: rgba(255,107,53,.5)  !important; box-shadow: 0 0 14px rgba(255,107,53,.12) !important; }
.svc-card:hover      { border-color: rgba(255,107,53,.6)  !important; box-shadow: 0 0 0 1px rgba(255,107,53,.22), 0 0 22px rgba(255,107,53,.16) !important; }
.svc-big-card:hover  { border-color: rgba(255,107,53,.55) !important; box-shadow: 0 0 0 1px rgba(255,107,53,.2),  0 0 20px rgba(255,107,53,.14) !important; }
.collab-rate-item:hover { border-color: rgba(255,107,53,.5) !important; }

/* ── HERO IMAGE — no box, PNG floats free ── */
.hero-img-wrap {
  position: relative;
  width: 100%;
  height: 90vh;
  max-height: 780px;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-img-free {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(255,107,53,.22))
          drop-shadow(0  0px 50px rgba(204,31,90,.14));
}

/* ── LOAD PERFORMANCE FIXES ─────────────────
   Prevent flicker/FOUC on page load           */

/* 1. Font loading — prevent invisible text flash */
html { font-display: swap; }

/* 2. Reveal elements — use visibility:hidden not opacity:0
      so layout doesn't shift on load */
.rv, .rv-left, .rv-right, .rv-scale,
.rv-rotate, .rv-blur, .rv-flip,
.rv-stagger > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 3. Hero animations — only run after fonts load */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-btns,
.hero-stats-row {
  animation-fill-mode: both;
  will-change: opacity, transform;
}

/* 4. Prevent layout shift from scroll animations */
.rv.in, .rv-left.in, .rv-right.in,
.rv-scale.in, .rv-rotate.in, .rv-blur.in,
.rv-flip.in, .rv-stagger.in > * {
  will-change: auto;
}