/* ================================================================
   ARCHI WORLD DESIGN STUDIO — main.css
   Fully responsive: Phone · Tablet · Laptop · Desktop
   ================================================================ */
 
/* ── CSS VARIABLES ── */
:root {
  --gold:        #2563eb;
  --gold-light:  #1d4ed8;
  --gold-pale:   #eff6ff;
  --black:       #fafafa;
  --dark:        #f1f5f9;
  --dark2:       #e2e8f0;
  --dark3:       #cbd5e1;
  --text:        #0f172a;
  --text-muted:  #475569;
  --white:       #020617;
  --pure-white:  #ffffff;
}
 
/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
img, svg { max-width:100%; height:auto; display:block; }
 
body {
  background:var(--black);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-weight:400;
  letter-spacing:0.02em;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
 
/* ── CUSTOM CURSOR (desktop only) ── */
.cursor {
  width:8px; height:8px;
  background:var(--gold); border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.1s ease;
}
.cursor-follower {
  width:36px; height:36px;
  border:1px solid var(--gold); border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:all 0.15s ease;
  opacity:0.6;
}
@media (pointer:coarse){ .cursor,.cursor-follower{display:none} body{cursor:auto} }
 
/* ── NOISE TEXTURE ── */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:1000; opacity:0.5;
}
 
/* ================================================================
   NAV
   ================================================================ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 60px;
  background:linear-gradient(to bottom, rgba(250,250,250,0.97), transparent);
  transition:background 0.3s, padding 0.3s;
}
.logo {
  display:flex; align-items:center; text-decoration:none;
  flex-shrink:0;
}
.logo-img {
  height:64px; width:auto; display:block;
  object-fit:contain;
  transition:opacity 0.3s, transform 0.3s;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  max-width:280px;
}
.logo-img:hover { opacity:0.9; transform:scale(1.03); }
 
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  text-decoration:none; color:var(--text-muted);
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  transition:color 0.3s; position:relative; font-weight:500;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold); transition:width 0.3s;
}
.nav-links a:hover { color:var(--gold); }
.nav-links a:hover::after { width:100%; }
 
.nav-cta {
  border:1px solid var(--gold); padding:10px 24px;
  font-size:10px; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); background:transparent; cursor:pointer;
  transition:all 0.3s; font-weight:500; font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.nav-cta:hover { background:var(--gold); color:var(--pure-white); }
 
/* Hamburger — hidden by default */
.nav-hamburger-wrap { display:none; align-items:center; gap:12px; }
.hamburger {
  display:flex; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:6px; z-index:200;
}
.hamburger span { width:24px; height:2px; background:var(--text); display:block; transition:0.3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
 
/* Mobile Nav Overlay */
.mobile-close {
  display:none; position:absolute; top:20px; right:24px;
  font-size:28px; background:none; border:none;
  cursor:pointer; color:var(--text); font-family:'Playfair Display',serif;
  z-index:300;
}
 
/* ================================================================
   HERO
   ================================================================ */
#hero {
  height:100vh; min-height:600px; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.4s ease;
}
.hero-slide.active { opacity:1; }
 
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.35) 40%, rgba(2,6,23,0.75) 100%);
}
.hero-overlay2 {
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse 70% 80% at 50% 50%, transparent 30%, rgba(2,6,23,0.4) 100%);
}
 
.hero-progress {
  position:absolute; bottom:0; left:0; height:3px;
  background:var(--gold); z-index:4;
  animation:heroProgress 5s linear infinite;
  transform-origin:left;
}
@keyframes heroProgress { from{width:0} to{width:100%} }
 
.hero-dots-nav {
  position:absolute; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:4;
  animation:fadeUp 1s ease 1.4s both;
}
.hdot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.35); cursor:pointer;
  transition:all 0.3s; border:none; padding:0;
}
.hdot.active { background:#fff; width:24px; border-radius:3px; }
 
.hero-counter {
  position:absolute; top:50%; right:40px; transform:translateY(-50%);
  z-index:4; text-align:center;
}
.hc-current { font-family:'Playfair Display',serif; font-size:42px; font-weight:700; color:#fff; line-height:1; }
.hc-sep { width:1px; height:40px; background:rgba(255,255,255,0.3); margin:8px auto; }
.hc-total { font-size:13px; color:rgba(255,255,255,0.4); font-weight:500; }
 
.hero-content {
  position:relative; z-index:3;
  text-align:center; max-width:960px;
  padding:0 24px; width:100%;
}
.hero-eyebrow {
  font-size:10px; letter-spacing:0.5em; color:rgba(255,255,255,0.75);
  text-transform:uppercase; margin-bottom:24px; font-weight:500;
  animation:fadeUp 1s ease 0.2s both;
}
.hero-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(44px,8vw,100px); font-weight:700; line-height:1.05;
  color:#ffffff; margin-bottom:20px;
  animation:fadeUp 1s ease 0.4s both;
  text-shadow:0 2px 30px rgba(0,0,0,0.3);
}
.hero-title em { font-style:italic; color:#93c5fd; }
.hero-subtitle {
  font-size:11px; letter-spacing:0.4em; color:rgba(255,255,255,0.65);
  text-transform:uppercase; margin-bottom:36px; font-weight:500;
  animation:fadeUp 1s ease 0.6s both;
}
.hero-divider {
  width:1px; height:60px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  margin:0 auto 32px;
  animation:fadeUp 1s ease 0.7s both;
}
.hero-desc {
  font-family:'Playfair Display',serif;
  font-size:clamp(15px,2vw,19px); font-weight:600; font-style:italic;
  color:rgba(255,255,255,0.8); line-height:1.7;
  max-width:580px; margin:0 auto 44px;
  animation:fadeUp 1s ease 0.8s both;
  text-shadow:0 1px 12px rgba(0,0,0,0.4);
}
.hero-stats-row {
  display:flex; justify-content:center; gap:clamp(16px,5vw,60px);
  flex-wrap:wrap; margin-bottom:44px;
  animation:fadeUp 1s ease 0.9s both;
}
.hs-item { text-align:center; }
.hs-num {
  font-family:'Playfair Display',serif;
  font-size:clamp(24px,4vw,38px); font-weight:700; color:#93c5fd; line-height:1;
}
.hs-label {
  font-size:9px; letter-spacing:0.3em; color:rgba(255,255,255,0.55);
  text-transform:uppercase; margin-top:5px; font-weight:500;
}
.hero-divider2 {
  width:80%; max-width:500px; height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  margin:0 auto 44px;
  animation:fadeUp 1s ease 0.95s both;
}
.hero-actions {
  display:flex; gap:16px; justify-content:center; align-items:center;
  flex-wrap:wrap;
  animation:fadeUp 1s ease 1s both;
}
.btn-primary {
  background:var(--gold); color:var(--pure-white);
  padding:16px 44px; font-size:11px; font-weight:500;
  letter-spacing:0.3em; text-transform:uppercase;
  border:none; cursor:pointer; text-decoration:none; display:inline-block;
  transition:all 0.3s;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,99,235,0.4); }
.btn-ghost {
  border:1px solid rgba(255,255,255,0.45); color:#fff;
  padding:16px 44px; font-size:11px; font-weight:500;
  letter-spacing:0.3em; text-transform:uppercase;
  background:rgba(255,255,255,0.08); cursor:pointer; text-decoration:none; display:inline-block;
  transition:all 0.3s; backdrop-filter:blur(6px);
}
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,0.18); }
 
.hero-scroll {
  position:absolute; bottom:36px; right:40px;
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:4;
}
.hero-scroll span {
  font-size:9px; letter-spacing:0.5em; color:rgba(255,255,255,0.45);
  text-transform:uppercase; writing-mode:vertical-rl; font-weight:500;
}
.scroll-line {
  width:1px; height:55px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{opacity:1} 50%{opacity:0.3} }
 
/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-section {
  border-top:1px solid rgba(15,23,42,0.1);
  border-bottom:1px solid rgba(15,23,42,0.1);
  padding:18px 0; overflow:hidden; background:var(--dark);
}
.marquee-track {
  display:flex; gap:70px;
  animation:marquee 32s linear infinite;
  white-space:nowrap; width:max-content;
}
.marquee-item {
  font-size:10px; letter-spacing:0.4em; color:var(--text-muted);
  text-transform:uppercase; display:flex; align-items:center; gap:18px; font-weight:500;
}
.marquee-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
 
/* ================================================================
   SECTION BASE
   ================================================================ */
section { padding:120px 0; }
.container { max-width:1200px; margin:0 auto; padding:0 60px; }
.section-label {
  font-size:9px; letter-spacing:0.6em; color:var(--gold);
  text-transform:uppercase; margin-bottom:18px;
  display:flex; align-items:center; gap:16px; font-weight:500;
}
.section-label::before { content:''; width:28px; height:1px; background:var(--gold); }
.section-title {
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,5vw,62px); font-weight:700;
  line-height:1.1; color:var(--white);
}
.section-title em { font-style:italic; color:var(--gold); }
 
/* ================================================================
   STATS BAND
   ================================================================ */
.stats-band { background:var(--gold); padding:0; overflow:hidden; }
.stats-band-inner { display:flex; max-width:1200px; margin:0 auto; flex-wrap:wrap; }
.sb-item {
  flex:1; min-width:160px; padding:36px 20px; text-align:center;
  border-right:1px solid rgba(255,255,255,0.15);
  transition:background 0.3s;
}
.sb-item:last-child { border-right:none; }
.sb-item:hover { background:rgba(255,255,255,0.08); }
.sb-num {
  font-family:'Playfair Display',serif;
  font-size:clamp(28px,5vw,42px); font-weight:700; color:var(--pure-white); line-height:1; display:block;
}
.sb-label {
  font-size:9px; letter-spacing:0.35em; text-transform:uppercase;
  color:rgba(255,255,255,0.75); display:block; margin-top:7px; font-weight:500;
}
 
/* ================================================================
   ABOUT
   ================================================================ */
#about { background:var(--dark); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-visual { position:relative; }
.about-frame {
  width:100%; aspect-ratio:4/5;
  background-size:cover; background-position:center;
  border:1px solid rgba(15,23,42,0.1); position:relative; overflow:hidden;
}
.about-accent { position:absolute; top:-20px; right:-20px; width:100px; height:100px; border-right:2px solid var(--gold); border-top:2px solid var(--gold); }
.about-accent2 { position:absolute; bottom:-20px; left:-20px; width:70px; height:70px; border-left:2px solid rgba(37,99,235,0.35); border-bottom:2px solid rgba(37,99,235,0.35); }
.about-badge {
  position:absolute; bottom:30px; right:-30px;
  background:var(--gold); color:var(--pure-white);
  padding:22px; text-align:center;
}
.about-badge-num { font-family:'Playfair Display',serif; font-size:42px; font-weight:700; line-height:1; }
.about-badge-text { font-size:8px; letter-spacing:0.3em; text-transform:uppercase; margin-top:5px; font-weight:500; }
.about-text p { font-size:15px; margin-bottom:20px; color:var(--text-muted); }
.about-text p span { color:var(--white); font-weight:600; }
.about-checks { display:flex; flex-direction:column; gap:12px; margin:28px 0; }
.about-check {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 18px; border:1px solid rgba(15,23,42,0.08);
  background:var(--black); transition:border-color 0.3s;
}
.about-check:hover { border-color:var(--gold); }
.check-mark {
  width:22px; height:22px; border-radius:50%;
  background:var(--gold); color:var(--pure-white);
  display:grid; place-items:center;
  font-size:11px; flex-shrink:0; margin-top:1px;
}
.check-body strong { display:block; font-size:13px; font-weight:600; color:var(--white); margin-bottom:2px; }
.check-body span { font-size:12px; color:var(--text-muted); }
.about-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-top:40px; border-top:1px solid rgba(15,23,42,0.1); padding-top:32px;
}
.stat-num { font-family:'Playfair Display',serif; font-size:clamp(28px,4vw,44px); font-weight:700; color:var(--gold); line-height:1; }
.stat-label { font-size:9px; letter-spacing:0.3em; color:var(--text-muted); text-transform:uppercase; margin-top:6px; font-weight:500; }
 
/* ================================================================
   SERVICES
   ================================================================ */
#services { background:var(--black); }
.services-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; gap:20px; flex-wrap:wrap; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.service-card {
  background:var(--dark); padding:44px 36px;
  border-bottom:2px solid transparent;
  transition:all 0.4s; position:relative; overflow:hidden;
  text-decoration:none; color:inherit; display:block;
}
.service-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(37,99,235,0.05) 0%, transparent 60%);
  opacity:0; transition:opacity 0.4s;
}
.service-card:hover { border-bottom-color:var(--gold); }
.service-card:hover::before { opacity:1; }
.service-num { font-family:'Playfair Display',serif; font-size:13px; color:var(--gold); letter-spacing:0.2em; margin-bottom:24px; font-weight:700; }
.service-icon { font-size:36px; margin-bottom:18px; display:block; }
.service-name { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--white); margin-bottom:12px; line-height:1.2; }
.service-desc { font-size:13px; color:var(--text-muted); line-height:1.7; }
.service-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.s-tag {
  font-size:9px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--gold); background:rgba(37,99,235,0.07); padding:4px 10px;
}
.s-tag.hot { background:var(--gold); color:var(--pure-white); }
.service-arrow {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px; font-size:10px; letter-spacing:0.3em;
  color:var(--gold); text-transform:uppercase;
  opacity:0; transform:translateX(-10px);
  transition:all 0.3s; font-weight:500;
}
.service-card:hover .service-arrow { opacity:1; transform:translateX(0); }
 
/* ================================================================
   PORTFOLIO
   ================================================================ */
#portfolio { background:var(--dark); }
.portfolio-intro { max-width:500px; margin-bottom:56px; }
.portfolio-filters { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.pf-btn {
  background:var(--black); border:1px solid rgba(15,23,42,0.12);
  color:var(--text-muted); padding:8px 18px;
  font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  cursor:pointer; transition:all 0.25s; font-family:'Inter',sans-serif;
}
.pf-btn.active, .pf-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--pure-white); }
.portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:240px; gap:3px; }
.p-span-7 { grid-column:span 7; }
.p-span-5 { grid-column:span 5; }
.p-span-4 { grid-column:span 4; }
.p-span-8 { grid-column:span 8; }
.portfolio-item { position:relative; overflow:hidden; cursor:pointer; background:var(--dark2); }
.portfolio-visual { width:100%; height:100%; transition:transform 0.8s ease; background-size:cover; background-position:center; }
.portfolio-item:hover .portfolio-visual { transform:scale(1.05); }
.portfolio-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(2,6,23,0.95) 0%, rgba(2,6,23,0.4) 55%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:28px; opacity:0; transition:opacity 0.4s;
}
.portfolio-item:hover .portfolio-overlay { opacity:1; }
/* Show on touch devices always */
@media (pointer:coarse) { .portfolio-overlay { opacity:1; } }
.portfolio-tag { font-size:9px; letter-spacing:0.4em; color:var(--gold-pale); text-transform:uppercase; margin-bottom:7px; font-weight:500; }
.portfolio-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--pure-white); }
.portfolio-loc { font-size:12px; color:var(--dark3); margin-top:3px; }
 
/* ================================================================
   PROCESS
   ================================================================ */
#process { background:var(--black); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:80px; position:relative; }
.process-grid::before {
  content:''; position:absolute; top:32px; left:12%; right:12%;
  height:1px; background:linear-gradient(to right, transparent, var(--gold), transparent);
}
.process-step { padding:0 24px; text-align:center; }
.step-circle {
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 28px;
  font-family:'Playfair Display',serif;
  font-size:22px; color:var(--gold); font-weight:700;
  background:var(--black); position:relative; z-index:1;
  transition:all 0.3s;
}
.process-step:hover .step-circle { background:var(--gold); color:var(--pure-white); transform:scale(1.1); }
.step-time { font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; font-weight:600; }
.step-name { font-family:'Playfair Display',serif; font-size:20px; color:var(--white); margin-bottom:12px; font-weight:700; }
.step-desc { font-size:13px; color:var(--text-muted); line-height:1.7; }
.step-list { list-style:none; margin-top:14px; text-align:left; display:inline-block; }
.step-list li { font-size:11px; color:var(--text-muted); padding:4px 0 4px 16px; position:relative; }
.step-list li::before { content:'→'; position:absolute; left:0; color:var(--gold); font-size:10px; }
 
/* ================================================================
   GLOBAL
   ================================================================ */
#global { background:var(--dark); position:relative; overflow:hidden; }
.global-inner { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:center; }
.globe-visual {
  width:100%; aspect-ratio:1;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.globe-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(15,23,42,0.1);
  animation:spin linear infinite;
}
.globe-ring:nth-child(1) { width:100%; height:100%; animation-duration:40s; }
.globe-ring:nth-child(2) { width:80%; height:80%; animation-duration:30s; animation-direction:reverse; border-color:rgba(15,23,42,0.06); }
.globe-ring:nth-child(3) { width:60%; height:60%; animation-duration:20s; border-style:dashed; border-color:rgba(37,99,235,0.2); }
.globe-center {
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,0.1), rgba(37,99,235,0.02));
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.globe-center-icon { font-size:48px; }
.globe-dots span {
  position:absolute; width:8px; height:8px;
  border-radius:50%; background:var(--gold);
  animation:pulse 2s ease-in-out infinite;
}
.globe-dots span::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold); animation:ping 2s ease-in-out infinite;
}
.globe-dots span:nth-child(1){top:15%;left:20%;animation-delay:0s}
.globe-dots span:nth-child(2){top:30%;right:25%;animation-delay:0.5s}
.globe-dots span:nth-child(3){bottom:25%;left:30%;animation-delay:1s}
.globe-dots span:nth-child(4){bottom:20%;right:20%;animation-delay:1.5s}
.globe-dots span:nth-child(5){top:50%;left:10%;animation-delay:0.8s}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.5);opacity:0}}
.regions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:44px; }
.region-item {
  padding:16px; border:1px solid rgba(15,23,42,0.1);
  display:flex; align-items:center; gap:12px;
  transition:border-color 0.3s; background:var(--black);
}
.region-item:hover { border-color:var(--gold); }
.region-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.region-name { font-size:12px; letter-spacing:0.1em; color:var(--text); font-weight:500; }
 
/* ================================================================
   CLIENTS
   ================================================================ */
#clients { background:var(--black); padding:80px 0; }
.clients-label {
  text-align:center; font-size:9px; letter-spacing:0.5em;
  text-transform:uppercase; color:var(--text-muted);
  margin-bottom:44px; font-weight:500;
}
.clients-wrap { overflow:hidden; position:relative; }
.clients-wrap::before, .clients-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2;
}
.clients-wrap::before { left:0; background:linear-gradient(to right, var(--black), transparent); }
.clients-wrap::after  { right:0; background:linear-gradient(to left, var(--black), transparent); }
.clients-track { display:flex; gap:64px; animation:marquee 26s linear infinite; width:max-content; }
.clients-track:hover { animation-play-state:paused; }
.cl-name {
  font-family:'Playfair Display',serif;
  font-size:20px; font-weight:700;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--dark2); white-space:nowrap;
  transition:color 0.3s; cursor:default;
}
.cl-name:hover { color:var(--gold); }
 
/* ================================================================
   TESTIMONIALS
   ================================================================ */
#testimonials { background:var(--dark); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:70px; }
.testimonial-card {
  background:var(--black); padding:44px 36px;
  border-top:2px solid transparent;
  transition:border-color 0.3s; position:relative;
}
.testimonial-card::before {
  content:'\201C'; font-family:'Playfair Display',serif;
  font-size:120px; line-height:0.8; color:rgba(15,23,42,0.05);
  position:absolute; top:28px; left:28px;
}
.testimonial-card:hover { border-top-color:var(--gold); }
.stars { color:var(--gold); font-size:12px; letter-spacing:2px; margin-bottom:22px; }
.testimonial-text {
  font-family:'Playfair Display',serif;
  font-size:16px; font-style:italic; font-weight:600;
  color:var(--text); line-height:1.7; margin-bottom:28px;
  position:relative; z-index:1;
}
.testimonial-author { display:flex; align-items:center; gap:14px; }
.author-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); border:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:16px; font-weight:700;
  color:var(--pure-white); flex-shrink:0;
}
.author-name { font-size:13px; color:var(--white); letter-spacing:0.1em; font-weight:600; }
.author-role { font-size:11px; color:var(--gold); letter-spacing:0.1em; margin-top:2px; font-weight:500; }
 
/* ================================================================
   CONTACT
   ================================================================ */
#contact { background:var(--black); position:relative; overflow:hidden; }
#contact::before {
  content:'CONTACT'; font-family:'Playfair Display',serif;
  font-size:180px; font-weight:700; color:rgba(15,23,42,0.025);
  position:absolute; right:-20px; bottom:-20px;
  white-space:nowrap; pointer-events:none; letter-spacing:-0.02em;
}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-details { display:flex; flex-direction:column; gap:20px; margin-top:40px; }
.contact-item { display:flex; gap:18px; align-items:flex-start; }
.contact-item-icon {
  width:40px; height:40px; border:1px solid rgba(15,23,42,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; background:var(--dark);
}
.contact-item-text .label { font-size:9px; letter-spacing:0.4em; color:var(--gold); text-transform:uppercase; margin-bottom:3px; font-weight:500; }
.contact-item-text .value { font-size:14px; color:var(--text); font-weight:500; }
.wa-contact-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#25d366; color:var(--pure-white);
  padding:14px 28px; font-size:11px; font-weight:600;
  letter-spacing:0.25em; text-transform:uppercase;
  text-decoration:none; margin-top:28px;
  transition:background 0.3s; cursor:pointer;
}
.wa-contact-btn:hover { background:#20bd5a; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group label { font-size:9px; letter-spacing:0.4em; color:var(--gold); text-transform:uppercase; font-weight:500; }
.form-group input, .form-group select, .form-group textarea {
  background:var(--pure-white); border:1px solid rgba(15,23,42,0.15);
  color:var(--text); font-family:'Inter',sans-serif;
  font-size:13px; letter-spacing:0.04em;
  padding:13px 18px; outline:none; transition:border-color 0.3s;
  -webkit-appearance:none; border-radius:0;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.btn-submit {
  background:var(--gold); color:var(--pure-white);
  padding:17px 50px; font-size:11px; letter-spacing:0.4em;
  text-transform:uppercase; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:500;
  width:100%; transition:background 0.3s; margin-top:8px;
}
.btn-submit:hover { background:var(--gold-light); }
 
/* ================================================================
   FOOTER
   ================================================================ */
footer { background:var(--dark); border-top:1px solid rgba(15,23,42,0.1); padding:70px 0 40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:48px; margin-bottom:56px; }
.footer-logo-img { height:44px; width:auto; display:block; margin-bottom:16px; }
.footer-desc { font-size:13px; color:var(--text-muted); line-height:1.8; margin:0 0 20px; max-width:260px; }
.footer-mini-stats { display:flex; gap:24px; flex-wrap:wrap; }
.fms-num { font-family:'Playfair Display',serif; font-size:26px; font-weight:700; color:var(--gold); display:block; line-height:1; }
.fms-label { font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
.footer-col h4 { font-size:9px; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; font-weight:600; }
.footer-links-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links-list a { font-size:12px; color:var(--text-muted); text-decoration:none; transition:color 0.25s; }
.footer-links-list a:hover { color:var(--gold); }
.footer-offices { display:flex; flex-direction:column; gap:14px; }
.f-ofc-country { font-size:9px; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; }
.f-ofc-addr { font-size:12px; color:var(--text-muted); line-height:1.5; }
.footer-bottom {
  border-top:1px solid rgba(15,23,42,0.1); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.footer-copy { font-size:11px; color:var(--text-muted); letter-spacing:0.1em; }
.footer-btm-links { display:flex; gap:28px; flex-wrap:wrap; }
.footer-btm-links a {
  font-size:10px; letter-spacing:0.2em; color:var(--text-muted);
  text-decoration:none; text-transform:uppercase; transition:color 0.3s; font-weight:500;
}
.footer-btm-links a:hover { color:var(--gold); }
.footer-social { display:flex; gap:12px; }
.social-btn {
  width:36px; height:36px; border:1px solid rgba(15,23,42,0.15);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; cursor:pointer; transition:all 0.3s;
  color:var(--text-muted); text-decoration:none;
}
.social-btn:hover { border-color:var(--gold); color:var(--gold); }
 
/* ================================================================
   WHATSAPP FLOAT
   ================================================================ */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:999; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.wa-bubble {
  background:var(--pure-white); border:1px solid var(--dark2);
  box-shadow:0 8px 40px rgba(15,23,42,0.12);
  border-radius:4px; padding:14px 18px;
  max-width:220px; font-size:12px; color:var(--text);
  display:none; line-height:1.5;
}
.wa-float:hover .wa-bubble { display:block; }
.wa-btn-float {
  width:56px; height:56px; border-radius:50%;
  background:#25d366; display:grid; place-items:center;
  font-size:24px; text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  transition:transform 0.3s; animation:waPulse 3s infinite;
}
.wa-btn-float:hover { transform:scale(1.1); }
@keyframes waPulse {
  0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.35)}
  50%{box-shadow:0 4px 44px rgba(37,211,102,0.65)}
}
 
/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
 
/* ================================================================
   RESPONSIVE — DESKTOP LARGE (1280px+)  default above
   ================================================================ */
 
/* ── Laptop 960–1279px ── */
@media (max-width:1279px) {
  .container { padding:0 40px; }
  nav { padding:20px 40px; }
  .hero-counter { right:20px; }
  .hero-scroll { right:20px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
 
/* ── Tablet Landscape 768–959px ── */
@media (max-width:959px) {
  /* Nav */
  nav { padding:16px 24px; }
  .nav-links { display:none; }
  .nav-hamburger-wrap { display:flex; }
  .nav-cta { padding:9px 18px; font-size:9px; }
 
  /* Mobile Nav Open State */
  .nav-links.mobile-open {
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--pure-white); z-index:199;
    align-items:center; justify-content:center;
    padding:80px 40px 40px;
  }
  .nav-links.mobile-open li { border-bottom:1px solid rgba(15,23,42,0.07); width:100%; text-align:center; }
  .nav-links.mobile-open a { display:block; padding:18px; font-size:20px; letter-spacing:0.15em; color:var(--text); font-family:'Playfair Display',serif; font-weight:700; }
  .nav-links.mobile-open a:hover { color:var(--gold); }
  .mobile-close { display:block; }
 
  /* Container & Sections */
  .container { padding:0 28px; }
  section { padding:80px 0; }
 
  /* Hero */
  .hero-counter { display:none; }
  .hero-scroll   { display:none; }
  .hero-title { font-size:clamp(38px,7vw,68px); }
  .hero-stats-row { gap:20px; }
  .hero-dots-nav { bottom:60px; }
  .btn-primary, .btn-ghost { padding:14px 28px; font-size:10px; }
 
  /* Stats */
  .sb-item { flex:0 0 50%; }
 
  /* About */
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-badge { right:0; }
  .about-frame { aspect-ratio:16/9; }
 
  /* Services */
  .services-header { flex-direction:column; align-items:flex-start; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
 
  /* Portfolio */
  .portfolio-grid { grid-template-columns:1fr 1fr; grid-auto-rows:200px; }
  .p-span-7,.p-span-5,.p-span-8,.p-span-4 { grid-column:span 1; }
 
  /* Process */
  .process-grid { grid-template-columns:1fr 1fr; gap:48px; }
  .process-grid::before { display:none; }
 
  /* Global */
  .global-inner { grid-template-columns:1fr; gap:48px; }
  .regions { grid-template-columns:1fr 1fr; }
 
  /* Testimonials */
  .testimonials-grid { grid-template-columns:1fr 1fr; gap:2px; }
 
  /* Contact */
  .contact-grid { grid-template-columns:1fr; gap:48px; }
 
  /* Footer */
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
 
  /* Cursor off */
  body { cursor:auto; }
  .cursor,.cursor-follower { display:none; }
}
 
/* ── Tablet Portrait 600–767px ── */
@media (max-width:767px) {
  nav { padding:14px 20px; }
  .logo-img { height:44px; }
  .nav-cta { display:none; }
 
  .container { padding:0 20px; }
  section { padding:72px 0; }
 
  /* Hero */
  .hero-title { font-size:clamp(34px,8vw,56px); line-height:1.1; }
  .hero-desc { font-size:15px; max-width:100%; }
  .hero-eyebrow { font-size:9px; letter-spacing:0.3em; }
  .hero-stats-row { gap:14px; }
  .hs-item { min-width:80px; }
  .hs-num { font-size:clamp(22px,5vw,30px); }
  .hero-dots-nav { bottom:50px; }
  .hero-divider { height:40px; }
  .hero-divider2 { margin-bottom:28px; }
 
  /* Services */
  .services-grid { grid-template-columns:1fr; }
  .service-card { padding:32px 24px; }
  .service-arrow { opacity:1; transform:translateX(0); }
 
  /* Portfolio */
  .portfolio-grid { grid-template-columns:1fr; grid-auto-rows:220px; }
  .p-span-7,.p-span-5,.p-span-8,.p-span-4 { grid-column:span 1; }
 
  /* Process */
  .process-grid { grid-template-columns:1fr; gap:40px; }
  .process-step { padding:0; }
 
  /* Testimonials */
  .testimonials-grid { grid-template-columns:1fr; }
  .testimonial-card { padding:32px 24px; }
 
  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:32px; }
  .footer-btm-links { flex-wrap:wrap; gap:16px; }
  .footer-logo-img { height:40px; }
 
  /* Contact */
  .form-row { grid-template-columns:1fr; }
 
  /* Regions */
  .regions { grid-template-columns:1fr; }
 
  /* Stats */
  .sb-item { flex:0 0 50%; }
}
 
/* ── Mobile 480–599px ── */
@media (max-width:599px) {
  nav { padding:12px 16px; }
  .logo-img { height:40px; }
 
  .container { padding:0 16px; }
  section { padding:60px 0; }
 
  /* Hero */
  #hero { min-height:100svh; }
  .hero-content { padding:0 16px; }
  .hero-title { font-size:clamp(30px,9vw,46px); margin-bottom:12px; }
  .hero-eyebrow { font-size:8px; letter-spacing:0.2em; margin-bottom:14px; }
  .hero-subtitle { font-size:9px; letter-spacing:0.2em; margin-bottom:20px; }
  .hero-divider { height:36px; margin-bottom:20px; }
  .hero-desc { font-size:14px; margin-bottom:24px; }
  .hero-stats-row { gap:10px; margin-bottom:24px; flex-wrap:nowrap; justify-content:space-around; }
  .hs-num { font-size:clamp(20px,5vw,26px); }
  .hs-label { font-size:8px; letter-spacing:0.1em; }
  .hero-divider2 { margin-bottom:24px; }
  .btn-primary, .btn-ghost { padding:13px 20px; font-size:10px; letter-spacing:0.15em; width:100%; text-align:center; }
  .hero-actions { flex-direction:column; width:100%; max-width:300px; margin:0 auto; }
  .hero-dots-nav { bottom:20px; gap:8px; }
 
  /* Stats band - stack 2 columns */
  .stats-band-inner { flex-direction:row; flex-wrap:wrap; }
  .sb-item { flex:0 0 50%; border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); padding:20px 12px; }
  .sb-item:nth-child(odd) { border-right:1px solid rgba(255,255,255,0.1); }
  .sb-item:last-child:nth-child(odd) { border-right:none; flex:0 0 100%; }
  .sb-num { font-size:28px; }
 
  /* About */
  .about-badge { right:0; bottom:16px; padding:14px; }
  .about-badge-num { font-size:28px; }
  .about-stats { grid-template-columns:1fr 1fr; gap:16px; }
  .stat-num { font-size:28px; }
 
  /* Section headings */
  .section-title { font-size:clamp(26px,8vw,40px); }
 
  /* Portfolio */
  .portfolio-grid { grid-auto-rows:180px; gap:2px; }
  .portfolio-title { font-size:18px; }
 
  /* Process */
  .step-circle { width:52px; height:52px; font-size:18px; }
 
  /* Testimonials */
  .testimonial-text { font-size:15px; }
  .testimonial-card { padding:28px 20px; }
 
  /* Clients */
  #clients { padding:48px 0; }
 
  /* Contact */
  #contact::before { display:none; }
  .wa-contact-btn { width:100%; justify-content:center; padding:14px 20px; }
 
  /* Footer */
  .footer-grid { gap:28px; }
  .footer-bottom { gap:12px; }
  .footer-btm-links { display:none; }
  .footer-mini-stats { gap:16px; }
 
  /* WhatsApp float */
  .wa-float { bottom:16px; right:16px; }
  .wa-btn-float { width:50px; height:50px; font-size:20px; }
}
 
/* ── Very Small Phones 380px and below ── */
@media (max-width:380px) {
  .logo-img { height:36px; }
  .hero-title { font-size:clamp(26px,9vw,38px); }
  .hero-stats-row { flex-wrap:wrap; gap:8px; }
  .hs-item { min-width:calc(50% - 8px); }
  .btn-primary, .btn-ghost { padding:12px 16px; }
  .about-stats { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .footer-social { gap:8px; }
  .testimonials-grid { grid-template-columns:1fr; }
}
 
/* ── FEEDBACK BUTTON ── */
.btn-give-feedback {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  padding: 12px 28px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: background 0.2s, transform 0.15s;
}
.btn-give-feedback:hover { background: #1d4ed8; transform: translateY(-1px); }
 
/* ── FEEDBACK MODAL ── */
.feedback-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.feedback-modal {
  background: var(--bg-primary, #fff);
  border-radius: 16px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.feedback-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.feedback-modal-close:hover { background: var(--bg-secondary, #f1f5f9); }
 
/* Star rating */
.star-rating-input { font-size: 32px; cursor: pointer; letter-spacing: 4px; }
.star-inp { color: #f59e0b; transition: color 0.1s; display: inline-block; }
.star-inp:hover { transform: scale(1.1); }
 
/* Real feedback badge */
.real-feedback { border-left: 3px solid #2563eb; }
 
/* Social icons sizing */
.footer-social .social-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; }
 
@media (max-width:480px) {
  .feedback-modal { padding: 28px 20px 24px; }
  .star-rating-input { font-size: 26px; }
}
 
/* ================================================================
   PORTFOLIO SINGLE POST — ELEMENTOR MOBILE FIX
   NOTE: Ye sirf body.single-jetpack-portfolio pe apply hoga
         Homepage (body.home) pe kuch bhi affect nahi hoga
   ================================================================ */
 
/* Elementor container scope narrow kiya — sirf section ke andar */
.single-jetpack-portfolio .elementor-section > .elementor-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
 
/* spf-wrap ko highest priority se protect karo */
body.single-jetpack-portfolio .spf-wrap {
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
 
/* Elementor inner wrappers — overflow guard */
body.single-jetpack-portfolio .elementor-widget-wrap,
body.single-jetpack-portfolio .e-con,
body.single-jetpack-portfolio .e-con-inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
 
@media (max-width: 768px) {
  body.single-jetpack-portfolio .spf-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
 
  /* Columns aur blocks mobile pe full width */
  body.single-jetpack-portfolio .wp-block-columns {
    display: flex !important;
    flex-direction: column !important;
  }
  body.single-jetpack-portfolio .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
  body.single-jetpack-portfolio .wp-block-image,
  body.single-jetpack-portfolio .wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }
}
 
@media (max-width: 480px) {
  body.single-jetpack-portfolio .spf-wrap {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
/* ================================================================
   ELEMENTOR FREE — SINGLE PORTFOLIO MOBILE FIX
   ================================================================ */
body.single-jetpack-portfolio .elementor-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.single-jetpack-portfolio .elementor-container {
  max-width: 100% !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  box-sizing: border-box !important;
}

body.single-jetpack-portfolio .elementor-column-wrap,
body.single-jetpack-portfolio .elementor-widget-wrap {
  padding: 0 !important;
}

body.single-jetpack-portfolio .elementor-column {
  padding: 0 !important;
  width: 100% !important;
}