/* Riggler website: landing, sign-in and plugin-link pages. The dashboard has its own sheet. */
:root{--bg:#080e0b;--panel:#0f1914;--panel2:#15221c;--line:#2c2f2e;--text:#f7faf8;--muted:#9a9c9b;--accent:#2ec278;--accent2:#348a5f;--good:#75e9c0;--pink:#9aa5a0;--red:#ff6e86;--amber:#ffc56b}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(70% 60% at 60% -10%,#2a513e 0,#0b110e 55%) fixed,var(--bg);color:var(--text);font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* top navigation */
.topnav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:#0b120fd9;border-bottom:1px solid #1a2b23}
.topnav .wrap{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.02em;text-decoration:none}
.logo{width:28px;height:28px;border-radius:9px;background:conic-gradient(from 210deg,var(--accent),#439c70,var(--pink),var(--accent));box-shadow:0 0 25px #2ec27866;position:relative;flex:none}
.logo:after{content:"";position:absolute;inset:7px;border:2px solid #fff;border-radius:5px;opacity:.85}
.topnav nav{display:flex;gap:20px;margin-left:10px}
.topnav nav a{color:#b6b8b7;text-decoration:none;font-size:14px}
.topnav nav a:hover{color:#fff}
.spacer{flex:1}
.nav-actions{display:flex;gap:10px;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:10px 16px;font-weight:650;font-size:14px;line-height:1;text-decoration:none;border:1px solid #334e40;background:#15221c;color:#e5ece8;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#31cf80}
.btn.big{padding:14px 22px;font-size:15px;border-radius:11px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* hero */
.hero{padding:84px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;border:1px solid #334e40;background:#121f18;border-radius:99px;padding:5px 12px;color:#c7d6ce;font-size:12px;letter-spacing:.04em}
.eyebrow b{color:var(--good);font-weight:700}
.hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.04;letter-spacing:-.035em;margin:18px 0 16px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#c5d5cd,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{font-size:18px;color:#c0c2c1;max-width:560px;margin:0 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:13px;color:var(--muted)}

/* animated R15 stage */
.stage{position:relative;aspect-ratio:1/1;border-radius:22px;border:1px solid #293f34;background:radial-gradient(ellipse at 50% 38%,#204231 0,#101d16 55%,#0a100d 100%);overflow:hidden;box-shadow:0 30px 80px #0009}
.stage:before{content:"";position:absolute;left:-20%;right:-20%;bottom:-30%;height:60%;background:linear-gradient(30deg,transparent 49.4%,#406b56 50%,transparent 50.6%),linear-gradient(150deg,transparent 49.4%,#406b56 50%,transparent 50.6%);background-size:64px 40px;transform:perspective(300px) rotateX(55deg);opacity:.35}
.rig{position:absolute;left:50%;top:18%;width:150px;height:300px;transform:translateX(-50%);animation:bob 1.1s ease-in-out infinite}
.rig div{position:absolute;border-radius:6px;box-shadow:inset 0 3px 0 #ffffff26,inset 0 -4px 0 #0003}
.rig .head{left:50px;top:0;width:50px;height:50px;background:#f2c94c;border-radius:12px}
.rig .head:after{content:"";position:absolute;left:12px;right:12px;top:30px;height:4px;border-radius:3px;background:#17231d}
.rig .torso{left:30px;top:54px;width:90px;height:92px;background:#d52c43}
.rig .arm{top:56px;width:38px;height:96px;background:#3d7bf2;transform-origin:50% 8px}
.rig .arm.l{left:-10px;animation:swingA 1.1s ease-in-out infinite}
.rig .arm.r{right:-10px;background:#f2703d;animation:swingB 1.1s ease-in-out infinite}
.rig .leg{top:148px;width:42px;height:112px;background:#3d7bf2;transform-origin:50% 6px}
.rig .leg.l{left:32px;animation:swingB 1.1s ease-in-out infinite}
.rig .leg.r{right:32px;background:#f2703d;animation:swingA 1.1s ease-in-out infinite}
.shadow{position:absolute;left:50%;bottom:16%;width:150px;height:22px;margin-left:-75px;border-radius:50%;background:#000;opacity:.45;filter:blur(6px);animation:shadow 1.1s ease-in-out infinite}
@keyframes swingA{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes swingB{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes bob{0%,50%,100%{translate:0 0}25%,75%{translate:0 -6px}}
@keyframes shadow{0%,50%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.9)}}
@media (prefers-reduced-motion:reduce){.rig,.rig div,.shadow{animation:none!important}}
.stage-chip{position:absolute;border:1px solid #334e40;background:#111d17e6;border-radius:10px;padding:8px 11px;font-size:12px;color:#ccdad3}
.stage-chip b{color:var(--good)}
.stage-chip.a{left:18px;top:18px}
.stage-chip.b{right:18px;bottom:18px}
.stage-chip.c{left:18px;bottom:18px}

/* sections */
section.block{padding:64px 0}
.block h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.025em;margin:0 0 10px}
.block .intro{color:#b6b8b7;max-width:640px;margin:0 0 30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{border:1px solid #263b30;background:linear-gradient(160deg,#13201a,#0f1814);border-radius:14px;padding:20px}
.card h3{margin:10px 0 6px;font-size:17px}
.card p{margin:0;color:#b1b3b2;font-size:14px}
.icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#1c3629;color:var(--accent);font-size:18px;border:1px solid #334e40}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.step{position:relative;border:1px solid #263b30;border-radius:14px;padding:20px 20px 20px 62px;background:#101914}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800}
.step b{display:block;margin-bottom:4px}
.step span{color:#b1b3b2;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.code{font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;background:#0b1410;border:1px solid #263b30;border-radius:10px;padding:14px 16px;color:#d6e1dc;overflow-x:auto;white-space:pre}
ol.install{margin:0;padding-left:20px;color:#c5c8c6}
ol.install li{margin:0 0 10px}
.examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.example{border:1px solid #263b30;border-radius:12px;padding:14px;background:#101c16;text-decoration:none;display:block}
.example:hover{border-color:var(--accent)}
.example small{display:inline-block;color:var(--good);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.example b{display:block;margin:4px 0 2px}
.example span{color:#a0a2a1;font-size:13px}
.faq details{border:1px solid #263b30;border-radius:12px;background:#101914;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:650}
.faq p{color:#b6b8b7;margin:10px 0 0}
footer.site{border-top:1px solid #1a2b23;padding:30px 0 40px;color:#838584;font-size:13px}
footer.site .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* forms: sign-in and plugin link */
.auth-wrap{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:40px 18px}
.panel{border:1px solid #293f34;background:linear-gradient(165deg,#14231c,#0d1712);border-radius:18px;box-shadow:0 30px 80px #0008}
.auth-card{width:min(430px,100%);padding:30px}
.auth-card h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.auth-card>p{margin:0 0 22px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13px;color:#c0c2c1;margin-bottom:6px}
.field input{width:100%;background:#0c1510;border:1px solid #2d4539;border-radius:10px;padding:12px 13px;color:var(--text);font:inherit;outline:0}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2ec27833}
.code-input{font:600 24px/1 ui-monospace,Consolas,monospace!important;letter-spacing:.18em;text-align:center;text-transform:uppercase}
.error{color:var(--red);min-height:20px;margin:4px 0 10px;font-size:14px}
.auth-card .btn{width:100%}
.switch{margin:16px 0 0;text-align:center}
.switch a{color:#d4e0da}
.studio-badge{display:inline-flex;gap:8px;align-items:center;border-radius:99px;padding:5px 11px;background:#1a2b23;border:1px solid #334e40;color:#ccdad3;font-size:12px;margin-bottom:14px}
.studio-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--good)}
.done{text-align:center;padding:8px 0}
.done-mark{width:58px;height:58px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;background:#173a31;color:var(--good);font-size:30px;border:1px solid #2f6b5a}
.who{margin-top:18px;padding-top:14px;border-top:1px solid #23342c;font-size:13px;color:var(--muted);text-align:center}
.who a{color:#d4e0da}

@media (max-width:860px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .topnav nav{display:none}
  .hero{padding-top:48px}
}

/* ------------------------------------------------------------------ sign in with Google */
.or{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:11.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#263b30}
.btn.google{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  box-sizing:border-box;background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;
  padding:10px 14px;border-radius:9px;text-decoration:none}
.btn.google:hover{background:#f5f6f7;border-color:#c9ccd1}

/* An element told to hide must hide: a class that sets display otherwise beats the plain
   [hidden] attribute, which is how a hidden field ends up on screen anyway. */
[hidden]{display:none !important}

/* The hero preview: the real rig on a canvas, with the cut-out rig left underneath for a
   browser that cannot run WebGL. Once the canvas is live the cut-out steps aside. */
.stage #heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.stage.live .rig,.stage.live .shadow{opacity:0;transition:opacity .5s}
.stage.no-preview #heroCanvas{display:none}
.stage .stage-chip{z-index:3}
.btn.google{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#1f1f1f;
  border:1px solid #dadce0;font-weight:600;text-decoration:none}
.btn.google:hover{background:#f5f6f7;border-color:#c9ccd1}

/* The hero plays the same clip on both rigs. The captions only appear once the R6 fold has
   loaded, because the stage falls back to R15 alone if it cannot. */
.stage .rig-tag{position:absolute;bottom:58px;z-index:3;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:#cfe0d8;background:#0b1610cc;border:1px solid #2f4c3e;
  border-radius:6px;padding:3px 9px;opacity:0;transition:opacity .4s}
.stage.two-rigs .rig-tag{opacity:1}
.stage .rig-tag.left{left:24%}
.stage .rig-tag.right{right:24%}