/* Theme variables: dark and light */
:root{
  --bg: #0b0f14;
  --surface: #121821;
  --glass: rgba(255,255,255,0.06);
  --text: #e7eef8;
  --muted: #9fb0c7;
  --primary: #5cc8ff;
  --primary-700:#3aa2d6;
  --accent:#9b6cff;
  --success:#66e39d;
  --danger:#ff6b6b;

  --border: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  --img-filter: none;
}

:root[data-theme="light"]{
  --bg: #f6f9fc;
  --surface: #ffffff;
  --glass: rgba(0,0,0,0.06);
  --text: #0f1723;
  --muted: #4b5b75;
  --primary: #3aa2d6;
  --primary-700:#1f7fb3;
  --accent:#7a57e6;
  --success:#2fb878;
  --danger:#e74c3c;

  --border: rgba(0,0,0,0.08);
  --shadow: 0 8px 24px rgba(0,0,0,0.12);

  --img-filter: saturate(1.05) contrast(1.02);
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(156,108,255,0.12) 0%, rgba(12,16,22,0) 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(92,200,255,0.12) 0%, rgba(12,16,22,0) 60%),
    var(--bg);
  background-attachment: fixed;
  overflow-x:hidden;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%239b6cff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>') 0 0, auto;
}

:root[data-theme="light"] body{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%237a57e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/></svg>') 0 0, auto;
}

/* Clickable elements - pointer cursor */
a,
button,
input[type="checkbox"]:not(:disabled),
input[type="submit"],
input[type="button"],
select,
.btn,
.clickable{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%239b6cff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><circle cx="12" cy="12" r="10" stroke="%235cc8ff" stroke-width="2" fill="none" opacity="0.0"/></svg>') 12 12, pointer;
}

:root[data-theme="light"] a,
:root[data-theme="light"] button,
:root[data-theme="light"] input[type="checkbox"]:not(:disabled),
:root[data-theme="light"] input[type="submit"],
:root[data-theme="light"] input[type="button"],
:root[data-theme="light"] select,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .clickable{
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%239b6cff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><circle cx="12" cy="12" r="10" stroke="%233aa2d6" stroke-width="2" fill="none" opacity="0.0"/></svg>') 12 12, pointer;
}

/* Disabled/not-allowed elements */
button:disabled,
input:disabled,
input[type="checkbox"]:disabled,
.disabled,
[aria-disabled="true"]{
  cursor: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%237ee787ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 11l3 3L22 4"/><circle cx="12" cy="12" r="10" stroke="%233aa2d6" stroke-width="2" fill="none" opacity="0.0"/></svg>') 12 12, pointer;
}

:root[data-theme="light"] button:disabled,
:root[data-theme="light"] input:disabled,
:root[data-theme="light"] input[type="checkbox"]:disabled,
:root[data-theme="light"] .disabled,
:root[data-theme="light"] [aria-disabled="true"]{



  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23e74c3c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>') 12 12, not-allowed;
}

/* Text input cursor */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea{
  cursor: text;
}

/* Canvas sits behind content */
#bg-canvas{
  position:fixed; inset:0;
  z-index:-1;
  filter:saturate(1.1) contrast(1.05);
}

/* Containers */
.container{width:min(1100px, 92vw); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(to bottom, rgba(12,16,22,0.65), rgba(12,16,22,0.35));
  border-bottom:1px solid var(--border);
}
:root[data-theme="light"] .site-header{
  background:linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.brand svg{color:var(--accent)}
.nav{display:flex; gap:22px; align-items:center}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--text)}
.header-tools{display:flex; gap:10px; align-items:center}
.nav-toggle{display:none; background:none; border:0}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--muted); margin:4px 0; border-radius:2px}

/* Theme toggle */
.theme-toggle{display:inline-flex; align-items:center; gap:8px}
.theme-toggle .theme-icon{font-size:16px}

/* Hero */
.hero{padding:72px 0}
.hero-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center}
.hero h1{font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.05; margin:0 0 14px}
.lead{color:var(--muted); font-size:1.1rem}
.hero-actions{display:flex; gap:14px; margin-top:22px}
.hero-metrics{display:flex; gap:26px; margin-top:24px}
.hero-metrics .metric{font-weight:700; font-size:1.2rem}
.hero-metrics .label{display:block; color:var(--muted); font-size:.9rem}

/* Cards & glass */
.card{border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow)}
.glass{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); backdrop-filter: blur(8px)}
:root[data-theme="light"] .glass{background:linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02))}
.card-header{display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--border)}
.dot{width:10px; height:10px; border-radius:50%}
.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}
.card-body{padding:18px}

/* Demo widget */
.demo{display:grid; gap:14px}
.demo-row{display:flex; gap:10px}
.chip{padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,0.04)}
.chip-alt{background:rgba(155,108,255,0.12); border-color:rgba(155,108,255,0.3)}
:root[data-theme="light"] .chip{background:rgba(0,0,0,0.04)}
.progress{height:8px; background:#0e141c; border-radius:999px; overflow:hidden; border:1px solid var(--border)}
:root[data-theme="light"] .progress{background:#e9eef5}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.3s ease}
.todo{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.todo li{
  display:flex; 
  align-items:center; 
  gap:8px; 
  color:var(--muted);
  position: relative;
  transition: opacity 0.3s ease;
}
.todo li.completed{
  opacity: 0.6;
}
.todo li.completed .todo-text{
  text-decoration: line-through;
  color: var(--muted);
}
.todo li input[type="checkbox"]{
  flex-shrink: 0;
}
.todo li .todo-text{
  transition: all 0.3s ease;
}

/* Props */
.props{padding:28px 0 10px}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.prop{padding:18px}
.prop .icon{color:var(--success); margin-bottom:8px}
.prop h3{margin:6px 0 8px}

/* Ebooks */
.ebooks{padding:40px 0}
.section-head h2{margin:0}
.section-head .muted{color:var(--muted)}
.ebook-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:18px}
.ebook{overflow:hidden}
.ebook-media{
  width: 100%;
  height: 280px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.ebook-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: var(--img-filter);
}
.ebook-body{padding:16px; display:grid; gap:12px}
.price-row{display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:rgba(255,255,255,0.04)}
:root[data-theme="light"] .price-row{background:rgba(0,0,0,0.03)}
.format{color:var(--muted)}
.price{font-weight:700; color:var(--text)}
.bullets{list-style:none; padding:0; margin:0; display:grid; gap:6px; color:var(--muted)}
.bullets li{position:relative; padding-left:22px}
.bullets li::before{content:"•"; position:absolute; left:6px; color:var(--accent)}

/* Systems section */
.systems{padding:52px 0}
.systems-inner{padding:24px}
.systems-copy h2{margin:0 0 8px}
.systems-copy p{color:var(--muted)}
.systems-actions{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}

/* Features */
.features{padding:52px 0}
.features-inner{display:grid; grid-template-columns: 1.05fr 1fr; gap:28px; align-items:center}
.feature-text h2{margin-top:0}
.feature-text p{color:var(--muted)}
.checklist{list-style:none; padding:0; display:grid; gap:8px; margin-top:12px}
.checklist li{position:relative; padding-left:26px; color:var(--text)}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--success); font-weight:700}
.feature-media img{display:block; width:100%; height:auto; border-radius:12px}

/* Testimonials */
.testimonials{padding:40px 0}
.testimonials h2{margin:0 0 16px}
.slider{position:relative}
.slides{display:flex; gap:16px; overflow:hidden; scroll-behavior:smooth}
.slide{min-width: clamp(280px, 45%, 420px); padding:18px}
.author{display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--muted)}
.author img{width:32px; height:32px; border-radius:50%}
.slider-btn{position:absolute; top:50%; transform:translateY(-50%); background:var(--glass); border:1px solid var(--border); color:var(--text); width:38px; height:38px; border-radius:50%}
.prev{left:-6px}.next{right:-6px}

/* CTA */
.cta{padding:32px 0 64px}
.cta-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:22px; align-items:center; padding:22px}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:24px 0; background:rgba(0,0,0,0.25)}
:root[data-theme="light"] .site-footer{background:rgba(255,255,255,0.45)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.footer-nav{display:flex; gap:16px}
.brand-lite{color:var(--muted); font-weight:600}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--border); color:var(--text); text-decoration:none; background:rgba(255,255,255,0.04)}
.btn:hover{background:rgba(255,255,255,0.07)}
.btn-sm{padding:8px 12px; border-radius:10px}
.btn-primary{background:linear-gradient(180deg, var(--primary), var(--primary-700)); border:none; color:#082032; font-weight:700}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--muted)}
.btn-ghost:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1100px){
  .ebook-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 980px){
  .hero-inner,
  .features-inner,
  .cta-inner{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:block}
}
@media (max-width: 720px){
  .grid-3{grid-template-columns:1fr}
  .hero{padding:48px 0}
  .slides{gap:12px}
  .ebook-grid{grid-template-columns: 1fr}
}

.todo input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #7ee787;
  border-radius: 4px;
  /* cursor: pointer; */
  position: relative;
}

/* Background when checked */
.todo input[type="checkbox"]:checked {
  background-color: #7ee787;
}

/* Checkmark */
.todo input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #0b0f14;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* Accessibility focus */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* WooCommerce Compatibility */
.woocommerce .products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-breadcrumb,
.woocommerce .woocommerce-message,
.woocommerce-info {
  display: none;
}

/* Mini Cart Styles */
.mini-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mini-cart-btn .cart-count {
  background: var(--primary);
  color: #082032;
  font-weight: 700;
  font-size: 0.75rem;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

/* Cart Notification */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.cart-notification {
  animation: slideIn 0.3s ease;
}

/* WooCommerce Product Classes */
.product {
  /* Inherit ebook card styles */
}

/* Responsive adjustments for WooCommerce */
@media (max-width: 1100px) {
  .woocommerce .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .woocommerce .products {
    grid-template-columns: 1fr;
  }
}