/* rooGBot AI, light theme from the brand pack:
   navy text, cyan accents, sunrise orange highlights, yellow for tiny accents only.
   Light boxes with thin light borders. Cards are always straight (no tilt). */
:root{
  --bg:#f6f9ff;--card:#ffffff;--soft:#f1f6ff;--line:#dde6f4;--line2:#cfdcf0;
  --navy:#0b1633;--txt:#16213f;--mut:#4a587a;
  --cyan:#22d3ff;--cyan-ink:#0a6f9c;--blue:#2f7bff;
  --orange:#ff9a3c;--orange-ink:#a24d00;--yellow:#ffd23f;--ok:#0f7a52;
  --rounded:"Nunito","Varela Round","Quicksand",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px #0b16330a,0 8px 24px #0b16330d;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:
    radial-gradient(900px 520px at 0% 0%,#22d3ff1f,transparent 70%),
    radial-gradient(800px 520px at 100% 8%,#ff9a3c1a,transparent 70%),
    linear-gradient(180deg,#ffffff 0,var(--bg) 700px);
  background-color:var(--bg);
  color:var(--txt);font:17px/1.6 var(--sans);min-height:100vh;
}
a{color:var(--cyan-ink)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
img,svg{display:block}
img{max-width:100%;height:auto}
.pic{display:block;flex:none}
/* keeper fix: 44px tap target for a lone inline link without moving the text (negative margin keeps the line height) */
.tap{display:inline-flex;align-items:center;min-height:44px;margin:-8.4px 0;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
main:focus{outline:none}
h1,h2,h3{font-family:var(--rounded);font-weight:800;letter-spacing:-.4px;color:var(--navy)}

/* header: logo left, links spread evenly */
.site-header{position:sticky;top:0;z-index:20;background:#ffffffe6;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:24px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:none}
.brand img{border-radius:50%}
.wordmark{font:800 23px/1 var(--rounded);letter-spacing:-.3px;color:var(--navy);white-space:nowrap}
.wordmark b{font-weight:900;color:#118ce6}
.wordmark.small{font-size:19px}
nav{flex:1}
nav ul{list-style:none;display:flex;justify-content:space-evenly;margin:0;padding:0}
nav a{display:block;padding:8px 10px;color:var(--mut);text-decoration:none;font:600 16px var(--sans);border-radius:8px}
nav a:hover{color:var(--navy);background:var(--soft)}
@media (max-width:640px){
  .nav{flex-wrap:wrap;gap:0;padding:10px 20px 4px}
  nav{flex-basis:100%}
  nav a{padding:8px 6px;font-size:15px}
}

/* hero: text + one button on the left, picture on the right */
.hero{padding:28px 0 36px}
.hero-grid{display:grid;gap:28px;align-items:center}
.hero-art{order:2}
.frame{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:var(--shadow)}
.frame img{border-radius:14px;width:100%}
.eyebrow{font:800 17px var(--rounded);letter-spacing:.2px;color:var(--cyan-ink);margin:0 0 10px}
h1{font-size:clamp(34px,6vw,58px);line-height:1.08;margin:0 0 16px}
.hl{color:#118ce6;background:linear-gradient(transparent 82%,#ffd23f99 82%,#ffd23f99 94%,transparent 94%)}
.sub{color:var(--mut);font-size:clamp(18px,2vw,20px);max-width:560px;margin:0 0 24px}
@media (min-width:900px){
  .hero{padding:56px 0 64px}
  .hero-grid{grid-template-columns:1.05fr 1fr;gap:48px}
}

/* buttons: one main button per hero */
.btn{display:inline-block;background:linear-gradient(90deg,#22d3ff,#4aa3ff);color:#061433;font:800 17px var(--sans);padding:14px 26px;border-radius:12px;text-decoration:none;border:0;box-shadow:0 6px 18px #2f7bff33;transition:filter .15s}
.btn:hover{filter:brightness(1.06);color:#061433}
.btn.disabled{background:var(--soft);color:var(--mut);border:1px solid var(--line2);box-shadow:none;cursor:not-allowed}
.note{color:var(--mut);font-size:15px;margin:14px 0 0}

/* status labels */
.status{display:inline-block;font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.9px;border-radius:99px;padding:6px 10px;border:1px solid;vertical-align:middle}
.status.live{color:var(--ok);background:#e9fbf3;border-color:#bfead7}
.status.soon{color:var(--orange-ink);background:#fff4ea;border-color:#ffd5ae}
.status.bot{color:var(--cyan-ink);background:#eafaff;border-color:#bfeaf8}
.status.planned{color:var(--mut);background:#f3f5fa;border-color:var(--line2)}
.status.draft{color:#6b5300;background:#fff9e0;border-color:#ffe58a;font-size:11px;margin-left:6px;position:relative;top:-3px}
.hero .status{margin-bottom:12px}

/* sections */
.section{padding:48px 0}
.section.tight{padding:28px 0}
h2{font-size:clamp(28px,4vw,38px);margin:0 0 10px;line-height:1.15}
.section-sub{color:var(--mut);margin:0 0 26px;max-width:640px}
.small{color:var(--mut);font-size:15px}

/* product cards: light, thin border, straight */
.cards{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.card:hover,.card:focus-within{border-color:#8fdcf4;box-shadow:0 10px 30px #22d3ff22}
.card-img{border-bottom:1px solid var(--line);background:var(--soft)}
.card-img img{width:100%;aspect-ratio:16/10;object-fit:cover}
.art-vc{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;gap:22px;background:radial-gradient(260px 160px at 30% 40%,#22d3ff26,transparent 70%),radial-gradient(240px 160px at 80% 80%,#ff9a3c22,transparent 70%),var(--soft)}
.art-vc img{width:96px;height:96px;aspect-ratio:auto;border-radius:50%}
.art-vc svg{width:84px;height:84px;fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card-body .status{align-self:flex-start}
.card h3{margin:12px 0 6px;font-size:24px}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{margin:0 0 14px;color:var(--mut)}
.card .more{margin:auto 0 0;font-weight:700;color:var(--cyan-ink)}

/* features on product pages */
.fgrid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.fgrid{grid-template-columns:repeat(3,1fr)}}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;border-top:3px solid #9be6fa}
.fcard h3{margin:0 0 6px;font-size:20px}
.fcard p{margin:0;color:var(--mut)}
.fcard .flink{margin-top:10px;font-weight:700}

/* pricing */
.prices{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0 8px}
.price{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 24px;min-width:180px}
.price .amt{font:800 36px/1.1 var(--rounded);color:var(--navy);margin:0}
.price p{margin:4px 0 0;color:var(--mut)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 10px;padding:0}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:700;color:var(--navy)}

/* example scan mock (rooGBotVC) */
.mock{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--soft);border-bottom:1px solid var(--line)}
.mock-bar span{width:10px;height:10px;border-radius:50%;background:#d5deee}
.mock-bar em{margin-left:auto;font:700 12px var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:.8px;color:var(--orange-ink);background:#fff4ea;border:1px solid #ffd5ae;border-radius:99px;padding:3px 9px}
.mock-body{padding:22px}
.mock-title{display:flex;align-items:center;gap:10px;font:800 20px var(--rounded);color:var(--navy);margin:0 0 14px}
.frame .mock-title img{width:28px;height:28px;border-radius:50%}
.mock-list{list-style:none;margin:0;padding:0}
.mock-list li{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px solid var(--line);font-weight:700;color:var(--navy)}
.mock-list i{margin-left:auto;font-style:normal;font-weight:600;font-size:14px;color:var(--mut)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--cyan);flex:none}
.dot.warn{background:var(--orange)}
.dot.fix{background:var(--yellow)}

/* product page bits */
.crumbs{font-size:15px;color:var(--mut);margin:0 0 14px}
.crumbs a{color:var(--mut)}
.others{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.others li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.others a{font-weight:700;color:var(--navy)}

/* about */
.panel{background:radial-gradient(500px 240px at 100% 100%,#ff9a3c14,transparent 70%),linear-gradient(135deg,#22d3ff14,#ffffff 60%);background-color:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.about{display:grid;gap:22px;align-items:center}
.about img{border-radius:50%}
.about p{color:var(--mut);max-width:680px}
@media (min-width:760px){.about{grid-template-columns:auto 1fr;padding:36px 40px}}

/* privacy */
.doc{padding-top:44px;padding-bottom:24px}
.doc h1{font-size:clamp(32px,5vw,44px)}
.doc h2{font-size:22px;margin:28px 0 6px}
.doc p{color:var(--mut)}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#fff;margin-top:40px;padding:36px 0 20px}
.foot{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:760px){.foot{grid-template-columns:2fr 1fr 1fr}}
.foot-brand p{color:var(--mut);margin:10px 0 0}
.foot-h{font:700 13px var(--sans);text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin:0 0 8px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 6px}
.foot a{color:var(--navy)}
/* keeper fix: 44px tap targets for footer links on phones / touch screens */
@media (max-width:759px),(pointer:coarse){
  .foot li{margin:0}
  .foot a{display:inline-flex;align-items:center;min-height:44px}
  .foot-brand .brand{min-height:44px}
}
.legal{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--mut)}
.legal p{margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}