/* Dagric OS — unified design system (one source of truth for every page) */
:root{
  --bg:#0a111c; --bg2:#0e1725; --panel:#131f31; --panel-hi:#182740;
  --line:#22344f; --line2:#2c3f5c;
  --text:#e8eef6; --muted:#a6bad0; --faint:#7d8da0;
  --accent:#3fa9f5; --accent2:#59c2e8; --good:#4ade80;
  --grad:linear-gradient(135deg,#59c2e8,#3fa9f5 55%,#2f7fd1);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --maxw:1120px; --shadow:0 24px 70px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto}

/* ── accessibility: one visible focus ring everywhere ── */
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent2);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:10px;z-index:100;background:var(--panel);padding:8px 14px;border-radius:8px;border:1px solid var(--line)}

/* ── nav (reachable on mobile — links wrap, never hidden) ── */
nav{position:sticky;top:0;z-index:50;background:rgba(10,17,28,.85);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  gap:14px 26px;padding:13px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.14rem;color:var(--text)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px}
.nav-links{display:flex;gap:8px 22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--muted);font-weight:600;font-size:.94rem}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a.cta{color:#fff;background:var(--grad);padding:8px 18px;border-radius:var(--r-pill)}
.nav-links a.cta:hover{color:#fff}
@media(max-width:640px){
  .nav-in{justify-content:center}
  .nav-links{margin:0 auto;justify-content:center;gap:6px 16px;font-size:.9rem}
}

/* ── buttons ── */
.btn{display:inline-block;padding:13px 30px;border-radius:var(--r-pill);font-weight:700;
  font-size:1.02rem;border:1px solid var(--line);color:var(--text);text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 8px 30px rgba(63,169,245,.35)}
.btn.primary:hover{box-shadow:0 12px 38px rgba(63,169,245,.45);color:#fff}
.btn.ghost{background:var(--panel)}
.btn.ghost:hover{background:var(--panel-hi)}
.btn.lg{padding:15px 34px;font-size:1.06rem}
.refund{color:var(--muted);font-size:.85rem;margin-top:10px}
.refund::before{content:"✓ ";color:var(--good);font-weight:800}

/* ── type scale (shared by every page) ── */
h1{font-size:clamp(2.3rem,6vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.16;letter-spacing:-.01em;font-weight:800}
h3{font-size:1.1rem;font-weight:700}
.eyebrow{color:var(--accent2);font-weight:800;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}

/* ── document pages (guide/legal/etc.) ── */
main{max-width:820px;margin:0 auto;padding:60px 24px 84px}
main.wide{max-width:var(--maxw)}
main h1{margin-bottom:10px}
main h2{margin:52px 0 14px;font-size:clamp(1.5rem,2.6vw,1.9rem)}
main h3{margin:26px 0 8px}
.lead,.sub{color:var(--muted);font-size:1.15rem;margin-bottom:32px;max-width:640px}
.center .lead,.center .sub{margin-left:auto;margin-right:auto}
main p{color:var(--muted);margin:12px 0}
ul,ol{color:var(--muted);margin:12px 0 12px 24px;display:grid;gap:8px}
li strong,p strong{color:var(--text)}
.steps{counter-reset:s;list-style:none;margin-left:0}
.steps li{counter-increment:s;position:relative;padding-left:52px;padding-bottom:10px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;
  border-radius:var(--r-sm);background:var(--grad);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center}
code,kbd{background:#0a1420;border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  font:13px ui-monospace,Consolas,monospace;color:#9fd9ff}
pre{background:#0a1420;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;overflow-x:auto;margin:14px 0}
pre code{background:none;border:none;padding:0;color:#7fd1a8}
.note{border-left:3px solid var(--accent);background:var(--panel);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:14px 18px;margin:16px 0;color:var(--muted)}

/* ── sections (marketing pages) ── */
section{padding:80px 24px}
section.alt{background:var(--bg2)}
.sec-head{max-width:660px;margin:0 auto 8px;text-align:center}
.sec-head .lead{margin:14px auto 0}

/* ── cards + grids ── */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 26px}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:.97rem;margin:0}
.card .ico{font-size:1.55rem;margin-bottom:10px;display:block}
.card.link{transition:border-color .15s ease,transform .15s ease}
.card.link:hover{border-color:var(--line2);transform:translateY(-2px)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.95rem}
th,td{padding:12px 15px;border-bottom:1px solid var(--line);text-align:left}
thead th{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
tbody tr:hover td{background:rgba(63,169,245,.04)}
td.y{color:var(--good);font-weight:700}
td.n{color:var(--faint)}
.cmp td:nth-child(2),.cmp td:nth-child(3),.cmp th:nth-child(2),.cmp th:nth-child(3){text-align:center}
.tablewrap{overflow-x:auto}

/* ── page hero (shared by pro/features/download/faq for homepage-grade impact) ── */
.phero{text-align:center;padding:76px 24px 44px;
  background:radial-gradient(900px 460px at 50% -10%,rgba(63,169,245,.16),transparent 60%)}
.phero h1{max-width:14ch;margin:0 auto 16px}
.phero .lead{margin:0 auto 26px}
.phero .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.phero .tiny{color:var(--muted);font-size:.85rem;margin-top:12px}
.shot{max-width:880px;margin:40px auto 0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow),0 0 0 1px rgba(63,169,245,.08)}

/* ── Dagric Looks card (one component, used on / and /pro) ── */
.looks-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:38px}
.look{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease}
.look:hover{border-color:var(--line2);transform:translateY(-2px)}
.look img{border-bottom:1px solid var(--line);aspect-ratio:16/10;object-fit:cover;width:100%}
.look .pad{padding:16px 20px}
.look h3{margin-bottom:4px}
.look p{color:var(--muted);font-size:.9rem;margin:0}

/* ── badges ── */
.badge{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;padding:3px 10px;
  border-radius:var(--r-pill);background:rgba(63,169,245,.15);color:var(--accent2);margin-left:8px;vertical-align:2px}

/* ── checksum block ── */
.sums{background:#0a1420;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;
  font:12.5px/1.8 ui-monospace,Consolas,monospace;color:#7fd1a8;overflow-x:auto;white-space:nowrap;margin:14px 0}

/* ── FAQ / disclosure ── */
details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 22px;margin-top:12px}
details summary{cursor:pointer;font-weight:700;list-style:none;color:var(--text)}
details summary:hover{color:var(--accent2)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--accent);font-weight:800}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin-top:10px;font-size:.97rem}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:38px 24px;color:var(--muted);font-size:.88rem}
.foot{max-width:var(--maxw);margin:0 auto;display:flex;gap:14px 26px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.foot .links{display:flex;gap:0;flex-wrap:wrap}
.foot .links a{color:var(--muted)}
.foot .links a:hover{color:var(--text)}
.foot .links a:not(:last-child)::after{content:"·";margin:0 12px;color:var(--line2)}

/* ── polish ── */
.shot img{width:100%;display:block}
.eyebrow{display:inline-block;margin-bottom:10px}
.sec-head{margin-bottom:12px}

/* ── responsive: tablet ── */
@media(max-width:900px){
  section{padding:64px 22px}
  .phero{padding:64px 22px 34px}
  .grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .looks-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* ── responsive: phone ── */
@media(max-width:640px){
  h1{font-size:clamp(1.95rem,8.5vw,2.5rem)}
  h2{font-size:clamp(1.5rem,6vw,1.95rem)}
  section{padding:48px 18px}
  .phero{padding:44px 18px 28px}
  .lead,.sub{font-size:1.03rem}
  main{max-width:100%;padding:38px 20px 60px}
  main h2{margin:38px 0 12px;font-size:1.4rem}
  .shot{margin-top:28px;border-radius:var(--r-md)}
  .btn{padding:12px 22px;font-size:.97rem}
  .btn.lg{padding:14px 24px;font-size:1rem}
  .phero .btns{gap:10px;width:100%}
  .phero .btns .btn{flex:1 1 auto;min-width:0;max-width:360px}
  .looks-grid{grid-template-columns:1fr;gap:14px}
  .grid{gap:14px}
  .card{padding:20px 22px}
  pre,.sums{font-size:11.5px}
  .foot{justify-content:center;text-align:center;gap:12px}
  .foot .links{justify-content:center}
  .foot .links a:not(:last-child)::after{margin:0 9px}
}

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