:root{
  --bg:#050505;
  --bg-soft:#0d0d0f;
  --panel:#111115;
  --panel-2:#18181d;
  --text:#f5f5f7;
  --muted:#a7a7b3;
  --line:rgba(255,255,255,.08);
  --accent:#ff9a21;
  --accent-2:#ffb457;
  --accent-glow:rgba(255,154,33,.28);
  --dark-glow:rgba(255,255,255,.10);
  --radius:22px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,154,33,.16), transparent 18%),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 12%),
    linear-gradient(180deg, #060606 0%, #0a0a0d 45%, #070708 100%);
  color:var(--text); line-height:1.6; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(16px);
  background:rgba(8,8,10,.72);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;min-height:82px;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.4px}
.brand img{height:52px;width:auto;object-fit:contain}
.brand .wordmark{font-size:1.15rem}
.brand .wordmark span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{color:var(--muted);font-size:.96rem;transition:.25s ease;position:relative}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:after{
  content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--accent);
  transition:width .25s ease;
}
.nav-link:hover:after,.nav-link.active:after{width:100%}
.btn{
  display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;
  padding:14px 22px;font-weight:700;cursor:pointer;transition:.25s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#1a1207;
  box-shadow:0 12px 30px var(--accent-glow);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-secondary{
  background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line)
}
.btn-secondary:hover{background:rgba(255,255,255,.07)}
.hero{
  position:relative;padding:86px 0 44px;overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.kicker{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); font-size:.9rem
}
.kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.hero h1{
  margin:18px 0 16px;font-size:clamp(2.5rem,6vw,5.6rem);line-height:.95;letter-spacing:-.04em
}
.hero h1 span{color:var(--accent)}
.hero p{
  color:#c4c4cc; max-width:720px; font-size:1.08rem; margin:0 0 26px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.trust-row{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.hero-card{
  position:relative;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08); border-radius:28px; box-shadow:var(--shadow); padding:24px; min-height:540px;
}
.glow{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.65;pointer-events:none
}
.glow.orange{width:180px;height:180px;background:var(--accent-glow);top:18px;right:18px}
.glow.white{width:130px;height:130px;background:var(--dark-glow);bottom:30px;left:20px}
.floating{
  animation:floaty 6s ease-in-out infinite;
}
.floating.delay{animation-delay:1.2s}
.floating.delay2{animation-delay:2.1s}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.dashboard{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;height:100%
}
.metric,.mini-card,.glass-card,.cta-strip,.feature-card,.pricing-card,.faq-item,.blog-card,.testimonial-card,.case-card,.team-card,.service-card,.contact-card{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:24px; box-shadow:var(--shadow);
}
.metric{padding:20px}
.metric strong{font-size:2.1rem;display:block}
.metric span{color:var(--muted)}
.mini-card{padding:18px;display:flex;flex-direction:column;gap:8px}
.mini-card small,.feature-card p,.pricing-card p,.service-card p,.team-card p,.blog-card p,.testimonial-card p,.case-card p,.contact-card p,.faq-item p{color:var(--muted)}
.mini-card h4,.service-card h3,.feature-card h3,.pricing-card h3,.blog-card h3,.testimonial-card h3,.case-card h3{margin:0}
.section{padding:34px 0 96px}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:26px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:clamp(2rem,4vw,3.1rem);line-height:1}
.section-head p{max-width:680px;color:var(--muted);margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature-card,.service-card,.pricing-card,.blog-card,.testimonial-card,.case-card,.team-card,.contact-card{padding:24px;position:relative;overflow:hidden}
.feature-card:hover,.service-card:hover,.pricing-card:hover,.blog-card:hover,.testimonial-card:hover,.case-card:hover,.team-card:hover,.contact-card:hover{
  transform:translateY(-6px); transition:transform .25s ease;
}
.icon-wrap{
  width:54px;height:54px;border-radius:18px;background:rgba(255,154,33,.11);display:grid;place-items:center;
  color:var(--accent);font-size:1.4rem;margin-bottom:16px;border:1px solid rgba(255,154,33,.18)
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat-card{
  padding:22px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:center
}
.stat-card strong{font-size:2.4rem;display:block}
.stat-card span{color:var(--muted)}
.page-hero{
  padding:72px 0 40px; position:relative; overflow:hidden;
}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;margin:0 0 14px}
.page-hero p{max-width:770px;color:var(--muted)}
.breadcrumbs{display:flex;gap:10px;color:var(--muted);font-size:.95rem;margin-bottom:18px;flex-wrap:wrap}
.list-check{padding:0;margin:16px 0 0;list-style:none}
.list-check li{padding-left:28px;position:relative;margin:10px 0;color:#d8d8de}
.list-check li:before{
  content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800
}
.case-image,.blog-image{
  height:220px;border-radius:18px;object-fit:cover;margin-bottom:16px
}
.team-image{height:260px;border-radius:18px;object-fit:cover;margin-bottom:16px}
.price{font-size:2.7rem;font-weight:800;margin:8px 0}
.badge{
  display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(255,154,33,.1);border:1px solid rgba(255,154,33,.18);color:var(--accent);font-weight:700;font-size:.86rem
}
.faq-wrap{display:grid;gap:14px}
.faq-item summary{
  cursor:pointer;list-style:none;font-weight:700;font-size:1.06rem;padding:20px 22px
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 22px 22px;margin:0}
.footer{
  padding:26px 0 40px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)
}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:22px}
.footer a{color:var(--muted);display:block;margin:10px 0}
.footer a:hover{color:var(--text)}
.copyright{padding-top:24px;color:var(--muted);font-size:.92rem}
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center; font-size:1.6rem; color:white;
  background:linear-gradient(135deg,#25d366,#14a34b); box-shadow:0 18px 40px rgba(37,211,102,.3);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.4)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px}
.form-grid{display:grid;gap:14px}
.field{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;
  padding:15px 16px;color:var(--text);outline:none;
}
.field:focus{border-color:rgba(255,154,33,.5); box-shadow:0 0 0 4px rgba(255,154,33,.08)}
textarea.field{min-height:150px;resize:vertical}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.process-step{
  padding:22px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.03)
}
.process-step strong{display:block;font-size:2rem;color:var(--accent);margin-bottom:10px}
.cta-strip{
  padding:26px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap
}
.ticker{
  overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:18px 0;background:rgba(255,255,255,.02)
}
.ticker-track{
  display:inline-flex;gap:60px;min-width:100%;animation:scroll 18s linear infinite;color:#d7d7dd;font-weight:700
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width: 1100px){
  .hero-grid,.contact-grid,.footer-grid,.grid-4,.stats,.process,.service-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .nav{padding:12px 0}
  .nav-links{display:none}
  .hero-grid,.grid-3,.grid-4,.grid-2,.stats,.footer-grid,.contact-grid,.service-grid,.process,.dashboard{grid-template-columns:1fr}
  .hero{padding-top:52px}
  .hero-card{min-height:auto}
  .brand img{height:44px}
  .section{padding-bottom:72px}
}