:root{
  --bg:#fdf8f3;--panel:#fffdfa;--ink:#241014;--muted:#7a6460;--line:#ecdcd4;
  --violet:#7a2436;--violet2:#a8465c;--pink:#c89347;--mint:#2f7d5c;--amber:#c89347;
  --shadow:0 20px 60px rgba(122,36,54,.14);--radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",ui-sans-serif,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;letter-spacing:-.03em;margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{max-width:100%;display:block}
.shell{width:min(1180px,calc(100% - 40px));margin:auto}

/* Keep anchor-link targets clear of the fixed pill nav so jumping to a section never
   tucks its top content (headings, cards, images) underneath the nav. */
section[id],#top{scroll-margin-top:110px}

/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--violet),var(--pink));z-index:200;transition:width .1s linear}

/* NAV */
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 28px));z-index:100;
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 22px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);
  transition:width .35s cubic-bezier(.2,.8,.2,1),padding .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.nav.scrolled{width:min(980px,calc(100% - 60px));padding:9px 12px 9px 20px}
.brand{font-family:"Space Grotesk",sans-serif;font-weight:800;font-size:20px;letter-spacing:-.04em;flex-shrink:0}
.brand span{color:var(--violet)}
.navlinks{display:flex;gap:6px}
.navlinks a{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);transition:.2s;white-space:nowrap}
.navlinks a:hover{background:#f2f0ff;color:var(--violet)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#f6f4ff;font-size:16px;transition:.2s}
.nav-icon:hover{background:var(--violet);transform:scale(1.08)}
.nav-cta{font-size:13px}
@media(max-width:900px){.navlinks{display:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid transparent;transition:transform .25s,box-shadow .25s}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 10px 24px rgba(122,36,54,.35)}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 32px rgba(122,36,54,.45)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-3px) scale(1.03);border-color:var(--violet)}
.btn{will-change:transform}
.btn-whatsapp{background:#1ebb63;color:#fff;width:100%;justify-content:center;box-shadow:0 10px 24px rgba(30,187,99,.3)}
.link-btn{background:none;border:0;color:var(--violet);font-weight:700;cursor:pointer;font-size:13px;margin-top:10px}

/* HERO */
.hero{position:relative;padding:150px 0 0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;transition:transform .2s linear}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(122,36,54,.18),transparent 70%);transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s ease;will-change:transform}
.hero:hover .cursor-glow{opacity:1}
.b1{width:420px;height:420px;background:var(--violet2);top:-120px;right:-100px}
.b2{width:300px;height:300px;background:var(--pink);top:300px;left:-120px;opacity:.35}
.b3{width:260px;height:260px;background:var(--mint);bottom:40px;right:10%;opacity:.3}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;z-index:2}
.pill{display:inline-flex;padding:8px 14px;border-radius:999px;background:#f2f0ff;color:var(--violet);font-size:12px;font-weight:700}
.hero h1{font-size:clamp(42px,6.5vw,78px);line-height:1.02;margin:20px 0 20px}
.hero-title .word{display:inline-block;opacity:0;transform:translateY(34px) rotate(4deg);animation:word-in .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * .09s)}
@keyframes word-in{to{opacity:1;transform:translateY(0) rotate(0)}}
.hero-title .accent,.hero-title .accent-alt{background-size:220% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:word-in .75s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .09s) forwards,shimmer 3.5s linear infinite 1.5s}
.accent{background-image:linear-gradient(90deg,var(--violet),var(--violet2),var(--pink),var(--violet))}
.accent-alt{background-image:linear-gradient(90deg,var(--pink),#e8b86b,var(--violet2),var(--pink))}
@keyframes shimmer{to{background-position:-220% center}}
.lead{font-size:18px;color:var(--muted);max-width:520px;line-height:1.6}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-trust{margin-top:36px;display:flex;align-items:center;gap:14px}
.avatars{display:flex}
.avatars span{width:34px;height:34px;border-radius:50%;background:var(--violet);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;margin-left:-10px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.avatars span:first-child{margin-left:0}
.hero-trust p{font-size:12px;color:var(--muted);margin:0}

.hero-visual{position:relative;height:640px}
.photo-glow{position:absolute;inset:-10% 0%;border-radius:50%;background:conic-gradient(from 0deg,var(--violet),var(--pink),var(--violet2),var(--violet));filter:blur(50px);opacity:.4;animation:glow-spin 14s linear infinite}
@keyframes glow-spin{to{transform:rotate(360deg)}}
.glass-panel{position:absolute;inset:0 6px;border-radius:36px;overflow:hidden;background:rgba(255,255,255,.4);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 60px rgba(122,36,54,.18),inset 0 1px 0 rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;padding:36px}
.glass-panel img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 20px 40px rgba(122,36,54,.18))}
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--shadow);font-size:13px;animation:float 7s ease-in-out infinite}
.float-card .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);display:inline-block;margin-right:6px;box-shadow:0 0 0 5px rgba(47,125,92,.2)}
.card-a{top:4%;left:0;font-weight:700}
.card-b{bottom:18%;right:0;animation-delay:.6s}
.card-b strong{display:block}
.card-b span,.card-c span{color:var(--muted);font-size:11px}
.card-c{bottom:0;left:10%;animation-delay:1.2s}
.card-c strong{display:block}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* LIVE SHOTS STRIP */
.shots-strip{margin-top:60px;padding:14px 0;overflow:hidden;position:relative;z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.shots-track{display:flex;gap:22px;width:max-content;animation:shots-scroll 36s linear infinite}
.shots-track img{width:260px;height:160px;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s}
.shots-track img:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 24px 50px rgba(122,36,54,.18)}
@keyframes shots-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.marquee{margin-top:50px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#fff;position:relative;z-index:2}
.marquee-track{display:flex;gap:40px;padding:18px 0;white-space:nowrap;animation:marquee 26s linear infinite;width:max-content}
.marquee-track span{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--muted);font-size:15px;transition:color .2s}
.marquee-track span:nth-child(odd){color:var(--violet)}
.marquee-track span:hover{color:var(--pink)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:100px 0}
.section-head{max-width:620px;margin-bottom:46px}
.kicker{display:inline-block;color:var(--violet);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.section-head h2{font-size:clamp(30px,4vw,46px);margin-bottom:12px}
.section-head p{color:var(--muted);font-size:16px;line-height:1.6}

/* WORK */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;perspective:1400px}
.work-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;position:relative;transform-style:preserve-3d;will-change:transform}
.work-card:hover{box-shadow:var(--shadow)}
.work-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.browser-chrome{position:absolute;top:10px;left:12px;z-index:2;display:flex;gap:6px}
.browser-chrome i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.browser-chrome i:nth-child(1){background:#ff5f57}
.browser-chrome i:nth-child(2){background:#febc2e}
.browser-chrome i:nth-child(3){background:#28c840}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s ease}
.work-card:hover .work-shot img{transform:scale(1.08) translateY(-2%)}
.work-copy{padding:26px 28px 28px}
.work-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.work-card h3{font-size:22px;margin-bottom:8px}
.work-card p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:14px}
.work-card-wide{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr}
.work-card-wide .work-shot{aspect-ratio:auto;height:100%}
.work-card-wide .work-copy{display:flex;flex-direction:column;justify-content:center}
.work-card-wide h3{font-size:28px}
.work-card-wide p{font-size:15px}
@media(max-width:800px){.work-card-wide{grid-template-columns:1fr}.work-card-wide .work-shot{aspect-ratio:16/10}}
.work-link{font-weight:700;color:var(--ink);font-size:13px}

/* STATS */
.stats-section{background:linear-gradient(135deg,var(--violet),#a8465c,var(--pink),var(--violet));background-size:300% 300%;animation:gradient-flow 10s ease infinite;color:#fff;border-radius:40px;margin:0 auto;width:min(1180px,calc(100% - 40px));padding:60px 0;position:relative;overflow:hidden}
@keyframes gradient-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;position:relative;z-index:1}
.stat{transition:transform .35s}
.stat:hover{transform:translateY(-6px) scale(1.05)}
.stat b{display:block;font:800 48px "Space Grotesk",sans-serif}
.stat span{font-size:13px;opacity:.85}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1200px}
.service-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.service-card:hover{transform:translateY(-8px) rotateX(4deg);box-shadow:var(--shadow)}
.service-card .icon{font-size:28px;margin-bottom:14px;display:inline-block;animation:icon-float 3.4s ease-in-out infinite}
.service-card:nth-child(2) .icon{animation-delay:.4s}
.service-card:nth-child(3) .icon{animation-delay:.8s}
.service-card:nth-child(4) .icon{animation-delay:1.2s}
.service-card:nth-child(5) .icon{animation-delay:1.6s}
.service-card:nth-child(6) .icon{animation-delay:2s}
@keyframes icon-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-6deg)}}
.service-card h3{font-size:19px;margin-bottom:8px}
.service-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}

/* WHY */
.why-section{background:#f6f4ff;border-radius:40px;width:min(1180px,calc(100% - 40px));margin:0 auto}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start;padding:70px 0}
.lead-sm{color:var(--muted);font-size:15px;line-height:1.65;margin-top:14px}
.why-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why-item{background:#fff;border-radius:18px;padding:22px;border:1px solid var(--line);transition:transform .3s,box-shadow .3s,border-color .3s}
.why-item:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(122,36,54,.12);border-color:var(--violet2)}
.why-item h4{font-size:16px;margin-bottom:8px}
.why-item p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process-grid{position:relative}
.process-step{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .35s,box-shadow .35s;position:relative}
.process-step:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.process-step b{color:var(--violet);font:800 30px "Space Grotesk",sans-serif;display:inline-block;transition:transform .35s}
.process-step:hover b{transform:scale(1.15) rotate(-4deg)}
.process-step h3{font-size:18px;margin:10px 0 6px}
.process-step p{color:var(--muted);font-size:13px;margin:0}

/* CONTACT */
.contact-section{padding-bottom:140px}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.contact-tabs{display:flex;gap:10px;margin-top:26px}
.tab-btn{padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer;color:var(--muted)}
.tab-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.contact-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.panel-view{display:none}
.panel-view.active{display:block}
.panel-view label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:16px}
.panel-view input,.panel-view textarea{width:100%;margin-top:7px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;outline:none;background:#fbfaff}
.panel-view input:focus,.panel-view textarea:focus{border-color:var(--violet)}
.panel-view textarea{min-height:110px;resize:vertical}
.form-note{font-size:13px;margin-top:12px;min-height:18px;color:var(--pink)}
.form-note.ok{color:var(--mint)}
.wa-intro{color:var(--muted);font-size:14px;margin:0 0 16px}
.otp-copy{font-size:14px;color:var(--muted);margin-bottom:18px}
.otp-boxes{display:flex;gap:10px;margin-bottom:20px}
.otp-digit{width:100%;text-align:center;font-size:22px;font-weight:800;padding:14px 0}
.success-tick{width:56px;height:56px;border-radius:50%;background:var(--mint);color:#fff;display:grid;place-items:center;font-size:26px;margin-bottom:16px}

/* FOOTER */
.footer{padding:60px 0 30px;border-top:1px solid var(--line);margin-top:60px}
.footer-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px}
.footer-grid p{color:var(--muted);font-size:13px;margin-top:10px}
.footer-links{display:flex;gap:18px;font-size:14px;font-weight:600;color:var(--muted)}
.footer-bottom{text-align:center;color:var(--muted);font-size:12px;margin-top:40px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.delay1{transition-delay:.1s}
.delay2{transition-delay:.2s}
.delay3{transition-delay:.3s}

@media(max-width:900px){
  .hero-grid,.work-grid,.why-grid,.contact-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .why-list{grid-template-columns:1fr}
  .hero-visual{height:320px;margin-top:20px}
  .glass-panel{padding:20px}
  .nav{top:12px;width:calc(100% - 20px);padding:10px 10px 10px 16px}
  .nav.scrolled{width:calc(100% - 20px);padding:8px 8px 8px 14px}
}
@media(max-width:560px){
  .services-grid,.process-grid{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  .otp-digit{font-size:18px;padding:12px 0}
  .brand{font-size:17px}
  .nav-icon{width:32px;height:32px;font-size:14px}
  .nav-cta{padding:10px 14px}
  .shots-track img{width:200px;height:130px}
}
@media(max-width:380px){
  .nav-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .float-card,.orbit-core,.orbit-ring,.marquee-track{animation:none}
}