/* quvanta.tech — one stylesheet for every page.
   Palette: black, white and the brand green; the green glow of the logo's "tech" rule
   is the only accent. Type: the italic wordmark echoes in Exo 2 headings. */
:root{
  --bg:#0A0B0D;          /* black */
  --sf:#111214;          /* panel */
  --sf2:#17191D;         /* raised panel / table head */
  --tx:#ECEDEF;          /* white — headings, primary text */
  --tb:#ABAFB8;          /* body text */
  --tm:#737781;          /* secondary text */
  --ac:#00C853;          /* green — links, primary action, the horizon rule */
  --ach:#00E676;
  --bd:rgba(255,255,255,.09);
  --hd:'Exo 2',system-ui,sans-serif;
  --sa:'IBM Plex Sans',system-ui,sans-serif;
  --r:10px;
  --w:1120px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tb);font-family:var(--sa);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ac);text-decoration:none}
a:hover{color:var(--ach)}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:4px}
b,strong{color:var(--tx);font-weight:600}
.w{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ── Type ───────────────────────────────────────────────────────────── */
h1,h2{font-family:var(--hd);font-style:italic;color:var(--tx);letter-spacing:-.01em}
h1{font-weight:700;font-size:clamp(34px,5.4vw,60px);line-height:1.06;max-width:21ch}
h2{font-weight:600;font-size:clamp(25px,3.2vw,36px);line-height:1.15;margin-bottom:16px;max-width:24ch}
h3,h4{font-family:var(--sa);color:var(--tx);font-weight:600;font-size:18px;line-height:1.35;margin-bottom:8px}
p+p{margin-top:12px}
.lead{font-size:19px;color:var(--tb);max-width:62ch;margin-bottom:40px}
.micro{font-size:14px;color:var(--tm);margin-top:16px}

/* ── Header ─────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.site-head .in{max-width:var(--w);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:28px}
.logo{flex:none;display:block;line-height:0}
.logo img{height:30px;width:auto}
.site-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.site-nav>a{color:var(--tb);font-size:15px}
.site-nav>a:hover,.site-nav>a[aria-current="page"]{color:var(--tx)}
/* "Наші останні розробки" dropdown: <details> so it opens on tap without JS */
.dd{position:relative}
.dd summary{list-style:none;cursor:pointer;color:var(--tb);font-size:15px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.dd .sec summary::-webkit-details-marker{display:none}
.dd summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.dd[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.dd summary:hover,.dd[open] summary{color:var(--tx)}
.dd-menu{position:absolute;top:calc(100% + 14px);left:-16px;z-index:60;width:320px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.dd-menu a{display:block;padding:10px 12px;border-radius:7px;color:var(--tb)}
.dd-menu a:hover,.dd-menu a[aria-current="page"]{background:var(--sf2);color:var(--tb)}
.dd-menu b{display:block;color:var(--tx);font-size:15px;font-weight:600}
.dd-menu span{display:block;font-size:13.5px;color:var(--tm);line-height:1.4;margin-top:2px}
.ls{display:flex;gap:2px;border:1px solid var(--bd);border-radius:7px;padding:2px}
.lb{background:none;border:0;color:var(--tm);font:500 12px/1 var(--sa);padding:6px 9px;border-radius:5px;cursor:pointer}
.lb.on{background:var(--sf2);color:var(--tx)}
@media(max-width:720px){
  .site-head .in{height:auto;flex-wrap:wrap;padding:12px 16px;gap:10px 18px}
  .logo img{height:24px}
  .site-nav{order:3;flex-basis:100%;margin-left:0;gap:8px 16px;flex-wrap:wrap}
  .site-nav>a,.dd summary{font-size:14px;white-space:nowrap}
  .dd{position:static}
  .dd-menu{left:16px;right:16px;width:auto;top:auto;margin-top:10px}
  .ls{margin-left:auto}
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:8px;font:600 16px/1 var(--sa);background:var(--ac);color:#04140A;border:1px solid var(--ac)}
.btn:hover{background:var(--ach);border-color:var(--ach);color:#04140A}
.btn.ghost{background:transparent;color:var(--tx);border-color:var(--bd)}
.btn.ghost:hover{border-color:var(--ac);color:var(--tx)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ── Hero: the horizon rule from the logo is the one memorable element ─ */
.hero{padding:96px 0 84px}
.hero .sub{font-size:20px;line-height:1.55;color:var(--tb);max-width:56ch;margin-top:26px}
.horizon{height:2px;margin:40px 0 0;max-width:620px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,var(--ac) 18%,#B9F6CA 50%,var(--ac) 82%,transparent 100%);
  box-shadow:0 0 18px 1px rgba(0,200,83,.45);transform-origin:left center;animation:horizon 1.1s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes horizon{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.horizon{animation:none}html{scroll-behavior:auto}}
@media(max-width:600px){.hero{padding:56px 0 56px}.hero .sub{font-size:18px}}

/* ── Sections ───────────────────────────────────────────────────────── */
.sec{padding:84px 0;border-top:1px solid var(--bd)}
.sec.tint{background:var(--sf)}
@media(max-width:600px){.sec{padding:56px 0}}

/* feature / service list: heading column + text column, no card chrome */
.rows{display:grid;gap:0;border-top:1px solid var(--bd)}
.rows .row{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:12px 40px;padding:26px 0;border-bottom:1px solid var(--bd)}
.rows .row h3{margin:0}
.rows .row p{margin:0;max-width:62ch}
@media(max-width:720px){.rows .row{grid-template-columns:1fr}}

/* tiles — used where items are parallel and short */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tile{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:24px}
.tile p{font-size:16px}
a.tile{display:block;color:inherit}
a.tile:hover{border-color:rgba(0,200,83,.5)}
a.tile .go{display:inline-block;margin-top:14px;color:var(--ac);font-weight:500}

/* product cards on the home page */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.product{display:block;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:28px;color:inherit}
.product:hover{border-color:rgba(0,200,83,.5);color:inherit}
.product .pname{font-family:var(--hd);font-style:italic;font-weight:700;font-size:26px;color:var(--tx);margin-bottom:6px}
.product .status{display:inline-block;font-size:13px;color:var(--tm);border:1px solid var(--bd);border-radius:20px;padding:2px 10px;margin-bottom:14px}
.product .go{display:inline-block;margin-top:16px;color:var(--ac);font-weight:500}

/* sequences: real order, so numbers are information */
ol.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
ol.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--bd);color:var(--tb)}
ol.steps li::before{content:counter(s);display:block;font-family:var(--hd);font-style:italic;font-weight:700;font-size:22px;color:var(--ac);margin-bottom:8px}
ol.steps li b{display:block;margin-bottom:4px}

/* control / assurance blocks (QAgent, QCRM) */
.assure,.ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.assure .a,.ctrl .c{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:24px}

/* pricing table */
.price-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:16px}
.price-table th,.price-table td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--bd)}
.price-table thead th{font-weight:500;font-size:14px;color:var(--tm);background:var(--sf2)}
.price-table tbody th{font-family:var(--hd);font-style:italic;font-weight:700;font-size:20px;color:var(--tx)}
.price-table td.price{color:var(--tx);font-weight:600;white-space:nowrap}
.price-note{font-size:15px;color:var(--tm);margin-top:18px;max-width:72ch}
@media(max-width:560px){.price-table th,.price-table td{padding:12px 10px}.price-table tbody th{font-size:17px}}

/* FAQ */
.sec details{border-bottom:1px solid var(--bd);padding:18px 0}
.sec details:first-of-type{border-top:1px solid var(--bd)}
.sec summary{cursor:pointer;color:var(--tx);font-weight:500;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
.sec summary::after{content:"+";color:var(--ac);font-size:22px;line-height:1}
.sec details[open] summary::after{content:"−"}
.sec details p{margin-top:10px;max-width:68ch}

/* call-to-action band */
.cta-band{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:44px 40px}
.cta-band p{max-width:58ch;margin-bottom:24px}
@media(max-width:600px){.cta-band{padding:28px 22px}}

/* tech list on the home page */
.tech{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tech span{font-size:14px;color:var(--tb);border:1px solid var(--bd);border-radius:6px;padding:6px 12px}

/* contact block on the home page */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:40px 64px;align-items:start}
.co-rows{border-top:1px solid var(--bd)}
.co-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--bd);font-size:15px}
.co-label{color:var(--tm)}
.co-val{color:var(--tx);text-align:right}
@media(max-width:800px){.contact{grid-template-columns:1fr}}

/* ── Documents (legal, contacts, archive) ───────────────────────────── */
.doc{max-width:760px;margin:0 auto;padding:64px 24px 80px}
.doc h1{font-size:clamp(30px,4.4vw,44px);max-width:none;margin-bottom:10px}
.doc .meta{color:var(--tm);font-size:14px;margin-bottom:32px}
.doc h2{font-size:22px;max-width:none;margin:40px 0 12px}
.doc p,.doc li{font-size:16.5px;color:var(--tb)}
.doc ul,.doc ol{padding-left:22px;margin-top:8px}
.doc li+li{margin-top:6px}
.doc .toc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:18px 22px 18px 40px;margin-bottom:8px}
.doc .toc li{font-size:15px}
.doc .card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px;margin-top:14px}
.doc .card dt{color:var(--tm);font-size:13px;margin-top:12px}
.doc .card dt:first-child{margin-top:0}
.doc .card dd{color:var(--tx);font-size:16px}
.pay{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pay svg{height:28px;width:auto;background:#fff;border-radius:4px;padding:3px 6px}
@media(max-width:600px){.doc{padding:40px 16px 56px}}

/* ── Guide (docs) ───────────────────────────────────────────────────── */
.wrap{max-width:var(--w);margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px}
aside{position:sticky;top:92px;align-self:start}
aside .side-t{font-family:var(--hd);font-style:italic;font-weight:600;color:var(--tx);font-size:16px;margin-bottom:12px}
aside a{display:block;color:var(--tb);font-size:15px;padding:5px 0 5px 12px;border-left:2px solid var(--bd)}
aside a:hover,aside a.active{color:var(--tx);border-left-color:var(--ac)}
.wrap main{max-width:760px}
.wrap main h1{font-size:clamp(30px,4.4vw,44px);max-width:none;margin-bottom:12px}
.wrap section{padding-top:36px;margin-top:36px;border-top:1px solid var(--bd)}
.wrap section h2{font-size:24px;max-width:none}
.wrap section h3{margin-top:22px}
.wrap section ul,.wrap section ol{padding-left:22px;margin-top:8px}
.wrap section li+li{margin-top:6px}
.wrap section ul+p,.wrap section ol+p,.doc ul+p,.doc ol+p{margin-top:14px}
.note{background:var(--sf);border:1px solid var(--bd);border-left:3px solid var(--tm);border-radius:6px;padding:14px 18px;margin-top:16px}
.note.tip{border-left-color:var(--ac)}
@media(max-width:860px){.wrap{grid-template-columns:1fr;gap:24px;padding:32px 16px 56px}aside{position:static;display:none}}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.sf{border-top:1px solid var(--bd);background:var(--bg);color:var(--tb)}
.sf-in{max-width:var(--w);margin:0 auto;padding:56px 24px 36px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px 40px}
.sf-logo{display:block;line-height:0;margin-bottom:16px}
.sf-logo img{height:26px;width:auto}
.sf-brand p{font-size:14px;line-height:1.6;color:var(--tm);margin:0 0 4px}
.sf-col h4{font-family:var(--hd);font-style:italic;font-weight:600;font-size:16px;color:var(--tx);margin:0 0 14px}
.sf-col ul{list-style:none}
.sf-col li{margin:0 0 9px;line-height:1.4}
.sf-col a{color:var(--tb);font-size:15px}
.sf-col a:hover{color:var(--tx)}
.sf-bottom{max-width:var(--w);margin:0 auto;padding:18px 24px 30px;border-top:1px solid var(--bd);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;font-size:14px;color:var(--tm)}
.sf-pay{display:flex;gap:8px;align-items:center}
.sf-pay svg{height:22px;width:auto;background:#fff;border-radius:4px;padding:2px 5px}
@media(max-width:860px){.sf-in{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1}}
@media(max-width:440px){.sf-in{grid-template-columns:1fr;gap:28px;padding:40px 16px 24px}.sf-bottom{padding:16px 16px 24px}}

/* stack rows: pills sit in the text column, no top margin */
.stack .tech{margin-top:0}
.stack .row{align-items:center}
@media(max-width:720px){.stack .row{gap:10px}}