/* Start custom CSS for html, class: .elementor-element-b9c31b8 *//* ============================================================
   Bestfeedback.in — Final Homepage Body Styles (Ultra-Premium AI Agency Edition)
   ============================================================ */

:root{
  --ink:#0B0E1C;
  --ink-soft:#131A2B;
  --ink-line:rgba(255,255,255,.09);
  --teal:#22C1C3;
  --teal-soft:rgba(34,193,195,.14);
  --teal-strong:#0EA1A3;
  --coral:#E6392E;
  --coral-soft:rgba(230,57,46,.12);
  --navy:#1E2A6E;
  --navy-soft:rgba(30,42,110,.10);

  --bg:#F6F8FA;
  --bg-alt:#EFF3F5;
  --card:#FFFFFF;
  --border:#E4E9ED;

  --text-1:#0E1620;
  --text-2:#4B5563;
  --text-3:#8A94A3;

  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius:16px;
  --ease:cubic-bezier(.22,.8,.2,1);
}

*{ box-sizing:border-box; }
html{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
  scroll-behavior: smooth;
}
body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
}

.bf-page{
  font-family:var(--font-body);
  color:var(--text-1);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.55;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
  position:relative;
}

.bf-hero,
.bf-services,
.bf-why,
.bf-stats,
.bf-process,
.bf-industries{
  width:100%;
  max-width:100%;
}

.bf-page img{ max-width:100%; display:block; }
.bf-page a{ text-decoration:none; color:inherit; }

.bf-container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

.bf-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-strong);
  margin-bottom:18px;
}
.bf-eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--teal);
}
.bf-eyebrow.on-dark{ color:var(--teal); }
.bf-eyebrow.coral{ color:var(--coral); }
.bf-eyebrow.coral::before{ background:var(--coral); }

.bf-h2{
  font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 18px;
  color:var(--text-1);
}
.bf-h2 .accent{ color:var(--navy); }
.bf-h2 .accent.teal{ color:var(--teal-strong); }

.bf-lede{
  font-size:16.5px;
  color:var(--text-2);
  max-width:620px;
  margin:0 0 14px;
}

.bf-section{
  position:relative;
  padding:120px 0;
}
.bf-section.tight{ padding:100px 0; }

/* reveal-on-scroll base */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{
  opacity:1;
  transform:translateY(0);
}
[data-reveal="scale"]{ transform:scale(.94) translateY(20px); }
[data-reveal="scale"].in-view{ transform:scale(1) translateY(0); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].in-view{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].in-view{ transform:translateX(0); }

/* stagger children */
.bf-stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* buttons */
.bf-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:52px;
  padding:0 30px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.02em;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.bf-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
  z-index:-1;
}
.bf-btn:active{ transform:scale(.96); }

.bf-btn--outline-light{
  color:#fff;
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,.03);
}
.bf-btn--outline-light::before{ background:#fff; }
.bf-btn--outline-light:hover{
  color:var(--ink);
  border-color:#fff;
  box-shadow:0 12px 35px rgba(255,255,255,.25);
  transform: translateY(-3px);
}
.bf-btn--outline-light:hover::before{ transform:scaleX(1); }

.bf-btn--outline-teal{
  color:var(--teal);
  border-color:var(--teal);
  background:transparent;
}
.bf-btn--outline-teal:hover{
  color:var(--ink);
  box-shadow:0 12px 35px var(--teal-soft);
  transform: translateY(-3px);
}
.bf-btn--outline-teal:hover::before{ transform:scaleX(1); }

.bf-btn--solid{
  color:var(--ink);
  background:var(--teal);
  border-color:var(--teal);
  box-shadow: 0 6px 20px rgba(34,193,195,0.3);
}
.bf-btn--solid::before{ background:var(--coral); }
.bf-btn--solid:hover{ color:#fff; box-shadow:0 15px 40px rgba(230,57,46,0.35); transform: translateY(-3px); }
.bf-btn--solid:hover::before{ transform:scaleX(1); }

.bf-btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.bf-btn:hover svg{ transform:translateX(6px); }

/* ============================================================
   HERO / ULTRA-ADVANCED AI AGENCY BANNER
   ============================================================ */
.bf-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  background:#070A12;
  color:#fff;
  overflow:hidden;
  padding-top:160px;
}

/* AI Agency Dynamic Background with Moving Wireframe Grid */
.bf-hero__texture{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle 800px at 75% 40%, rgba(34,193,195,0.18), transparent 70%),
    radial-gradient(circle 600px at 15% 80%, rgba(230,57,46,0.12), transparent 70%),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(180deg, #070A12 0%, #0C121E 50%, #070A12 100%);
  background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px, 100% 100%;
  animation: bf-grid-move 25s linear infinite;
}
@keyframes bf-grid-move{
  0%{ background-position: 0% 0%, 0% 0%, 0 0, 0 0, 0 0; }
  100%{ background-position: 0% 0%, 0% 0%, 60px 60px, -60px 60px, 0 0; }
}

/* Interactive Mouse-Tracking Spotlight / Cursor Aura Effect */
.bf-hero::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34,193,195,0.15), rgba(230,57,46,0.05) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.bf-hero__grain{
  position:absolute; inset:0; z-index:2;
  opacity:.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* Background Floating AI Earth / Tech Sphere Hologram Effect */
.bf-hero__earth-holo {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(34,193,195,0.12) 0%, rgba(30,42,110,0.08) 50%, transparent 70%);
  border-radius: 50%;
  border: 1px dashed rgba(34,193,195,0.25);
  box-shadow: 0 0 80px rgba(34,193,195,0.15), inset 0 0 50px rgba(34,193,195,0.1);
  z-index: 1;
  pointer-events: none;
  animation: bf-earth-pulse 8s ease-in-out infinite alternate, bf-lotus-spin 40s linear infinite;
}
@keyframes bf-earth-pulse {
  0%{ transform: translateY(-50%) scale(0.95); opacity: 0.7; }
  100%{ transform: translateY(-50%) scale(1.05); opacity: 1; }
}
@media (max-width: 980px) {
  .bf-hero__earth-holo { display: none; }
}

.bf-hero__lotus{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:bf-lotus-spin 40s linear infinite;
  opacity:.9;
}
.bf-hero__lotus svg{ width:120%; height:120%; filter: drop-shadow(0 0 15px rgba(34,193,195,0.3)); }
@keyframes bf-lotus-spin{
  to{ transform:rotate(360deg); }
}

/* ============================================================
   ROTATING DIGITAL GLOBE (ambient background behind hero banner)
   ============================================================ */
.bf-hero__globe-wrap{
  position:absolute;
  top:50%;
  right:30%;
  width:780px;
  height:780px;
  transform:translateY(-50%);
  z-index:1;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle, #000 52%, transparent 76%);
  mask-image:radial-gradient(circle, #000 52%, transparent 76%);
}
@media (max-width:1200px){
  .bf-hero__globe-wrap{ width:940px; height:640px; right:12%; }
}
@media (max-width:780px){
  .bf-hero__globe-wrap{ width:480px; height:480px; right:-20%; opacity:.65; }
}

.bf-hero__globe-glow{
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,193,195,.22) 0%, rgba(30,42,110,.12) 45%, transparent 72%);
  filter:blur(6px);
  animation:bf-globe-pulse 7s ease-in-out infinite alternate;
}
@keyframes bf-globe-pulse{
  0%{ opacity:.65; transform:scale(.96); }
  100%{ opacity:1; transform:scale(1.04); }
}

.bf-hero__globe{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}
.bf-hero__globe .globe-ring,
.bf-hero__globe .globe-core,
.bf-hero__globe .globe-dot{
  transform-box:fill-box;
  transform-origin:center;
}

.bf-hero__globe .globe-ring{
  fill:none;
  stroke:rgba(34,193,195,.28);
  stroke-width:1;
}
.globe-ring--1{ animation:globe-spin 46s linear infinite; stroke:rgba(34,193,195,.34); }
.globe-ring--2{ animation:globe-spin-rev 62s linear infinite; stroke:rgba(230,57,46,.22); }
.globe-ring--3{ animation:globe-spin 80s linear infinite; stroke:rgba(127,233,219,.24); }

.globe-core{ animation:globe-spin 110s linear infinite; }
.globe-core .globe-outline{
  fill:none;
  stroke:rgba(34,193,195,.5);
  stroke-width:1.4;
  filter:drop-shadow(0 0 10px rgba(34,193,195,.35));
}
.globe-core .globe-lat,
.globe-core .globe-lon,
.globe-core .globe-lat-line{
  fill:none;
  stroke:rgba(34,193,195,.22);
  stroke-width:1;
}

.globe-dot{
  fill:var(--teal);
  filter:drop-shadow(0 0 6px rgba(34,193,195,.9));
  animation:bf-dot-blink 3.6s ease-in-out infinite;
}
.globe-dot--1{ animation-delay:.2s; }
.globe-dot--2{ fill:var(--coral); filter:drop-shadow(0 0 6px rgba(230,57,46,.9)); animation-delay:1.1s; }
.globe-dot--3{ animation-delay:2s; }

@keyframes globe-spin{ to{ transform:rotate(360deg); } }
@keyframes globe-spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes bf-dot-blink{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .bf-hero__globe-glow,
  .globe-ring--1,.globe-ring--2,.globe-ring--3,
  .globe-core,.globe-dot{ animation:none; }
}

.bf-hero__visual{
  position:relative;
  width:380px;
  max-width:100%;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  z-index: 3;
}
@media (max-width:980px){
  .bf-hero__visual{ margin:0 auto; height:380px; }
}
@media (max-width:480px){
  .bf-hero__visual{ width:100%; height:340px; }
}

.bf-hero__dash{
  position:relative;
  z-index:3;
  width:100%;
  max-width:380px;
  background:rgba(13, 18, 32, 0.75);
  border:1px solid rgba(34,193,195,0.3);
  backdrop-filter:blur(20px);
  border-radius:24px;
  padding:26px 24px 22px;
  box-shadow:0 35px 80px -20px rgba(0,0,0,0.8), 0 0 30px rgba(34,193,195,0.15);
  animation:bf-float 5.5s ease-in-out infinite;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.bf-hero__dash:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(34,193,195,0.8);
  box-shadow: 0 40px 90px -15px rgba(34,193,195,0.35), 0 0 40px rgba(34,193,195,0.2);
}
@keyframes bf-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.bf-hero__dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.bf-hero__dash-head span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.bf-hero__dash-dots{ display:flex; gap:5px; }
.bf-hero__dash-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.38); }

.bf-hero__bars{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:96px;
  margin-bottom:18px;
}
.bf-hero__bars i{
  flex:1;
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, var(--teal), var(--teal-strong));
  transform:scaleY(0);
  transform-origin:bottom;
  animation:bf-bar-grow 1.2s var(--ease) forwards;
  transition: filter 0.3s ease;
}
.bf-hero__bars i:hover { filter: brightness(1.4); }
.bf-hero__bars i:nth-child(2){ background:linear-gradient(180deg,var(--coral),#b82a21); }
.bf-hero__bars i:nth-child(5){ background:linear-gradient(180deg,var(--coral),#b82a21); }
@keyframes bf-bar-grow{ to{ transform:scaleY(1); } }

.bf-hero__line{ margin-bottom:18px; }
.bf-hero__line path{
  fill:none;
  stroke:var(--teal);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:bf-line-draw 2s var(--ease) forwards;
  animation-delay:.5s;
}
@keyframes bf-line-draw{ to{ stroke-dashoffset:0; } }

.bf-hero__dash-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.bf-hero__metric{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.bf-hero__metric b{
  font-family:var(--font-display);
  font-size:22px;
  color:#fff;
}
.bf-hero__metric small{
  font-size:11px;
  color:rgba(255,255,255,.6);
  letter-spacing:.03em;
}
.bf-hero__badge{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--teal-soft);
  color:var(--teal);
  border:1px solid rgba(34,193,195,.4);
  padding:7px 12px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  animation:bf-float 4.2s ease-in-out infinite;
  animation-delay:.3s;
}
.bf-hero__badge svg{ width:13px; height:13px; }

.bf-hero__chip{
  position:absolute;
  z-index:4;
  background:rgba(11,14,28,0.9);
  border:1px solid rgba(34,193,195,0.3);
  backdrop-filter:blur(12px);
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.bf-hero__chip:hover {
  transform: scale(1.05);
  border-color: var(--teal);
}
.bf-hero__chip .dot2{ width:6px; height:6px; border-radius:50%; background:var(--coral); }
.bf-hero__chip--top{ top:-6%; left:-8%; animation:bf-float 4.8s ease-in-out infinite; }
.bf-hero__chip--bottom{ bottom:-4%; right:-6%; animation:bf-float 5.2s ease-in-out infinite; animation-delay:.6s; }

.bf-scanline{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity:.8;
  z-index:3;
  animation:bf-scan 5s linear infinite;
}
@keyframes bf-scan{
  0%{ top:0%; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}

.bf-hero__inner{
  position:relative;
  z-index:3;
  max-width:660px;
}

.bf-hero__container{ position:relative; z-index:3; height:100%; }

.bf-hero__row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:56px;
  min-height:78vh;
  padding:60px 0;
}
@media (max-width:980px){
  .bf-hero__row{
    grid-template-columns:1fr;
    min-height:auto;
    padding:40px 0 60px;
  }
}

.bf-hero__tagline{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--navy-soft);
  border:1px solid rgba(30,42,110,.5);
  color:#c7cdf0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  margin-bottom:22px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.bf-hero__tagline:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}
.bf-hero__tagline .dot2{ width:6px; height:6px; border-radius:50%; background:var(--coral); flex:none; }

.bf-hero h1{
  font-family:var(--font-display);
  font-size:clamp(38px, 5.2vw, 62px);
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 22px;
}
.bf-hero h1 .grad{
  background:linear-gradient(100deg, var(--teal) 0%, #7fe9db 45%, var(--teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% auto;
  animation:bf-shine 4s linear infinite;
}
@keyframes bf-shine{
  to{ background-position:200% center; }
}

.bf-hero p.sub{
  font-size:17.5px;
  color:rgba(255,255,255,.75);
  max-width:480px;
  margin:0 0 36px;
}

.bf-hero__actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.bf-scrollcue{
  position:absolute;
  bottom:38px;
  left:32px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.6);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.bf-scrollcue__line{
  width:1px;
  height:34px;
  background:rgba(255,255,255,.25);
  position:relative;
  overflow:hidden;
}
.bf-scrollcue__line::after{
  content:"";
  position:absolute;
  top:-100%;
  left:0; right:0;
  height:100%;
  background:var(--teal);
  animation:bf-cue 2s ease-in-out infinite;
}
@keyframes bf-cue{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* ============================================================
   SERVICES CARD ADVANCED HOVER & 3D TILT EFFECT
   ============================================================ */
   
.bf-services{ background:var(--bg); }

.bf-services__intro{
  max-width:820px;
  margin:0 auto 64px;
  text-align:center;
}
.bf-services__intro .bf-eyebrow{ justify-content:center; }
.bf-services__intro .bf-h2{ margin-left:auto; margin-right:auto; }
.bf-services__intro .bf-lede{ max-width:760px; margin-left:auto; margin-right:auto; }

.bf-grid-6{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:900px){
  .bf-grid-6{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .bf-grid-6{ grid-template-columns:1fr; }
}

.bf-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 26px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  will-change: transform;
}
.bf-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 30px 60px -15px rgba(34,193,195,0.18);
  border-color:var(--teal);
}

.bf-card__bracket{
  position:absolute; inset:0;
  border-radius:var(--radius);
  pointer-events:none;
}
.bf-card__bracket i{
  position:absolute;
  width:16px; height:16px;
  border:2px solid var(--teal);
  opacity:0;
  transition:opacity .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.bf-card__bracket i:nth-child(1){ top:-1px; left:-1px; border-right:none; border-bottom:none; border-radius:8px 0 0 0;}
.bf-card__bracket i:nth-child(2){ top:-1px; right:-1px; border-left:none; border-bottom:none; border-radius:0 8px 0 0;}
.bf-card__bracket i:nth-child(3){ bottom:-1px; left:-1px; border-right:none; border-top:none; border-radius:0 0 0 8px;}
.bf-card__bracket i:nth-child(4){ bottom:-1px; right:-1px; border-left:none; border-top:none; border-radius:0 0 8px 0;}
.bf-card:hover .bf-card__bracket i{ opacity:1; width:24px; height:24px; }

.bf-card__icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-soft);
  color:var(--teal-strong);
  margin-bottom:22px;
  transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.bf-card__icon svg{ width:24px; height:24px; }
.bf-card:hover .bf-card__icon{
  transform:rotate(-10deg) scale(1.12);
  background:var(--ink);
  color:var(--teal);
  box-shadow: 0 10px 25px rgba(34,193,195,0.3);
}
.bf-card:nth-child(3n+2) .bf-card__icon{ background:var(--coral-soft); color:var(--coral); }
.bf-card:nth-child(3n+2):hover .bf-card__icon{ background:var(--ink); color:var(--coral); box-shadow: 0 10px 25px rgba(230,57,46,0.3); }
.bf-card:nth-child(3n+2) .bf-card__bracket i{ border-color:var(--coral); }
.bf-card:nth-child(3n+2):hover{ box-shadow:0 30px 60px -15px rgba(230,57,46,0.18); border-color: var(--coral); }

.bf-card h3{
  font-family:var(--font-display);
  font-size:19px;
  margin:0 0 10px;
  color:var(--text-1);
}
.bf-card p{
  font-size:14.5px;
  color:var(--text-2);
  margin:0;
}

.bf-card__num{
  position:absolute;
  top:24px; right:26px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-3);
  letter-spacing:.05em;
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.bf-why{ background:var(--bg-alt); overflow:hidden; }

.bf-why__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
@media (max-width:860px){
  .bf-why__grid{ grid-template-columns:1fr; gap:44px; }
}

.bf-why__art{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/3.1;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transition: transform 0.4s ease;
}
.bf-why__art:hover { transform: scale(1.01); }
.bf-why__art svg{ width:100%; height:100%; display:block; }

.bf-why__badge{
  position:absolute;
  bottom:18px; left:18px;
  background:rgba(10,14,19,.9);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:10px 16px;
  border-radius:12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  gap:8px;
  border: 1px solid rgba(255,255,255,0.12);
}
.bf-why__badge .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(42,217,194,.7);
  animation:bf-pulse 1.8s infinite;
}
@keyframes bf-pulse{
  0%{ box-shadow:0 0 0 0 rgba(42,217,194,.6); }
  70%{ box-shadow:0 0 0 10px rgba(42,217,194,0); }
  100%{ box-shadow:0 0 0 0 rgba(42,217,194,0); }
}

.bf-why__copy strong{ color:var(--teal-strong); }

/* ============================================================
   STATS BAND
   ============================================================ */
.bf-stats{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:100px 0;
  overflow:hidden;
}
.bf-stats__ghost{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-weight:700;
  font-size:min(22vw, 260px);
  letter-spacing:.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.06);
  white-space:nowrap;
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.bf-stats__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  max-width:980px;
  margin:0 auto;
}
@media (max-width:760px){
  .bf-stats__grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; }
}

.bf-stat{ text-align:center; transition: transform 0.3s ease; }
.bf-stat:hover { transform: translateY(-5px); }
.bf-stat__icon{
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--ink-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal);
  margin:0 auto 18px;
  background: rgba(255,255,255,0.02);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.bf-stat:hover .bf-stat__icon {
  background: var(--teal-soft);
  border-color: var(--teal);
}
.bf-stat__icon svg{ width:20px; height:20px; }
.bf-stat__num{
  font-family:var(--font-display);
  font-size:42px;
  line-height:1;
  margin-bottom:8px;
  color:#fff;
}
.bf-stat__num .plus{ color:var(--teal); }
.bf-stat__label{
  font-size:13.5px;
  color:rgba(255,255,255,.65);
  letter-spacing:.02em;
}

/* ============================================================
   PROCESS
   ============================================================ */
.bf-process{ background:var(--bg); }

.bf-process__intro{
  max-width:640px;
  margin:0 0 70px;
}

.bf-process__rail{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
@media (max-width:900px){
  .bf-process__rail{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .bf-process__rail{ grid-template-columns:1fr; }
}

.bf-process__line{
  position:absolute;
  top:27px;
  left:0; right:0;
  height:2px;
  background:var(--border);
  z-index:0;
}
.bf-process__line i{
  position:absolute; inset:0;
  background:var(--teal);
  width:0%;
  transition:width 1.4s var(--ease);
}
.bf-process__line.in-view i{ width:100%; }

.bf-step{ position:relative; z-index:1; }
.bf-step__num{
  width:54px; height:54px;
  border-radius:50%;
  background:var(--card);
  border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--text-2);
  margin-bottom:24px;
  transition:border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.bf-step.in-view .bf-step__num{
  border-color:var(--teal);
  color:var(--ink);
  background:var(--teal);
  transform:scale(1.08);
  box-shadow: 0 10px 25px rgba(34,193,195,0.3);
}
.bf-step h4{
  font-family:var(--font-display);
  font-size:18px;
  margin:0 0 10px;
}
.bf-step p{
  font-size:14px;
  color:var(--text-2);
  margin:0;
  max-width:240px;
}

/* ============================================================
   INDUSTRIES / MARQUEE
   ============================================================ */
.bf-industries{ background:var(--bg-alt); padding:90px 0; }

.bf-industries__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:46px;
}
.bf-industries__head .bf-h2{ margin-bottom:0; }

.bf-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bf-marquee__track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:bf-marquee 26s linear infinite;
}
.bf-marquee:hover .bf-marquee__track{ animation-play-state:paused; }
@keyframes bf-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.bf-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--text-1);
  white-space:nowrap;
  transition:transform .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.bf-chip:hover{
  transform:translateY(-5px);
  border-color:var(--teal);
  color:var(--teal-strong);
  box-shadow: 0 10px 25px rgba(34,193,195,0.15);
}
.bf-chip svg{ width:16px; height:16px; color:var(--teal-strong); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.bf-cta{
  position:relative;
  margin:0 auto;
  max-width:1240px;
  border-radius:28px;
  overflow:hidden;
  background:var(--ink);
  color:#fff;
  padding:80px 60px;
  text-align:center;
  box-shadow: 0 30px 70px rgba(11,14,28,0.25);
  transition: transform 0.4s ease;
}
.bf-cta:hover { transform: translateY(-3px); }
@media (max-width:700px){
  .bf-cta{ padding:60px 26px; }
}
.bf-cta__glow{
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg, var(--teal-soft), transparent 30%, var(--coral-soft) 55%, transparent 80%, var(--teal-soft));
  animation:bf-spin 12s linear infinite;
  opacity:.8;
}
@keyframes bf-spin{
  to{ transform:rotate(360deg); }
}
.bf-cta__inner{ position:relative; z-index:1; }
.bf-cta h2{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,42px);
  margin:0 0 16px;
  letter-spacing:-.01em;
}
.bf-cta p{
  color:rgba(255,255,255,.75);
  max-width:520px;
  margin:0 auto 34px;
}
.bf-cta__actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* focus visibility */
.bf-page a:focus-visible,
.bf-page button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  .bf-page *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}



/* ===== Fix: black flash on card click ===== */

/* 1. Mobile tap-highlight hatao */
.bf-card,
.bf-card *{
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Click/focus/active state pe background black hone se roko */
.bf-card:active,
.bf-card:focus,
.bf-card:focus-visible,
.bf-card:visited{
  background: var(--card) !important;
  color: inherit !important;
  outline: none !important;
}

/* 3. Agar Elementor ka page-transition overlay black hai, use transparent/custom color karo */
.elementor-page-transition,
.e-page-transition,
body > .page-transition,
.elementor-lightbox,
.elementor-preloader{
  background-color: var(--teal) !important;
}




/* ============================================================
   REVIEWS SLIDER
   ============================================================ */
.bf-reviews{ background:var(--bg-alt); padding:100px 0; overflow:hidden; }

.bf-reviews__intro{
  max-width:680px;
  margin:0 auto 56px;
  text-align:center;
  padding:0 24px;
}
.bf-reviews__intro .bf-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-strong); margin-bottom:16px;
  justify-content:center;
}
.bf-reviews__intro .bf-eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); }
.bf-reviews__intro h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 14px;
  color:var(--text-1);
}
.bf-reviews__intro p{
  font-size:16px;
  color:var(--text-2);
  margin:0;
}

.bf-reviews__stars-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:18px;
}
.bf-reviews__stars-row .stars{ display:flex; gap:2px; color:#F5A623; }
.bf-reviews__stars-row .stars svg{ width:16px; height:16px; }
.bf-reviews__stars-row span{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-2); letter-spacing:.03em;
}

/* track wrapper: fade edges like the industries marquee */
.bf-rev-track-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.bf-rev-track{
  display:flex;
  gap:22px;
  width:max-content;
  padding:10px 4px 30px;
  animation: bf-rev-scroll 95s linear infinite;
}
/* pause on hover — anywhere over the row, not just one card */
.bf-rev-track-wrap:hover .bf-rev-track{ animation-play-state:paused; }

@keyframes bf-rev-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.bf-rev-card{
  --accent:#0EA1A3;
  --accent-soft:rgba(14,161,163,.12);
  position:relative;
  flex:0 0 320px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px 28px;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), opacity .4s ease, filter .4s ease;
}

/* growing glow line across the top */
.bf-rev-card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--accent), transparent 130%);
  transition:width .6s var(--ease);
  z-index:2;
}
.bf-rev-card:hover::before{ width:100%; }

/* soft blurred glow blob in the corner */
.bf-rev-card::after{
  content:"";
  position:absolute;
  top:-40px; right:-40px;
  width:150px; height:150px;
  border-radius:50%;
  background:var(--accent-soft);
  filter:blur(34px);
  opacity:0;
  transform:scale(.5);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  z-index:0;
  pointer-events:none;
}
.bf-rev-card:hover::after{ opacity:1; transform:scale(1); }

.bf-rev-card:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 30px 60px -18px var(--accent-soft), 0 10px 24px -10px var(--accent-soft);
  border-color:var(--accent);
}

/* spotlight: dim siblings while one card is hovered */
.bf-rev-track-wrap:hover .bf-rev-card{ opacity:.5; filter:saturate(.65); }
.bf-rev-track-wrap:hover .bf-rev-card:hover{ opacity:1; filter:saturate(1); }

.bf-rev-card__quote{
  position:absolute;
  top:22px; right:24px;
  font-family:var(--font-display);
  font-size:44px;
  line-height:1;
  color:var(--accent-soft);
  user-select:none;
  transition:transform .45s var(--ease), color .45s var(--ease);
  z-index:1;
}
.bf-rev-card:hover .bf-rev-card__quote{
  color:var(--accent);
  opacity:.4;
  transform:translateY(-5px) rotate(-8deg) scale(1.12);
}

.bf-rev-card__head{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.bf-rev-card__avatar{
  position:relative;
  width:50px; height:50px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--accent);
  background:var(--accent-soft);
  flex:none;
  transition:transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.bf-rev-card__avatar::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  opacity:0;
  transform:scale(.7);
  transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.bf-rev-card:hover .bf-rev-card__avatar{
  transform:scale(1.1) rotate(-6deg);
  background:var(--accent);
  color:#fff;
  box-shadow:0 8px 20px var(--accent-soft);
}
.bf-rev-card:hover .bf-rev-card__avatar::before{
  opacity:.55;
  transform:scale(1.22);
}

.bf-rev-card__who b{
  display:block;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--text-1);
  margin-bottom:2px;
}
.bf-rev-card__who span{
  font-size:12.5px;
  color:var(--text-3);
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

.bf-rev-card__stars{ position:relative; z-index:1; display:flex; gap:3px; margin-bottom:16px; color:#F5A623; }
.bf-rev-card__stars i{
  font-style:normal;
  display:inline-block;
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.bf-rev-card:hover .bf-rev-card__stars i{
  filter:drop-shadow(0 3px 6px rgba(245,166,35,.55));
}
.bf-rev-card:hover .bf-rev-card__stars i:nth-child(1){ transition-delay:0s; transform:translateY(-3px) scale(1.2); }
.bf-rev-card:hover .bf-rev-card__stars i:nth-child(2){ transition-delay:.04s; transform:translateY(-3px) scale(1.2); }
.bf-rev-card:hover .bf-rev-card__stars i:nth-child(3){ transition-delay:.08s; transform:translateY(-3px) scale(1.2); }
.bf-rev-card:hover .bf-rev-card__stars i:nth-child(4){ transition-delay:.12s; transform:translateY(-3px) scale(1.2); }
.bf-rev-card:hover .bf-rev-card__stars i:nth-child(5){ transition-delay:.16s; transform:translateY(-3px) scale(1.2); }

.bf-rev-card__title{
  position:relative; z-index:1;
  font-family:var(--font-display);
  font-size:16.5px;
  color:var(--text-1);
  margin:0 0 8px;
}

.bf-rev-card p.body{
  position:relative; z-index:1;
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-2);
  margin:0;
  font-style:italic;
}

@media (prefers-reduced-motion: reduce){
  .bf-rev-track{ animation:none; }
}
@media (max-width:600px){
  .bf-rev-card{ flex-basis:270px; }
}






:root{
    --navy:#122834;
    --navy-deep:#0B1D26;
    --teal:#22C1C3;
    --coral:#e6292a;
    --cream:#F5F1E8;
    --grey:#9FB3B5;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{background:var(--navy-deep);color:var(--cream);font-family:'Inter',sans-serif;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;}
  body::-webkit-scrollbar,html::-webkit-scrollbar{display:none;width:0;height:0;}

  /* ---- Ambient animated background glow (sits behind everything) ---- */
  .bg-glow{
    position:fixed;
    inset:-15%;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(38% 32% at 18% 22%, rgba(47,166,160,0.16), transparent 65%),
      radial-gradient(34% 30% at 82% 18%, rgba(255,107,84,0.12), transparent 65%),
      radial-gradient(40% 34% at 65% 85%, rgba(47,166,160,0.10), transparent 65%),
      radial-gradient(30% 28% at 15% 85%, rgba(255,107,84,0.08), transparent 65%);
    filter:blur(70px);
    animation:drift 26s ease-in-out infinite alternate;
  }
  @keyframes drift{
    0%{transform:translate(0,0) scale(1);}
    50%{transform:translate(3%,-2%) scale(1.06);}
    100%{transform:translate(-2%,3%) scale(1);}
  }

  .filler,.work,.work-scroll{position:relative;z-index:1;}

  /* ---- These now carry their own solid background so they never
     inherit a lighter background from the rest of the homepage ---- */
  .filler{
    height:50vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 24px;
    background:var(--navy-deep);
  }
  .filler h1{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(28px,5vw,52px);
    color:var(--cream);
    max-width:800px;
    line-height:1.15;
  }
  .filler span{color:var(--teal);font-style:italic;}
  .filler p{
    margin-top:18px;
    color:var(--grey);
    font-size:14px;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  /* ---- Intro filler now matches the same dark background as the
     work section below it, so there's no light seam between them ---- */
  .filler:not(.end){
    background:var(--navy-deep) !important;
  }
  .filler:not(.end) h1{
    color:var(--cream) !important;
  }
  .filler:not(.end) span{
    color:var(--teal) !important;
    font-style:italic;
  }
  .filler:not(.end) p{
    color:var(--grey) !important;
  }

  /* ---- Self-contained full-screen snap viewport ---- */
  .work{
    position:relative;
    height:100vh;
    background:var(--navy-deep);
    overflow:hidden;
  }

  .work-overlay{
    position:absolute;
    inset:0;
    z-index:6;
    pointer-events:none;
  }
  .work-head{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:36px clamp(24px,6vw,72px) 0;
    background:transparent;
    opacity:0;
    animation:headIn 1s cubic-bezier(.16,.8,.3,1) .2s forwards;
  }
  @keyframes headIn{
    from{opacity:0;transform:translateY(-16px);}
    to{opacity:1;transform:translateY(0);}
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;
    letter-spacing:.14em;
    color:var(--teal);
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .eyebrow::before{
    content:'';
    width:6px;height:6px;
    border-radius:50%;
    background:var(--coral);
    animation:pulse 2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.45;transform:scale(.7);}
  }
  .work-head h2{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(22px,3vw,34px);
    margin-top:8px;
    color:var(--cream);
    position:relative;
    display:inline-block;
    width:fit-content;
    pointer-events:auto;
    cursor:default;
  }
  .work-head h2::after{
    content:'';
    position:absolute;
    left:0;bottom:-4px;
    height:1.5px;
    width:0;
    background:linear-gradient(90deg,var(--teal),var(--coral));
    transition:width .5s cubic-bezier(.16,.8,.3,1);
  }
  .work-head h2:hover::after{width:100%;}
  .work-head h2:hover{color:var(--cream);letter-spacing:.01em;}
  .work-head h2{transition:letter-spacing .4s ease;}
  .counter{
    position:absolute;
    top:38px;
    right:clamp(24px,6vw,72px);
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
    color:var(--grey);
    white-space:nowrap;
  }
  .counter b{color:var(--coral);font-weight:500;display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
  .counter b.bump{transform:scale(1.35);}

  .scroll-cue{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    letter-spacing:.1em;
    color:var(--grey);
    text-transform:uppercase;
    opacity:1;
    transition:opacity .3s ease;
  }
  .scroll-cue.hide{opacity:0;}
  .scroll-cue .arrow{
    width:14px;height:14px;
    border-right:1.5px solid var(--teal);
    border-bottom:1.5px solid var(--teal);
    transform:rotate(45deg);
    animation:bob 1.6s ease-in-out infinite;
  }
  @keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(4px,4px);}}

  /* ---- Inner scrolling snap track ---- */
  .work-scroll{
    height:100%;
    overflow-y:scroll;
    scroll-snap-type:y mandatory;
    scrollbar-width:none;
    background:var(--navy-deep);
  }
  .work-scroll::-webkit-scrollbar{display:none;}

  .panel{
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(20px,4.5vw,72px);
    padding:0 clamp(24px,6vw,72px);
    max-width:1240px;
    margin:0 auto;
  }
  .panel.reverse{flex-direction:row-reverse;}

  .panel-inner-l{
    opacity:0;
    transform:translateX(-70px) scale(.94) rotate(-1.5deg);
    transition:opacity .75s cubic-bezier(.16,.8,.3,1), transform .75s cubic-bezier(.16,.8,.3,1);
  }
  .panel-inner-r{
    opacity:0;
    transform:translateX(70px) scale(.97);
    transition:opacity .75s cubic-bezier(.16,.8,.3,1) .14s, transform .75s cubic-bezier(.16,.8,.3,1) .14s;
  }
  .panel.reverse .panel-inner-l{transform:translateX(70px) scale(.94) rotate(1.5deg);}
  .panel.reverse .panel-inner-r{transform:translateX(-70px) scale(.97);}

  .panel.in-view .panel-inner-l,.panel.in-view .panel-inner-r{
    opacity:1;
    transform:translateX(0) scale(1) rotate(0deg);
  }

  .mock{
    flex:0 0 auto;
    height:min(64vh,560px);
    aspect-ratio:4/3;
    border-radius:16px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(245,241,232,0.12);
    box-shadow:0 30px 70px -22px rgba(0,0,0,0.65);
    transition:transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease;
  }
  .mock::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:18px;
    padding:2px;
    background:linear-gradient(135deg, var(--teal), transparent 40%, var(--coral));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.5;
    animation:ringPulse 4.5s ease-in-out infinite;
    pointer-events:none;
    z-index:3;
  }
  @keyframes ringPulse{
    0%,100%{opacity:.35;}
    50%{opacity:.8;}
  }
  .mock:hover{
    transform:translateY(-10px);
    box-shadow:0 40px 90px -20px rgba(0,0,0,0.75), 0 0 40px -6px rgba(47,166,160,0.35), 0 0 0 1px rgba(47,166,160,0.25);
  }
  .mock .bar{
    height:32px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    background:rgba(7,18,25,0.85);
    position:relative;
    z-index:2;
  }
  .mock .dot{width:8px;height:8px;border-radius:50%;background:rgba(245,241,232,0.3);}
  .mock img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    position:relative;
    z-index:1;
  }
  .mock .bg-fill{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:blur(28px) saturate(1.3) brightness(.65);
    transform:scale(1.2);
    z-index:0;
  }
  .mock .body{
    height:calc(100% - 32px);
    position:relative;
    overflow:hidden;
    background:var(--navy-deep);
  }
  .mock .shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,18,25,0.25), rgba(7,18,25,0.5));
    transition:opacity .5s cubic-bezier(.16,.8,.3,1);
    opacity:1;
    z-index:2;
  }
  .mock:hover .shade{opacity:0;}
  .mock .body::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(60% 45% at 30% 0%, rgba(245,241,232,0.08), transparent 70%);
    animation:sheen 6s ease-in-out infinite alternate;
    pointer-events:none;
    mix-blend-mode:overlay;
    z-index:1;
  }
  @keyframes sheen{
    0%{transform:translate(-10%,0%) scale(1);opacity:.5;}
    100%{transform:translate(10%,0%) scale(1.2);opacity:.9;}
  }
  .mock .glyph{
    position:absolute;
    right:14px;
    bottom:10px;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:15px;
    color:rgba(245,241,232,0.7);
    background:rgba(7,18,25,0.7);
    padding:3px 10px;
    border-radius:20px;
    z-index:4;
    transition:transform .6s cubic-bezier(.16,.8,.3,1);
  }
  .mock:hover .glyph{transform:scale(1.06);}

  .info{max-width:480px;}
  .info .num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--teal);
    font-size:13px;
    letter-spacing:.1em;
  }
  .info h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:clamp(26px,3.2vw,40px);
    margin:10px 0 14px;
    line-height:1.1;
    color:var(--cream);
  }
  .info p{
    color:var(--grey);
    font-size:15px;
    line-height:1.62;
    margin-bottom:20px;
  }
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
  .tags span{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    letter-spacing:.04em;
    color:var(--cream);
    background:rgba(245,241,232,0.08);
    border:1px solid rgba(245,241,232,0.16);
    padding:5px 10px;
    border-radius:20px;
    transition:border-color .2s ease, background .2s ease;
  }
  .tags span:hover{
    border-color:rgba(47,166,160,0.5);
    background:rgba(47,166,160,0.1);
  }
  .cta{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    color:var(--coral) !important;
    opacity:1 !important;
    font-size:14.5px;
    font-weight:500;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,107,84,0.35);
    padding-bottom:3px;
    transition:gap .2s ease, border-color .2s ease, color .2s ease;
    pointer-events:auto;
  }
  .cta:hover,.cta:visited,.cta:active,.cta:focus{color:#FF8873 !important;}
  .cta:hover{gap:13px;border-color:var(--coral);}

  /* ---- Progress rail (premium version) ---- */
  .rail{
    position:absolute;
    right:clamp(20px,4vw,56px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:16px;
    pointer-events:auto;
    counter-reset:railnum;
  }
  .rail button{
    all:unset;
    counter-increment:railnum;
    cursor:pointer;
    position:relative;
    width:34px;
    height:22px;
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    background:transparent !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  .rail .seg{
    display:block;
    width:22px;
    height:2px;
    border-radius:3px;
    background:rgba(245,241,232,0.28);
    box-shadow:none;
    transition:width .35s cubic-bezier(.16,.8,.3,1), background .3s ease, box-shadow .3s ease, height .3s ease;
  }
  .rail button:hover .seg{
    width:30px;
    background:var(--cream);
    box-shadow:0 0 10px rgba(245,241,232,0.45);
  }
  .rail button.active .seg{
    width:36px;
    height:3px;
    background:var(--coral);
    box-shadow:0 0 16px rgba(255,107,84,0.65);
  }
  .rail button.passed .seg{
    background:var(--teal);
    box-shadow:0 0 8px rgba(47,166,160,0.4);
  }

  /* number tooltip that appears on hover, to the left of each segment */
  .rail button::before{
    content:counter(railnum);
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(6px);
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.04em;
    color:var(--cream);
    background:rgba(11,29,38,0.92);
    border:1px solid rgba(245,241,232,0.18);
    padding:3px 8px;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .rail button:hover::before{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
  .rail button.active::before{
    color:var(--coral);
    border-color:rgba(255,107,84,0.35);
  }

  .filler.end{height:44vh;background:var(--navy-deep);}

  @media (prefers-reduced-motion: reduce){
    .panel-inner-l,.panel-inner-r,.mock{transition:none !important;}
  }

  /* ---- Tablet + Mobile: stacked layout with its own reveal animation
     (fade + slide-up instead of the desktop sideways slide) ---- */
  @media (max-width:1024px){
    .work{height:auto;overflow:visible;}
    .work-overlay{display:none;}
    .work-scroll{height:auto;overflow:visible;scroll-snap-type:none;}
    .panel,.panel.reverse{
      height:auto;
      flex-direction:column;
      padding:52px 24px;
      gap:28px;
      scroll-snap-align:none;
    }
    .mock{width:100%;max-width:560px;height:auto;margin:0 auto;}
    .info{max-width:560px;margin:0 auto;text-align:left;}

    .panel-inner-l,.panel-inner-r,
    .panel.reverse .panel-inner-l,.panel.reverse .panel-inner-r{
      opacity:0;
      transform:translateY(36px);
      transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
    }
    .panel.in-view .panel-inner-l,.panel.in-view .panel-inner-r{
      opacity:1;
      transform:translateY(0);
    }

    /* remove the large empty dark space above/below on smaller screens */
    .filler{height:auto;padding:56px 24px;}
    .filler.end{height:auto;padding:56px 24px;}
  }

  @media (min-width:601px) and (max-width:1024px){
    .panel,.panel.reverse{padding:64px 40px;gap:36px;}
  }

  @media (max-width:600px){
    .filler{padding:44px 20px;}
    .filler.end{padding:44px 20px;}
    .panel,.panel.reverse{padding:40px 18px;}
  }/* End custom CSS */