/* ============================================================================
   Oxton Lab — Landing page pública. Escopo isolado (prefixo .lp).
   ============================================================================ */
:root{
  --lp-navy:#0A1124; --lp-navy2:#111a35; --lp-blue:#1E5EFF; --lp-blue-d:#1748cc;
  --lp-cyan:#38bdf8; --lp-ink:#0f172a; --lp-txt:#334155; --lp-muted:#64748b;
  --lp-line:#e6e9f0; --lp-soft:#f5f7fb; --lp-white:#fff;
  --lp-radius:16px;
}
*{box-sizing:border-box}
.lp{margin:0;font-family:'Inter',system-ui,Arial,sans-serif;color:var(--lp-ink);background:var(--lp-white);line-height:1.55;-webkit-font-smoothing:antialiased}
.lp img{max-width:100%;display:block}
.lp a{color:inherit;text-decoration:none}
.lp h1,.lp h2,.lp h3{margin:0;line-height:1.15;letter-spacing:-.02em}
.lp p{margin:0}
.lp-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 22px}

/* Botões — minimalistas (slim, peso 500, contornos finos) */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-weight:500;font-size:.9rem;
  padding:.56rem 1.05rem;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.lp-btn--lg{padding:.7rem 1.3rem;font-size:.95rem}
/* primário: sólido discreto */
.lp-btn--solid{background:var(--lp-blue);color:#fff}
.lp-btn--solid:hover{background:var(--lp-blue-d)}
/* secundário: contorno fino */
.lp-btn--line{border-color:var(--lp-line);color:var(--lp-ink);background:transparent}
.lp-btn--line:hover{border-color:var(--lp-navy);color:var(--lp-navy)}
/* texto puro */
.lp-btn--ghost{color:var(--lp-ink);background:transparent}
.lp-btn--ghost:hover{color:var(--lp-blue)}
/* setinha sutil nos CTAs principais */
.lp-btn--lg.lp-btn--solid::after,.lp-btn--lg.lp-btn--line::after{content:"→";font-weight:400;opacity:.8}
/* em fundos escuros (hero/cta) */
.lp-hero .lp-btn--line,.lp-cta .lp-btn--line{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.lp-hero .lp-btn--line:hover,.lp-cta .lp-btn--line:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.06)}
.lp-cta .lp-btn--solid{background:#fff;color:var(--lp-blue)}
.lp-cta .lp-btn--solid:hover{background:#eef3ff}

.lp-tag{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lp-muted);background:transparent;border:0;padding:0 0 0 1.3rem;position:relative;margin-bottom:1.1rem}
.lp-tag::before{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--lp-blue)}
.lp-tag--light{color:#9fb4d8}
.lp-tag--light::before{background:var(--lp-cyan)}

/* Header */
.lp-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--lp-line)}
.lp-head__in{display:flex;align-items:center;gap:1.2rem;height:62px}
.lp-logo{display:inline-flex;align-items:center;gap:.7rem;line-height:1;white-space:nowrap}
.lp-logo__mark{font-weight:800;letter-spacing:.05em;font-size:1.08rem;color:var(--lp-navy)}
.lp-logo__mark b{color:var(--lp-blue);font-weight:800}
.lp-logo__sub{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--lp-muted);
  padding-left:.7rem;border-left:1px solid var(--lp-line)}
.lp-nav{display:flex;gap:1.5rem;margin:0 auto;white-space:nowrap}
.lp-nav a{font-size:.875rem;font-weight:500;color:var(--lp-txt)}
.lp-nav a:hover{color:var(--lp-ink)}
.lp-head__cta{display:flex;gap:.35rem;align-items:center}
/* botões do header — minimalistas */
.lp-head__cta .lp-btn{padding:.5rem .9rem;font-size:.875rem;font-weight:500;border-radius:9px}
.lp-head__cta .lp-btn--ghost{color:var(--lp-txt)}
.lp-head__cta .lp-btn--ghost:hover{color:var(--lp-ink)}
.lp-head__cta .lp-btn--solid{background:transparent;color:var(--lp-navy);border:1px solid var(--lp-line)}
.lp-head__cta .lp-btn--solid:hover{border-color:var(--lp-navy);background:transparent;color:var(--lp-navy)}
.lp-burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.lp-burger span{width:22px;height:2px;background:var(--lp-navy);border-radius:2px}

/* Hero */
.lp-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(900px 480px at 82% -20%,rgba(56,189,248,.14),transparent 62%),
    linear-gradient(165deg,var(--lp-navy) 0%,var(--lp-navy2) 60%,#13203f 100%)}
.lp-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:30px 22px 34px}
.lp-hero h1{font-size:2.55rem;font-weight:700;letter-spacing:-.025em}
.lp-hero__copy p{color:#aebcd4;font-size:1.05rem;font-weight:400;margin-top:1.1rem;max-width:34em}
.lp-hero__btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}
.lp-stats{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12)}
.lp-stat{display:flex;flex-direction:column}
.lp-stat strong{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
.lp-stat span{font-size:.76rem;color:#8ea1c2;margin-top:2px}
.lp-hero__note{font-size:.72rem;color:#7e8fb0;margin-top:.7rem}

.lp-hero__art{position:relative;display:flex;justify-content:center;align-items:center}
/* Arte do ecossistema */
.lp-eco{width:100%;max-width:520px;height:auto;display:block}
/* Animação discreta do ecossistema */
.lp-eco *{transform-box:view-box}
.eco-rings{transform-origin:280px 235px;animation:eco-spin 90s linear infinite}
.eco-rings2{transform-origin:280px 235px;animation:eco-spin 60s linear infinite reverse}
.eco-glow{transform-origin:280px 235px;animation:eco-breathe 7s ease-in-out infinite}
.eco-ping{transform-origin:280px 235px;animation:eco-ping 3.4s ease-out infinite;opacity:0}
.eco-ping--2{animation-delay:1.7s}
.eco-dots circle{transform-origin:center;animation:eco-blink 3s ease-in-out infinite}
.eco-dots circle:nth-child(2){animation-delay:.9s}
.eco-dots circle:nth-child(3){animation-delay:1.7s}
/* destaque do Oxton Lab */
.eco-here{transform-origin:422px 392px;animation:eco-here 2.6s ease-in-out infinite}
/* marcador de localização flutuante */
.eco-badge{animation:eco-bob 3s ease-in-out infinite}
.eco-shadow{transform-origin:422px 363px;animation:eco-shadow 3s ease-in-out infinite}
.eco-pin-ping{transform-origin:380px 338px;animation:eco-ping 2.6s ease-out infinite;opacity:0}
@keyframes eco-spin{to{transform:rotate(360deg)}}
@keyframes eco-breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes eco-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes eco-blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes eco-here{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes eco-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes eco-shadow{0%,100%{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.66);opacity:.14}}
@media (prefers-reduced-motion:reduce){
  .eco-rings,.eco-rings2,.eco-glow,.eco-ping,.eco-dots circle,.eco-here,.eco-badge,.eco-shadow,.eco-pin-ping{animation:none}
  .eco-ping,.eco-pin-ping{opacity:0}
}

/* Figura de dashboard: print real ou ilustração SVG moderna */
.shot{margin:0;position:relative;background:#fff;overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot__ph{display:none;flex-direction:column;align-items:center;gap:6px;padding:18px 18px 22px;
  background:linear-gradient(150deg,#f7faff,#eef3ff)}
.shot--ph .shot__ph{display:flex}
.shot--ph img{display:none}
.illu{width:100%;height:auto;display:block}
.shot__name{font-weight:600;font-size:.85rem;color:var(--lp-navy);letter-spacing:.01em}

/* Seções */
.lp-sec{padding:84px 0}
.lp-sec--soft{background:var(--lp-soft)}
.lp-sec__head{text-align:center;max-width:640px;margin:0 auto 48px}
.lp-sec__head h2{font-size:1.85rem;font-weight:700;letter-spacing:-.02em}
.lp-sec__head p{color:var(--lp-muted);margin-top:.7rem;font-size:1.02rem;font-weight:400}

/* Fluxo */
.lp-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:f}
.lp-flow li{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:22px}
.lp-flow__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:#eef3ff;color:var(--lp-blue);font-weight:800;margin-bottom:12px}
.lp-flow h3{font-size:1rem}
.lp-flow p{color:var(--lp-muted);font-size:.86rem;margin-top:.4rem}

/* Grid de cards */
.lp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.lp-grid--3{grid-template-columns:repeat(3,1fr)}
.lp-card{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:22px}
.lp-card__ico,.lp-who__ico{width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--lp-blue),var(--lp-cyan));position:relative;
  display:flex;align-items:center;justify-content:center}
.lp-card__ico svg,.lp-who__ico svg{width:22px;height:22px;display:block}
/* fallback do quadrado só quando não há SVG dentro */
.lp-who__ico:empty::after{content:"";position:absolute;inset:12px;border:2px solid #fff;border-radius:6px;opacity:.9}
.lp-card h3{font-size:1rem}
.lp-card p{color:var(--lp-muted);font-size:.86rem;margin-top:.4rem}

/* Shots em destaque */
.lp-shots{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.lp-shots .shot{border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden}
.lp-shots__side{display:grid;gap:18px}
/* 3 ilustrações em linha única */
.lp-shots3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.lp-shots3 .shot{border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden}

/* Para quem é */
.lp-who{background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:22px;text-align:center}
.lp-who__ico{margin:0 auto 14px}
.lp-who h3{font-size:1rem}

/* Segurança */
.lp-security{color:#fff;background:radial-gradient(900px 460px at 88% 0%,rgba(56,189,248,.22),transparent 60%),linear-gradient(160deg,var(--lp-navy),#15275a)}
.lp-security__in{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.lp-security__copy h2{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}
.lp-security__copy p{color:#aebcd4;margin-top:1rem;font-size:1.02rem}
.lp-security__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-security__list li{position:relative;padding:.7rem .8rem .7rem 2.4rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;font-size:.9rem}
.lp-security__list li::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:8px;border-left:2px solid var(--lp-cyan);border-bottom:2px solid var(--lp-cyan);transform:translateY(-65%) rotate(-45deg)}

/* Oxton Stats */
.lp-stats2{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.lp-stats2__art .shot{border:1px solid var(--lp-line);border-radius:var(--lp-radius);overflow:hidden}
.lp-stats2 h2{font-size:1.9rem;font-weight:800;margin-top:.3rem}
.lp-check{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;gap:10px}
.lp-check li{position:relative;padding-left:1.9rem;color:var(--lp-txt)}
.lp-check li::before{content:"";position:absolute;left:2px;top:50%;width:13px;height:7px;border-left:2px solid var(--lp-blue);border-bottom:2px solid var(--lp-blue);transform:translateY(-70%) rotate(-45deg)}

/* Planos */
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.lp-plan{position:relative;background:#fff;border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:28px}
.lp-plan--hl{border-color:var(--lp-blue);border-width:1.5px}
.lp-plan__badge{position:absolute;top:-12px;left:24px;background:var(--lp-blue);color:#fff;font-size:.72rem;font-weight:600;padding:.25rem .7rem;border-radius:999px}
.lp-plan h3{font-size:1.25rem}
.lp-plan p{color:var(--lp-muted);font-size:.9rem;margin:.6rem 0 1.3rem}

/* CTA */
.lp-cta{color:#fff;background:radial-gradient(800px 400px at 50% 120%,rgba(56,189,248,.3),transparent 60%),linear-gradient(120deg,var(--lp-blue),#0b2a8a)}
.lp-cta__in{text-align:center;padding:72px 22px}
.lp-cta h2{font-size:2.1rem;font-weight:800;max-width:18em;margin:0 auto}
.lp-cta__btns{display:flex;gap:.9rem;justify-content:center;margin-top:1.8rem;flex-wrap:wrap}

/* Footer */
.lp-foot{background:var(--lp-navy);color:#aebbd6;padding:44px 0 26px}
.lp-foot__in{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.lp-logo--foot{color:#fff;font-size:1.1rem}
.lp-foot__brand p{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7e8fb0;margin-top:4px}
.lp-foot__links{display:flex;gap:1.3rem;flex-wrap:wrap}
.lp-foot__links a{font-size:.9rem;color:#c2cee6}
.lp-foot__links a:hover{color:#fff}
.lp-foot__copy{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:18px;font-size:.8rem;color:#7e8fb0}

/* Acessibilidade */
.lp a:focus-visible,.lp button:focus-visible{outline:2px solid var(--lp-cyan);outline-offset:2px;border-radius:8px}

/* Responsivo */
@media (max-width:980px){
  .lp-hero__in,.lp-security__in,.lp-stats2{grid-template-columns:1fr;gap:34px}
  .lp-hero h1{font-size:2.2rem}
  .lp-flow,.lp-grid{grid-template-columns:repeat(2,1fr)}
  .lp-grid--3,.lp-plans{grid-template-columns:1fr}
  .lp-shots{grid-template-columns:1fr}
  .lp-float--a{left:6px}.lp-float--b{right:6px}
}
@media (max-width:1040px){ .lp-logo__sub{display:none} .lp-nav{gap:1.1rem} }
@media (max-width:900px){
  .lp-nav,.lp-head__cta{display:none}
  .lp-burger{display:flex}
  .lp-head.is-open .lp-nav{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--lp-line);padding:8px 22px;gap:0;margin:0}
  .lp-head.is-open .lp-nav a{padding:.8rem 0;border-bottom:1px solid var(--lp-soft)}
  .lp-head.is-open .lp-head__cta{display:flex;position:absolute;top:calc(62px + 213px);left:0;right:0;background:#fff;padding:14px 22px;gap:.5rem}
  .lp-head.is-open .lp-head__cta .lp-btn{flex:1}
  .lp-logo__sub{display:none}
}
@media (max-width:520px){
  .lp-flow,.lp-grid{grid-template-columns:1fr}
  .lp-sec{padding:54px 0}
  .lp-hero h1{font-size:1.85rem}
  .lp-sec__head h2,.lp-security__copy h2,.lp-stats2 h2,.lp-cta h2{font-size:1.55rem}
  .lp-security__list{grid-template-columns:1fr}
}