/*
Theme Name: Strata by Accountive
Theme URI: https://strata.accountive.ca
Author: Accountive
Description: Strata by Accountive — Power layer for QuickBooks Online
Version: 1.0.0
Text Domain: strata
*/

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --navy:#09090E; --n1:#0D0D16; --n2:#13131F;
  --cyan:#00A3FF; --cd:rgba(0,163,255,0.10); --cb:rgba(0,163,255,0.22);
  --w:#fff; --w90:#EFEFEF; --w75:#D0D0D0; --w55:#AAAAAA; --w30:#888888;
  --bd:rgba(255,255,255,0.08); --bd2:rgba(255,255,255,0.14);
  --f:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif;
  --m:'DM Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body,body.home,body.page {
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#09090E;
  color:#EFEFEF;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{content:'';position:fixed;top:-35vh;right:-20vw;width:85vw;height:85vh;background:radial-gradient(ellipse,rgba(0,163,255,0.06) 0%,transparent 65%);pointer-events:none;z-index:0}

a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
svg{display:block}
p{color:#D0D0D0;line-height:1.75}
h1,h2,h3,h4,h5,h6{color:#fff;font-family:'Figtree',-apple-system,BlinkMacSystemFont,sans-serif}

/* PAGE WRAPPER */
.page-content{padding-top:56px}

/* LAYOUT */
.container{max-width:1140px;margin:0 auto;padding:0 2rem}
.section{border-top:1px solid var(--bd);padding:56px 0;position:relative;z-index:1}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}

/* NAV */
#site-header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid var(--bd);background:rgba(9,9,14,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-inner{max-width:1140px;margin:0 auto;padding:0 2rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:flex;align-items:center;gap:10px}
.logo-lockup{display:flex;flex-direction:column;gap:2px}
.logo-name{font-size:0.9rem;font-weight:600;letter-spacing:0.06em;color:#fff;line-height:1}
.logo-by{font-size:0.58rem;font-family:var(--m);color:var(--cyan);letter-spacing:0.1em;text-transform:uppercase;line-height:1}
.site-nav{display:flex;align-items:center;gap:1rem;list-style:none}
.site-nav a{color:#AAAAAA;font-size:0.875rem;transition:color .15s;white-space:nowrap}
.site-nav a:hover,.site-nav a.active{color:#fff}
.nav-cta-install{background:var(--cyan)!important;color:var(--navy)!important;padding:.4rem 1.1rem;border-radius:5px;font-weight:500!important;font-size:0.82rem!important;transition:opacity .15s!important}
.nav-cta-install:hover{opacity:.85}
.nav-beta{color:var(--cyan)!important;font-weight:500!important}
.nav-back{font-size:0.78rem;color:#888888;font-family:var(--m);letter-spacing:0.04em;transition:color .15s}
.nav-back:hover{color:#AAAAAA}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;background:none;border:none}
.nav-toggle span{display:block;width:22px;height:1.5px;background:#fff;transition:all .3s}

/* LABELS */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.67rem;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--cyan);font-family:var(--m);margin-bottom:1.1rem}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--cyan);opacity:.5}
.se{display:flex;align-items:center;gap:8px;font-size:.66rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-family:var(--m);margin-bottom:.75rem}
.se::before{content:'';width:14px;height:1px;background:var(--cyan);opacity:.5}

/* BUTTONS */
.bp{display:inline-flex;align-items:center;gap:7px;padding:.65rem 1.5rem;background:var(--cyan);color:var(--navy);border-radius:5px;font-size:.9rem;font-weight:500;transition:opacity .15s;font-family:var(--f);border:none;cursor:pointer}
.bp:hover{opacity:.85;color:var(--navy)}
.bp-lg{font-size:1rem;padding:.75rem 1.75rem}
.bg{display:inline-flex;align-items:center;gap:6px;padding:.65rem 1.25rem;color:#AAAAAA;border:1px solid var(--bd);border-radius:5px;font-size:.9rem;transition:all .15s;font-family:var(--f)}
.bg:hover{color:#fff;border-color:var(--bd2)}
.btn-row{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:6px;padding:.2rem .75rem;background:var(--cd);border:1px solid var(--cb);border-radius:100px;font-size:.63rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-family:var(--m);margin-bottom:1.1rem}
.badge::before{content:'';width:5px;height:5px;background:var(--cyan);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}

/* HERO */
.hero{padding:100px 0 64px;display:flex;align-items:center;min-height:100vh;position:relative;z-index:1}
.hero-inner{max-width:1140px;margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2.4rem,4.5vw,3.8rem);font-weight:600;line-height:1.05;letter-spacing:-.04em;margin-bottom:1.25rem;color:#fff}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero-sub{font-size:1.05rem;color:#D0D0D0;line-height:1.8;margin-bottom:2rem;max-width:44ch;font-weight:300}
.hero-note{font-size:.78rem;color:#888888;font-family:var(--m);margin-top:1rem}
.hero-visual{display:flex;align-items:center;justify-content:flex-end}

/* EXTENSION MOCKUP */
.ext-window{width:340px;background:var(--n1);border:1px solid var(--bd2);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--bd),0 40px 80px rgba(0,0,0,0.6)}
.ext-titlebar{background:var(--n2);border-bottom:1px solid var(--bd);padding:.625rem 1rem;display:flex;align-items:center;justify-content:space-between}
.ext-title{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:500;letter-spacing:.06em;color:#D0D0D0;font-family:var(--m);text-transform:uppercase}
.ext-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.ext-version{font-size:.6rem;font-family:var(--m);color:var(--cyan);background:var(--cd);border:1px solid var(--cb);padding:.1rem .45rem;border-radius:4px}
.ext-section{padding:.875rem 1rem;border-bottom:1px solid var(--bd)}
.ext-section:last-child{border-bottom:none}
.ext-label{font-size:.62rem;font-family:var(--m);color:#888888;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.625rem}
.tool-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem .625rem;border-radius:6px;border:1px solid var(--bd);background:var(--n2);margin-bottom:.375rem;cursor:pointer;transition:all .15s}
.tool-row:last-child{margin-bottom:0}
.tool-row:hover{background:rgba(255,255,255,.04);border-color:var(--bd2)}
.tool-left{display:flex;align-items:center;gap:8px}
.tool-icon{width:22px;height:22px;border-radius:4px;background:var(--cd);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tool-name{font-size:.78rem;color:#D0D0D0}
.tool-kbd{font-size:.6rem;font-family:var(--m);color:#888888;background:rgba(255,255,255,.06);padding:.1rem .35rem;border-radius:3px;border:1px solid var(--bd)}
.count{font-size:.62rem;font-family:var(--m);background:rgba(0,163,255,.15);color:var(--cyan);padding:.1rem .4rem;border-radius:4px}
.progress-wrap{margin-top:.625rem}
.progress-labels{display:flex;justify-content:space-between;font-size:.68rem;color:#888888;font-family:var(--m);margin-bottom:.3rem}
.progress-track{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--cyan);border-radius:2px;width:73%}

/* PROOF STRIP */
.proof-strip{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:20px 0;position:relative;z-index:1}
.proof-inner{max-width:1140px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.proof-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#AAAAAA;font-family:var(--m)}
.proof-dot{width:4px;height:4px;border-radius:50%;background:var(--cyan);opacity:.6}

/* FEATURES GRID */
.fg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin-top:2.5rem}
.fc{background:#09090E;padding:1.75rem;transition:background .2s}
.fc:hover{background:#13131F}
.fc-icon{width:32px;height:32px;margin-bottom:1rem;color:var(--cyan);opacity:.75}
.fc h3{font-size:.9rem;font-weight:500;color:#fff;margin-bottom:.45rem;letter-spacing:-.01em}
.fc p{font-size:.82rem;color:#D0D0D0;line-height:1.65;font-weight:300}

/* STEPS */
.steps{display:flex;flex-direction:column;gap:0;margin-top:2.5rem}
.step{display:flex;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--bd)}
.step:first-child{padding-top:0}
.step:last-child{border-bottom:none}
.step-num{font-size:.68rem;font-family:var(--m);color:var(--cyan);letter-spacing:.08em;flex-shrink:0;padding-top:.1rem;width:2rem}
.step h3{font-size:.95rem;font-weight:500;color:#fff;margin-bottom:.4rem}
.step p{font-size:.85rem;color:#D0D0D0;font-weight:300;line-height:1.7}

/* COMPAT GRID */
.compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:10px;overflow:hidden;margin-top:2rem}
.compat-cell{background:#09090E;padding:1.5rem;display:flex;align-items:center;gap:.875rem;transition:background .2s}
.compat-cell:hover{background:#13131F}
.compat-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--cd);border:1px solid var(--cb)}
.compat-name{font-size:.875rem;font-weight:500;color:#fff;line-height:1}
.compat-note{font-size:.72rem;color:#888888;margin-top:2px;font-family:var(--m)}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;margin-top:2.5rem}
.pricing-cell{background:#09090E;padding:2rem 2.25rem}
.pricing-cell.featured{background:var(--n1)}
.tier-label{font-size:.68rem;font-family:var(--m);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;color:#AAAAAA}
.tier-label.pro{color:var(--cyan)}
.tier-price{font-size:2.25rem;font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:.5rem;color:#fff}
.tier-price span{font-size:.9rem;font-weight:300;color:#AAAAAA}
.tier-desc{font-size:.85rem;color:#D0D0D0;font-weight:300;margin-bottom:1.5rem;line-height:1.65}
.tier-features{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.tier-features li{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;color:#D0D0D0}
.tf-icon{flex-shrink:0;margin-top:2px;color:var(--cyan);opacity:.8}

/* FAQ */
.faq-group-label{font-size:.66rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan);font-family:var(--m);margin:2rem 0 1rem;display:flex;align-items:center;gap:8px}
.faq-group-label::before{content:'';width:14px;height:1px;background:var(--cyan);opacity:.5}
.faq-group-label:first-child{margin-top:0}
.faq-item{border-bottom:1px solid var(--bd);padding:1.25rem 0;cursor:pointer}
.faq-item:first-of-type{border-top:1px solid var(--bd)}
.faq-q{font-size:.95rem;font-weight:500;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;user-select:none}
.faq-arrow{flex-shrink:0;transition:transform .3s;color:#AAAAAA}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{font-size:.875rem;color:#D0D0D0;line-height:1.75;font-weight:300;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:300px;padding-top:.75rem}

/* PAGE HERO */
.page-hero{padding:64px 0 48px;border-bottom:1px solid var(--bd);position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;margin-bottom:.875rem;color:#fff}
.page-hero p{font-size:1rem;color:#D0D0D0;line-height:1.75;max-width:52ch;font-weight:300}

/* KB PLACEHOLDER */
.kb-strip{border:1px solid var(--bd);border-radius:10px;background:var(--n1);padding:2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:2.5rem}
.kb-left{display:flex;align-items:center;gap:1rem}
.kb-icon{width:40px;height:40px;border-radius:8px;background:var(--cd);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* CTA BAND */
.cta-band{border-top:1px solid var(--bd);padding:80px 0;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,163,255,.04) 50%,transparent);position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:600;letter-spacing:-.035em;margin-bottom:.75rem;line-height:1.1;color:#fff}
.cta-band p{color:#D0D0D0;font-size:.95rem;margin-bottom:2rem;font-weight:300}
.cta-row{display:flex;align-items:center;gap:.875rem;justify-content:center}

/* FORM ELEMENTS */
.form-group{margin-bottom:.875rem}
.form-group label{display:block;font-size:.8rem;font-weight:500;color:#D0D0D0;margin-bottom:.4rem;letter-spacing:.02em}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--n1);border:1px solid var(--bd);border-radius:5px;padding:.75rem 1rem;color:#fff;font-family:var(--f);font-size:.9rem;outline:none;transition:border-color .15s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--cyan)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group select{color:#AAAAAA}

/* BETA PROGRAM */
.beta-what-row{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:.875rem}
.beta-icon{width:32px;height:32px;border-radius:6px;background:var(--cd);border:1px solid var(--cb);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.beta-req-row{padding:1.25rem 1.5rem;border-bottom:1px solid var(--bd);background:var(--n1)}
.beta-req-row:last-child{border-bottom:none}
.beta-checkbox-row{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border:1px solid var(--bd);border-radius:6px;background:var(--n1)}
.beta-checkbox-row input[type="checkbox"]{margin-top:3px;flex-shrink:0;accent-color:var(--cyan)}

/* STATS */
.sr{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--bd);border-radius:8px;overflow:hidden;margin-top:1.75rem}
.sc{padding:1.5rem 1.75rem;border-right:1px solid var(--bd)}
.sc:last-child{border-right:none}
.sn{font-size:1.875rem;font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:.4rem;color:#fff}
.sl{font-size:.78rem;color:#D0D0D0;font-weight:300}

/* FOOTER */
footer#site-footer{border-top:1px solid var(--bd);padding:2.25rem 0;position:relative;z-index:1}
.footer-inner{max-width:1140px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-left{display:flex;flex-direction:column;gap:.4rem}
.footer-copy{font-size:.75rem;color:#888888;font-weight:300}
.footer-back{font-size:.72rem;color:var(--cyan);font-family:var(--m)}
.footer-back:hover{opacity:.75}
.footer-links{display:flex;gap:1.75rem;list-style:none}
.footer-links a{font-size:.75rem;color:#888888;transition:color .15s}
.footer-links a:hover{color:#AAAAAA}

/* RESPONSIVE */
@media (max-width:768px){
  .hero-inner,.split{grid-template-columns:1fr}
  .hero-visual{display:none}
  .fg{grid-template-columns:1fr}
  .compat-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .site-nav{display:none}
  .site-nav.open{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;background:#09090E;padding:2rem;border-bottom:1px solid var(--bd);gap:1.5rem;z-index:99}
  .nav-toggle{display:flex}
}