/* Rayz Player — site institucional */
:root{
  --bg:#080D17; --bg2:#0B1220; --card:#101528; --card2:#1A2136; --line:#262E44;
  --green:#88D818; --green-d:#5fa30a; --cyan:#2AC0E9; --gold:#F5D91F;
  --txt:#F2F5F7; --dim:#9AA4B0; --faint:#5B6472; --bad:#FF5D5D;
  --maxw:1080px;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{ color:var(--green); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100% }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px }
.sec{ padding:64px 0 }
.sec.tight{ padding:40px 0 }
h1,h2,h3{ line-height:1.2; letter-spacing:-.01em }
h1{ font-size:clamp(30px,5vw,46px); font-weight:800 }
h2{ font-size:clamp(24px,3.4vw,32px); font-weight:800; margin-bottom:8px }
h3{ font-size:19px; font-weight:700 }
p{ color:#D7DCE2 }
.lead{ color:var(--dim); font-size:clamp(16px,2vw,19px) }
.center{ text-align:center }
.muted{ color:var(--dim) }

/* nav: ver /nav.css */
.brand{ font-weight:800; font-size:20px; white-space:nowrap }
.brand b{ color:var(--green) }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--green); color:#06110C; font-weight:800; font-size:15px;
  padding:14px 28px; border-radius:999px; border:0; cursor:pointer;
}
.btn:hover{ text-decoration:none; background:#96e625 }
.btn.ghost{ background:transparent; color:var(--txt); border:1px solid var(--line) }
.btn.ghost:hover{ background:var(--card2) }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap }
.center .btn-row{ justify-content:center }

/* ---------- hero ---------- */
.hero{
  padding:72px 0 40px;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(136,216,24,.10), transparent 55%),
    radial-gradient(90% 60% at 100% 20%, rgba(42,192,233,.08), transparent 55%);
}
.hero h1 span{ color:var(--green) }
.hero .lead{ margin:16px 0 26px; max-width:620px }

/* video / mockup box */
.video-box{
  position:relative; width:100%; aspect-ratio:16/9; margin-top:40px;
  background:linear-gradient(135deg,#0d1424,#161d31);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.video-box iframe,.video-box video{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-box video{ object-fit:cover; background:#0d1424 }
.vid-langs{ position:absolute; top:12px; right:12px; z-index:3; display:flex; gap:6px }
.vid-lang{ font:600 12px/1 -apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#cfe8b0;
  background:rgba(8,13,23,.66); border:1px solid rgba(136,216,24,.4); border-radius:999px;
  padding:6px 12px; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .15s,border-color .15s,color .15s }
.vid-lang:hover{ border-color:var(--green) }
.vid-lang.on{ background:var(--green); color:#06110c; border-color:var(--green) }
.video-ph{ text-align:center; color:var(--faint) }
.video-ph .play{
  width:74px; height:74px; border-radius:50%; margin:0 auto 12px;
  background:rgba(136,216,24,.15); border:2px solid var(--green);
  display:flex; align-items:center; justify-content:center;
}
.video-ph .play::after{ content:""; border-left:20px solid var(--green); border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px }

/* ---------- cards / grid ---------- */
.grid{ display:grid; gap:18px }
.grid.c3{ grid-template-columns:repeat(3,1fr) }
.grid.c4{ grid-template-columns:repeat(4,1fr) }
.grid.c2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:860px){ .grid.c3,.grid.c4{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr } }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;
}
.card .ic{ font-size:26px; margin-bottom:10px }
.card h3{ margin-bottom:4px }
.card p{ color:var(--dim); font-size:14px }

/* steps */
.steps{ counter-reset:s; display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
@media (max-width:860px){ .steps{ grid-template-columns:1fr } }
.step{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; position:relative }
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:-14px; left:22px; width:30px; height:30px; border-radius:50%;
  background:var(--green); color:#06110C; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.step h3{ margin:6px 0 4px } .step p{ color:var(--dim); font-size:14px }

/* price / reseller strip */
.strip{
  background:linear-gradient(135deg,rgba(136,216,24,.08),rgba(42,192,233,.06));
  border:1px solid var(--line); border-radius:18px; padding:32px; text-align:center;
}
.price{ font-size:40px; font-weight:800; color:var(--green) }
.price small{ font-size:16px; color:var(--dim); font-weight:600 }

/* ---------- forms ---------- */
.form{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:520px }
.form label{ display:block; font-size:13px; color:var(--dim); margin:14px 0 6px }
.form input,.form select,.form textarea{
  width:100%; background:var(--card2); border:1px solid var(--line); color:var(--txt);
  font-size:16px; padding:12px 14px; border-radius:10px; outline:none; font-family:inherit;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--green) }
.form .btn{ width:100%; margin-top:18px }
.form-msg{ font-size:14px; margin-top:12px }
.form-msg.ok{ color:var(--green) } .form-msg.err{ color:var(--bad) }
.hidden{ display:none }

/* ---------- news ---------- */
.news{ display:grid; gap:14px; max-width:760px }
.news .item{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px }
.news .item .date{ color:var(--faint); font-size:12px; text-transform:uppercase; letter-spacing:1px }
.news .item h3{ margin:4px 0 6px }
.news .item p{ color:var(--dim); font-size:14px }
.tag{ display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; background:rgba(136,216,24,.15); color:var(--green); margin-left:8px }

/* ---------- long text (termos/privacidade) ---------- */
.prose{ max-width:800px }
.prose h2{ color:var(--green); font-size:22px; margin:34px 0 8px }
.prose p,.prose li{ color:#D7DCE2; font-size:17px; margin:10px 0 }
.prose ul{ padding-left:22px }
.prose .upd{ color:var(--faint); font-size:14px; margin-bottom:20px }
.prose table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:15px }
.prose th,.prose td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top }
.prose th{ background:var(--card) }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); background:var(--bg2); padding:40px 0 30px; margin-top:40px }
.foot .cols{ display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between }
.foot .brand{ font-size:18px }
.foot h4{ font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--faint); margin-bottom:10px }
.foot a{ display:block; color:var(--dim); font-size:14px; padding:3px 0 }
.foot a:hover{ color:var(--txt); text-decoration:none }
.foot .legal{ margin-top:28px; color:var(--faint); font-size:12px; line-height:1.7 }