/* Home Studio: scoped to the public landing, never the docs or account pages. */
:root { --bg:#090b12; --panel:#11141e; --line:rgba(177,184,216,.15); --text:#f4f4fa; --muted:#a5a9bd; --muted-2:#9095ac; --emerald:#bdabff; --line-strong:#b8a2ff; --container:min(1240px,calc(100% - 80px)); }
html { color-scheme:dark; background:#090b12; }
body.studio-home { background:#090b12; }
.studio-home ::selection { background:#b5a1fc; color:#100d20; }
.studio-home :focus-visible { outline:2px solid #c7baff; outline-offset:5px; }
.studio-home .site-header { background:rgba(9,11,18,.95); backdrop-filter:blur(12px); }
.studio-home .header-inner { min-height:82px; gap:24px; }
.studio-home .brand-horizontal-logo { width:150px; }
.studio-home .desktop-nav { gap:25px; }
.studio-home .desktop-nav a { font-size:12px; }
.studio-home .desktop-nav a.is-active::after { background:#c2afff; box-shadow:none; bottom:18px; left:30%; right:30%; }
.studio-home .button { border-radius:9px; min-height:48px; font-size:12px; letter-spacing:.01em; }
.studio-home .button-primary { background:#bfaeff; color:#17112b; box-shadow:0 4px 20px #ab8cff12; }
.studio-home .button-primary:hover { background:#d0c3ff; box-shadow:0 8px 25px #ab8cff25; }
.studio-home .button-secondary { background:#161823; border-color:#ffffff24; }
.studio-home .button-small { min-height:40px; }
.studio-home .hero-section { padding:88px 0 0; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 75% 50%,#44327b24,transparent 65%); }
#studio-canvas,.studio-hero-grain { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.studio-hero-grain { background-image:radial-gradient(#a8a0d31c .6px,transparent .6px); background-size:8px 8px; mask-image:linear-gradient(90deg,transparent,#000); }
.studio-home .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; align-items:center; }
.studio-home .hero-copy { max-width:620px; }
.studio-home .eyebrow { font-size:10px; letter-spacing:.17em; color:#d0c4fc; background:none; border:0; padding:0; }
.studio-home .eyebrow svg { width:14px; height:14px; }
.studio-home .hero-copy h1 { font-size:clamp(38px,4.3vw,64px); font-weight:800; letter-spacing:-.065em; line-height:1.12; margin-top:22px; }
.studio-home .hero-copy h1 span { color:#bcaff5; background:none; }
.studio-home .hero-copy > p { max-width:440px; margin-top:24px; font-size:16px; line-height:1.8; color:#b0b1c3; }
.studio-home .hero-actions { margin-top:30px; gap:12px; }
.studio-home .hero-benefits { margin-top:26px; gap:14px; font-size:10px; }
.studio-home .hero-benefits span { padding:0; border:0; gap:6px; }
.studio-home .benefit-icon { color:#b3a5ee; font-size:13px; }
.dv17-hero-stack { position:relative; min-width:0; padding-top:6px; }
.studio-console-heading { display:flex; align-items:center; justify-content:space-between; padding:0 4px 14px; color:#a19cb4; font:9px var(--mono); letter-spacing:.04em; }
.studio-console-heading > span:first-child { display:flex; gap:5px; }
.studio-console-heading i { width:6px; height:6px; border-radius:50%; background:#635d76; }
.studio-console-heading i:first-child { background:#b5a3ed; }
.studio-console-heading code { color:#8b839f; }
.studio-home .api-playground { border:1px solid #786a9d70; border-radius:16px; background:#10131df5; box-shadow:0 25px 70px #0005,0 0 70px #8961d417; }
.studio-home .api-playground::after { display:none; }
.studio-demo-note { display:flex; justify-content:space-between; align-items:center; padding:20px 20px 9px; font-size:14px; font-weight:700; }
.studio-demo-note span { color:#9298ab; font-size:10px; font-weight:400; }
.studio-home .playground-tabs { min-height:43px; padding:0 12px; }
.studio-home .playground-tabs button { padding:0 10px; font-size:10px; }
.studio-home .playground-tabs button.is-active::after { box-shadow:none; }
.studio-home .online-badge { font-size:9px; padding-right:7px; position:static; }
.studio-home .online-badge i { box-shadow:none; width:5px; height:5px; }
.studio-home .request-bar { padding:18px 16px 12px; gap:8px; grid-template-columns:66px minmax(0,1fr) auto; }
.studio-home .request-bar select,.studio-home .request-bar input { height:40px; background:#090c14; border-color:#ffffff19; border-radius:6px; font-size:11px; padding:0 10px; }
.studio-home .request-bar select { color:#77e4c2; }
.studio-home .request-submit { min-height:40px; padding:0 13px; font-size:11px; }
.studio-home .request-submit svg { width:13px; }
.studio-home .response-window { margin:0 16px; min-height:224px; max-height:340px; border-color:#ffffff0d; background:#090c14; border-radius:8px; scrollbar-width:thin; }
.studio-home .response-window pre { min-width:0; font-size:11px; padding:19px; line-height:1.9; }
.studio-home .response-meta { border:0; border-radius:0; margin:0 16px; padding:8px 0; min-height:47px; font:9px var(--mono); gap:12px; }
.studio-home .response-meta button { background:transparent; font-size:9px; border:0; }
.studio-home .json-key,.studio-home .code-keyword { color:#b9a8f4; }
.studio-home .json-string,.studio-home .code-string { color:#86d9bd; }
.studio-hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:58px; padding:22px 0; border-top:1px solid #ffffff0f; color:#9197aa; font-size:11px; }
.studio-hero-bottom b { color:#e4d9ff; font-family:var(--mono); }
.studio-hero-bottom > span > span { margin:0 12px; color:#776891; }
#studio-motion { border:0; background:none; color:#aaa2bd; font-size:10px; padding:10px; cursor:pointer; }
#studio-motion span { margin-left:7px; }
.studio-home .metrics-strip { margin-top:0; margin-bottom:66px; border:1px solid #ffffff12; border-radius:12px; background:#10131c; box-shadow:none; }
.studio-home .metrics-strip article { padding:23px 24px; gap:13px; }
.studio-home .metric-icon { width:34px; height:34px; background:none; color:#a597d1; }
.studio-home .metric-icon svg { width:22px; }
.studio-home .metrics-strip strong { font-size:25px; font-weight:700; font-variant-numeric:tabular-nums; }
.studio-home .metrics-strip small { font-size:10px; }
.studio-home .home-services-section { margin:0 auto 64px; }
.studio-home .services-panel { border:0; box-shadow:none; padding:0; background:none; }
.studio-home .section-kicker { color:#ad9ddb; font:600 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.studio-home h2 { font-size:clamp(27px,3vw,39px); line-height:1.22; letter-spacing:-.045em; margin-top:10px; }
.studio-home .section-heading p,.studio-home .dv20-section-head p { margin-top:12px; color:#9da2b7; font-size:13px; }
.studio-home .text-button { color:#c7b9f6; font-size:12px; }
.studio-home .section-heading { margin-bottom:27px; }
.studio-home .services-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.studio-home .service-card { position:relative; grid-template-columns:1fr; gap:20px; padding:24px; border:1px solid #ffffff14; border-radius:12px; background:#10131d; min-height:185px; transition:background .2s,border-color .2s,transform .2s; }
.studio-home .service-card:hover { background:#181929; border-color:#bba5fa77; transform:translateY(-4px); }
.studio-home .service-card h3 { font-size:14px; margin-bottom:9px; }
.studio-home .service-card p { color:#979db1; font-size:12px; line-height:1.7; }
.studio-home .service-card > b { display:block; position:absolute; top:25px; right:23px; color:#676c86; font-size:23px; }
.studio-home .service-icon { width:36px; height:36px; border-radius:9px; box-shadow:none; font-size:21px; }
.studio-brand-story { display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; padding-block:28px 76px; }
.studio-brand-art { overflow:hidden; border:1px solid #aa86e844; border-radius:16px; box-shadow:0 20px 60px #0003; }
.studio-brand-art img { width:100%; height:auto; }
.studio-story-copy h2 { font-size:clamp(30px,3.5vw,44px); margin:18px 0; }
.studio-story-copy p { color:#9da2b7; line-height:1.85; font-size:14px; max-width:430px; margin-bottom:23px; }
.dv20-section-head { display:flex; gap:24px; justify-content:space-between; align-items:end; margin-bottom:27px; }
.dv20-code-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dv20-code-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #ffffff18; border-radius:12px; background:#10131c; }
.dv20-code-card header { padding:20px; }
.dv20-code-icon { display:inline-grid; place-items:center; width:30px; height:30px; margin-bottom:18px; border:1px solid #b8a5ef33; border-radius:8px; color:#b8a5ef; font:600 12px var(--mono); }
.dv20-code-card h3 { font-size:13px; }
.dv20-code-card header p { font-size:11px; color:#999fb4; line-height:1.6; margin-top:8px; }
.dv20-code-card pre { flex:1; border-block:1px solid #ffffff0b; padding:17px 16px; margin:0; overflow-x:auto; scrollbar-width:thin; background:#0b0e16; color:#b9c0d7; font-size:9px; line-height:1.9; }
.dv20-code-card button { display:flex; justify-content:space-between; align-items:center; text-align:left; padding:14px 18px; border:0; background:none; color:#bcafde; font-size:11px; cursor:pointer; }
.dv20-code-card button:hover { background:#baa4ff0a; }
.studio-home .live-dashboard { margin-top:80px; padding:0; border:0; border-radius:0; box-shadow:none; background:none; }
.studio-home .live-dashboard-head { margin-bottom:28px; }
.studio-home .live-dashboard-head p { max-width:570px; font-size:13px; line-height:1.8; }
.studio-home .live-dashboard-state { font-size:9px; background:#142520; border-color:#67c6a128; color:#9cdec7; }
.studio-home .live-dashboard-state.is-offline { color:#ffb4c4; background:#321922; }
.studio-home .live-kpi,.studio-home .live-panel { background:#10131c; border-color:#ffffff15; border-radius:12px; }
.studio-home .live-kpi { padding:22px; }
.studio-home .live-kpi-label { font-size:11px; }
.studio-home .live-kpi small { font-size:10px; }
.studio-home .live-grid { grid-template-columns:1fr 1.25fr; gap:16px; }
.studio-home .live-panel-countries,.studio-home .live-panel-events { grid-column:auto; }
.studio-home .live-panel { padding:23px; }
.studio-home .live-panel-head h3 { font-size:14px; }
.studio-home .live-panel-head span,.studio-home .live-privacy { font-size:10px; }
.studio-home .live-route-main code,.studio-home .live-route-count,.studio-home .live-user-copy strong,.studio-home .live-user-total,.studio-home .live-country-row strong,.studio-home .live-country-row b { font-size:11px; }
.studio-home .live-user-copy small,.studio-home .live-event-copy strong,.studio-home .live-event-copy code { font-size:10px; }
.studio-home .live-event-time { font-size:9px; }
.studio-home .live-event-list { grid-template-columns:1fr; max-height:365px; overflow-y:auto; scrollbar-width:thin; }
.studio-home .live-user-row[data-plan] { transform:none; box-shadow:none; border-color:#ffffff15; }
.studio-home .live-user-row[data-plan] * { animation:none; text-shadow:none; }
.studio-home .live-user-row[data-plan] .live-role,.studio-home .live-user-row[data-plan] .live-user-avatar { box-shadow:none; transform:none; border-width:1px; }
.studio-home .live-user-row[data-plan] .vip-icon { animation:none; filter:none; }
.studio-home .live-user-row[data-plan="admin"] .live-user-copy * { font-family:var(--font); font-size:11px; }
.studio-home .live-role { font-size:8px!important; }
.studio-plan-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:44px; margin-top:75px; border:1px solid #8775b25e; border-radius:18px; background:radial-gradient(ellipse at 95% 100%,#64478a45,transparent 65%),#141321; }
.studio-plan-cta h2 { font-size:36px; }
.studio-plan-cta p { margin-top:16px; color:#aca8c0; font-size:13px; }
.studio-plan-actions { display:flex; flex-direction:column; align-items:center; gap:20px; flex-shrink:0; }
.studio-home .status-banner { margin:32px auto 64px; background:#10131a; box-shadow:none; border-color:#ffffff15; padding:26px; }
.studio-home .status-copy h2 { font-size:19px; }
.studio-home .status-copy p { font-size:11px; }
.studio-home .site-footer { padding-block:12px; background:#080a11; }
.studio-home .footer-grid { grid-template-columns:1.8fr repeat(3,1fr); gap:38px; }
.studio-home .footer-status { grid-column:1/-1; width:100%; display:flex; justify-content:space-between; padding:20px 0 0; border:0; border-top:1px solid #ffffff13; border-radius:0; background:none; }
.studio-home .footer-grid nav a { font-size:12px; }
.studio-home .footer-grid nav strong { font-size:12px; margin-bottom:10px; }
.studio-home .reveal { opacity:1; transform:none; }
.studio-home .mobile-menu { background:#11131f; }
@media(min-width:1600px) { .studio-home .hero-section { padding-top:112px; } }
@media(max-width:1150px) { :root { --container:calc(100% - 48px); } .studio-home .hero-grid { gap:32px; } .studio-home .header-actions { gap:12px; } .studio-home .desktop-nav { gap:18px; } .studio-home .hero-copy h1 { font-size:44px; } .studio-home .hero-benefits { gap:9px; font-size:9px; } .studio-home .service-card { padding:20px; } .dv20-code-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dv20-code-card pre { font-size:11px; } }
@media(max-width:1020px) { .studio-home .hero-grid { grid-template-columns:1fr; gap:45px; } .studio-home .hero-section { padding-top:62px; } .studio-home .hero-copy h1 { font-size:58px; } .studio-home .hero-copy > p { max-width:530px; } .dv17-hero-stack { width:min(620px,100%); margin:auto; } .studio-home .header-inner { min-height:72px; } .studio-home .hero-benefits { font-size:11px; justify-content:center; } .studio-home .metrics-strip { grid-template-columns:repeat(4,minmax(0,1fr)); } .studio-home .metrics-strip article { padding:22px 14px; border-bottom:0; } .studio-home .metric-icon { display:none; } .studio-home .metrics-strip article:nth-child(2) { border-right:1px solid var(--line); } .studio-brand-story { gap:32px; } .studio-home .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { :root { --container:calc(100% - 36px); } .studio-home .hero-section { padding-top:42px; } .studio-home .hero-copy { text-align:left; width:100%; } .studio-home .hero-copy h1 { font-size:clamp(36px,8.3vw,52px); margin-top:20px; } .studio-home .hero-copy > p { font-size:14px; margin-top:20px; } .studio-home .hero-actions { flex-direction:row; } .studio-home .hero-actions .button { width:auto; flex:1; padding:0 13px; font-size:11px; } .studio-home .hero-benefits { display:flex; justify-content:flex-start; gap:10px; font-size:9px; } .studio-home .hero-benefits span:last-child { display:none; } .studio-home .hero-grid { gap:34px; } .studio-hero-bottom { margin-top:30px; padding:16px 0; font-size:10px; } .studio-hero-bottom > span > span { margin:0 5px; } #studio-motion { font-size:0; padding:10px; } #studio-motion span { font-size:13px; } .studio-home .request-bar { grid-template-columns:60px minmax(0,1fr) auto; } .studio-home .request-submit { grid-column:auto; width:auto; } .studio-home .response-window pre { font-size:10px; padding:15px; } .studio-home .response-meta button { width:26px; font-size:0; } .studio-home .metrics-strip { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:45px; } .studio-home .metrics-strip article { padding:22px; } .studio-home .metrics-strip article:nth-child(-n+2) { border-bottom:1px solid var(--line); } .studio-home .metrics-strip article:nth-child(2) { border-right:0; } .studio-home .metrics-strip article:nth-child(3) { border-right:1px solid var(--line); } .studio-home .metrics-strip strong { font-size:25px; } .studio-home .section-heading,.dv20-section-head { align-items:flex-start; flex-direction:column; gap:16px; } .studio-home h2 { font-size:29px; } .studio-home .service-card { padding:18px; gap:17px; min-height:190px; } .studio-home .service-card p { font-size:11px; } .studio-brand-story { grid-template-columns:1fr; padding-block:0 50px; gap:27px; } .studio-story-copy h2 { font-size:35px; } .studio-home .home-services-section { margin-bottom:44px; } .dv20-code-grid { grid-template-columns:1fr; } .dv20-code-card header { display:flex; gap:15px; align-items:center; padding:18px; } .dv20-code-icon { margin:0; flex-shrink:0; } .dv20-code-card pre { font-size:11px; } .studio-home .live-dashboard { width:var(--container); margin-top:55px; } .studio-home .live-dashboard-head { align-items:flex-start; flex-direction:column; gap:16px; } .studio-home .live-grid { grid-template-columns:1fr; } .studio-home .live-kpi { padding:16px 13px; } .studio-home .live-kpi-label { font-size:10px; } .studio-home .live-kpi-label span:last-child { font-size:7px; } .studio-home .live-kpi strong { font-size:26px; } .studio-home .live-panel { padding:18px 13px; } .studio-home .live-privacy { flex-direction:column; align-items:flex-start; font-size:9px; } .studio-plan-cta { margin-top:48px; padding:26px; flex-direction:column; align-items:flex-start; gap:28px; } .studio-plan-cta h2 { font-size:30px; } .studio-plan-actions { align-items:flex-start; } .studio-home .status-banner { margin-bottom:45px; } .studio-home .status-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } .studio-home .footer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px 12px; } .studio-home .footer-brand { grid-column:1/-1; } .studio-home .footer-status { gap:15px; } }
@media(prefers-reduced-motion:reduce) { #studio-canvas { display:none; } .studio-home * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }