/* ═══════ DESIGN TOKENS (matching v2) ═══════ */
:root {
  --ink: #07090f;
  --ink2: #0e1420;
  --blue: #1847F1;
  --blue-bright: #3a6fff;
  --blue-pale: rgba(24,71,241,0.08);
  --red: #e8132a;
  --white: #ffffff;
  --off: #f5f6fa;
  --gray: #8a93a8;
  --gray-light: #e8eaf0;
  --border: rgba(0,0,0,0.07);
  --border-dark: rgba(255,255,255,0.08);
  --font-d: 'Clash Display', sans-serif;
  --font-b: 'Epilogue', sans-serif;
  --ease: cubic-bezier(0.16,1,0.3,1);
  --r: 16px;
  --rl: 24px;
  --rp: 999px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-b);color:var(--ink);background:var(--white);overflow-x:hidden;}
h1,h2,h3,h4,h5{font-family:var(--font-d);font-weight:600;letter-spacing:-0.03em;}
a{text-decoration:none;cursor:pointer;}

/* ═══════ HEADER ═══════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:800;transition:all .3s var(--ease);}
.hdr.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 4px 24px rgba(0,0,0,.05);}
.hdr-inner{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo img{height:40px;width:auto;}
.hdr-nav{display:flex;gap:2px;}
.hdr-nav a{font-family:var(--font-b);font-size:.88rem;font-weight:500;color:var(--ink);padding:.5rem .9rem;border-radius:var(--rp);transition:all .2s;}
.hdr-nav a:hover,.hdr-nav a.active{color:var(--blue);background:rgba(24,71,241,.06);}
.btn{display:inline-flex;width: max-content !important;align-items:center;gap:8px;font-family:var(--font-b);font-weight:600;font-size:.9rem;padding:.75rem 1.6rem;border-radius:var(--rp) !important;border:none;cursor:pointer;transition:all .25s var(--ease);position:relative;overflow:hidden;}
.btn-primary{background:var(--blue) !important;color:#fff !important;box-shadow:0 8px 32px rgba(24,71,241,.25) !important;}
.btn-primary:hover{transform:translateY(-2px) !important;box-shadow:0 16px 48px rgba(24,71,241,.35) !important;}
.btn-dark{background:var(--ink) !important;color:#fff !important;}
.btn-dark:hover{background:#1a2035 !important;transform:translateY(-2px) !important;}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--gray-light);}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);}
.btn-ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.2)!important;backdrop-filter:blur(8px)!important;}
.btn-ghost:hover{background:rgba(255,255,255,.18)!important;}
.btn-sm{padding:.55rem 1.2rem;font-size:.82rem;}
.btn-lg{padding:1rem 2.2rem;font-size:1rem;}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 32px rgba(232,19,42,.2);}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(232,19,42,.35);}

/* ═══════ HERO BANNER ═══════ */
.demo-hero{
  min-height:54vh;background:var(--ink);
  display:flex;align-items:center;padding:110px 0 64px;
  position:relative;overflow:hidden;
}
.demo-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(24,71,241,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(24,71,241,.08) 1px,transparent 1px);background-size:56px 56px;animation:gridFloat 20s linear infinite;}
@keyframes gridFloat{0%{background-position:0 0}100%{background-position:56px 56px}}
.demo-hero-orb1{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(24,71,241,.28) 0%,transparent 70%);top:-150px;right:-80px;filter:blur(70px);pointer-events:none;}
.demo-hero-orb2{position:absolute;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(232,19,42,.15) 0%,transparent 70%);bottom:-100px;left:5%;filter:blur(60px);pointer-events:none;}
.demo-hero-content{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .9rem;border-radius:var(--rp);margin-bottom:1.25rem;}
.eyebrow-dark{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.7);}
.eyebrow-dark::before{content:'';width:5px;height:5px;background:#4ade80;border-radius:50%;animation:blinkDot 2s infinite;}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.3}}
.eyebrow-light{background:rgba(24,71,241,.07);border:1px solid rgba(24,71,241,.15);color:var(--blue);}
.eyebrow-light::before{content:'';width:5px;height:5px;background:var(--blue);border-radius:50%;animation:blinkDot 2s infinite;}
.demo-hero h1{font-size:clamp(2.4rem,5vw,4rem);color:#fff;line-height:1.06;margin-bottom:1.2rem;}
.demo-hero h1 em{font-style:normal;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.demo-hero p{color:rgba(255,255,255,.55);font-size:1.05rem;line-height:1.75;max-width:560px;margin:0 auto 2.5rem;}

/* Search / Filter Bar */
.demo-search-bar{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rp);padding:.6rem .6rem .6rem 1.5rem;display:inline-flex;align-items:center;gap:12px;width:100%;max-width:640px;backdrop-filter:blur(12px);}
.dsb-label{color:rgba(255,255,255,.5);font-size:.85rem;font-weight:500;white-space:nowrap;}
.dsb-select{background:transparent;border:none;color:#fff;font-family:var(--font-b);font-size:.88rem;flex:1;outline:none;cursor:pointer;}
.dsb-select option{background:#0e1420;color:#fff;}
.dsb-select::-webkit-scrollbar{display:none;}

/* ═══════ MAIN DEMO LAYOUT ═══════ */
.demo-main{padding:72px 0 100px;background:var(--off);}
.demo-layout{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;}

/* ─── LEFT SIDEBAR ─── */
.demo-sidebar{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;position:sticky;top:96px;}
.sidebar-head{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);}
.sidebar-head h3{font-size:.85rem;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;}
.sidebar-search{margin-top:.75rem;position:relative;}
.sidebar-search input{width:100%;background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:.65rem 1rem .65rem 2.5rem;font-family:var(--font-b);font-size:.85rem;color:var(--ink);outline:none;transition:border-color .2s;}
.sidebar-search input:focus{border-color:var(--blue);}
.sidebar-search::before{content:'🔍';position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:.75rem;pointer-events:none;}
.sidebar-body{padding:.75rem 0;max-height:600px;overflow-y:auto;}
.sidebar-body::-webkit-scrollbar{width:4px;}
.sidebar-body::-webkit-scrollbar-track{background:transparent;}
.sidebar-body::-webkit-scrollbar-thumb{background:var(--gray-light);border-radius:4px;}
.cat-group{}
.cat-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;cursor:pointer;transition:background .2s;user-select:none;}
.cat-header:hover{background:var(--off);}
.cat-header-left{display:flex;align-items:center;gap:10px;}
.cat-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.ci-blue{background:rgba(24,71,241,.1);}
.ci-green{background:rgba(74,222,128,.12);}
.ci-purple{background:rgba(167,139,250,.12);}
.ci-orange{background:rgba(251,146,60,.12);}
.ci-red{background:rgba(232,19,42,.1);}
.ci-teal{background:rgba(20,184,166,.1);}
.ci-yellow{background:rgba(245,158,11,.1);}
.cat-name{font-size:.88rem;font-weight:600;color:var(--ink);}
.cat-badge{background:rgba(24,71,241,.08);color:var(--blue);font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:var(--rp);}
.cat-chevron{font-size:.65rem;color:var(--gray);transition:transform .25s var(--ease);}
.cat-group.open .cat-chevron{transform:rotate(180deg);}
.cat-items{display:none;padding:.25rem 0 .5rem;}
.cat-group.open .cat-items{display:block;}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.25rem .6rem 3.25rem;cursor:pointer;transition:all .2s;font-size:.85rem;color:var(--gray);}
.cat-item:hover{background:rgba(24,71,241,.04);color:var(--ink);}
.cat-item.active{background:rgba(24,71,241,.08);color:var(--blue);font-weight:600;border-right:2px solid var(--blue);}
.cat-item-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-light);flex-shrink:0;transition:background .2s;}
.cat-item.active .cat-item-dot{background:var(--blue);}

/* ─── RIGHT CONTENT ─── */
.demo-content{}
.demo-content-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap;}
.demo-content-title{font-size:1.35rem;color:var(--ink);}
.demo-content-count{color:var(--gray);font-size:.85rem;}
.demo-filters{display:flex;gap:8px;flex-wrap:wrap;}
.filter-chip{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rp);padding:.4rem .95rem;font-size:.8rem;font-weight:500;color:var(--gray);cursor:pointer;transition:all .2s;}
.filter-chip:hover{border-color:var(--blue);color:var(--blue);}
.filter-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* Demo Card */
.demo-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;transition:all .35s var(--ease);cursor:pointer;position:relative;}
.demo-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.1);border-color:transparent;}
.dc-thumb{aspect-ratio:16/10;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.dc-thumb-bg{position:absolute;inset:0;transition:transform .5s var(--ease);}
.demo-card:hover .dc-thumb-bg{transform:scale(1.06);}
.dc-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:background .3s;}
.demo-card:hover .dc-thumb-overlay{background:rgba(0,0,0,.45);}
.dc-play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),box-shadow .3s;position:relative;z-index:2;}
.dc-play-btn::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.3);animation:pulseRing 2s ease-out infinite;}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.dc-play-arrow{width:0;height:0;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--blue);margin-left:3px;}
.demo-card:hover .dc-play-btn{transform:scale(1.12);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.dc-badge{position:absolute;top:1rem;left:1rem;background:rgba(24,71,241,.85);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.25rem .7rem;border-radius:var(--rp);backdrop-filter:blur(8px);z-index:3;}
.dc-new{background:rgba(74,222,128,.9);color:var(--ink);}
.dc-hot{background:rgba(232,19,42,.85);color:#fff;}
.dc-body{padding:1.5rem;}
.dc-cat{font-size:.7rem;font-weight:600;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;}
.dc-title{font-size:1.05rem;font-weight:600;color:var(--ink);margin-bottom:.5rem;line-height:1.3;transition:color .2s;}
.demo-card:hover .dc-title{color:var(--blue);}
.dc-desc{font-size:.82rem;color:var(--gray);line-height:1.65;margin-bottom:1.25rem;}
.dc-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.25rem;}
.dc-tag{font-size:.68rem;background:var(--off);border:1px solid var(--border);color:var(--gray);padding:.2rem .6rem;border-radius:6px;}
.dc-footer{display:flex;align-items:center;justify-content:space-between;}
.dc-watch{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--blue);transition:gap .25s var(--ease);}
.demo-card:hover .dc-watch{gap:10px;}
.dc-book{font-size:.78rem;font-weight:600;color:var(--gray);transition:color .2s;}
.dc-book:hover{color:var(--ink);}

/* ═══════ INNER DEMO PAGE (hidden by default) ═══════ */
#inner-page{
    display:block;
    /*position:fixed;*/
    inset:0;
    background:var(--white);z-index:600;overflow-y:auto;}
.inner-page-header {
    background: var(--ink);
    padding: 88px 0 64px;
    position: relative;
    overflow: hidden;
    inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridFloat 20s linear infinite;
}
.iph-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(24,71,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(24,71,241,.07) 1px,transparent 1px);background-size:56px 56px;}
.iph-orb{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(24,71,241,.25) 0%,transparent 70%);top:-200px;right:-100px;filter:blur(70px);}
.iph-content{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 28px;}
.iph-breadcrumb{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.4);font-size:.8rem;margin-bottom:1.5rem;}
.iph-breadcrumb a{color:rgba(255,255,255,.4);transition:color .2s;}
.iph-breadcrumb a:hover{color:#fff;}
.iph-breadcrumb span{color:rgba(255,255,255,.6);}
.iph-grid-inner{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;}
.iph-left{}
.iph-cat-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(24,71,241,.2);border:1px solid rgba(24,71,241,.4);color:#60a5fa;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .85rem;border-radius:var(--rp);margin-bottom:1.25rem;}
.iph-title{font-size:clamp(2rem,4vw,3.2rem);color:#fff;line-height:1.1;margin-bottom:1rem;}
.iph-desc{color:rgba(255,255,255,.55);font-size:1rem;line-height:1.75;max-width:560px;}
.iph-desc ul {
    list-style: none;
}
.iph-desc ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
}
.iph-desc ul li:before {
    content: '✓';
    width: 20px;
    height: 20px;
    background: rgba(74, 222, 128, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: #4ade80;
    font-weight: 700;
    flex-shrink: 0;
}

.iph-points{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem;}
.iph-point{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:.9rem;}
.iph-point::before{content:'✓';width:20px;height:20px;background:rgba(74,222,128,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#4ade80;font-weight:700;flex-shrink:0;}
.iph-right{display:flex;flex-direction:column;gap:1rem;align-items:center;}
.iph-stat-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:1.25rem 1.75rem;text-align:center;backdrop-filter:blur(8px);}
.iph-stat-num{font-family:var(--font-d);font-size:1.8rem;font-weight:700;color:#fff;display:block;}
.iph-stat-label{font-size:.75rem;color:rgba(255,255,255,.45);margin-top:2px;}
.iph-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:2rem;}

/* Inner Body */
.inner-body{max-width:1240px;margin:0 auto;padding:72px 28px 100px;}
.inner-grid{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start;}

/* Video Section */
.demo-video-section{margin-bottom:40px;}
.dvs-label{font-size:.8rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;display:flex;align-items:center;gap:6px;}
.video-player{border-radius:var(--rl);overflow:hidden;position:relative;background:var(--ink);aspect-ratio:16/9;cursor:pointer; margin-bottom: 40px;}
.vp-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.vp-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);}
.vp-play{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:transform .3s var(--ease);box-shadow:0 16px 48px rgba(0,0,0,.3);}
.vp-play::before{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.25);animation:pulseRing 2s ease-out infinite;}
.vp-play-tri{width:0;height:0;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--blue);margin-left:5px;}
.video-player:hover .vp-play{transform:scale(1.1);}
.vp-label{position:absolute;bottom:1.5rem;left:1.5rem;background:rgba(0,0,0,.6);color:#fff;padding:.5rem 1rem;border-radius:var(--rp);font-size:.82rem;font-weight:600;backdrop-filter:blur(8px);}

/* About Demo Section */
.demo-about{margin-bottom:40px;}
.section-label{font-size:.8rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;}
.demo-about h2{font-size:1.8rem;margin-bottom:1rem;line-height:1.2;}
.demo-about p{color:var(--gray);font-size:.95rem;line-height:1.75;margin-bottom:1rem;}
.features-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:1.5rem;}
.feature-item{background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:1.25rem;transition:all .25s var(--ease);}
.feature-item:hover{border-color:rgba(24,71,241,.2);background:rgba(24,71,241,.03);}
.fi-icon{font-size:1.25rem;margin-bottom:.65rem;display:block;}
.fi-title{font-size:.9rem;font-weight:600;margin-bottom:.3rem;color:var(--ink);}
.fi-desc{font-size:.8rem;color:var(--gray);line-height:1.6;}

/* Tech Stack */
.tech-stack{margin-top:32px;}
.ts-chip ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:.75rem;}
.ts-chip ul li{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rp);padding:.4rem 1rem;font-size:.8rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:6px;}

/* ─── Right Sidebar ─── */
.demo-sidebar-right{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;}
.dsr-book-card{background:var(--ink);border-radius:var(--rl);padding:2rem;position:relative;overflow:hidden;}
.dsr-book-card-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(24,71,241,.25) 0%,transparent 60%);}
.dsr-bc-content{position:relative;z-index:1;}
.dsr-bc-content h3{color:#fff;font-size:1.3rem;margin-bottom:.6rem;}
.dsr-bc-content p{color:rgba(255,255,255,.55);font-size:.85rem;line-height:1.65;margin-bottom:1.5rem;}
.dsr-book-btn{width:100%;justify-content:center;}
.dsr-trust{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem;}
.dsr-trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:.78rem;}
.dsr-trust-item::before{content:'✓';color:#4ade80;font-weight:700;}
.dsr-info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--rl);padding:1.75rem;}
.dsr-info-card h4{font-size:1rem;margin-bottom:1rem;}
.dsr-details{display:flex;flex-direction:column;gap:.85rem;}
.dsr-detail {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 10px;
}
.dsd-icon{width:32px;height:32px;border-radius:8px;background:var(--off);display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;}
.dsd-label{font-size:.72rem;color:var(--gray);text-transform:uppercase;letter-spacing:.06em;display:block;}
.dsd-value{font-size:.88rem;font-weight:600;color:var(--ink);}
.related-demos{margin-top:4px;}
.rd-label{font-size:.8rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem;}
.rd-items{display:flex;flex-direction:column;gap:12px;}
.rd-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:1rem;display:flex;gap:12px;cursor:pointer;transition:all .2s;}
.rd-item:hover{border-color:var(--blue);background:rgba(24,71,241,.02);}
.rd-thumb{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.rd-text h4{font-size:.85rem;font-weight:600;margin-bottom:.2rem;color:var(--ink);}
.rd-text span{font-size:.75rem;color:var(--gray);}

/* ═══════ VIDEO POPUP ═══════ */
#video-popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1200;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
#video-popup.open{display:flex;animation:fadeIn .3s ease;}
.vp-container{width:100%;max-width:860px;margin:0 20px;position:relative;}
.vp-close{position:absolute;top:-48px;right:0;width:36px;height:36px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:1rem;transition:background .2s;}
.vp-close:hover{background:rgba(255,255,255,.2);}
.vp-frame{background:var(--ink);border-radius:var(--rl);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.vp-frame-inner{color:rgba(255,255,255,.5);text-align:center;}
.vp-frame-inner .big-icon{font-size:4rem;margin-bottom:1rem;}
.vp-frame-inner p{font-size:.9rem;line-height:1.6;}

/* ═══════ BOOK DEMO POPUP ═══════ */
#book-popup{display:none;position:fixed;inset:0;background:rgba(7,9,15,.85);z-index:1200;align-items:center;justify-content:center;backdrop-filter:blur(10px);}
#book-popup.open{display:flex;animation:fadeIn .35s var(--ease);}
@keyframes fadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.bp-modal{background:var(--white);border-radius:28px;width:100%;max-width:880px;margin:0 20px;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;box-shadow:0 40px 100px rgba(0,0,0,.4);position:relative;}
.bp-left{background:var(--ink);padding:3rem 2.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;}
.bp-left-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(24,71,241,.3) 0%,transparent 60%);}
.bp-left-orb{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(24,71,241,.3) 0%,transparent 70%);bottom:-100px;right:-80px;filter:blur(50px);}
.bp-left-content{position:relative;z-index:1;}
.bp-logo{height:36px;margin-bottom:2rem;filter:brightness(0) invert(1);opacity:.8;}
.bp-left h2{color:#fff;font-size:1.75rem;line-height:1.2;margin-bottom:.75rem;}
.bp-left h2 span{color:#60a5fa;}
.bp-left p{color:rgba(255,255,255,.5);font-size:.9rem;line-height:1.7;}
.bp-perks{display:flex;flex-direction:column;gap:.75rem;margin-top:1.75rem;position:relative;z-index:1;}
.bp-perk{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.65);font-size:.85rem;}
.bp-perk-icon{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;}
.bp-coffee{margin-top:auto;position:relative;z-index:1;padding-top:2rem;}
.bp-coffee-img{width:120px;height:120px;background:linear-gradient(135deg,rgba(24,71,241,.2),rgba(24,71,241,.05));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;border:1px solid rgba(255,255,255,.1);}

.bp-right{padding:2.5rem;}
.bp-close{position:absolute;top:1.25rem;right:1.25rem;width:32px;height:32px;background:var(--off);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.85rem;color:var(--gray);transition:all .2s;z-index:10;}
.bp-close:hover{background:var(--ink);color:#fff;}
.bp-right h3{font-size:1.2rem;margin-bottom:.35rem;}
.bp-right .bp-subtitle{font-size:.85rem;color:var(--gray);margin-bottom:1.75rem;}
.bp-form{display:flex;flex-direction:column;gap:14px;}
.bp-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.f-group{display:flex;flex-direction:column;gap:5px;}
.f-group.full{grid-column:span 2;}
.f-label{font-size:.72rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;}
.f-input,.f-select,.f-textarea{background:var(--off);border:1.5px solid var(--border);border-radius:10px;padding:.7rem 1rem;font-family:var(--font-b);font-size:.88rem;color:var(--ink);outline:none;width:100%;transition:border-color .2s,background .2s;}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--blue);background:#fff;}
.f-input::placeholder,.f-textarea::placeholder{color:var(--gray);opacity:.7;}
.f-phone-row{display:flex;gap:8px;}
.f-country{background:var(--off);border:1.5px solid var(--border);border-radius:10px;padding:.7rem .75rem;font-family:var(--font-b);font-size:.85rem;color:var(--ink);outline:none;cursor:pointer;flex-shrink:0;transition:border-color .2s;}
.f-country:focus{border-color:var(--blue);}
.f-textarea{resize:vertical;min-height:80px;}
.f-checks{display:flex;gap:1rem;flex-wrap:wrap;}
.f-check{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--gray);cursor:pointer;}
.f-check input{width:14px;height:14px;accent-color:var(--blue);}
.f-submit{width:100%;justify-content:center;font-size:.95rem;margin-top:4px;}

/* ═══════ UTILITIES ═══════ */
.container{max-width:1240px;margin:0 auto;padding:0 28px;}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}

/* Back btn */
.back-btn{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:.85rem;font-weight:500;margin-bottom:1.5rem;cursor:pointer;transition:color .2s;}
.back-btn:hover{color:#fff;}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1024px){.demo-layout{grid-template-columns:260px 1fr}.demo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .demo-layout{grid-template-columns:1fr}.demo-sidebar{position:static}
  .inner-grid{grid-template-columns:1fr}.demo-sidebar-right{position:static}
  .bp-modal{grid-template-columns:1fr}.bp-left{display:none}
  .iph-grid-inner{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
}
@media(max-width:640px){.demo-grid{grid-template-columns:1fr}.bp-row{grid-template-columns:1fr}.bp-right{padding:1.5rem}}