:root{--vvd-primary:#1266f1;--vvd-primary-dark:#0d52cc;--vvd-primary-light:#e8f0fe;--vvd-accent:#00b4d8;--vvd-text-dark:#0f172a;--vvd-text-body:#334155;--vvd-text-muted:#64748b;--vvd-bg-soft:#f8faff;--vvd-border:#e2e8f0;--vvd-radius:16px;--vvd-radius-sm:10px;--vvd-shadow:0 2px 16px rgba(18,102,241,.07);--vvd-shadow-hover:0 12px 40px rgba(18,102,241,.13)}.hero{border:1.5px solid var(--vvd-border);border-radius:var(--vvd-radius);box-shadow:0 4px 24px rgba(15,23,42,.05);margin-bottom:2.5rem;overflow:hidden;padding:2rem 3rem;position:relative}.hero:before{background:linear-gradient(90deg,var(--vvd-primary) 0,var(--vvd-accent) 100%);border-radius:var(--vvd-radius) var(--vvd-radius) 0 0;content:"";height:4px;left:0;position:absolute;right:0;top:0}.hero h1{color:var(--vvd-text-dark);font-size:2.05rem;font-weight:800;letter-spacing:-.02em;line-height:1.28;margin-bottom:1rem}.hero h1 .highlight{color:var(--vvd-primary);position:relative}.hero h1 .highlight:after{background:linear-gradient(90deg,var(--vvd-primary),var(--vvd-accent));border-radius:2px;bottom:-2px;content:"";height:3px;left:0;opacity:.4;position:absolute;right:0}.hero-time-badge{align-items:center;background:#fff7ed;border:1.5px solid #fed7aa;border-radius:20px;color:#c2410c;display:inline-flex;font-weight:700;gap:7px;padding:5px 14px}.hero-time-badge svg{height:18px;width:18px}.vvd-section{margin-bottom:2.5rem}code{font-size:1rem}.steps{display:flex;flex-direction:column;gap:0;position:relative}.steps:before{background:linear-gradient(180deg,var(--vvd-primary) 0,var(--vvd-accent) 100%);bottom:48px;content:"";left:23px;opacity:.2;position:absolute;top:48px;width:2px;z-index:0}.steps .step{align-items:flex-start;display:grid;gap:1.25rem;grid-template-columns:48px 1fr;padding:0 0 1.75rem;position:relative;z-index:1}.steps .step:last-child{padding-bottom:0}.steps .num{align-items:center;background:var(--vvd-primary);border-radius:50%;box-shadow:0 4px 14px rgba(18,102,241,.28);color:#fff;display:flex;flex-shrink:0;font-size:1.05rem;font-weight:800;height:48px;justify-content:center;position:relative;width:48px;z-index:1}.steps .label{color:var(--vvd-primary);font-weight:700;letter-spacing:.06em;margin-bottom:.2rem;text-transform:uppercase}.steps .title{color:var(--vvd-text-dark);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.4rem}.steps .desc{margin-bottom:.75rem}.steps .desc,.steps .tip{color:var(--vvd-text-body)}.steps .tip{align-items:flex-start;background:var(--vvd-bg-soft);border:1px solid var(--vvd-border);border-radius:var(--vvd-radius-sm);display:flex;font-size:.95rem;gap:7px;line-height:1.3;padding:.75rem 1rem}.steps .tip svg{color:var(--vvd-primary);flex-shrink:0;height:20px;width:20px}.steps .cta{align-items:center;background:var(--vvd-primary-light);border-radius:6px;display:inline-flex;font-weight:500;gap:6px;margin-top:.5rem;padding:5px 12px;text-decoration:none!important;transition:background .15s,transform .12s}.steps .cta,.steps .cta:hover{color:var(--vvd-primary)!important}.steps .cta:hover{background:#d0e4fd;transform:translateX(2px)}.steps .cta svg{height:13px;width:13px}.scenario{margin-top:-2rem}.scenario .tabs{border-bottom:2px solid var(--vvd-border);display:flex;gap:.5rem;margin-bottom:1.25rem;padding-bottom:0}.scenario .tabs .tab-btn{align-items:center;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--vvd-text-muted);cursor:pointer;display:inline-flex;font-weight:700;gap:6px;margin-bottom:-2px;padding:.6rem 1.2rem;transition:color .18s,border-color .18s}.scenario .tabs .tab-btn svg{height:16px;width:16px}.scenario .tabs .tab-btn.active{border-bottom-color:var(--vvd-primary);color:var(--vvd-primary)}.scenario .panel{display:none}.scenario .panel.active{display:block}.scenario .panel .card{background:#fff;border:1.5px solid var(--vvd-border);border-radius:var(--vvd-radius);overflow:hidden}.scenario .panel .header{align-items:center;background:var(--vvd-bg-soft);border-bottom:1px solid var(--vvd-border);display:flex;gap:1rem;padding:1.4rem 1.75rem}.scenario .panel .icon{align-items:center;border-radius:12px;display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.scenario .panel .icon svg{height:24px;width:24px}.scenario .panel .icon.marketer{background:#dbeafe;color:var(--vvd-primary)}.scenario .panel .icon.owner{background:#d1fae5;color:#059669}.scenario .panel .header .who{color:var(--vvd-text-muted);font-size:.95rem;font-weight:700;letter-spacing:.05em;margin-bottom:2px;text-transform:uppercase}.scenario .panel .header .title{color:var(--vvd-text-dark);font-size:1.05rem;font-weight:800;margin-bottom:0}.scenario .panel .body{padding:1.5rem 1.75rem}.scenario .panel .body .flow{align-items:center;display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem}.scenario .panel .body .step{background:var(--vvd-bg-soft);border:1px solid var(--vvd-border);border-radius:6px;color:var(--vvd-text-body);font-size:.9rem;font-weight:500;padding:.35rem .7rem;white-space:nowrap}.scenario .panel .body .arrow{color:var(--vvd-text-muted);font-size:.9rem}.scenario .panel .result{background:linear-gradient(135deg,var(--vvd-primary-light) 0,#e0f2fe 100%);border-radius:var(--vvd-radius-sm);margin-bottom:1rem;padding:1rem 1.25rem}.scenario .panel .result .label{color:var(--vvd-primary);font-weight:700;letter-spacing:.06em;margin-bottom:.4rem;text-transform:uppercase}.scenario .panel .result .text{color:var(--vvd-text-dark);margin:0}.scenario .panel .features{display:flex;flex-wrap:wrap;gap:.4rem}.scenario .panel .features .chip{align-items:center;background:#fff;border:1.5px solid var(--vvd-border);border-radius:20px;color:var(--vvd-text-body);display:inline-flex;font-size:.9rem;font-weight:500;gap:5px;padding:4px 10px}.scenario .panel .features .chip svg{color:var(--vvd-primary);height:12px;width:12px}.next-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}.next-grid a{text-decoration:none!important}.next-grid .next-card{background:#fff;border:1.5px solid var(--vvd-border);border-radius:var(--vvd-radius-sm);color:inherit;display:block;overflow:hidden;padding:1.3rem 1.2rem 1.5rem;position:relative;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}.next-grid .next-card:before{background:var(--next-color,var(--vvd-primary));content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .18s}.next-grid .next-card:hover{border-color:var(--next-color,var(--vvd-primary));box-shadow:var(--vvd-shadow-hover);color:inherit;transform:translateY(-3px)}.next-grid .next-card:hover:before{opacity:1}.next-grid .next-card.video{--next-color:#dc2626}.next-grid .next-card.terms{--next-color:#0891b2}.next-grid .next-card.api{--next-color:#7c3aed}.next-grid .next-card .icon{align-items:center;background:var(--next-bg,var(--vvd-primary-light));border-radius:10px;display:flex;height:40px;justify-content:center;margin-bottom:.85rem;width:40px}.next-grid .next-card .icon svg{color:var(--next-color,var(--vvd-primary));height:20px;width:20px}.next-grid .next-card.video .icon{background:#fee2e2}.next-grid .next-card.terms .icon{background:#e0f2f9}.next-grid .next-card.api .icon{background:#ede9fe}.next-grid .next-card .title{color:var(--vvd-text-dark);font-size:1.2rem;font-weight:700;margin-bottom:.3rem}.next-grid .next-card .desc{color:var(--vvd-text-muted);margin:0}.next-grid .next-card .arrow{bottom:1.1rem;color:var(--vvd-border);position:absolute;right:1.1rem;transition:color .18s,transform .18s}.next-grid .next-card .arrow svg{height:14px;width:14px}.next-grid .next-card :hover .arrow{color:var(--next-color,var(--vvd-primary));transform:translateX(3px)}.cta{align-items:center;background:var(--vvd-text-dark);border-radius:var(--vvd-radius);display:grid;gap:2rem;grid-template-columns:1fr auto;margin-bottom:3rem;margin-top:4rem;overflow:hidden;padding:2.75rem 3rem;position:relative}.cta:before{background:radial-gradient(circle,rgba(18,102,241,.18) 0,transparent 70%);height:300px;right:-80px;top:-80px;width:300px}.cta:after,.cta:before{border-radius:50%;content:"";position:absolute}.cta:after{background:radial-gradient(circle,rgba(0,180,216,.12) 0,transparent 70%);bottom:-60px;height:200px;left:200px;width:200px}.cta .left{position:relative;z-index:1}.cta .cta-eyebrow{align-items:center;color:var(--vvd-accent);display:flex;font-weight:700;gap:6px;letter-spacing:.1em;margin-bottom:.6rem;text-transform:uppercase}.cta .cta-eyebrow:before{background:var(--vvd-accent);border-radius:2px;content:"";display:inline-block;height:2px;width:18px}.cta .title{color:#fff;font-size:1.65rem;font-weight:900;letter-spacing:-.025em;line-height:1.4;margin-bottom:.6rem}.cta .desc{color:hsla(0,0%,100%,.7);font-size:.95rem;margin-bottom:0}.cta .right{display:flex;flex-direction:column;flex-shrink:0;gap:1rem;position:relative;z-index:1}.cta .btn-cta-primary{align-items:center;background:var(--vvd-primary);border-radius:var(--vvd-radius-sm);box-shadow:0 4px 18px rgba(18,102,241,.35);color:#fff!important;display:inline-flex;font-size:.95rem;font-weight:700;gap:8px;justify-content:center;padding:.8rem 1.75rem;text-decoration:none!important;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap}.cta .btn-cta-primary:hover{background:var(--vvd-primary-dark);box-shadow:0 8px 28px rgba(18,102,241,.45);color:#fff!important;transform:translateY(-2px)}.cta .btn-cta-ghost{align-items:center;background:hsla(0,0%,100%,.07);border:1.5px solid hsla(0,0%,100%,.15);border-radius:var(--vvd-radius-sm);color:hsla(0,0%,100%,.8)!important;display:inline-flex;font-size:.9rem;font-weight:600;gap:7px;justify-content:center;padding:.7rem 1.75rem;text-decoration:none!important;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}.cta .btn-cta-ghost:hover{background:hsla(0,0%,100%,.12);border-color:hsla(0,0%,100%,.3);color:#fff!important}@media (max-width:1199px){.hero{padding:1rem 1.5rem}}@media (max-width:1024px){.next-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.cta{grid-template-columns:1fr;padding:2rem 1.75rem}.cta .right{flex-direction:row}}@media (max-width:860px){.next-grid{grid-template-columns:1fr}}@media (max-width:768px){.scenario .panel .header{padding:1.1rem 1.25rem}.scenario .panel .body{padding:1.25rem}}@media (max-width:767px){.hero{border:none;box-shadow:none;padding:0}.hero:before{background:none;border-radius:0}}@media (max-width:540px){.scenario .panel a.btn,.steps .cta{width:100%}.steps .cta{justify-content:center}.cta .right{flex-direction:column}.cta .title{font-size:1.35rem}}