/* ===========================================================
   WebsiteDesignArt — site.css
   Light, premium theme (matches premium-creative-space design)
   =========================================================== */

:root{
  --bg:#ffffff;
  --bg-soft:#f7f5ff;
  --text:#1a1a2e;
  --text-soft:#6b6b80;
  --primary:#6c5ce7;
  --primary-light:#a29bfe;
  --accent:#fd79a8;
  --border:#ececf5;
  --radius:16px;
  --shadow:0 10px 40px -20px rgba(20,20,40,.12);
  --max:1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

h1,h2,h3,h4{ line-height:1.15; font-weight:800; letter-spacing:-.02em; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }

/* ---------- NAV ---------- */
nav{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-inner{ max-width:var(--max); margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; white-space:nowrap; }
.nav-brand img{ height:32px; width:auto; }
.nav-brand span{ color:var(--primary); }
.nav-links{ display:flex; align-items:center; gap:1.5rem; font-weight:600; font-size:.92rem; }
.nav-links a:hover{ color:var(--primary); }
.nav-phone{ color:var(--text-soft); font-weight:600; font-size:.9rem; }
.nav-cta{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; padding:.6rem 1.3rem; border-radius:999px; font-weight:700; }
.mobile-toggle{ display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text); }

.cities-dropdown{ position:relative; }
.dropdown-menu{ display:none; position:absolute; top:140%; left:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:.5rem; min-width:240px; max-height:320px; overflow-y:auto; flex-direction:column; }
.cities-dropdown:hover .dropdown-menu{ display:flex; }
.dropdown-menu a{ padding:.5rem .75rem; border-radius:8px; font-size:.88rem; font-weight:500; }
.dropdown-menu a:hover{ background:var(--bg-soft); color:var(--primary); }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:.4rem; padding:.85rem 1.7rem; border-radius:999px; font-weight:700; font-size:.95rem; transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; border:none; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 12px 30px -10px rgba(108,92,231,.5); }
.btn-secondary{ background:#fff; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover{ border-color:var(--primary); color:var(--primary); }
.btn-light{ background:#fff; color:var(--primary); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-plan{ background:var(--bg-soft); color:var(--text); text-align:center; padding:.85rem; border-radius:999px; font-weight:700; transition:.2s; }
.btn-plan:hover{ background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; }
.btn-group{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:6rem 0 4rem; background:linear-gradient(180deg,#fdfcff 0%,#f7f5ff 100%); overflow:hidden; }
.hero .blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0; pointer-events:none; }
.hero .blob1{ width:420px; height:420px; top:-140px; right:-120px; background:radial-gradient(circle,var(--primary-light),transparent 70%); }
.hero .blob2{ width:360px; height:360px; bottom:-160px; left:-120px; background:radial-gradient(circle,var(--accent),transparent 70%); }
.hero-inner{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.hero-badge{ display:inline-block; background:#fff; border:1px solid var(--border); padding:.4rem 1rem; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--primary); margin-bottom:1.2rem; box-shadow:var(--shadow); }
.hero h1{ font-size:3rem; margin-bottom:1rem; }
.hero h1 em{ font-style:normal; background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead{ color:var(--text-soft); font-size:1.1rem; margin-bottom:1.8rem; max-width:520px; }
.hero-stats{ display:flex; gap:2.2rem; margin-top:2.5rem; }
.hero-stat-num{ font-size:1.8rem; font-weight:800; color:var(--primary); }
.hero-stat-lbl{ font-size:.85rem; color:var(--text-soft); font-weight:600; }

.hero-visual{ position:relative; min-height:340px; }
.hero-card{ position:absolute; inset:10% 5%; background:#fff; border:1px solid var(--border); border-radius:24px; box-shadow:0 20px 60px -20px rgba(108,92,231,.3); display:flex; align-items:center; justify-content:center; font-size:5rem; }
.float-pill{ position:absolute; background:#fff; border:1px solid var(--border); border-radius:999px; padding:.6rem 1.1rem; font-weight:700; font-size:.85rem; box-shadow:0 10px 30px -10px rgba(0,0,0,.1); animation:float 5s ease-in-out infinite; }
.pill1{ top:5%; left:-5%; animation-delay:0s; }
.pill2{ top:42%; right:-8%; animation-delay:1.2s; }
.pill3{ bottom:8%; left:8%; animation-delay:2.4s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---------- TRUST STRIP ---------- */
.trust-strip{ background:var(--bg-soft); padding:1.4rem 0; border-bottom:1px solid var(--border); }
.trust-row{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.trust-tag{ background:#fff; border:1px solid var(--border); border-radius:999px; padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; color:var(--text); }

/* ---------- SECTION HEADERS ---------- */
section{ padding:5rem 0; }
.section-label{ color:var(--primary); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.6rem; text-align:center; }
.section-title{ font-size:2.3rem; text-align:center; margin-bottom:.8rem; }
.section-title em{ font-style:normal; background:linear-gradient(90deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-sub{ text-align:center; color:var(--text-soft); max-width:600px; margin:0 auto; }
.section-header{ margin-bottom:3rem; }

/* ---------- ABOUT ---------- */
.about-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
.about-inner p{ color:var(--text-soft); margin-bottom:1rem; }
.about-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.8rem; }
.stat-box{ background:var(--bg-soft); border-radius:var(--radius); padding:1.2rem; text-align:center; }
.stat-num{ font-size:1.7rem; font-weight:800; color:var(--primary); }
.stat-lbl{ font-size:.82rem; color:var(--text-soft); font-weight:600; margin-top:.3rem; }
.about-visual{ background:var(--bg-soft); border-radius:24px; min-height:300px; display:flex; align-items:center; justify-content:center; font-size:5rem; }

/* ---------- SERVICES / WHY / PROCESS GRIDS ---------- */
.services{ background:var(--bg-soft); }
.services-grid,.why-grid,.process-grid,.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card,.why-card,.process-card,.portfolio-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.8rem; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover,.why-card:hover,.process-card:hover,.portfolio-card:hover{ transform:translateY(-4px); box-shadow:0 18px 50px -20px rgba(108,92,231,.25); }
.service-card h3,.why-card h3,.process-card h3,.portfolio-card h3{ font-size:1.1rem; margin:.6rem 0 .5rem; }
.service-card p,.why-card p,.process-card p,.portfolio-card p{ color:var(--text-soft); font-size:.92rem; }
.service-card .icon,.why-card .icon{ font-size:1.8rem; }
.service-card a,.portfolio-card a{ display:inline-block; margin-top:.8rem; font-weight:700; color:var(--primary); font-size:.9rem; }

.process-num{ font-weight:800; color:var(--primary-light); font-size:1.6rem; margin-bottom:.5rem; }

/* ---------- PRICING ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pricing-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow); position:relative; }
.pricing-card.popular{ border:2px solid var(--primary); transform:scale(1.03); }
.popular-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--primary),var(--accent)); color:#fff; padding:.3rem 1rem; border-radius:999px; font-size:.78rem; font-weight:700; }
.plan-name{ font-weight:800; font-size:1.1rem; }
.price{ font-size:2.2rem; font-weight:800; color:var(--primary); margin:.4rem 0; }
.price-label{ color:var(--text-soft); font-size:.85rem; margin-bottom:.8rem; }
.plan-desc{ color:var(--text-soft); font-size:.9rem; margin-bottom:1.2rem; }
.feats{ margin-bottom:1.5rem; }
.feat{ padding:.4rem 0; font-size:.9rem; border-bottom:1px solid var(--border); }
.feat:before{ content:"✓ "; color:var(--primary); font-weight:800; }

/* ---------- CTA ---------- */
.cta{ position:relative; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; overflow:hidden; text-align:center; }
.cta .blob1{ position:absolute; width:400px; height:400px; background:rgba(255,255,255,.15); border-radius:50%; filter:blur(80px); top:-100px; right:-100px; }
.cta-inner{ position:relative; z-index:1; }
.cta h2{ font-size:2.2rem; margin-bottom:1rem; color:#fff; }
.cta p{ max-width:600px; margin:0 auto 1.8rem; opacity:.92; }
.cta .btn-group{ justify-content:center; }
.cta-note{ margin-top:1.2rem; font-size:.85rem; opacity:.85; }

/* ---------- FOOTER ---------- */
footer{ background:#15131f; color:#cfcfe0; padding:3.5rem 0 1.5rem; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2rem; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; color:#fff; margin-bottom:.8rem; }
.footer-brand img{ height:30px; }
.footer-brand span{ color:var(--primary-light); }
.footer-grid p{ font-size:.88rem; opacity:.75; margin-bottom:.4rem; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:.8rem; }
.footer-col a{ display:block; font-size:.88rem; padding:.3rem 0; opacity:.75; }
.footer-col a:hover{ opacity:1; color:var(--primary-light); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:1.2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; font-size:.82rem; opacity:.6; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .hero-inner,.about-inner{ grid-template-columns:1fr; }
  .hero-visual{ display:none; }
  .services-grid,.why-grid,.process-grid,.portfolio-grid,.pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .mobile-toggle{ display:block; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:1rem 1.5rem; border-bottom:1px solid var(--border); display:none; gap:.8rem; }
  .nav-links.open{ display:flex; }
  .hero h1{ font-size:2.2rem; }
  .hero-stats{ flex-wrap:wrap; gap:1.2rem; }
  .services-grid,.why-grid,.process-grid,.portfolio-grid,.pricing-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .pricing-card.popular{ transform:none; }
}
/* ===========================================================
   WebsiteDesignArt — premium-v2.css
   Pass 1: Premium component layer (append to site.css)
   New classes used by Pass 2 markup rewrite.
   =========================================================== */

:root{
  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(255,255,255,.5);
  --glass-shadow:0 8px 32px rgba(108,92,231,.12);
  --grad-1:linear-gradient(135deg,#6c5ce7 0%,#a29bfe 100%);
  --grad-2:linear-gradient(135deg,#fd79a8 0%,#fdcbf1 100%);
  --grad-3:linear-gradient(135deg,#00cec9 0%,#81ecec 100%);
  --grad-4:linear-gradient(135deg,#fab1a0 0%,#ffeaa7 100%);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Glass card base ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:22px;
  backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--glass-shadow);
}

/* ---------- Duotone icon boxes (Pass 2 wraps inline SVG in these) ---------- */
.icon-box{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
  flex-shrink:0;
}
.icon-box svg{ width:28px; height:28px; }
.icon-box.g1{ background:var(--grad-1); }
.icon-box.g2{ background:var(--grad-2); }
.icon-box.g3{ background:var(--grad-3); }
.icon-box.g4{ background:var(--grad-4); }
.icon-box svg .duo-fill{ fill:rgba(255,255,255,.35); }
.icon-box svg .duo-stroke{ stroke:#fff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Floating hero cards ---------- */
.hero-floats{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-float-card{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem; border-radius:16px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); box-shadow:0 12px 36px -12px rgba(108,92,231,.35);
  font-weight:700; font-size:.85rem; color:var(--text);
  animation:floatY 6s var(--ease) infinite;
}
.hero-float-card .icon-box{ width:34px; height:34px; border-radius:10px; margin:0; }
.hero-float-card .icon-box svg{ width:18px; height:18px; }
.hf-1{ top:8%; left:-6%; animation-delay:0s; }
.hf-2{ top:38%; right:-10%; animation-delay:1.4s; }
.hf-3{ bottom:18%; left:2%; animation-delay:2.8s; }
.hf-4{ bottom:-4%; right:8%; animation-delay:4.2s; }
.hf-5{ top:62%; left:38%; animation-delay:.7s; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-14px) rotate(-1deg); } }

/* Hero layered visual blob group */
.hero-3d{ position:relative; width:100%; height:420px; }
.hero-3d .orb{ position:absolute; border-radius:50%; filter:blur(2px); }
.hero-3d .orb1{ width:220px; height:220px; top:8%; left:18%; background:var(--grad-1); opacity:.85; box-shadow:0 30px 80px -20px rgba(108,92,231,.5); animation:orbFloat 8s var(--ease) infinite; }
.hero-3d .orb2{ width:140px; height:140px; bottom:14%; right:10%; background:var(--grad-2); opacity:.85; box-shadow:0 20px 60px -16px rgba(253,121,168,.5); animation:orbFloat 7s var(--ease) infinite reverse; }
.hero-3d .orb3{ width:90px; height:90px; top:45%; right:28%; background:var(--grad-3); opacity:.8; box-shadow:0 16px 40px -10px rgba(0,206,201,.5); animation:orbFloat 5.5s var(--ease) infinite; }
@keyframes orbFloat{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-22px) scale(1.04); } }

/* ---------- Animated counters ---------- */
.counter-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.counter-card{
  text-align:center; padding:2rem 1rem; border-radius:20px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px); box-shadow:var(--glass-shadow);
}
.counter-num{
  font-size:2.4rem; font-weight:800;
  background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.counter-lbl{ font-size:.85rem; color:var(--text-soft); font-weight:600; margin-top:.4rem; }

/* ---------- Premium service cards ---------- */
.svc-card-v2{
  position:relative; padding:2rem; border-radius:22px;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 8px 30px -16px rgba(20,20,40,.1);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow:hidden;
}
.svc-card-v2::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:var(--grad-1); transition:opacity .4s var(--ease); z-index:0;
}
.svc-card-v2:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 24px 60px -20px rgba(108,92,231,.35); }
.svc-card-v2:hover::before{ opacity:.05; }
.svc-card-v2 h3{ font-size:1.1rem; margin-bottom:.5rem; position:relative; z-index:1; }
.svc-card-v2 p{ color:var(--text-soft); font-size:.92rem; position:relative; z-index:1; }
.svc-card-v2 .learn{ display:inline-flex; align-items:center; gap:.3rem; margin-top:1rem; font-weight:700; font-size:.88rem; color:var(--primary); position:relative; z-index:1; transition:gap .3s var(--ease); }
.svc-card-v2:hover .learn{ gap:.6rem; }

/* ---------- Why-choose v2 ---------- */
.why-card-v2{
  padding:1.8rem; border-radius:20px; background:var(--bg-soft);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.why-card-v2:hover{ background:#fff; transform:translateY(-4px); box-shadow:var(--glass-shadow); }

/* ---------- Process timeline v2 ---------- */
.timeline-v2{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; counter-reset:step; }
.timeline-v2::before{
  content:""; position:absolute; top:28px; left:5%; right:5%; height:2px;
  background:linear-gradient(90deg,var(--primary-light),var(--accent));
  z-index:0;
}
.tl-step{ position:relative; text-align:center; z-index:1; }
.tl-dot{
  width:56px; height:56px; border-radius:50%; margin:0 auto 1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-1); color:#fff; font-weight:800; font-size:1.1rem;
  box-shadow:0 10px 30px -10px rgba(108,92,231,.5);
}
.tl-step h4{ font-size:.95rem; margin-bottom:.3rem; }
.tl-step p{ font-size:.82rem; color:var(--text-soft); }

/* ---------- Featured work showcase (real pages, browser-frame style) ---------- */
.showcase-frame{
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--border); box-shadow:var(--glass-shadow);
  transition:transform .4s var(--ease);
}
.showcase-frame:hover{ transform:translateY(-6px); }
.showcase-top{ display:flex; align-items:center; gap:.4rem; padding:.6rem .9rem; background:var(--bg-soft); border-bottom:1px solid var(--border); }
.showcase-top span{ width:10px; height:10px; border-radius:50%; background:var(--border); }
.showcase-top .url{ margin-left:.6rem; font-size:.75rem; color:var(--text-soft); font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.showcase-body{ padding:1.5rem; }
.showcase-body .badge{ display:inline-block; background:var(--bg-soft); color:var(--primary); font-size:.75rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; margin-bottom:.6rem; }
.showcase-body h4{ font-size:1.05rem; margin-bottom:.3rem; }
.showcase-body .meta{ font-size:.82rem; color:var(--text-soft); }
.showcase-body .score{ color:var(--accent); font-weight:700; }

/* ---------- Industry solution cards ---------- */
.industry-card{
  padding:1.8rem; border-radius:20px; text-align:center;
  border:1px solid var(--border); background:#fff;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.industry-card:hover{ transform:translateY(-6px); border-color:var(--primary-light); }
.industry-card .icon-box{ margin:0 auto 1rem; }
.industry-card h4{ font-size:1rem; margin-bottom:.4rem; }
.industry-card p{ font-size:.85rem; color:var(--text-soft); }

/* ---------- Footer v2 ---------- */
.footer-v2{ background:#15131f; color:#cfcfe0; padding:4.5rem 0 1.5rem; position:relative; overflow:hidden; }
.footer-v2 .orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.25; }
.footer-v2 .orb1{ width:300px; height:300px; background:var(--grad-1); top:-100px; left:-80px; }
.footer-v2 .orb2{ width:240px; height:240px; background:var(--grad-2); bottom:-100px; right:-60px; }
.newsletter-box{
  display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap;
}
.newsletter-box input{
  flex:1; min-width:200px; padding:.85rem 1.2rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff;
}
.newsletter-box input::placeholder{ color:#8b889e; }
.newsletter-box button{
  padding:.85rem 1.6rem; border-radius:999px; border:none; font-weight:700; cursor:pointer;
  background:var(--grad-1); color:#fff;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .counter-strip{ grid-template-columns:repeat(2,1fr); }
  .timeline-v2{ grid-template-columns:repeat(3,1fr); }
  .timeline-v2::before{ display:none; }
}
@media (max-width:640px){
  .counter-strip{ grid-template-columns:1fr 1fr; }
  .timeline-v2{ grid-template-columns:1fr 1fr; }
  .hero-floats,.hero-3d{ display:none; }
}
/* ===== Hero Premium Mockup (append to site.css) ===== */
.hero-mockup{
  position:relative; width:92%; max-width:460px; margin:0 auto;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(108,92,231,.35), 0 0 0 1px var(--border);
  transform:rotate(-2deg);
  animation:mockupFloat 7s var(--ease) infinite;
}
@keyframes mockupFloat{ 0%,100%{ transform:rotate(-2deg) translateY(0); } 50%{ transform:rotate(-1deg) translateY(-10px); } }

.hero-mockup .bar{
  display:flex; align-items:center; gap:.4rem; padding:.6rem .8rem;
  background:var(--bg-soft); border-bottom:1px solid var(--border);
}
.hero-mockup .bar span{ width:9px; height:9px; border-radius:50%; background:#e0def8; }
.hero-mockup .bar span:nth-child(1){ background:#fd79a8; }
.hero-mockup .bar span:nth-child(2){ background:#ffeaa7; }
.hero-mockup .bar span:nth-child(3){ background:#55efc4; }
.hero-mockup .bar .url{ margin-left:.5rem; font-size:.7rem; color:var(--text-soft); background:#fff; border:1px solid var(--border); border-radius:999px; padding:.15rem .8rem; flex:1; }

.hero-mockup .screen{ padding:1.1rem; display:grid; gap:.8rem; }
.hero-mockup .row{ display:flex; gap:.8rem; }

.mk-chart{
  flex:1; border-radius:12px; padding:.9rem; background:var(--bg-soft);
}
.mk-chart .lbl{ font-size:.7rem; color:var(--text-soft); font-weight:600; margin-bottom:.6rem; }
.mk-chart .bars{ display:flex; align-items:flex-end; gap:5px; height:54px; }
.mk-chart .bars i{ flex:1; border-radius:4px 4px 0 0; background:var(--grad-1); opacity:.85; }
.mk-chart .bars i:nth-child(2){ background:var(--grad-2); }
.mk-chart .bars i:nth-child(4){ background:var(--grad-3); }

.mk-stat{
  flex:1; border-radius:12px; padding:.9rem; background:var(--bg-soft);
  display:flex; flex-direction:column; justify-content:center;
}
.mk-stat .num{ font-size:1.4rem; font-weight:800; background:var(--grad-1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.mk-stat .lbl{ font-size:.7rem; color:var(--text-soft); font-weight:600; margin-top:.2rem; }

.mk-rows{ border-radius:12px; background:var(--bg-soft); padding:.9rem; display:grid; gap:.55rem; }
.mk-rows .line{ height:8px; border-radius:4px; background:linear-gradient(90deg,var(--primary-light),transparent); }
.mk-rows .line:nth-child(2){ width:80%; }
.mk-rows .line:nth-child(3){ width:60%; }

.mk-pill-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.mk-pill-row span{
  font-size:.7rem; font-weight:700; padding:.3rem .8rem; border-radius:999px;
  background:#fff; border:1px solid var(--border); color:var(--text);
}

/* secondary mini-card behind the mockup */
.hero-mockup-2{
  position:absolute; bottom:-30px; left:-40px; width:160px;
  background:#fff; border-radius:14px; padding:.8rem; z-index:-1;
  box-shadow:0 20px 50px -16px rgba(0,206,201,.35), 0 0 0 1px var(--border);
  transform:rotate(6deg);
  animation:mockupFloat 6s var(--ease) infinite reverse;
}
.hero-mockup-2 .mini-icon{ width:34px; height:34px; border-radius:10px; background:var(--grad-3); margin-bottom:.5rem; }
.hero-mockup-2 .line{ height:6px; border-radius:3px; background:var(--bg-soft); margin-bottom:.4rem; }
.hero-mockup-2 .line:last-child{ width:60%; }

@media (max-width:900px){ .hero-mockup-2{ display:none; } }
/* ===== Hero 3D Service Ecosystem (replaces hero-mockup floats) ===== */
.eco-wrap{ position:relative; width:100%; max-width:560px; margin:0 auto; min-height:480px; }
.eco-center{
  position:relative; z-index:3; width:78%; margin:60px auto 0;
}
/* reuse .hero-mockup for the monitor screen, but flatten rotation */
.eco-center .hero-mockup{ transform:none; animation:none; margin:0; width:100%; }
.eco-center::after{
  content:""; display:block; width:60%; height:14px; margin:0 auto;
  background:linear-gradient(180deg,#e4e1f7,#cfc9f0); border-radius:0 0 8px 8px;
}
.eco-center .stand{
  width:30%; height:10px; background:#bdb6e8; margin:0 auto; border-radius:0 0 6px 6px;
}

/* connector lines */
.eco-lines{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.eco-lines path{ stroke:var(--border); stroke-width:1.5; fill:none; stroke-dasharray:4 5; }

/* floating pills */
.eco-pill{
  position:absolute; z-index:4; display:flex; align-items:center; gap:.6rem;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); border-radius:999px; padding:.5rem 1rem .5rem .5rem;
  box-shadow:0 14px 36px -14px rgba(108,92,231,.3);
  font-weight:700; font-size:.82rem; color:var(--text); white-space:nowrap;
  animation:floatY 6s var(--ease) infinite;
}
.eco-pill .obj{
  width:32px; height:32px; border-radius:10px; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12), 0 4px 10px -2px rgba(0,0,0,.25);
}
.eco-pill .obj svg{ width:18px; height:18px; }
.eco-pill .obj.g1{ background:linear-gradient(145deg,#a29bfe,#6c5ce7); }
.eco-pill .obj.g2{ background:linear-gradient(145deg,#81ecec,#00cec9); }
.eco-pill .obj.g3{ background:linear-gradient(145deg,#ffeaa7,#fab1a0); }
.eco-pill .obj.g4{ background:linear-gradient(145deg,#fdcbf1,#fd79a8); }

/* positions (8 around center) */
.ep-1{ top:0%;    left:2%;  animation-delay:0s; }
.ep-2{ top:2%;    right:0%; animation-delay:.6s; }
.ep-3{ top:26%;   left:-8%; animation-delay:1.2s; }
.ep-4{ top:28%;   right:-10%; animation-delay:1.8s; }
.ep-5{ top:58%;   left:-4%; animation-delay:2.4s; }
.ep-6{ top:60%;   right:-6%; animation-delay:3s; }
.ep-7{ bottom:0%; left:8%;  animation-delay:3.6s; }
.ep-8{ bottom:0%; right:6%; animation-delay:4.2s; }

@media (max-width:1000px){
  .eco-wrap{ max-width:440px; min-height:420px; }
  .eco-pill{ font-size:.72rem; padding:.4rem .8rem .4rem .4rem; }
  .eco-pill .obj{ width:26px; height:26px; }
  .eco-pill .obj svg{ width:14px; height:14px; }
}
@media (max-width:640px){
  .eco-wrap{ max-width:320px; min-height:360px; transform:scale(.92); margin-top:1rem; }
  .eco-pill span{ display:none; } /* icon-only badges on mobile */
  .eco-pill{ padding:.5rem; border-radius:50%; }
  .eco-pill .obj{ margin:0; }
  .eco-lines{ display:none; }
}