/* ===== Soluviant · Light theme with dark-contrast sections ===== */
:root{
  --bg:#ffffff;            /* page background */
  --bg-2:#f4f6f3;          /* alt panels (neutral, no green tint) */
  --dark-band:linear-gradient(180deg,#0e1c14,#0c1711); /* the one dark green used for alternating blocks */
  --dark-line:#24352b;
  --panel:#ffffff;         /* cards */
  --panel-2:#f2f7ee;       /* elevated / featured */
  --field:#ffffff;         /* inputs */
  --line:#e2e8df;          /* borders */
  --line-soft:#ececec;
  --ink:#12211a;           /* main text */
  --muted:#57665d;         /* secondary text */
  --faint:#7c8b83;         /* faint labels */
  --green:#b9f542;         /* primary accent (fills) */
  --green-2:#8ed23f;       /* secondary */
  --green-ink:#4c7a1f;     /* accent readable as text on light */
  --green-deep:#eaf7d1;    /* light fill for icon badges */
  --radius:22px;
  --maxw:1240px;

  /* dark-section variants (outcome, contact, modal) */
  --ink-on-dark:#eef2ec;
  --muted-on-dark:#93a29a;
  --faint-on-dark:#63736b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:"Manrope",sans-serif}
a{color:inherit;text-decoration:none}
em{font-style:normal}

/* ---------- Header (sticky, frosted glass, scroll-progress accent) ---------- */
.site-header{height:86px;max-width:var(--maxw);margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.site-header::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid transparent;z-index:-1;transition:border-color .3s ease,box-shadow .3s ease}
.site-header.scrolled::before{border-bottom-color:var(--line);box-shadow:0 12px 30px #14251c0f}
.scroll-progress{position:absolute;left:0;bottom:0;height:2px;width:0%;background:linear-gradient(90deg,var(--green-2),var(--green));transition:width .08s linear}
.brand{display:flex;align-items:center}
.brand-logo{display:block;height:70px;width:auto}
.site-header nav{position:relative;display:flex;gap:2px;font-size:14px;font-weight:600;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px}
.site-header nav a{position:relative;z-index:1;padding:9px 18px;border-radius:999px;transition:color .25s ease}
.site-header nav a:hover{color:var(--ink)}
.site-header nav a.active{color:var(--green-ink)}
.nav-indicator{position:absolute;top:5px;bottom:5px;left:5px;width:0;background:#ffffff;border-radius:999px;box-shadow:0 2px 8px #14251c14;transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1),background .25s ease;z-index:0}
.nav-indicator.on-active{background:var(--green-deep);box-shadow:none}
.site-header .menu-button span{background:var(--ink)}

.button{border:0;background:var(--green);color:#12211a;padding:16px 22px;border-radius:10px;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;font-weight:700;cursor:pointer;transition:transform .25s,box-shadow .25s;box-shadow:0 0 0 0 #b9f54200}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 34px #b9f54240}
.button-small{padding:11px 17px;font-size:14px;border-radius:9px}
.button-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.button-ghost:hover{border-color:var(--green-ink);box-shadow:none}
.menu-button{display:none;background:0;border:0}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:660px;max-width:var(--maxw);margin:auto;padding:60px 28px 92px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero::before{content:"";position:absolute;top:-120px;left:-160px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,#d8f2a655,transparent 62%);filter:blur(10px);pointer-events:none;z-index:-1}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;color:var(--faint);display:flex;gap:9px;align-items:center}
.eyebrow>span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #b9f5422e}
.hero h1{font-size:clamp(44px,5.2vw,72px);line-height:1.02;letter-spacing:-.055em;margin:22px 0;color:var(--ink)}
.hero h1 em{color:var(--green-ink)}
.hero-copy>p{font-size:18px;line-height:1.7;color:var(--muted);max-width:580px}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}
.text-link{font-size:14px;font-weight:700;border-bottom:1px solid var(--line);padding:10px 0;color:var(--ink)}
.text-link:hover{border-color:var(--green-ink)}
.text-link span{margin-left:10px;color:var(--green-ink)}

/* Hero visual (photo) */
.hero-visual{height:500px;position:relative;border-radius:50%;background:radial-gradient(circle at 50% 45%,#eaf7d488,transparent 66%)}
.hero-photo{position:absolute;z-index:2;width:430px;top:50px;left:35px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px #14251c26;transform:rotate(-2deg)}
.hero-photo img{display:block;width:100%;height:350px;object-fit:cover}
.orb{position:absolute;border-radius:50%;background:var(--green);filter:blur(1px)}
.orb-one{width:55px;height:55px;right:15px;bottom:75px;opacity:.85}

/* ---------- Tech marquee (same dark green as Nuestro enfoque / Contacto) ---------- */
.tech{--ink:var(--ink-on-dark);--muted:var(--muted-on-dark);--faint:var(--faint-on-dark);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:54px 0;background:var(--dark-band);overflow:hidden}
.tech-lead{max-width:760px;margin:0 auto 34px;padding:0 28px;text-align:center;color:var(--muted);font-size:15px;line-height:1.65}
.tech-lead b{color:var(--ink)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 50s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.logo{flex-shrink:0;display:inline-flex;align-items:center;gap:11px;margin-right:64px;color:#eef2ec;opacity:.6;transition:opacity .3s}
.logo:hover{opacity:1}
.logo svg{height:23px;width:auto;display:block;flex-shrink:0;overflow:visible}
.logo b{font:700 19px "Manrope";letter-spacing:-.02em;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{max-width:var(--maxw);margin:auto;padding:110px 28px}
.section-heading{display:grid;grid-template-columns:.65fr 1.15fr .8fr;gap:50px;align-items:end;margin-bottom:56px}
.section-heading.compact{grid-template-columns:.75fr 2fr;margin-bottom:60px}
.section-number{display:block;font:700 10px "Manrope";color:var(--green-ink);margin-bottom:15px;letter-spacing:.05em}
.section-heading h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.045em;line-height:1.08;margin:0;color:var(--ink)}
.section-heading h2 em{color:var(--green-ink)}
.section-heading>p{color:var(--muted);line-height:1.7;font-size:14px;margin:0}

/* ---------- Services (with animated sims) ---------- */
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.service-card{display:flex;flex-direction:column;min-height:430px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;position:relative;transition:.3s;overflow:hidden}
.service-card:hover{transform:translateY(-5px);border-color:#c7d8bd;box-shadow:0 30px 60px #14251c14}
.service-card.featured{background:linear-gradient(165deg,#f2f8ec,#ffffff);border-color:#d8e8c8}
.sc-head{position:relative}
.card-num{position:absolute;right:0;top:0;color:var(--faint);font:700 11px "Manrope"}
.service-card h3{font-size:24px;margin:0 0 10px;padding-right:34px;color:var(--ink)}
.service-card .sc-head>p{color:var(--muted);line-height:1.6;font-size:14px;margin:0}
.service-card>a{margin-top:auto;padding-top:22px;font-weight:700;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;width:fit-content}
.service-card>a span{margin-left:9px;color:var(--green-ink);transition:transform .25s}
.service-card>a:hover span{transform:translate(3px,-3px)}

/* Sim shared */
.sim{position:relative;margin:22px 0;height:222px;border:1px solid var(--line-soft);border-radius:16px;background:var(--bg-2);overflow:hidden}
.featured .sim{background:#eef5e6}

/* Sim: automation flow */
.sim-flow{display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.flow-line{position:absolute;left:44px;right:44px;top:50%;transform:translateY(-1px);height:2px;background:#dee6d9;overflow:hidden}
.flow-pulse{position:absolute;top:-2px;left:0;width:44px;height:6px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--green));box-shadow:0 0 10px 1px #b9f5424a;animation:flowPulse 3s linear infinite}
.flow-node{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;width:56px}
.flow-node i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-style:normal;background:#ffffff;border:1px solid var(--line);color:#8a9a90}
.flow-node i svg{width:20px;height:20px}
.flow-node span{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;font-weight:700;color:var(--muted)}
.flow-node.n1 i{animation:node1 3s ease-in-out infinite}
.flow-node.n2 i{animation:node2 3s ease-in-out infinite}
.flow-node.n3 i{animation:node3 3s ease-in-out infinite}
.flow-node.n4 i{animation:node4 3s ease-in-out infinite}
@keyframes flowPulse{0%{left:-44px}100%{left:100%}}
@keyframes node1{0%,2%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}6%,12%{background:var(--green-deep);border-color:var(--green-ink);color:var(--green-ink);box-shadow:0 0 0 4px #b9f5421f}18%,100%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}}
@keyframes node2{0%,29%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}33%,39%{background:var(--green-deep);border-color:var(--green-ink);color:var(--green-ink);box-shadow:0 0 0 4px #b9f5421f}45%,100%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}}
@keyframes node3{0%,59%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}63%,69%{background:var(--green-deep);border-color:var(--green-ink);color:var(--green-ink);box-shadow:0 0 0 4px #b9f5421f}75%,100%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}}
@keyframes node4{0%,88%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}92%,98%{background:var(--green-deep);border-color:var(--green-ink);color:var(--green-ink);box-shadow:0 0 0 4px #b9f5421f}100%{background:#ffffff;border-color:var(--line);color:#8a9a90;box-shadow:none}}

/* Sim: WhatsApp chat */
.sim-chat{padding:0}
.chat-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line-soft);font-size:11px;font-weight:700;color:var(--muted)}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #b9f5421c}
.chat-scroll{padding:16px 15px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;padding:10px 13px;font-size:12.5px;line-height:1.4;border-radius:14px;opacity:0}
.msg.in{align-self:flex-start;background:#eef2ea;color:#2c3830;border-bottom-left-radius:4px;animation:msgIn 7s ease-in-out infinite}
/* typing y respuesta comparten el mismo lugar (mismo eje Y) */
.agent-slot{position:relative;align-self:flex-end;width:78%;min-height:58px}
.agent-slot .msg{position:absolute;top:0;right:0;max-width:100%;margin:0}
.msg.out{width:fit-content;background:var(--green);color:#12211a;font-weight:600;border-bottom-right-radius:4px;animation:msgOut 7s ease-in-out infinite}
.msg.typing{width:fit-content;background:#e6ece0;border-bottom-right-radius:4px;display:flex;gap:4px;padding:13px;animation:msgType 7s ease-in-out infinite}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--green-ink);animation:typing 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}
.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes msgIn{0%,4%{opacity:0;transform:translateY(6px)}10%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes msgType{0%,22%{opacity:0}28%,44%{opacity:1}50%,100%{opacity:0}}
@keyframes msgOut{0%,52%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* Sim: web + cursor */
.sim-web{padding:0}
.web-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line-soft)}
.web-bar i{width:8px;height:8px;border-radius:50%;background:#dbe3d6}
.web-bar span{margin-left:10px;font-size:10px;color:var(--faint);background:#eef2ea;border-radius:6px;padding:4px 10px}
.web-body{position:relative;padding:16px}
.web-hero{height:20px;width:60%;border-radius:6px;background:linear-gradient(90deg,#e3ebde,#eef2ea);margin-bottom:14px}
.web-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.web-grid span{height:44px;border-radius:8px;background:#f2f6ee;border:1px solid var(--line-soft)}
.web-buy{position:relative;border:0;background:var(--green);color:#12211a;font-weight:700;font-size:12px;padding:9px 18px;border-radius:9px;font-family:"DM Sans";animation:buyPress 5s ease-in-out infinite}
.web-toast{position:absolute;right:16px;bottom:14px;background:#ffffff;border:1px solid #cfe6ad;color:var(--green-ink);font-size:11px;font-weight:700;padding:7px 12px;border-radius:9px;opacity:0;animation:toast 5s ease-in-out infinite;box-shadow:0 10px 20px #14251c14}
.cursor{position:absolute;left:150px;top:26px;width:21px;height:21px;z-index:6;pointer-events:none;filter:drop-shadow(0 2px 3px #14251c33);animation:cursorMove 5s cubic-bezier(.5,0,.3,1) infinite}
.cursor svg{width:100%;height:100%;display:block}
.cursor::after{content:"";position:absolute;left:-5px;top:-11px;width:26px;height:26px;border-radius:50%;border:2px solid var(--green-ink);opacity:0;animation:clickRing 5s ease-out infinite}
@keyframes cursorMove{0%{left:150px;top:10px}44%{left:52px;top:124px}50%{left:50px;top:122px}56%,100%{left:52px;top:124px}}
@keyframes clickRing{0%,48%{transform:scale(.3);opacity:0}53%{transform:scale(.6);opacity:.9}64%,100%{transform:scale(1.3);opacity:0}}
@keyframes buyPress{0%,49%{transform:scale(1);box-shadow:0 0 0 0 #b9f54200}55%{transform:scale(.9);box-shadow:0 0 0 7px #b9f54222}62%,100%{transform:scale(1);box-shadow:0 0 0 0 #b9f54200}}
@keyframes toast{0%,63%{opacity:0;transform:translateY(6px)}71%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Sim: SEO ranking climb */
.sim-seo{padding:16px}
.seo-search{font-size:11px;color:var(--muted);background:#eef2ea;border:1px solid var(--line-soft);border-radius:8px;padding:8px 12px;margin-bottom:14px}
.seo-rows{position:relative;display:flex;flex-direction:column;gap:8px}
.seo-row{display:flex;align-items:center;gap:10px;height:26px}
.seo-row>span{font:700 10px "Manrope";color:var(--faint);width:20px}
.seo-row>i{flex:1;height:8px;border-radius:5px;background:#e6ece0}
.seo-climber{position:absolute;left:0;right:0;height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:9px;background:var(--green-deep);border:1px solid var(--green-ink);color:var(--green-ink);font-size:12px;font-weight:700;box-shadow:0 8px 20px #14251c1a;animation:climb 5.5s ease-in-out infinite}
.seo-climber .rankbadge{margin-left:auto;background:var(--green);color:#12211a;font-size:10px;padding:2px 8px;border-radius:20px}
@keyframes climb{0%,8%{top:102px}50%,92%{top:0}100%{top:102px}}

/* ---------- Outcome (dark contrast section) ---------- */
.outcome{--ink:var(--ink-on-dark);--muted:var(--muted-on-dark);--faint:var(--faint-on-dark);background:var(--dark-band);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:100px max(28px,calc((100vw - 1184px)/2));display:grid;grid-template-columns:1fr 1fr;gap:90px}
.outcome h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.045em;line-height:1.08;margin:18px 0 22px;color:var(--ink)}
.outcome h2 em{color:var(--green)}
.light-eye{color:var(--muted)}
.section-number.light{color:var(--muted)}
.outcome-copy>p{color:#b5c2b9;line-height:1.7;max-width:520px}
.button-light{margin-top:22px}
.outcome-list>div{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid #ffffff14}
.outcome-list>div>b{color:var(--green);font-size:10px}
.outcome-list span>*{display:block}
.outcome-list strong{font:700 18px "Manrope";color:var(--ink)}
.outcome-list small{color:var(--muted);margin-top:6px}

/* ---------- Process (bold cards) ---------- */
.process .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px 24px 30px;overflow:hidden;transition:.3s}
.step:hover{border-color:#c7d8bd;transform:translateY(-5px);box-shadow:0 26px 55px #14251c14}
.step-index{position:absolute;right:16px;top:6px;font:800 62px "Manrope";letter-spacing:-.04em;pointer-events:none;color:transparent;-webkit-text-stroke:1.5px rgba(142,210,63,.35);text-stroke:1.5px rgba(142,210,63,.35)}
.step-badge{position:relative;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--green-deep);color:var(--green-ink);border:1px solid #d8e8c8;margin-bottom:24px}
.step-badge svg{width:26px;height:26px}
.step-tag{position:relative;font:700 10px "Manrope";letter-spacing:.1em;color:var(--green-ink);display:block;margin-bottom:10px}
.step h3{position:relative;font-size:20px;margin:0 0 10px;color:var(--ink)}
.step p{position:relative;font-size:13.5px;color:var(--muted);line-height:1.62;margin:0}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-list details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;transition:.25s}
.faq-list details[open]{border-color:#c7d8bd;background:var(--panel-2)}
.faq-list summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:20px;color:var(--green-ink);flex-shrink:0;transition:transform .2s}
.faq-list details[open] summary::after{content:'–'}
.faq-list p{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- Contact (dark contrast section) ---------- */
.contact{--ink:var(--ink-on-dark);--muted:var(--muted-on-dark);--faint:var(--faint-on-dark);background:var(--dark-band);border-top:1px solid var(--dark-line);display:grid;grid-template-columns:1fr 460px;gap:90px;padding:110px max(28px,calc((100vw - 1184px)/2));align-items:center}
.contact h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.045em;line-height:1.08;margin:18px 0 22px;color:var(--ink)}
.contact h2 em{color:var(--green)}
.contact-copy>p{color:#adb7b2;line-height:1.7;max-width:560px}
.contact-info{display:flex;gap:24px;margin-top:38px;flex-wrap:wrap}
.contact-info a{display:flex;gap:11px;align-items:center}
.contact-info a>b{width:38px;height:38px;background:#182119;border:1px solid #24352b;border-radius:9px;display:grid;place-items:center;color:var(--green);font-size:12px}
.contact-info a>b svg{width:19px;height:19px}
.contact-info span>*{display:block}
.contact-info small{font-size:9px;color:var(--faint);margin-bottom:3px;text-transform:uppercase;letter-spacing:.08em}
.contact-info span{font-size:12.5px;color:var(--ink)}

.contact-form{background:linear-gradient(180deg,#101c15,#0d130f);border:1px solid #24352b;color:var(--ink);padding:30px;border-radius:20px;box-shadow:0 30px 70px #00000040}
.contact-form .field{display:block;font-size:11px;font-weight:700;margin-bottom:16px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);background:var(--field);border-radius:12px;padding:13px 15px;color:#12211a;margin-top:8px;font:14px "DM Sans";outline:none;transition:.2s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8b9890}
.contact-form textarea{resize:vertical;min-height:84px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--green-ink);box-shadow:0 0 0 3px #b9f5422e}
.form-button{width:100%;justify-content:center;margin-top:4px}
.contact-form>small{display:block;color:var(--faint);text-align:center;margin-top:14px;font-size:10.5px;line-height:1.5}

/* Custom select (light widget on dark card, matches inputs) */
.select{position:relative;margin-top:8px}
.select-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:13px 15px;color:#8b9890;font:14px "DM Sans";cursor:pointer;transition:.2s;text-align:left}
.select-trigger.filled{color:#12211a}
.select-trigger:hover{border-color:#c7d8bd}
.select.open .select-trigger{border-color:var(--green-ink);box-shadow:0 0 0 3px #b9f5422e}
.select-arrow{flex-shrink:0;color:var(--green-ink);transition:transform .25s}
.select.open .select-arrow{transform:rotate(180deg)}
.select-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#ffffff;border:1px solid var(--line);border-radius:12px;padding:6px;list-style:none;margin:0;z-index:30;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s;max-height:264px;overflow:auto;box-shadow:0 24px 50px #14251c26}
.select.open .select-menu{opacity:1;transform:none;pointer-events:auto}
.select-menu li{padding:11px 13px;border-radius:9px;font-size:13px;cursor:pointer;transition:.15s;color:#2c3830}
.select-menu li:hover,.select-menu li.active{background:var(--green-deep);color:var(--green-ink)}

/* ---------- Footer ---------- */
footer{max-width:var(--maxw);margin:auto;padding:55px 28px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;border-top:3px solid var(--green);padding-top:52px}
.footer-brand{align-self:start}
.footer-brand .brand-logo{height:92px}
footer>p{text-align:center;color:var(--muted);font-size:13px;margin:0;line-height:1.6}
footer>p strong{color:var(--ink)}
footer>div{display:flex;justify-content:flex-end;gap:18px;color:var(--faint);font-size:11px}
footer>div a:hover{color:var(--green-ink)}

/* ---------- WhatsApp float ---------- */
.whatsapp-float{position:fixed;right:24px;bottom:23px;z-index:60;background:#25d366;color:#fff;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 30px #12291b4a}
.whatsapp-float svg{width:28px;height:28px}
.whatsapp-float span{position:absolute;right:62px;background:#101a14;color:#eef2ec;border:1px solid #24352b;padding:8px 12px;border-radius:8px;font-size:10px;opacity:0;transform:translateX(6px);transition:.2s;white-space:nowrap}
.whatsapp-float:hover span{opacity:1;transform:none}

/* ---------- Lead modal (dark, matches contact) ---------- */
.lead-modal{position:fixed;inset:0;z-index:100;display:none}
.lead-modal.open{display:block}
.lead-modal-backdrop{position:absolute;inset:0;background:#05080699;backdrop-filter:blur(3px)}
.lead-modal-card{position:relative;z-index:1;max-width:440px;margin:6vh auto;background:linear-gradient(180deg,#101c15,#0c1510);border:1px solid #24352b;color:var(--ink-on-dark);border-radius:22px;padding:34px;box-shadow:0 40px 90px #000a;animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lead-modal-card .eyebrow{color:var(--green)}
.lead-modal-card h3{font-size:26px;letter-spacing:-.03em;margin:14px 0 10px}
.lead-modal-card h3 em{color:var(--green)}
.lead-modal-card>p{color:#b7c2bc;font-size:14px;line-height:1.6;margin:0 0 18px}
.lead-modal-close{position:absolute;top:16px;right:18px;background:0;border:0;color:#9aa8a1;font-size:24px;cursor:pointer;line-height:1}
.lead-modal-close:hover{color:var(--green)}
.lead-modal-list{background:#16211b;border:1px solid #24352b;border-radius:14px;padding:16px 18px;margin-bottom:20px}
.lead-modal-list strong{display:block;font-size:14px;margin-bottom:10px;color:var(--ink-on-dark)}
.lead-modal-list ul{margin:0;padding-left:18px;color:#c3ccc7;font-size:12.5px;line-height:1.8}
#lead-magnet-form input{width:100%;border:1px solid var(--line);background:var(--field);color:#12211a;border-radius:10px;padding:12px 14px;margin-bottom:12px;font:14px "DM Sans"}
#lead-magnet-form input::placeholder{color:#8b9890}
#lead-magnet-form input:focus{outline:none;border-color:var(--green-ink);box-shadow:0 0 0 3px #b9f5422e}
#lead-magnet-form .button{width:100%;justify-content:center}
.lead-modal-card>small{display:block;text-align:center;color:var(--faint-on-dark);margin-top:12px;font-size:11px}
.lead-modal-alt{display:block;text-align:center;margin-top:16px;font-size:12px;font-weight:700;color:var(--green);border-top:1px solid #24352b;padding-top:16px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .site-header nav,.site-header>.button{display:none}
  .menu-button{display:block}
  .menu-button span{display:block;width:24px;height:2px;background:var(--ink);margin:6px}
  .site-header.open nav{display:flex;position:absolute;top:75px;left:20px;right:20px;background:#ffffff;border:1px solid var(--line);padding:22px;border-radius:14px;flex-direction:column;box-shadow:0 20px 40px #14251c26}
  .site-header.open nav a{padding:11px 14px}
  .site-header.open nav a.active{background:var(--green-deep)}
  .nav-indicator{display:none}
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero-visual{max-width:540px;width:100%;margin:auto}
  .section-heading{grid-template-columns:1fr 1.5fr}
  .section-heading>p{grid-column:2}
  .outcome,.contact{grid-template-columns:1fr;gap:50px}
  .process .steps{grid-template-columns:1fr 1fr}
  .contact{padding-top:85px}
  .contact-form{max-width:600px;width:100%}
}
@media(max-width:600px){
  .hero{padding-bottom:56px}
  .hero h1{font-size:42px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:14px}
  .hero-visual{height:400px}
  .hero-photo{width:90%;left:5%;top:46px}
  .hero-photo img{height:260px}
  .section{padding:72px 20px}
  .section-heading,.section-heading.compact{display:block}
  .section-heading h2{margin:18px 0}
  .section-heading>p{margin-top:18px}
  .service-grid{grid-template-columns:1fr}
  .service-grid,.process .steps{grid-template-columns:1fr}
  .outcome,.contact{padding:72px 20px}
  .contact-info{flex-direction:column}
  .contact-form{padding:24px 20px}
  .tech-lead{font-size:14px}
  footer{grid-template-columns:1fr;gap:28px;text-align:center}
  footer>*{justify-self:center}
  footer>div{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track,.flow-pulse,.flow-node i,.msg,.msg.typing i,.web-buy,.web-toast,.cursor,.seo-climber{animation:none!important}
  .msg{opacity:1}
  .seo-climber{top:0}
}