/* =====================
       Barik.io Demo Gallery — WHITE VERSION
       ===================== */

    :root{
      --brand:#0b2a6f;          /* Navy */
      --brand-2:#0e49b5;        /* Lighter navy */
      --ink:#0b1020;            /* Primary text */
      --muted:#5b6472;          /* Muted text */
      --bg:#ffffff;             /* White base */
      --card:#ffffff;           /* Card */
      --surface:#f6f8fb;        /* Light section background */
      --ring:rgba(11,42,111,.12);
      --line:rgba(11,42,111,.12);
      --ok:#2e7d32;
      --warn:#b28704;
      --danger:#b00020;
      --radius:16px;
      --shadow:0 8px 24px rgba(11,42,111,.08);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--ink); background: var(--bg);
      background-image: radial-gradient(600px 250px at 100% -80%, rgba(14,73,181,.06) 0%, transparent 70%), radial-gradient(400px 200px at -20% 0%, rgba(14,73,181,.05) 0%, transparent 70%);
      background-attachment: fixed;
    }

    a{color:var(--brand); text-decoration:none}
    a:hover{opacity:.9}
    .container{width: min(1200px, 92%); margin: 0 auto}

    /* Header */
    header{
      position:sticky; top:0; z-index:20; backdrop-filter: blur(8px);
      background: rgba(255,255,255,.85); border-bottom:1px solid var(--line);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; color:var(--ink)}
    .brand .cube{width:28px; height:28px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-radius:6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6)}
    .nav a.btn{padding:10px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--brand)}

    /* Hero */
    .hero-demo{padding:56px 0 28px}
    .kicker{color:var(--brand); text-transform:uppercase; letter-spacing:.18em; font-size:12px}
    h1{margin:10px 0 12px; font-size: clamp(28px, 3.5vw, 44px); line-height:1.15}
    .lead{color:#243047; max-width:840px}
    .hero-demo-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--brand); cursor:pointer}
    .btn.primary{background:linear-gradient(180deg, #ffffff, #f2f6ff); border-color:#c8d5f6; color:#0a2a6d}

    /* Filters */
    .filters{margin:24px 0 8px; display:flex; flex-wrap:wrap; gap:10px}
    .chip{padding:10px 12px; border:1px solid var(--line); border-radius:999px; cursor:pointer; user-select:none; background:#fff; color:#243047}
    .chip.active{background: rgba(14,73,181,.12); border-color:#9fb7f6; color:#0a2a6d}

    .toolbar{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; margin:18px 0}
    .search{flex:1; min-width:250px; position:relative}
    .search input{width:100%; padding:12px 14px 12px 38px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--ink)}
    .search .icon{position:absolute; top:50%; left:12px; transform:translateY(-50%); opacity:.6}
    .view-toggle{display:flex; gap:8px}
    .toggle{padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink)}

    /* Grid */
    .grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:16px}
    .span-3{grid-column: span 12}
    @media (min-width:720px){.span-3{grid-column: span 6}}
    @media (min-width:1024px){.span-3{grid-column: span 4}}

    .card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition: transform .2s ease, box-shadow .2s ease}
    .card:hover{transform: translateY(-2px); box-shadow:0 12px 28px rgba(11,42,111,.12)}
    .thumb{aspect-ratio:16/10; background:#eff3fb; position:relative}
    .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.02)}
    .badge{position:absolute; top:10px; left:10px; font-size:12px; padding:6px 8px; border-radius:999px; background:var(--brand); color:#fff}
    .badge.warn{background:#f5d36a; color:#5b4b00}
    .badge.ok{background:#3fb67a; color:#05351f}

    .card-body{padding:14px}
    .card-title{font-weight:700; font-size:18px; color:var(--ink)}
    .muted{color:var(--muted)}
    .tags{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0}
    .tag{font-size:12px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:#364257; background:#fff}
    .card-actions{display:flex; gap:10px; flex-wrap:wrap}
    .btn.small{padding:8px 10px; font-size:14px}

    /* Sections */
    section{padding:40px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px}
    .section-head h2{margin:0; font-size: clamp(22px, 2.8vw, 32px); color:var(--ink)}

    /* Features list */
    .features{display:grid; gap:14px}
    @media(min-width:760px){.features{grid-template-columns:repeat(3,1fr)}}
    .feature{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
    .feature h3{margin:0 0 6px; font-size:18px; color:var(--ink)}

    /* How it works */
    .steps{display:grid; gap:14px}
    @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
    .step{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
    .step .num{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:999px; background:rgba(14,73,181,.12); margin-bottom:8px; color:var(--brand); font-weight:700}

    /* FAQ */
    details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px}
    summary{cursor:pointer; font-weight:600; color:var(--ink)}

    /* Footer CTA */
    .cta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#f2f6ff; border:1px solid #c8d5f6; border-radius:16px; padding:18px}
    .cta strong{font-size:18px; color:var(--ink)}

    /* Simple modal preview */
    #previewModal {border:none; border-radius:18px; padding:0; background:#fff; color:var(--ink); width:min(1000px, 92%); box-shadow:0 20px 60px rgba(11,42,111,.2); height: min(600px, 60%);}
    #previewModal::backdrop{background:rgba(0,0,0,.35)}
    .modal-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line)}
    .modal-body{padding:0}
    .modal-body iframe{width:100%; height:70vh; border:0; background:#fff}
    .close-x{border:1px solid var(--line); background:#fff; color:var(--brand); border-radius:8px; padding:8px 10px; cursor:pointer}

    /* === Slider styles === */
    .gallery{position:relative; background:#fff}
    .slides{position:relative;}
    .slide{position:absolute; inset:0; opacity:0; transition:opacity .3s ease}
    .slide.active{opacity:1}
    .slide img{display:block; width:100%; height: auto; max-height:70vh; object-fit:cover; background:#f3f5fb}
    .gallery .nav{position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--line); background:#fff; color:var(--brand); border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:0 6px 16px rgba(11,42,111,.12)}
    .gallery .nav.prev{left:10px}
    .gallery .nav.next{right:10px}
    .dots{position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:8px}
    .dot{width:9px; height:9px; border-radius:999px; border:1px solid var(--line); background:#fff; opacity:.6; cursor:pointer}
    .dot.active{background:var(--brand); opacity:1}