:root {
      --bg: #0b0b0f; --card: #12121a; --text: #f5f7fb; --muted: #a6adc8;
      --brand: #7c3aed; --brand-2: #22d3ee; --border: #232336;
      --radius: 16px; --shadow: 0 10px 30px rgba(0,0,0,.35);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background: radial-gradient(1200px 800px at 20% -10%, rgba(124,58,237,.18), transparent),
                  radial-gradient(900px 600px at 90% 10%, rgba(34,211,238,.15), transparent),
                  var(--bg);
      color: var(--text); line-height: 1.55;
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1120px, 92vw); margin: 0 auto; }
    .btn {
      padding: 12px 18px; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px;
      background: var(--brand); color: #fff; font-weight: 600; border: 1px solid #5b21b6; box-shadow: var(--shadow);
    }
    .btn.secondary { background: #1f2937; border-color: var(--border); color: var(--text); }
    .eyebrow { color: var(--brand-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
    header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;            /* full width */
      z-index: 40;
      backdrop-filter: blur(10px);
      background: rgba(11,11,15,.6);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
    .brand-logo {
      width: 48px;
      height: auto;
      border-radius: 6px; /* optional, if you want rounded corners */
      vertical-align: middle;
    }
    .brand-dot { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 0 3px rgba(124,58,237,.2); }
    nav a { padding: 8px 12px; color: var(--muted); font-weight: 600; }
    nav a:hover { color: var(--text); }
    .hero { padding: 74px 0 40px; }
    .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
    .hero h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; margin: 10px 0 14px; }
    .hero p { color: var(--muted); font-size: 1.05rem; }
    .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .device-frame {
      background: linear-gradient(180deg, #0e0f17, #0a0a10);
      border: 1px solid var(--border);
      border-radius: 28px; padding: 12px; box-shadow: var(--shadow);
    }
    .device-frame img { display: block; border-radius: 20px; max-width: 100%; height: auto; }
    .features { padding: 40px 0; }
    .grid { display: grid; gap: 24px; }
    .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
    .feature-card h3 { margin: 6px 0 8px; }
    .feature-icon { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; background: #161626; border: 1px solid var(--border); }
    .how { padding: 32px 0; }
    .step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
    .step-num { width: 28px; height: 28px; display: grid; place-items: center; background: var(--brand); border-radius: 8px; font-weight: 700; }
    .gallery { padding: 32px 0; }
    .shot { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
    .shot img { display: block; border-radius: 12px; max-width: 100%; height: auto; }
    .faq { padding: 32px 0 60px; }
    details { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
    details + details { margin-top: 12px; }
    summary { cursor: pointer; font-weight: 600; }
    details[open] { border-color: #334155; }
    footer { border-top: 1px solid rgba(255,255,255,.06); padding: 28px 0 48px; color: var(--muted); }
    @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; } header .nav nav { display: none; } }
    /* from your index.html <style> ... paste all here */
    .blog-list { margin: 16px 0; padding: 0; list-style: none; }
    .blog-list li { margin: 12px 0; }
    /* blog list links (titles) */
    .blog-list a {
      font-weight: 700;
      color: var(--brand-2);   /* light blue accent */
      text-decoration: none;
    }  
    .blog-list a:hover {
      text-decoration: underline;
      color: #fff;             /* brighter on hover */
    }
    .prose p{margin:10px 0}
    .prose ul,.prose ol{margin:10px 0 10px 1.25rem}
    .prose li{margin:6px 0}
    

    /* constrain blog article width */
    .prose { max-width: 760px; margin: 0 auto; }

    /* don't touch the cover when styling generic images */
    .prose img:not(.blog-cover) { max-width: 100%; height: auto; border-radius: 12px; }

    /* force cover size */
    /* force much smaller cover image */
    /* blog cover images */
    .prose .blog-cover {
      display: block;
      margin: 20px auto;
      max-width: 160px;   /* keeps width small */
      max-height: 240px;  /* prevents it from being stretched too tall */
      width: auto;
      height: auto;
      border-radius: 12px;
      box-shadow: var(--shadow);
      object-fit: contain; /* keeps aspect ratio intact */
    }

    /* style ALL blog headings with brand accent */
    .prose h1,
    .prose h2 {
      font-size: 1.2rem;   /* smaller than default (usually ~1.5rem) */
      font-weight: 700;
      color: var(--brand-2);  /* keep the light blue accent */
      margin: 14px 0 8px;
    }
    .prose h3 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--brand-2);
    }
    .prose h4,
    .prose h5,
    .prose h6 {
      margin: 16px 0 8px;
      color: var(--brand-2);   /* light blue accent */
    }

    .videos {
      padding: 40px 0;
    }

    .videos h2 {
      margin: 8px 0 16px;
      color: var(--brand-2); /* light blue accent like other headings */
    }

    .videos ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }

    .videos li a {
      display: block;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--text);
      font-weight: 600;
      transition: border-color .2s, background .2s;
    }

    .videos li a:hover {
      border-color: #334155;
      background: #161626;
    }

    /* keep anchors visible under fixed header */
    #features, #how, #shots, #videos, #faq { scroll-margin-top: 90px; }

    /* Videos section (scoped) */
    #videos { padding: 40px 0; }
    #videos h2 { margin: 8px 0 16px; color: var(--brand-2); }
    #videos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
    #videos li a {
      display: block;
      padding: 12px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--text);
      font-weight: 600;
      transition: border-color .2s, background .2s;
    }
    #videos li a:hover { border-color: #334155; background: #161626; }