/* ── DEVVISTA HOME CSS ── */
/* Homepage-specific styles for index.html */

/* ── SHARED ── */
.section-label{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.67rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.25rem;}
.section-label::before{content:'';width:22px;height:2px;background:var(--accent);flex-shrink:0;}
.section-label.light{color:rgba(255,255,255,0.65);}
.section-label.light::before{background:rgba(255,255,255,0.4);}
.section-label.on-cream{color:var(--accent);}
.section-label.on-cream::before{background:var(--accent);}
.section-heading{font-size:clamp(1.9rem,3.5vw,3rem);font-weight:900;color:var(--white);line-height:1.05;letter-spacing:-1px;margin-bottom:1rem;}
.section-heading.on-cream{color:var(--dark);}
.section-sub{color:var(--muted);font-size:0.95rem;line-height:1.85;}
.section-sub.on-cream{color:rgba(14,16,15,0.55);}
.text-stroke-accent{-webkit-text-stroke:2px var(--accent);color:transparent;}
.text-stroke-white{-webkit-text-stroke:2px var(--white);color:transparent;}

/* BUTTONS (homepage variants) */
.btn-primary-custom{background:var(--cream);color:var(--dark);font-weight:800;font-size:0.82rem;padding:0.9rem 2rem;border-radius:6px;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:0.55rem;letter-spacing:0.03em;transition:all 0.22s;}
.btn-primary-custom:hover{background:var(--accent);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,58,26,0.35);}
.btn-outline-custom{background:transparent;color:var(--cream);font-weight:700;font-size:0.82rem;padding:0.9rem 2rem;border-radius:6px;border:1.5px solid rgba(245,230,211,0.22);text-decoration:none;display:inline-flex;align-items:center;gap:0.55rem;transition:all 0.22s;}
.btn-outline-custom:hover{border-color:var(--cream);color:var(--white);background:rgba(245,230,211,0.05);}
.btn-accent-sharp{background:var(--accent);color:var(--white);font-weight:800;font-size:0.82rem;padding:0.9rem 2rem;border-radius:6px;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:0.55rem;letter-spacing:0.03em;transition:all 0.22s;}
.btn-accent-sharp:hover{background:var(--accent-h);color:var(--white);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,58,26,0.4);}
.btn-white-sharp{background:var(--white);color:var(--accent);font-weight:800;font-size:0.875rem;padding:1rem 2.4rem;border-radius:6px;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:0.55rem;transition:all 0.22s;letter-spacing:0.02em;}
.btn-white-sharp:hover{background:var(--cream);color:var(--accent);transform:translateY(-2px);}
.btn-ghost-white{background:transparent;color:var(--white);font-weight:700;font-size:0.875rem;padding:1rem 2.4rem;border-radius:6px;border:1.5px solid rgba(255,255,255,0.35);text-decoration:none;display:inline-flex;align-items:center;gap:0.55rem;transition:all 0.22s;}
.btn-ghost-white:hover{border-color:var(--white);background:rgba(255,255,255,0.08);}

/* ── 1. HERO ── */
.hero{padding:4.5rem 0 3.5rem;background:var(--dark);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent) 0%,transparent 55%);}
.hero-bg-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:19vw;font-weight:900;line-height:1;pointer-events:none;user-select:none;color:transparent;-webkit-text-stroke:1px rgba(245,230,211,0.025);background:linear-gradient(100deg,transparent 0%,transparent 38%,rgba(232,58,26,0.08) 43%,rgba(255,150,100,0.75) 47%,rgba(255,255,255,0.96) 50%,rgba(255,150,100,0.75) 53%,rgba(232,58,26,0.08) 57%,transparent 62%,transparent 100%);background-size:300% 100%;background-position:100% center;-webkit-background-clip:text;background-clip:text;animation:electricZap 8s linear infinite;}
@keyframes electricZap{
  0%    {background-position:100% center;}
  50%   {background-position:100% center;}
  51%   {background-position:97% center;}
  51.4% {background-position:100% center;}
  52%   {background-position:95% center;}
  52.4% {background-position:100% center;}
  53%   {background-position:93% center;}
  53.4% {background-position:100% center;}
  78%   {background-position:0% center;}
  78.6% {background-position:3% center;}
  79.2% {background-position:0% center;}
  79.8% {background-position:4% center;}
  80.4% {background-position:0% center;}
  100%  {background-position:0% center;}
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.6rem;background:rgba(232,58,26,0.1);border:1px solid rgba(232,58,26,0.28);border-radius:4px;padding:0.35rem 1rem;font-size:0.69rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:1.75rem;}
.hero h1{font-size:clamp(2.6rem,5.8vw,5.2rem);font-weight:900;color:var(--white);line-height:1.0;letter-spacing:-2.5px;margin-bottom:1.4rem;}
.hero-body{color:var(--muted);font-size:1rem;max-width:700px;line-height:1.9;margin-bottom:0;}
.hero-cta{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:1.75rem;justify-content:center;}
.hero-trust{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:1.5rem;justify-content:center;}
.trust-badge{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.72rem;font-weight:700;color:rgba(245,230,211,0.45);letter-spacing:0.02em;}
.trust-badge i{color:var(--accent);font-size:0.82rem;}
.trust-sep{width:1px;height:14px;background:var(--border);}
.client-logos{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border);}
.client-logos-label{font-size:0.65rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:rgba(245,230,211,0.2);text-align:center;margin-bottom:1.25rem;}
.logo-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);}
.logo-track{display:flex;align-items:center;width:max-content;animation:logoScroll 22s linear infinite;}
.logo-track:hover{animation-play-state:paused;}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-item{padding:0 3rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.75;transition:opacity 0.3s;}
.logo-item:hover{opacity:1;}
.logo-item img{height:80px;width:auto;max-width:220px;object-fit:contain;display:block;}

/* Hero animations */
.hero-glow{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(232,58,26,0.07) 0%,transparent 60%);pointer-events:none;transform:translate(-50%,-50%);left:50%;top:50%;z-index:0;transition:left 0.25s ease,top 0.25s ease;}
.hero .container{position:relative;z-index:1;}
.hero-eyebrow{opacity:0;transform:translateY(-12px);animation:eyebrowDrop 0.55s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;}
@keyframes eyebrowDrop{to{opacity:1;transform:translateY(0);}}
.hero-line{display:block;overflow:hidden;line-height:1.08;}
.hero-line-inner{display:block;transform:translateY(108%);opacity:0;}
.hero-line:nth-child(1) .hero-line-inner{animation:lineUp 1s cubic-bezier(0.22,1,0.36,1) 0.22s forwards;}
.hero-line:nth-child(2) .hero-line-inner{animation:lineUp 1s cubic-bezier(0.22,1,0.36,1) 0.38s forwards;}
.hero-line:nth-child(3) .hero-line-inner{animation:lineUp 1s cubic-bezier(0.22,1,0.36,1) 0.54s forwards;}
@keyframes lineUp{to{transform:translateY(0);opacity:1;}}
.mw{display:inline-block;transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),color 0.3s;}
.shimmer-word{background:linear-gradient(100deg,var(--accent) 0%,#ff9c7a 40%,#ffe8d6 55%,#ff9c7a 70%,var(--accent) 100%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textShimmer 3s linear infinite;}
@keyframes textShimmer{0%{background-position:0% center}100%{background-position:300% center}}
.hero-body{opacity:0;animation:heroFadeUp 0.7s ease 0.75s both;}
.hero-cta{opacity:0;animation:heroFadeUp 0.7s ease 0.9s both;}
.hero-trust{opacity:0;animation:heroFadeUp 0.7s ease 1.05s both;}
.client-logos{opacity:0;animation:heroFadeUp 0.7s ease 1.2s both;}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(26px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-up.visible{opacity:1;transform:translateY(0);}
.stagger-1{transition-delay:0.07s;}.stagger-2{transition-delay:0.14s;}.stagger-3{transition-delay:0.21s;}

/* ── 2. SERVICES BENTO ── */
.services-section{background:var(--dark-2);padding:6rem 0;}
.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;}
.b-8{grid-column:span 8;}.b-4{grid-column:span 4;}.b-6{grid-column:span 6;}.b-3{grid-column:span 3;}.b-9{grid-column:span 9;}
.bento-card{padding:2.25rem;position:relative;overflow:hidden;transition:transform 0.3s cubic-bezier(0.34,1.3,0.64,1);}
.bento-card:hover{transform:scale(0.985);}
.bc-dark{background:var(--dark-3);border:1px solid var(--border);}
.bc-accent{background:var(--accent);}
.bc-cream{background:var(--cream);}
.bc-outline{background:transparent;border:1px solid rgba(232,58,26,0.28);}
.bento-icon{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.1rem;transition:transform 0.3s;}
.bento-card:hover .bento-icon{transform:rotate(-8deg) scale(1.1);}
.bc-dark .bento-icon,.bc-outline .bento-icon{background:rgba(232,58,26,0.1);border:1px solid rgba(232,58,26,0.2);color:var(--accent);}
.bc-accent .bento-icon{background:rgba(0,0,0,0.18);border:1px solid rgba(255,255,255,0.2);color:var(--white);}
.bc-cream .bento-icon{background:rgba(232,58,26,0.1);border:1px solid rgba(232,58,26,0.18);color:var(--accent);}
.bento-num{font-size:0.62rem;font-weight:900;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:1.25rem;display:block;}
.bc-dark .bento-num,.bc-outline .bento-num{color:rgba(245,230,211,0.1);}
.bc-accent .bento-num{color:rgba(255,255,255,0.3);}
.bc-cream .bento-num{color:rgba(14,16,15,0.15);}
.bento-card h3{font-size:1rem;font-weight:800;letter-spacing:-0.2px;line-height:1.25;margin-bottom:0.6rem;}
.bc-dark h3,.bc-outline h3{color:var(--white);}
.bc-accent h3{color:var(--white);}
.bc-cream h3{color:var(--dark);}
.bento-card p{font-size:0.845rem;line-height:1.78;margin:0;}
.bc-dark p,.bc-outline p{color:var(--muted);}
.bc-accent p{color:rgba(255,255,255,0.75);}
.bc-cream p{color:rgba(14,16,15,0.6);}
.bento-ghost{position:absolute;bottom:-8px;right:-4px;font-size:4rem;font-weight:900;line-height:1;pointer-events:none;user-select:none;}
.bc-dark .bento-ghost,.bc-outline .bento-ghost{-webkit-text-stroke:1px rgba(245,230,211,0.05);color:transparent;}
.bc-accent .bento-ghost{-webkit-text-stroke:1px rgba(255,255,255,0.1);color:transparent;}
.bc-cream .bento-ghost{-webkit-text-stroke:1px rgba(14,16,15,0.07);color:transparent;}
.bento-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.78rem;font-weight:800;text-decoration:none;margin-top:1rem;transition:gap 0.2s;}
.bc-dark .bento-link,.bc-outline .bento-link{color:var(--accent);}
.bc-accent .bento-link{color:rgba(255,255,255,0.9);}
.bc-cream .bento-link{color:var(--accent);}
.bento-link:hover{gap:0.7rem;}
@media(max-width:991px){.bento-grid{grid-template-columns:repeat(6,1fr);}.b-8{grid-column:span 4;}.b-4{grid-column:span 2;}.b-6{grid-column:span 3;}.b-3{grid-column:span 2;}.b-9{grid-column:span 4;}}
@media(max-width:767px){.bento-grid{grid-template-columns:1fr 1fr;}.b-8,.b-4,.b-6,.b-3,.b-9{grid-column:span 2;}}
@media(max-width:480px){.bento-grid{grid-template-columns:1fr;}.b-8,.b-4,.b-6,.b-3,.b-9{grid-column:span 1;}}

/* ── 3. WHY ── */
.why-section{background:var(--accent);padding:6rem 0;position:relative;overflow:hidden;}
.why-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;}
.comp-table-wrap{margin-top:3rem;border-radius:8px;overflow:hidden;box-shadow:0 8px 48px rgba(0,0,0,0.35);}
.comp-table-scroll{overflow-x:auto;}
.comp-table{width:100%;border-collapse:collapse;background:#0e100f;}
.comp-thead tr{background:#161a18;}
.comp-th{padding:1.5rem 2rem;text-align:center;font-size:0.63rem;font-weight:900;letter-spacing:0.15em;text-transform:uppercase;min-width:160px;}
.comp-th-feature{text-align:left;min-width:260px;color:rgba(255,255,255,0.3);font-size:0.58rem;}
.comp-th-freelancer{color:rgba(255,255,255,0.7);border-bottom:2px solid rgba(255,255,255,0.12);}
.comp-th-agency{color:rgba(255,255,255,0.7);border-bottom:2px solid rgba(255,255,255,0.12);}
.comp-th-devvista{background:var(--cream);color:var(--dark);border-bottom:3px solid var(--accent);vertical-align:top;padding-top:1.25rem;}
.comp-best-badge{display:block;font-size:0.5rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-top:0.3rem;font-weight:900;}
.comp-td-feature{font-size:0.83rem;font-weight:500;color:rgba(255,255,255,0.72);padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,0.06);}
.comp-td{text-align:center;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,0.06);}
.comp-td-dv{background:rgba(245,230,211,0.05);border-left:1px solid rgba(245,230,211,0.07);border-right:1px solid rgba(245,230,211,0.07);}
.comp-table tbody tr:last-child td{border-bottom:none;}
.comp-table tbody tr:hover{background:rgba(255,255,255,0.025);}
.comp-table tbody tr:hover .comp-td-feature{color:var(--white);}
.ci{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:0.9rem;font-weight:700;line-height:1;}
.ci-yes{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.25);}
.ci-no{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.08);}
@media(max-width:767px){.comp-th,.comp-td,.comp-td-feature{padding:0.75rem 1rem;font-size:0.75rem;}.comp-th-feature{min-width:150px;}}

/* ── 4. PROCESS ── */
.process-section{background:var(--cream);padding:6rem 0;}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(14,16,15,0.12);margin-top:3rem;}
.process-step{padding:2.5rem 2rem;border-right:1px solid rgba(14,16,15,0.12);position:relative;transition:background 0.3s;}
.process-step:hover{background:rgba(232,58,26,0.04);}
.process-step:last-child{border-right:none;}
.process-step:nth-child(n+4){border-top:1px solid rgba(14,16,15,0.12);}
.ps-num{font-size:3.5rem;font-weight:900;color:rgba(14,16,15,0.08);line-height:1;margin-bottom:0.75rem;letter-spacing:-2px;}
.ps-label{font-size:0.63rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem;}
.process-step h4{font-size:1rem;font-weight:800;color:var(--dark);margin-bottom:0.5rem;}
.process-step p{font-size:0.855rem;color:rgba(14,16,15,0.55);line-height:1.8;margin:0;}
@media(max-width:991px){.process-grid{grid-template-columns:repeat(2,1fr);}.process-step:nth-child(2n){border-right:none;}.process-step:nth-child(n+3){border-top:1px solid rgba(14,16,15,0.12);}}
@media(max-width:575px){.process-grid{grid-template-columns:1fr;}.process-step{border-right:none;border-bottom:1px solid rgba(14,16,15,0.12);}.process-step:last-child{border-bottom:none;}}

/* ── 5. INDUSTRIES ── */
.industries-section{background:var(--dark-3);padding:6rem 0;}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
.industry-item{background:var(--dark-3);padding:1.75rem 1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.75rem;transition:background 0.25s,transform 0.2s;cursor:pointer;text-decoration:none;color:inherit;}.industry-item:hover{background:var(--dark-2);transform:translateY(-2px);}.industry-item:hover .ind-icon i{color:var(--accent);}
.industry-item:hover{background:rgba(232,58,26,0.07);}
.ind-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--accent);}
.industry-item span{font-weight:700;font-size:0.88rem;color:var(--cream);}
@media(max-width:767px){.industry-grid{grid-template-columns:repeat(2,1fr);}}

/* ── 6. CASE STUDIES ── */
.cases-section{background:var(--dark);padding:6rem 0;}
.case-card{background:var(--dark-2);border:1px solid var(--border);height:100%;display:flex;flex-direction:column;transition:transform 0.3s cubic-bezier(0.34,1.3,0.64,1),border-color 0.3s;}
.case-card:hover{transform:translateY(-6px);border-color:rgba(232,58,26,0.3);}
.case-img{height:200px;background:var(--dark-3);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:rgba(232,58,26,0.25);border-bottom:1px solid var(--border);}
.case-img.ci-1{background:linear-gradient(135deg,#1a1d1b 0%,rgba(232,58,26,0.12) 100%);}
.case-img.ci-2{background:linear-gradient(135deg,#1a1d1b 0%,rgba(130,170,255,0.1) 100%);}
.case-img.ci-3{background:linear-gradient(135deg,#1a1d1b 0%,rgba(245,230,211,0.08) 100%);}
.case-body{padding:1.75rem;flex:1;display:flex;flex-direction:column;}
.case-tag{font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;}
.case-card h3{font-size:1rem;font-weight:800;color:var(--white);margin-bottom:0.65rem;line-height:1.3;}
.case-card p{font-size:0.855rem;color:var(--muted);line-height:1.78;margin:0;flex:1;}
.case-footer{padding:1rem 1.75rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.case-footer a{color:var(--accent);font-size:0.78rem;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:gap 0.2s;}
.case-footer a:hover{gap:0.7rem;}

/* ── 7. TESTIMONIALS ── */
.testimonials-section{background:var(--dark-2);padding:6rem 0;position:relative;overflow:hidden;}
.testimonials-section::before{content:'"';position:absolute;top:-60px;left:50%;transform:translateX(-50%);font-size:22rem;font-weight:900;color:rgba(232,58,26,0.04);line-height:1;pointer-events:none;}
.testi-card{background:var(--dark-3);border:1px solid var(--border);padding:2rem;height:100%;display:flex;flex-direction:column;transition:border-color 0.3s,transform 0.3s;}
.testi-card:hover{border-color:rgba(232,58,26,0.3);transform:translateY(-4px);}
.testi-card.testi-featured{padding:2.5rem;position:relative;}
.testi-card.testi-featured::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--accent);}
.testi-stars{color:var(--accent);font-size:0.82rem;letter-spacing:2px;margin-bottom:1rem;}
.testi-quote{font-size:clamp(1rem,1.6vw,1.25rem);font-weight:700;color:var(--white);line-height:1.55;margin-bottom:1.5rem;flex:1;}
.testi-quote-sm{font-size:0.9rem;font-weight:500;color:rgba(245,230,211,0.72);line-height:1.78;font-style:italic;margin-bottom:1.25rem;flex:1;}
.testi-author{display:flex;align-items:center;gap:0.9rem;margin-top:auto;}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:900;color:var(--white);flex-shrink:0;}
.testi-name{font-size:0.85rem;font-weight:800;color:var(--cream);}
.testi-role{font-size:0.75rem;color:var(--muted);}
.testi-video-card{background:var(--dark-3);border:1px solid var(--border);height:100%;display:flex;flex-direction:column;transition:border-color 0.3s,transform 0.3s;overflow:hidden;}
.testi-video-card:hover{border-color:rgba(232,58,26,0.35);transform:translateY(-4px);}
.testi-vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;flex-shrink:0;}
.testi-vid-bg{position:absolute;inset:0;background:linear-gradient(135deg,#141614 0%,rgba(232,58,26,0.2) 60%,#1a1d1b 100%);}
.testi-vid-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,16,15,0.65) 0%,transparent 55%);}
.testi-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--accent);z-index:2;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),background 0.25s;box-shadow:0 8px 32px rgba(0,0,0,0.45);border:none;cursor:pointer;}
.testi-video-card:hover .testi-play-btn{transform:translate(-50%,-50%) scale(1.14);background:var(--accent);color:var(--white);}
.testi-vid-platform{position:absolute;top:14px;right:14px;background:rgba(0,0,0,0.55);backdrop-filter:blur(6px);border-radius:4px;padding:0.2rem 0.6rem;font-size:0.6rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.7);z-index:2;}
.testi-vid-stars{position:absolute;bottom:14px;left:16px;color:var(--accent);font-size:0.75rem;letter-spacing:1.5px;z-index:2;}
.testi-vid-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.testi-vid-quote{font-size:0.88rem;color:rgba(245,230,211,0.68);font-style:italic;line-height:1.78;margin-bottom:1.1rem;flex:1;}
.testi-vid-author{display:flex;align-items:center;gap:0.75rem;margin-top:auto;}
.testi-vid-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),rgba(232,58,26,0.5));display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:900;color:var(--white);flex-shrink:0;}
.testi-vid-name{font-size:0.82rem;font-weight:800;color:var(--cream);}
.testi-vid-role{font-size:0.72rem;color:var(--muted);}

/* ── 8. WHERE WE SERVE ── */
.serve-section{background:var(--dark);padding:6rem 0;}
.serve-countries{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem;}
.serve-pill{display:inline-flex;align-items:center;gap:0.6rem;background:var(--dark-2);border:1px solid var(--border);padding:0.75rem 1.25rem;font-size:0.85rem;font-weight:700;color:var(--cream);transition:all 0.25s;}
.serve-pill:hover{border-color:var(--accent);color:var(--accent);background:rgba(232,58,26,0.05);}
.serve-pill span{font-size:1.2rem;}
.serve-map{background:var(--dark-3);border:1px solid var(--border);overflow:hidden;width:100%;}
#worldMap{height:370px;width:100%;}
.leaflet-container{background:#0E100F!important;}
.leaflet-control-attribution{background:rgba(14,16,15,0.82)!important;color:rgba(245,230,211,0.22)!important;font-size:8px!important;border:none!important;box-shadow:none!important;}
.map-pin{position:relative;width:16px;height:16px;}
.map-pin-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#E83A1A;box-shadow:0 0 10px rgba(232,58,26,0.7);}
.map-pin-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:rgba(232,58,26,0.45);animation:pinPulse 2.8s ease-out infinite;}
@keyframes pinPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:0.7;}65%{transform:translate(-50%,-50%) scale(3.6);opacity:0;}100%{transform:translate(-50%,-50%) scale(3.6);opacity:0;}}
.leaflet-tooltip.map-tip{background:#0E100F;border:1px solid rgba(245,230,211,0.14);color:#F5E6D3;font-size:0.72rem;font-weight:700;padding:0.28rem 0.7rem;border-radius:4px;}
.leaflet-tooltip.map-tip::before{display:none;}
.map-legend{display:flex;flex-wrap:wrap;gap:0.4rem 1.2rem;padding:0.85rem 1.25rem 0.9rem;border-top:1px solid var(--border);}
.map-legend-item{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.68rem;font-weight:700;color:rgba(245,230,211,0.42);}
.map-dot-pin{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}

/* ── 9. BLOG ── */
.blog-section{background:var(--dark-3);padding:6rem 0;}
.blog-card{background:var(--dark-2);border:1px solid var(--border);height:100%;display:flex;flex-direction:column;transition:transform 0.3s,border-color 0.3s;}
.blog-card:hover{transform:translateY(-5px);border-color:rgba(232,58,26,0.25);}
.blog-body{padding:1.75rem;flex:1;display:flex;flex-direction:column;}
.blog-tag{font-size:0.63rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem;}
.blog-card h3{font-size:0.95rem;font-weight:800;color:var(--white);margin-bottom:0.6rem;line-height:1.4;}
.blog-card p{font-size:0.845rem;color:var(--muted);line-height:1.78;flex:1;margin-bottom:1.25rem;}
.blog-meta{font-size:0.72rem;color:rgba(245,230,211,0.3);display:flex;align-items:center;gap:0.5rem;font-weight:600;}
.blog-footer{padding:1rem 1.75rem;border-top:1px solid var(--border);}
.blog-footer a{color:var(--accent);font-size:0.78rem;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;transition:gap 0.2s;}
.blog-footer a:hover{gap:0.7rem;}

/* ── 10. FAQ ── */
.faq-section{background:var(--dark-2);padding:6rem 0;}
.accordion-item{background:transparent!important;border:none!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;}
.accordion-item:first-of-type{border-top:1px solid var(--border)!important;}
.accordion-button{background:transparent!important;color:var(--white)!important;font-weight:700;font-size:0.92rem;padding:1.5rem 0;box-shadow:none!important;font-family:'Montserrat',sans-serif;}
.accordion-button:not(.collapsed){color:var(--accent)!important;}
.accordion-button::after{filter:invert(1) sepia(1) saturate(5) hue-rotate(330deg);}
.accordion-body{background:transparent;color:var(--muted);font-size:0.88rem;line-height:1.85;padding:0 0 1.5rem;}

/* ── 11. CTA ── */
.cta-section{background:var(--dark);padding:8rem 0;position:relative;overflow:hidden;border-top:1px solid var(--border);}
.cta-bg-word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22vw;font-weight:900;white-space:nowrap;-webkit-text-stroke:1px rgba(245,230,211,0.025);color:transparent;pointer-events:none;user-select:none;}
.cta-line{width:56px;height:3px;background:var(--accent);margin:0 auto 2.25rem;}
.cta-section h2{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:900;color:var(--white);line-height:1.0;letter-spacing:-2px;margin-bottom:1.5rem;}
.cta-section p{color:var(--muted);font-size:1rem;line-height:1.85;max-width:460px;margin:0 auto 2.5rem;}
.cta-trust{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;margin-top:2.25rem;}
.cta-trust span{font-size:0.78rem;color:rgba(245,230,211,0.35);display:flex;align-items:center;gap:0.4rem;font-weight:600;}
.cta-trust i{color:var(--accent);}

/* ── MARQUEE ── */
.marquee-strip{background:var(--cream);padding:0.85rem 0;overflow:hidden;}
.marquee-track{display:flex;white-space:nowrap;animation:marqueeScroll 28s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{display:inline-flex;align-items:center;gap:0.75rem;font-size:0.75rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--dark);padding:0 2.5rem;}
.marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}


/* ══════════════════════════════════════════
   RESPONSIVE — TABLET (max 991px)
══════════════════════════════════════════ */
@media(max-width:991px){
  .hero{padding:3.5rem 0 2.5rem;}
  .serve-section .row{flex-direction:column;}
  .serve-section .col-lg-7{margin-top:2rem;}
  #worldMap{height:280px;}
  .testimonials-section::before{font-size:14rem;top:-30px;}
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE (max 767px)
══════════════════════════════════════════ */
@media(max-width:767px){
  /* Hero */
  .hero{padding:3rem 0 2rem;overflow-x:hidden;}
  .hero-bg-text{font-size:28vw;opacity:0.6;}
  .hero h1{font-size:clamp(2.2rem,9vw,3.2rem);letter-spacing:-1px;}
  .hero-body{font-size:0.92rem;}
  .hero-cta{flex-direction:column;gap:0.6rem;}
  .btn-primary-custom,.btn-outline-custom{justify-content:center;width:100%;}
  .hero-trust{gap:0.75rem;justify-content:center;}
  .trust-sep{display:none;}
  .trust-badge{font-size:0.68rem;}
  .logo-item{padding:0 1.75rem;}
  .logo-item img{height:52px;max-width:140px;}

  /* Sections spacing */
  .services-section,.why-section,.process-section,.industries-section,
  .cases-section,.testimonials-section,.serve-section,.blog-section,
  .faq-section{padding:4rem 0;}

  /* Section headings */
  .section-heading{font-size:clamp(1.6rem,7vw,2.2rem);letter-spacing:-0.5px;}

  /* Services */
  .services-section .row.mb-5{margin-bottom:2rem!important;}
  .services-section .col-lg-6:last-child{margin-top:0.5rem;}

  /* Why table — no scroll, compact layout */
  .comp-table-wrap{margin-top:2rem;}
  .comp-table-scroll{overflow-x:visible;}
  .comp-table{table-layout:fixed;width:100%;}
  .comp-th-feature,.comp-td-feature{width:46%;font-size:0.72rem;padding:0.65rem 0.75rem;word-break:break-word;white-space:normal;}
  .comp-th-freelancer,.comp-th-agency,.comp-th-devvista,.comp-td:nth-child(2),.comp-td:nth-child(3),.comp-td:nth-child(4){width:18%;padding:0.65rem 0.2rem;text-align:center;}
  .comp-th-freelancer,.comp-th-agency{font-size:0.5rem;letter-spacing:0.06em;padding-top:0.75rem;}
  .comp-th-devvista{font-size:0.5rem;letter-spacing:0.06em;padding-top:0.75rem;}
  .comp-best-badge{font-size:0.42rem;letter-spacing:0.12em;margin-top:0.15rem;}
  .ci{width:22px;height:22px;font-size:0.72rem;}

  /* Industries */
  .industry-grid{grid-template-columns:repeat(2,1fr);}
  .industry-item{padding:1.25rem 1rem;}

  /* Case studies */
  .cases-section .col-lg-4:not(:first-child){margin-top:0;}

  /* Testimonials */
  .testimonials-section::before{display:none;}
  .testi-card{padding:1.5rem;}
  .testi-card.testi-featured{padding:1.75rem;}
  .testi-quote{font-size:0.98rem;}

  /* Where we serve */
  .serve-section .col-lg-5,.serve-section .col-lg-7{width:100%;}
  .serve-map{width:100%;}
  #worldMap{height:220px;width:100%;}
  .serve-countries{gap:8px;}
  .serve-pill{padding:0.55rem 0.9rem;font-size:0.78rem;}

  /* Blog */
  .blog-section .col-lg-4:not(:first-child){margin-top:0;}

  /* FAQ */
  .faq-section .row.g-5{flex-direction:column;}
  .faq-section .col-lg-4{margin-bottom:1.5rem;}

  /* CTA */
  .cta-section{padding:5rem 0;}
  .cta-section h2{font-size:clamp(2rem,8vw,3rem);letter-spacing:-1px;}
  .cta-trust{gap:1.25rem;flex-direction:column;align-items:center;}
  .cta-bg-word{font-size:40vw;}

  /* Buttons */
  .btn-accent-sharp,.btn-white-sharp,.btn-ghost-white{width:100%;justify-content:center;}
  .d-flex.justify-content-center.gap-3{flex-direction:column;align-items:center;}
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 480px)
══════════════════════════════════════════ */
@media(max-width:480px){
  .hero h1{font-size:clamp(2rem,10vw,2.8rem);}
  .hero-bg-text{font-size:36vw;}
  .section-heading{font-size:clamp(1.5rem,8vw,2rem);}
  .industry-grid{grid-template-columns:1fr 1fr;}
  .logo-item{padding:0.65rem 0.85rem;}
  /* Table ultra compact */
  .comp-th-feature,.comp-td-feature{width:42%;font-size:0.68rem;padding:0.55rem 0.5rem;}
  .comp-th-freelancer,.comp-th-agency,.comp-th-devvista,
  .comp-td:nth-child(2),.comp-td:nth-child(3),.comp-td:nth-child(4){width:19%;padding:0.55rem 0.1rem;}
  .ci{width:20px;height:20px;font-size:0.65rem;}
  /* Map */
  #worldMap{height:200px;}
  .serve-pill{width:calc(50% - 4px);}
}