/* ============================================
   AUGMEN — Multi-Page Design System
   Aesthetic: Neural Precision — Dark futuristic,
   refined AI, subtle circuit patterns, glowing accents.
   Font: Noto Sans 400–900
   ============================================ */
:root{--f:'Satoshi',system-ui,sans-serif;--mw:1180px;--p:1.5rem;--r:8px;--rl:14px;--rx:20px;--rf:9999px;--e:cubic-bezier(.16,1,.3,1);--d:.35s;--nav-h:60px}

/* === DARK (default) === */
[data-theme="dark"]{
--bg:#060810;--bg2:#0B0E16;--bg3:#10141E;--bgc:#0D1019;--bgc2:#131724;
--t1:#E0E0DC;--t2:#8A8F9E;--t3:#555A68;--tw:#fff;
--accent:#4A78FF;--accent2:#6B93FF;--al:#111B3A;--ah:#3060E0;--ag:rgba(74,120,255,.06);--ab:rgba(74,120,255,.2);--aglow:rgba(74,120,255,.08);
--g:#22C968;--gbg:rgba(34,201,104,.05);--gb:rgba(34,201,104,.15);
--a:#E5A530;--abg:rgba(229,165,48,.04);--aab:rgba(229,165,48,.12);
--danger:#E74C3C;
--brd:#1A1F2E;--brds:#14182244;
--sh:0 1px 3px rgba(0,0,0,.25);--shm:0 8px 32px rgba(0,0,0,.35);--shg:0 0 50px rgba(74,120,255,.05);
--nav-bg:rgba(6,8,16,.88);--nav-brd:rgba(26,31,46,.8);
--hero-mesh:radial-gradient(ellipse 55% 55% at 25% 25%,rgba(74,120,255,.07),transparent),radial-gradient(ellipse 45% 50% at 75% 35%,rgba(34,201,104,.04),transparent),radial-gradient(ellipse 50% 40% at 50% 85%,rgba(229,165,48,.03),transparent);
--grid-c:rgba(74,120,255,.04);
--card-glow:0 0 0 1px rgba(74,120,255,.08);
}

/* === LIGHT === */
[data-theme="light"]{
--bg:#F8F8F5;--bg2:#F0EFEB;--bg3:#E6E5E1;--bgc:#FFF;--bgc2:#F5F4F0;
--t1:#131312;--t2:#5A5A5A;--t3:#999;--tw:#131312;
--accent:#2454CC;--accent2:#3568E0;--al:#E0E8FF;--ah:#1940AB;--ag:rgba(36,84,204,.05);--ab:rgba(36,84,204,.18);--aglow:rgba(36,84,204,.04);
--g:#17965A;--gbg:rgba(23,150,90,.04);--gb:rgba(23,150,90,.14);
--a:#B87512;--abg:rgba(184,117,18,.04);--aab:rgba(184,117,18,.14);
--danger:#CC3B3B;
--brd:#DCDCDC;--brds:#EBEBEB;
--sh:0 1px 3px rgba(0,0,0,.05);--shm:0 8px 32px rgba(0,0,0,.06);--shg:0 0 50px rgba(36,84,204,.04);
--nav-bg:rgba(248,248,245,.92);--nav-brd:rgba(220,220,220,.6);
--hero-mesh:radial-gradient(ellipse 55% 55% at 25% 25%,rgba(36,84,204,.05),transparent),radial-gradient(ellipse 45% 50% at 75% 35%,rgba(23,150,90,.03),transparent),radial-gradient(ellipse 50% 40% at 50% 85%,rgba(184,117,18,.02),transparent);
--grid-c:rgba(36,84,204,.03);
--card-glow:0 0 0 1px rgba(36,84,204,.04);
}

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{font-family:var(--f);font-size:16px;line-height:1.7;color:var(--t1);background:var(--bg);transition:background var(--d) var(--e),color var(--d) var(--e);overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.container{max-width:var(--mw);margin:0 auto;padding:0 var(--p)}
.rel{position:relative}

/* ===== TYPOGRAPHY ===== */
.tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.sec-h{font-size:clamp(1.7rem,3.8vw,2.8rem);font-weight:800;line-height:1.12;color:var(--t1);margin-bottom:.75rem;letter-spacing:-.025em}
.sec-p{font-size:1rem;line-height:1.8;color:var(--t2);max-width:600px}
.sec-p--center{margin-left:auto;margin-right:auto}
.page-hero-h{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:900;line-height:1.06;letter-spacing:-.035em}
.page-hero-p{font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.8;color:var(--t2);max-width:580px}
.gradient-text{background:linear-gradient(135deg,var(--accent),var(--g));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f);font-size:.9rem;font-weight:600;padding:.6rem 1.5rem;border-radius:var(--rf);border:1.5px solid transparent;cursor:pointer;transition:all .2s var(--e);white-space:nowrap}
.btn-p{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-p:hover{background:var(--ah);border-color:var(--ah);transform:translateY(-1px);box-shadow:0 4px 20px rgba(74,120,255,.25)}
.btn-o{background:transparent;color:var(--t1);border-color:var(--brd)}
.btn-o:hover{border-color:var(--accent);color:var(--accent);background:var(--ag)}
.btn-lg{padding:.75rem 2rem;font-size:.95rem}
.btn-w{background:#fff;color:var(--accent);border-color:#fff}
.btn-w:hover{background:#eee;box-shadow:0 4px 18px rgba(255,255,255,.1)}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--nav-brd);transition:box-shadow .2s}
.nav.scrolled{box-shadow:var(--sh)}
.nav-in{max-width:var(--mw);margin:0 auto;padding:0 var(--p);display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.nav-logo{display:flex;align-items:center;gap:.4rem}
.nav-logo svg{width:22px;height:24px}
.nav-logo b{font-size:.95rem;font-weight:800;letter-spacing:.08em}
.nav-mid{display:flex;align-items:center;gap:.15rem}
.nav-item{position:relative}
.nav-link{font-size:.84rem;font-weight:500;color:var(--t3);padding:.45rem .65rem;border-radius:6px;transition:all .15s;display:flex;align-items:center;gap:.25rem}
.nav-link:hover,.nav-link.active{color:var(--t1);background:var(--ag)}
.nav-link svg{width:10px;opacity:.5}
/* Dropdown */
.nav-dd{position:absolute;top:100%;left:0;min-width:210px;background:var(--bgc);border:1px solid var(--brd);border-radius:var(--rl);box-shadow:var(--shm);padding:.4rem;opacity:0;visibility:hidden;transform:translateY(4px);transition:all .2s var(--e);z-index:50}
.nav-item:hover .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd a{display:block;font-size:.75rem;font-weight:500;color:var(--t2);padding:.4rem .6rem;border-radius:6px;transition:all .15s}
.nav-dd a:hover{color:var(--t1);background:var(--ag)}
.nav-dd a small{display:block;font-size:.6rem;color:var(--t3);font-weight:400;margin-top:.05rem}
.nav-dd-div{height:1px;background:var(--brd);margin:.3rem .5rem}
.nav-end{display:flex;align-items:center;gap:.4rem}
.nav-try{font-size:.78rem;font-weight:700;color:#fff;background:var(--accent);padding:.35rem 1rem;border-radius:var(--rf);transition:all .2s}
.nav-try:hover{background:var(--ah);transform:translateY(-1px)}
.thm{width:28px;height:28px;border:1.5px solid var(--brd);border-radius:50%;background:var(--bgc);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.thm:hover{border-color:var(--accent);background:var(--ag)}
.thm svg{width:12px;height:12px;color:var(--t2)}
[data-theme="light"] .ico-moon{display:none}
[data-theme="dark"] .ico-sun{display:none}
.burger{display:none;flex-direction:column;gap:3.5px;background:none;border:none;cursor:pointer;padding:3px}
.burger span{width:17px;height:1.5px;background:var(--t1);border-radius:2px;transition:all .2s}

/* ===== HERO BACKGROUNDS ===== */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-mesh{position:absolute;inset:0;background:var(--hero-mesh)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-c) 1px,transparent 1px),linear-gradient(90deg,var(--grid-c) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 65% 50% at 50% 35%,#000 10%,transparent 60%);-webkit-mask-image:radial-gradient(ellipse 65% 50% at 50% 35%,#000 10%,transparent 60%)}
.hero-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:450px;height:450px;background:radial-gradient(circle,var(--aglow) 0%,transparent 55%)}
/* Abstract circuit pattern overlay */
.hero-circuit{position:absolute;inset:0;opacity:.03;background-image:
url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20h20v20M60 20h20v20M20 60h20v20M80 60h20M60 80v20' stroke='%234A78FF' fill='none' stroke-width='.5'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%234A78FF'/%3E%3Ccircle cx='60' cy='60' r='1.5' fill='%234A78FF'/%3E%3Ccircle cx='100' cy='80' r='1' fill='%234A78FF'/%3E%3C/svg%3E");background-size:120px 120px}

/* ===== SHARED COMPONENTS ===== */
.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.65rem;font-weight:600;padding:.22rem .7rem;border-radius:var(--rf);border:1px solid}
.pill--accent{color:var(--accent);background:var(--ag);border-color:var(--ab)}
.pill--green{color:var(--g);background:var(--gbg);border-color:var(--gb)}
.pulse-dot{width:6px;height:6px;background:var(--g);border-radius:50%;display:inline-block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.6)}}

/* Cards */
.card{background:var(--bgc);border:1px solid var(--brd);border-radius:var(--rl);padding:1.25rem;transition:all .22s var(--e);position:relative;overflow:hidden}
.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shg)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--g));transform:scaleX(0);transform-origin:left;transition:transform var(--d) var(--e)}
.card:hover::before{transform:scaleX(1)}

/* Grid section */
.sec{padding:4.5rem 0}
.sec--alt{background:var(--bg2)}
.sec--dark{background:var(--bg3)}

/* ===== FOOTER ===== */
.footer{padding:2.5rem 0 1rem;background:var(--bg2);border-top:1px solid var(--brd)}
.ft-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--brd)}
.ft-brand p{font-size:.8rem;color:var(--t2);margin-bottom:.3rem;line-height:1.5}
.ft-brand small{font-size:.65rem;color:var(--t3)}
.ft-logo{display:flex;align-items:center;gap:.35rem;margin-bottom:.45rem}
.ft-logo svg{width:18px;height:20px}
.ft-logo b{font-size:.85rem;font-weight:800;letter-spacing:.08em}
.ft-col h5{font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:.45rem}
.ft-col a{display:block;font-size:.75rem;color:var(--t2);margin-bottom:.22rem;transition:color .15s}
.ft-col a:hover{color:var(--accent)}
.ft-bot{padding-top:1rem;text-align:center}
.ft-bot p{font-size:.6rem;color:var(--t3)}

/* ===== PAGE HERO ===== */
.page-hero{position:relative;padding:7rem 0 3rem;text-align:center;overflow:hidden}
.page-hero .container{position:relative;z-index:2}

/* ===== BACKED STRIP ===== */
.backed{padding:1.25rem 0;border-top:1px solid var(--brds);border-bottom:1px solid var(--brds);background:var(--bg2);text-align:center}
.backed-lbl{font-size:.525rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-bottom:.45rem}
.backed-row{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap}
.backed-row span{font-size:.65rem;font-weight:600;color:var(--t3);padding:.2rem .5rem;border:1px solid var(--brd);border-radius:6px;background:var(--bgc)}
.backed-iso{color:var(--g);border-color:var(--gb);background:var(--gbg)}

/* ===== BLOG / ARTICLES ===== */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.article-card{background:var(--bgc);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;transition:all .22s var(--e)}
.article-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shg)}
.article-thumb{height:180px;background:var(--bg3);position:relative;overflow:hidden}
.article-thumb-inner{width:100%;height:100%;background:var(--hero-mesh);display:flex;align-items:center;justify-content:center}
.article-thumb-icon{width:48px;height:48px;color:var(--accent);opacity:.3}
.article-body{padding:1rem}
.article-tag{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.3rem;display:inline-block}
.article-card h3{font-size:.9rem;font-weight:700;line-height:1.35;margin-bottom:.35rem}
.article-card p{font-size:.78rem;color:var(--t2);line-height:1.55;margin-bottom:.5rem}
.article-meta{font-size:.6rem;color:var(--t3);font-weight:500}

/* Article page */
.article-content{max-width:720px;margin:0 auto}
.article-content h2{font-size:1.4rem;font-weight:700;margin:2rem 0 .6rem;color:var(--t1)}
.article-content h3{font-size:1.1rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--t1)}
.article-content p{font-size:.95rem;color:var(--t2);line-height:1.85;margin-bottom:1rem}
.article-content blockquote{border-left:3px solid var(--accent);padding-left:1.2rem;margin:1.5rem 0;font-size:1rem;font-weight:500;color:var(--t1);line-height:1.6}
.article-content code{font-size:.85rem;background:var(--bg3);padding:.15rem .4rem;border-radius:4px;font-family:'Fira Code',monospace}

/* ===== PRODUCT PAGES ===== */
.prod-feature{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;padding:3rem 0}
.prod-feature:nth-child(even){direction:rtl}
.prod-feature:nth-child(even)>*{direction:ltr}
.prod-visual{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rx);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.prod-visual::before{content:'';position:absolute;inset:0;background:var(--hero-mesh);opacity:.5}
.prod-visual-icon{width:64px;height:64px;color:var(--accent);opacity:.2;position:relative}

/* ===== ANIMATIONS ===== */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .5s var(--e),transform .5s var(--e)}
.fade-up.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s}.d5{transition-delay:.3s}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
.ft-top{grid-template-columns:1fr 1fr}
.article-grid{grid-template-columns:1fr 1fr}
.prod-feature{grid-template-columns:1fr;gap:1.5rem}
.prod-feature:nth-child(even){direction:ltr}
}
@media(max-width:768px){
:root{--p:1.1rem}
.nav-mid{display:none;position:absolute;top:var(--nav-h);left:0;right:0;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);flex-direction:column;padding:.6rem var(--p);gap:.2rem;align-items:stretch}
.nav-mid.active{display:flex}
.nav-dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:.2rem 0 .2rem 1rem;min-width:auto}
.nav-item:hover .nav-dd{transform:none}
.burger{display:flex}
.nav-try{display:none}
.page-hero{padding:5.5rem 0 2rem}
.article-grid{grid-template-columns:1fr}
.ft-top{grid-template-columns:1fr}
}
@media(max-width:480px){
.backed-row{flex-direction:column}
}