* { box-sizing: border-box; }
:root {
  --bg: #0b0b0c;
  --bg-alt: #141416;
  --text: #f5f5f5;
  --muted: #9a9a9f;
  --accent: #ff1d25;
  --border: #26262a;
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 24px;
  --grad-dark: linear-gradient(145deg,#1b1b1f,#0b0b0c);
  --font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow: 0 4px 18px -4px rgba(0,0,0,.6),0 2px 4px -1px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,0.04) inset;
  --shadow-glow: 0 0 0 1px rgba(255,29,37,0.4),0 0 18px -2px rgba(255,29,37,0.6);
}
html, body { margin:0; padding:0; font-family: var(--font-stack); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
body { line-height:1.5; }
img { max-width:100%; display:block; }
a { color: var(--text); text-decoration:none; position:relative; }
a:hover { color: var(--accent); }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(11,11,12,0.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; gap:2rem; height:68px; }
.logo { font-weight:700; font-size:1.2rem; letter-spacing:.5px; white-space:nowrap; }
.logo span { color: var(--accent); }
.nav-links { display:flex; gap:2rem; align-items:center; flex:1; justify-content:center; }
.nav-links a { font-size:.9rem; font-weight:500; letter-spacing:.5px; padding:.5rem 0; }
.nav-links .btn.small { padding:.55rem 1rem; font-size:.8rem; }

/* Social icons (header + footer) */
.nav-social, .foot-social { display:flex; align-items:center; gap:.65rem; }
.nav-social a, .foot-social a { --sz:34px; width:var(--sz); height:var(--sz); display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:10px; background:#141416; color:var(--muted); transition:.35s; position:relative; overflow:hidden; }
.nav-social a:hover, .foot-social a:hover { color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,29,37,0.4),0 0 16px -2px rgba(255,29,37,.6); }
.nav-social svg, .foot-social svg { width:16px; height:16px; display:block; }
.nav-social a.social.up, .foot-social a.social.up { font-weight:700; font-size:.85rem; letter-spacing:-.5px; font-family:var(--font-stack); }

/* Footer contact line */
.foot-contact { font-size:.7rem; letter-spacing:.5px; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; align-items:center; }
.foot-contact a { color:var(--text); font-weight:500; }
.foot-contact a:hover { color:var(--accent); }
.wa-inline { --sz:26px; width:var(--sz); height:var(--sz); display:inline-flex; align-items:center; justify-content:center; border:1px solid #242428; border-radius:8px; background:#161618; color:#e6e6e6; transition:.35s; }
.wa-inline:hover { background:#25D366; border-color:#25D366; color:#0b0b0c; }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:.5rem; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text); margin:5px 0; transition:.3s; }

/* Buttons */
.btn { --btn-bg: var(--bg-alt); display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.4rem; border-radius: var(--radius-sm); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.8px; background:var(--btn-bg); color:var(--text); border:1px solid var(--border); position:relative; overflow:hidden; transition:.35s; }
.btn.primary { --btn-bg: var(--accent); border:none; color:#fff; }
.btn.ghost { background:transparent; }
.btn.small { padding:.6rem 1rem; }
.btn.full { width:100%; }
.btn:after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,0.15),transparent 60%); transform:translateX(-100%); transition:.6s; }
.btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow: var(--shadow-glow); }
.btn:hover:after { transform:translateX(0); }
.btn.ghost:hover { background:var(--bg-alt); box-shadow: var(--shadow); }

/* Hero */
.hero { position:relative; min-height: 92vh; display:flex; align-items:center; padding-top:68px; }
.hero .overlay { position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, rgba(255,29,37,0.12), transparent 55%), radial-gradient(circle at 80% 70%, rgba(255,29,37,0.08), transparent 60%); pointer-events:none; }
.hero-inner { position:relative; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); line-height:1.05; margin:0 0 1.2rem; font-weight:800; letter-spacing:-1px; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .stroke { -webkit-text-stroke:1px var(--text); color: transparent; }
.subtitle { max-width:640px; font-size:1.05rem; color: var(--muted); margin:0 0 2rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }
.metrics { display:flex; gap:2rem; margin-top:3rem; }
.metrics h3 { margin:0; font-size:1.8rem; font-weight:700; }
.metrics p { margin:.25rem 0 0; font-size:.75rem; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }

/* Marquee strip */
.strip.logos { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); padding:.8rem 0; overflow:hidden; }
.marquee { display:flex; gap:3rem; animation: marquee 22s linear infinite; font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:600; }
.marquee span { white-space:nowrap; }
@keyframes marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* Sections generic */
section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section-head { margin:0 0 3rem; }
.section-head h2 { font-size:2.4rem; margin:0 0 1rem; letter-spacing:-.5px; }
.lead { color: var(--muted); max-width:600px; font-size:1rem; }

/* Services */
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem; }
.card { background: var(--grad-dark); border:1px solid var(--border); padding:1.4rem 1.3rem 1.5rem; border-radius: var(--radius); position:relative; overflow:hidden; transition:.4s; }
.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0, rgba(255,29,37,0.18), transparent 60%); opacity:0; transition:.5s; }
.card:hover { transform:translateY(-6px); box-shadow: var(--shadow-glow); border-color:rgba(255,29,37,0.5); }
.card:hover:before { opacity:1; }
.card h3 { margin:.2rem 0 0.6rem; font-size:1.05rem; letter-spacing:.5px; }
.card p { margin:0 0 1rem; font-size:.85rem; color: var(--muted); line-height:1.4; }
.tags { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tags li { background:#1f1f22; padding:.35rem .6rem; font-size:.6rem; letter-spacing:1px; text-transform:uppercase; border-radius:20px; border:1px solid #2b2b2f; }

/* Process */
.process { background: var(--bg-alt); }
.steps { list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem; counter-reset:step; padding:0; margin:0; }
.steps li { flex:1 1 160px; background: var(--grad-dark); border:1px solid var(--border); padding:1.1rem 1rem; border-radius: var(--radius-sm); font-size:.8rem; letter-spacing:.5px; font-weight:600; display:flex; align-items:center; gap:.8rem; position:relative; overflow:hidden; }
.steps li span { font-size:.65rem; width:34px; height:34px; border-radius:50%; background:#1f1f22; display:flex; align-items:center; justify-content:center; border:1px solid #27272b; color: var(--accent); font-weight:700; }

/* Work */
.work-grid { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.work-item { background: var(--grad-dark); border:1px solid var(--border); padding:1.1rem 1rem 1.4rem; border-radius: var(--radius); position:relative; overflow:hidden; transition:.4s; }
.work-item:hover { transform:translateY(-5px); border-color:rgba(255,29,37,0.5); box-shadow: var(--shadow-glow); }
.work-img { height:140px; border-radius: var(--radius-sm); background:linear-gradient(135deg,#1f1f22,#141416); margin-bottom:1rem; position:relative; overflow:hidden; }
.skeleton:after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,0.07), rgba(255,255,255,0)); animation: shimmer 2.2s infinite; }
@keyframes shimmer { 0% { transform:translateX(-100%);} 100% { transform:translateX(100%);} }
.work-item h3 { margin:.2rem 0 .4rem; font-size:1rem; }
.work-item p { margin:0; font-size:.8rem; color: var(--muted); line-height:1.3; }

/* Injected visuals support */
.work-img.has-visual.skeleton:after { display:none; }
.work-visual { display:block; width:100%; height:100%; }
.work-visual .line { fill:none; stroke:#e6e6e6; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; }
.work-visual .muted { stroke: var(--muted); opacity:.7; }
.work-visual .accent { stroke: var(--accent); }
.work-visual .soft { stroke: rgba(255,255,255,0.35); }
.work-visual .fill-accent { fill: var(--accent); }
.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 5s ease-in-out infinite alternate; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.anim-float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.anim-pulse { animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* About */
.about-inner { display:grid; gap:4rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.about-copy p { color: var(--muted); }
.bullets { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.6rem; }
.bullets li { font-size:.8rem; letter-spacing:.5px; display:flex; align-items:center; gap:.6rem; }
.bullets li:before { content:''; width:8px; height:8px; border-radius:50%; background: var(--accent); display:inline-block; }
.about-side { display:grid; gap:1rem; }
.stat { background: var(--grad-dark); border:1px solid var(--border); padding:1.4rem 1.2rem; border-radius: var(--radius); display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; position:relative; overflow:hidden; }
.stat .num { font-size:1.8rem; font-weight:700; letter-spacing:-1px; }
.stat .label { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color: var(--muted); }

/* CTA / Contact */
.cta { background:linear-gradient(145deg,#141416,#0b0b0c); position:relative; }
.cta-inner { max-width:760px; }
.cta h2 { font-size:2.4rem; margin:0 0 1rem; }
.cta p { margin:0 0 2rem; color: var(--muted); }
.contact-form { display:grid; gap:1.4rem; }
.field-group { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field label { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; color: var(--muted); }
.field input, .field select, .field textarea { background:#141416; border:1px solid #222226; border-radius: var(--radius-sm); padding:.8rem .9rem; font:inherit; color: var(--text); resize:vertical; outline:none; transition:.3s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow:0 0 0 1px var(--accent); }
.error { font-size:.65rem; color: var(--accent); min-height:14px; }
.form-status { font-size:.75rem; text-align:center; color: var(--muted); }

/* Footer */
.footer { border-top:1px solid var(--border); background:#0d0d0f; padding:3rem 0 2.4rem; }
.foot-inner { display:grid; gap:2rem; justify-items:center; text-align:center; }
.foot-brand { font-weight:700; font-size:1.1rem; }
.foot-brand span { color: var(--accent); }
.foot-links { display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.7rem; letter-spacing:1px; text-transform:uppercase; }
.foot-links a { color: var(--muted); position:relative; }
.foot-links a:after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background: var(--accent); transition:.3s; }
.foot-links a:hover { color: var(--text); }
.foot-links a:hover:after { width:100%; }
.foot-copy { font-size:.65rem; color: var(--muted); }

/* Responsive */
@media (max-width: 880px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; top:68px; right:0; background:#101013; flex-direction:column; align-items:flex-start; padding:1.4rem 1.6rem 1.6rem; width:230px; border-left:1px solid var(--border); border-bottom:1px solid var(--border); transform:translateX(100%); opacity:0; pointer-events:none; transition:.4s; gap:.6rem; justify-content:flex-start; }
  .nav-social { display:none; }
  .nav-links.show { transform:translateX(0); opacity:1; pointer-events:auto; }
  .nav-links a { width:100%; }
  .metrics { gap:1.4rem; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .metrics { flex-wrap:wrap; }
  .metrics div { flex:1 1 120px; }
  .section-head h2, .cta h2 { font-size:2rem; }
}

/* Scroll reveal (initial) */
.reveal { opacity:0; transform:translateY(30px); transition:1s cubic-bezier(.16,.8,.24,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* Utility */
.stroke { -webkit-text-stroke:1px var(--text); color:transparent; }
.accent { color: var(--accent); }

/* Honeypot (anti-spam) */
.hp { position:absolute !important; left:-5000px !important; opacity:0 !important; height:0 !important; width:0 !important; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0b0b0c; }
::-webkit-scrollbar-thumb { background:#1f1f22; border-radius:20px; border:2px solid #0b0b0c; }
::-webkit-scrollbar-thumb:hover { background:#29292d; }

/* Overrides: hero centering & WhatsApp */
.hero { min-height:100vh; }
.hero-inner { text-align:center; display:flex; flex-direction:column; align-items:center; padding-top:90px; padding-bottom:40px; }
.hero h1 { font-size: clamp(2.75rem, 6.5vw, 4.4rem); line-height:1.07; margin:0 0 1.2rem; font-weight:800; letter-spacing:-1.3px; max-width:1000px; }
.subtitle { max-width:760px; font-size:1.15rem; margin:0 auto 2.2rem; }
.metrics { justify-content:center; gap:2.4rem; margin-top:3.4rem; }
.btn.whatsapp { gap:.5rem; background:#161618; border:1px solid #242428; color:#e6e6e6; }
.btn.whatsapp:hover { background:#25D366; border-color:#25D366; color:#0b0b0c; box-shadow:0 0 0 1px #25D366,0 0 18px -2px #25D366; }
.btn.whatsapp .wa-ic { display:block; }
/* Marquee override: start from right edge */
.marquee { animation: marqueeRight 22s linear infinite; }
@keyframes marqueeRight { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }
@media (max-width: 600px) {
  .hero-inner { padding-top:70px; padding-bottom:30px; }
}

/* Mini hero (subpages) */
.mini-hero { min-height:33vh; display:flex; align-items:flex-end; }
.mini-hero .hero-inner { padding-top:110px; padding-bottom:30px; min-height:0; }
.mini-hero h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing:-1px; }
.mini-hero .subtitle { font-size:1rem; margin-bottom:1.2rem; }
@media (max-width: 780px){
  .mini-hero { min-height:40vh; }
  .mini-hero .hero-inner { padding-top:100px; }
}
@media (max-width: 520px){
  .mini-hero { min-height:42vh; }
  .mini-hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
}