/* Rilbox — сторінки: головна (.rb-home), посадкова (.rb-landing), текстова (.rb-text). Потрібен rilbox-tokens.css. */

h1,h2,h3{text-wrap:balance}
.rb-h1{font:300 var(--rb-t-h1)/var(--rb-lh-tight) var(--rb-f-display);letter-spacing:var(--rb-track-head);margin:0}
.rb-h1 em,.rb-hero-title em{font-style:normal;color:var(--rb-accent-text)}
.rb-h2{font:300 var(--rb-t-h2)/1.05 var(--rb-f-display);letter-spacing:-.03em;margin:0}
.rb-h3{font:400 var(--rb-t-h3)/1.2 var(--rb-f-display);letter-spacing:-.01em;margin:0 0 6px}
.rb-lead{margin:0;color:var(--rb-mute);font-size:var(--rb-t-lead);line-height:1.55;max-width:36ch}
.rb-sec{padding-top:var(--rb-section)}

/* ---------- 3D-сцена ---------- */
.rb-stage{position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rb-stage:active{cursor:grabbing}
.rb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rb-stage .rb-hint{position:absolute;right:0;bottom:4px;font-size:12px;color:var(--rb-dim);display:flex;gap:6px;align-items:center;pointer-events:none}
.rb-stage .rb-hint svg{width:14px;height:14px}

/* ---------- Головна ---------- */
.rb-hero{padding-block:clamp(20px,4vw,44px) 0}
.rb-hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:32px;align-items:end}
.rb-hero-title{font:300 var(--rb-t-hero)/.98 var(--rb-f-display);letter-spacing:var(--rb-track-head);margin:0}
.rb-hero .rb-stage{height:clamp(320px,38vw,470px);margin-top:4px}

.rb-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,auto);border-top:1px solid var(--rb-line);border-bottom:1px solid var(--rb-line)}
.rb-ctl .rb-sl{padding:16px 20px 12px;border-right:1px solid var(--rb-line);min-width:0}
.rb-ctl .rb-param label{font-size:var(--rb-t-label);letter-spacing:var(--rb-track-label);text-transform:uppercase;color:var(--rb-mute)}
.rb-buy{display:flex;align-items:center;gap:20px;padding:12px 4px 12px 22px}
.rb-price{min-width:0}
.rb-price b{display:block;font:400 22px/1.1 var(--rb-f-mono);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-price b.is-pending{font:400 14px/1.3 var(--rb-f-body);color:var(--rb-mute);white-space:normal;max-width:18ch}
.rb-price small{display:block;font-size:11px;color:var(--rb-dim);letter-spacing:.04em;margin-top:4px}
.rb-opts{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding-block:14px;border-bottom:1px solid var(--rb-line)}
.rb-opts .rb-label{margin-right:8px}
.rb-info{display:flex;gap:8px 24px;flex-wrap:wrap;color:var(--rb-mute);font-size:var(--rb-t-small);padding-top:14px}
.rb-info b{color:var(--rb-fg);font-weight:400;font-family:var(--rb-f-mono);font-size:13px}

.rb-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:40px}
.rb-steps{list-style:none;margin:0;padding:0}
.rb-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);padding-block:22px;border-top:1px solid var(--rb-line)}
.rb-steps li:last-child{border-bottom:1px solid var(--rb-line)}
.rb-steps .n{font:400 13px/1 var(--rb-f-mono);color:var(--rb-accent-text);padding-top:5px}
.rb-steps p{margin:0;color:var(--rb-mute);max-width:42ch}
.rb-laser{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--rb-r-lg);background:var(--rb-surface);overflow:hidden}
.rb-laser canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rb-laser .rb-phase{position:absolute;left:18px;bottom:16px;font:500 11px/1 var(--rb-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rb-fg);display:flex;gap:8px;align-items:center}
.rb-laser .rb-phase i{width:7px;height:7px;border-radius:50%;background:var(--rb-accent)}

.rb-ready-hd{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap}
.rb-ready-hd p{margin:12px 0 0;color:var(--rb-mute);max-width:46ch}
.rb-filters{display:flex;gap:18px;font-size:var(--rb-t-small);color:var(--rb-mute);flex-wrap:wrap}
.rb-filters button{background:none;border:0;padding:0 0 4px;color:inherit;border-bottom:1.5px solid transparent}
.rb-filters button:hover{color:var(--rb-fg)}
.rb-filters button[aria-pressed="true"]{color:var(--rb-fg);border-bottom-color:var(--rb-accent)}

.rb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px;margin-top:36px}
.rb-card{min-width:0}
.rb-card .rb-pick{display:block;width:100%;background:none;border:0;padding:0;text-align:left}
.rb-card .rb-img{aspect-ratio:4/3;max-width:100%;border-radius:var(--rb-r-lg);background:var(--rb-surface);display:grid;place-items:center;overflow:hidden;transition:transform .35s var(--rb-ease)}
.rb-card .rb-pick:hover .rb-img{transform:translateY(-3px)}
.rb-card img{width:100%;height:100%;object-fit:contain}
.rb-card .rb-sz{display:block;font:400 16px/1.2 var(--rb-f-mono);margin-top:16px;font-variant-numeric:tabular-nums}
.rb-card[aria-current="true"] .rb-sz{color:var(--rb-accent-text)}
.rb-card .rb-ds{display:block;color:var(--rb-mute);font-size:var(--rb-t-small);margin-top:4px}
.rb-card .rb-link{margin-top:12px}

.rb-why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:40px}
.rb-why p{margin:0;color:var(--rb-mute);font-size:15px}
.rb-why .rb-h3{font-size:18px}

/* ---------- Посадкова сторінка ---------- */
.rb-landing .rb-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(24px,5vw,56px) 0}
.rb-crumbs{font-size:13px;color:var(--rb-dim);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.rb-crumbs a{text-decoration:none} .rb-crumbs a:hover{color:var(--rb-fg)}
.rb-landing .rb-lead{margin-top:20px}
.rb-landing .rb-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.rb-landing .rb-stage{height:clamp(300px,36vw,460px);border-radius:var(--rb-r-lg);background:var(--rb-surface)}
.rb-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.rb-blocks p{margin:0;color:var(--rb-mute)}
.rb-blocks .n{font:400 13px/1 var(--rb-f-mono);color:var(--rb-accent-text);display:block;margin-bottom:14px}
.rb-faq{margin-top:32px;border-top:1px solid var(--rb-line);max-width:860px}
.rb-faq details{border-bottom:1px solid var(--rb-line)}
.rb-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px;font:400 19px/1.3 var(--rb-f-display)}
.rb-faq summary::-webkit-details-marker{display:none}
.rb-faq summary i{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--rb-line-strong);position:relative}
.rb-faq summary i::before,.rb-faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--rb-fg);transform:translate(-50%,-50%);transition:transform var(--rb-dur)}
.rb-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.rb-faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.rb-faq details p{margin:0 0 22px;color:var(--rb-mute);max-width:64ch}
.rb-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:36px;border-top:1px solid var(--rb-line);border-bottom:1px solid var(--rb-line);margin-top:var(--rb-section)}
.rb-cta .rb-h2{font-size:clamp(26px,3vw,38px)}

/* ---------- Текстова сторінка ---------- */
.rb-text .rb-doc{max-width:var(--rb-maxw-text);padding-block:clamp(24px,5vw,56px) 0}
.rb-text .rb-meta{color:var(--rb-dim);font-size:13px;margin-top:16px}
.rb-prose{margin-top:40px;font-size:17px;line-height:1.65}
.rb-prose h2{font:300 clamp(26px,3vw,34px)/1.15 var(--rb-f-display);letter-spacing:-.02em;margin:56px 0 16px}
.rb-prose h3{font:400 20px/1.3 var(--rb-f-display);margin:32px 0 10px}
.rb-prose p{margin:0 0 16px}
.rb-prose ul,.rb-prose ol{margin:0 0 20px;padding-left:22px}
.rb-prose li{margin-bottom:8px}
.rb-prose li::marker{color:var(--rb-accent-text)}
.rb-prose a{color:var(--rb-fg);text-decoration-color:var(--rb-accent);text-underline-offset:3px}
.rb-prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--rb-accent);color:var(--rb-mute)}
.rb-table{overflow-x:auto;margin:8px 0 24px}
.rb-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.rb-table th{font:500 var(--rb-t-label)/1.3 var(--rb-f-body);letter-spacing:var(--rb-track-label);text-transform:uppercase;color:var(--rb-mute);text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rb-line-strong)}
.rb-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rb-line);vertical-align:top}
.rb-table td.rb-num{white-space:nowrap}
.rb-toc{margin-top:32px;padding:20px 24px;border-radius:var(--rb-r-md);background:var(--rb-surface);font-size:15px}
.rb-toc ol{margin:8px 0 0;padding-left:20px}
.rb-toc a{text-decoration:none} .rb-toc a:hover{color:var(--rb-accent-text)}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .rb-hero-top{grid-template-columns:1fr;gap:16px}
  .rb-ctl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rb-ctl .rb-sl{padding:14px 12px 10px}
  .rb-ctl .rb-sl:nth-child(3){border-right:0}
  .rb-ctl .rb-param{flex-direction:column;align-items:flex-start;gap:6px}
  .rb-ctl .rb-param output{font-size:19px}
  .rb-buy{grid-column:1/-1;border-top:1px solid var(--rb-line);justify-content:space-between;padding:14px 0}
  .rb-how{grid-template-columns:1fr}
  .rb-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .rb-why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-landing .rb-intro{grid-template-columns:1fr}
  .rb-blocks{grid-template-columns:1fr;gap:28px}
}
@media (max-width:420px){
  .rb-ctl .rb-param small{display:none}
  .rb-why{grid-template-columns:1fr}
  .rb-opts{gap:12px 18px}
  .rb-card .rb-sz{font-size:14px}
}