Advertise - Sandblast Channel

<!doctype html>

<head>

<title>Sandblast Advertising Gateway — Build a Placement</title>

<style>

:root{

--bg:#03050c;--panel:#0a1022;--panel2:#101936;--line:rgba(92,146,255,.34);

--cyan:#23ddff;--blue:#4e79ff;--violet:#8d4dff;--pink:#e44cff;--gold:#f5cb71;

--text:#f7f9ff;--muted:#aeb9d5;--ok:#58efbd;--danger:#ff5c83;--radius:22px;

--shadow:0 24px 70px rgba(0,0,0,.52);--max:1480px;

}

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)}

body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font:14px/1.5 Inter,Segoe UI,Arial,sans-serif;background:

radial-gradient(circle at 10% 0,rgba(35,221,255,.18),transparent 24%),

radial-gradient(circle at 92% 2%,rgba(228,76,255,.18),transparent 25%),

radial-gradient(circle at 60% 50%,rgba(92,79,255,.12),transparent 36%),

linear-gradient(180deg,#03050c,#070b19 50%,#03050c)}

body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.58;background:

radial-gradient(circle at 12% 20%,#fff 0 1px,transparent 1.7px),

radial-gradient(circle at 68% 16%,#a9e8ff 0 1px,transparent 1.7px),

radial-gradient(circle at 88% 42%,#fff 0 1px,transparent 1.6px),

radial-gradient(circle at 34% 72%,#d9b3ff 0 1px,transparent 1.7px),

radial-gradient(circle at 74% 84%,#fff 0 1px,transparent 1.7px);

background-size:180px 170px,260px 230px,310px 280px,220px 250px,350px 320px;

animation:stars 30s linear infinite}

@keyframes stars{to{background-position:180px 170px,-260px 230px,310px -280px,-220px 250px,350px 320px}}

button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}

.wrap{width:min(var(--max),calc(100% - 34px));margin:auto}

.skip{position:fixed;left:12px;top:10px;z-index:200;padding:10px 14px;background:white;color:#050713;border-radius:9px;transform:translateY(-160%)}.skip:focus{transform:none}

.header{position:sticky;top:0;z-index:90;border-bottom:1px solid rgba(96,98,255,.25);background:rgba(3,5,12,.86);backdrop-filter:blur(18px)}

.nav{min-height:72px;display:flex;align-items:center;gap:18px}

.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.mark{width:41px;height:41px;border-radius:14px;display:grid;place-items:center;font-size:21px;font-weight:950;background:linear-gradient(145deg,var(--cyan),var(--violet),var(--pink));box-shadow:0 0 28px rgba(98,89,255,.48);transform:rotate(-6deg)}

.brand strong{font-size:19px;letter-spacing:.08em}.brand small{display:block;color:#b5c0dc;font-size:10px;letter-spacing:.14em;text-transform:uppercase}

.navlinks{margin-left:auto;display:flex;gap:7px}.navlinks a{padding:10px 13px;border-radius:999px;color:#cbd5ec;font-weight:780}.navlinks a:hover{background:rgba(82,114,255,.16);color:#fff}

.btn,.ghost{min-height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;font-weight:880;color:#fff}

.btn{border:1px solid rgba(76,207,255,.42);background:linear-gradient(105deg,#4b6eff,#8d45ee 58%,#db45ed);box-shadow:0 0 26px rgba(100,71,245,.28)}

.ghost{border:1px solid rgba(47,209,255,.36);background:rgba(8,19,45,.76)}

.btn:hover,.ghost:hover,.format:hover,.step:hover{transform:translateY(-2px)}

.hero{padding:52px 0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.75fr);gap:clamp(30px,5vw,78px);align-items:center}

.kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(43,216,255,.32);border-radius:999px;background:rgba(8,31,61,.48);color:#bcefff;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}

.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}

h1{margin:15px 0 10px;font-size:clamp(40px,5.2vw,74px);line-height:.96;letter-spacing:-.045em}

.grad{background:linear-gradient(90deg,#fff 0 25%,#c9f6ff 42%,var(--cyan) 55%,#7b7cff 72%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}

.lead{max-width:720px;margin:0;color:#c3cce1;font-size:clamp(16px,1.45vw,19px);line-height:1.65}

.hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:21px}

.hero-card{position:relative;min-height:320px;border:1px solid rgba(69,199,255,.38);border-radius:28px;overflow:hidden;background:

radial-gradient(circle at 72% 18%,rgba(228,76,255,.27),transparent 27%),

radial-gradient(circle at 26% 78%,rgba(35,221,255,.18),transparent 32%),

linear-gradient(145deg,rgba(14,23,57,.97),rgba(5,7,19,.98));box-shadow:var(--shadow)}

.hero-card:before{content:"";position:absolute;width:230px;height:230px;right:9%;top:10%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#f7ceff 0 2%,#a64eff 11%,#322080 40%,#090b27 72%,#02040c);box-shadow:0 0 80px rgba(170,70,255,.38),inset -32px -25px 60px rgba(0,0,0,.6)}

.orbit{position:absolute;right:-3%;top:41%;width:78%;height:25%;border:2px solid rgba(65,215,255,.55);border-left-color:transparent;border-right-color:transparent;border-radius:50%;transform:rotate(-13deg);box-shadow:0 0 22px rgba(50,210,255,.28)}

.floats{position:absolute;inset:0}.chip{position:absolute;padding:9px 12px;border:1px solid rgba(109,137,255,.42);border-radius:999px;background:rgba(3,6,17,.82);font-size:11px;font-weight:850;box-shadow:0 10px 28px rgba(0,0,0,.3)}.chip:nth-child(1){left:8%;top:14%}.chip:nth-child(2){right:8%;top:12%}.chip:nth-child(3){left:9%;bottom:14%}.chip:nth-child(4){right:10%;bottom:13%}

.section{padding:34px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:17px}.section-head h2{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.025em}.section-head p{margin:6px 0 0;color:var(--muted)}

.eyebrow{display:block;margin-bottom:6px;color:#89eaff;font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}

.surface{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgba(12,20,49,.96),rgba(4,7,18,.98));box-shadow:var(--shadow)}

.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}

.format{position:relative;min-height:180px;padding:18px;text-align:left;color:#fff;border:1px solid rgba(86,110,205,.34);border-radius:18px;background:linear-gradient(150deg,rgba(16,28,68,.96),rgba(7,9,26,.98));transition:.2s;overflow:hidden}

.format:before{content:"";position:absolute;inset:auto -20% -55% 25%;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(91,77,255,.32),transparent 62%)}

.format.on{border-color:rgba(41,219,255,.85);box-shadow:0 0 0 2px rgba(41,219,255,.11),0 0 34px rgba(52,114,255,.2)}

.format .ico{width:47px;height:47px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;font-size:21px;background:linear-gradient(145deg,rgba(35,221,255,.3),rgba(141,77,255,.36));border:1px solid rgba(111,187,255,.35)}

.format b{display:block;font-size:16px}.format span{display:block;margin-top:6px;color:#9faccc;font-size:12px;line-height:1.45}

.builder{display:grid;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);gap:18px}

.controls{padding:19px}.controls h3,.preview h3{margin:0 0 15px;font-size:19px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{color:#bfc9df;font-size:11px;font-weight:850;letter-spacing:.05em}.field input,.field textarea,.field select{width:100%;border:1px solid rgba(93,115,203,.38);border-radius:12px;background:#070c1c;color:#fff;padding:12px 13px;outline:0}.field textarea{height:86px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(35,221,255,.74);box-shadow:0 0 18px rgba(35,221,255,.1)}

.range-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.range-row output{min-width:46px;text-align:right;color:#9feeff;font-weight:900}

.summary{margin-top:14px;padding:13px;border:1px solid rgba(86,111,203,.28);border-radius:14px;background:rgba(5,9,24,.72);color:#b7c2db;font-size:12px}.summary b{color:#fff}

.preview{padding:15px;display:grid;grid-template-rows:auto minmax(300px,1fr);gap:12px}.preview-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.badge{padding:6px 9px;border-radius:999px;border:1px solid rgba(90,239,190,.32);background:rgba(17,67,59,.42);color:#c8faea;font-size:10px;font-weight:900}

.stage{position:relative;min-height:330px;border:1px solid rgba(50,178,255,.44);border-radius:20px;overflow:hidden;background:

radial-gradient(circle at 70% 18%,rgba(228,76,255,.3),transparent 25%),

radial-gradient(circle at 22% 74%,rgba(35,221,255,.17),transparent 32%),

linear-gradient(145deg,#07162e,#180d48 60%,#090d22)}

.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 48%,rgba(3,5,13,.84))}

.browser{position:absolute;inset:7% 7% 11%;z-index:2;border:1px solid rgba(131,167,239,.45);border-radius:16px;background:#060a17;box-shadow:0 22px 50px rgba(0,0,0,.48);overflow:hidden}.browser-bar{height:31px;display:flex;gap:6px;align-items:center;padding:0 11px;border-bottom:1px solid rgba(99,120,200,.25);background:#0c1228}.browser-bar i{width:7px;height:7px;border-radius:50%;background:#5d6a95}

.mock{height:calc(100% - 31px);padding:16px;display:grid;grid-template-columns:1.15fr .85fr;gap:13px}.mock-copy{display:flex;flex-direction:column;justify-content:center}.mock-copy small{color:#94eaff;font-weight:900;letter-spacing:.13em}.mock-copy h4{margin:8px 0 6px;font-size:clamp(20px,2.2vw,33px);line-height:1}.mock-copy p{margin:0;color:#aeb9d5;font-size:12px}.mock-art{border-radius:14px;background:radial-gradient(circle at 70% 30%,rgba(228,76,255,.65),transparent 19%),radial-gradient(circle at 46% 56%,rgba(77,91,255,.57),transparent 32%),linear-gradient(145deg,#08172f,#251060);position:relative;overflow:hidden}.mock-art:after{content:"SANDBLAST";position:absolute;inset:0;display:grid;place-items:center;color:#dff7ff;font-size:clamp(12px,2vw,25px);font-weight:950;letter-spacing:.11em}

.ad-preview{position:absolute;z-index:4;left:10%;right:10%;bottom:8%;min-height:76px;padding:12px 15px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid rgba(245,203,113,.45);border-radius:14px;background:linear-gradient(100deg,rgba(4,8,20,.97),rgba(43,18,70,.94));box-shadow:0 16px 38px rgba(0,0,0,.48)}.ad-preview small{display:block;color:var(--gold);font-size:9px;font-weight:950;letter-spacing:.15em}.ad-preview b{display:block;margin:4px 0 2px;font-size:15px}.ad-preview span{color:#aeb9d5;font-size:11px}.ad-preview button{min-height:36px;border:1px solid rgba(40,215,255,.44);border-radius:10px;background:linear-gradient(100deg,#4b74ff,#a946e8);color:#fff;font-weight:900;padding:0 14px}

.stage.radio .browser,.stage.tv .browser,.stage.roku .browser{inset:10% 8% 18%}.stage.radio .mock{display:block;padding:0}.stage.radio .mock-copy{height:100%;padding:24px;background:radial-gradient(circle at 78% 30%,rgba(228,76,255,.25),transparent 28%),linear-gradient(145deg,#0b1833,#190d43)}.stage.radio .mock-art{display:none}.stage.radio .ad-preview{left:12%;right:12%;bottom:7%;grid-template-columns:48px 1fr auto}.stage.radio .ad-preview:before{content:"♫";width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),var(--violet));font-size:18px}

.stage.tv .browser,.stage.roku .browser{background:#02040a}.stage.tv .mock,.stage.roku .mock{display:block;padding:0}.stage.tv .mock-copy,.stage.roku .mock-copy{display:none}.stage.tv .mock-art,.stage.roku .mock-art{height:100%;border-radius:0;background:radial-gradient(circle at 70% 24%,rgba(35,221,255,.48),transparent 14%),radial-gradient(circle at 48% 54%,rgba(228,76,255,.42),transparent 30%),linear-gradient(145deg,#07142b,#271057)}.stage.tv .mock-art:after{content:"PROGRAMMING PREVIEW";font-size:clamp(14px,2vw,26px)}.stage.roku .mock-art:after{content:"SANDBLAST ON ROKU";font-size:clamp(14px,2vw,26px)}.stage.tv .ad-preview,.stage.roku .ad-preview{left:8%;right:8%;top:10%;bottom:auto;min-height:82px}.stage.tv .ad-preview small:before,.stage.roku .ad-preview small:before{content:"PRE-ROLL · "}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.step{padding:17px;border:1px solid rgba(82,107,197,.3);border-radius:17px;background:linear-gradient(150deg,rgba(14,23,56,.94),rgba(7,10,25,.97));transition:.2s}.step i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-weight:950;background:linear-gradient(145deg,var(--cyan),var(--violet));color:#050714}.step b{display:block;margin-top:14px}.step p{margin:5px 0 0;color:#9facc9;font-size:12px}

.matrix{overflow:auto}.matrix table{width:100%;border-collapse:collapse;min-width:720px}.matrix th,.matrix td{padding:13px 14px;border-bottom:1px solid rgba(83,101,173,.22);text-align:left}.matrix th{color:#8feaff;font-size:10px;letter-spacing:.11em;text-transform:uppercase}.matrix td{color:#bbc5db}.matrix td:first-child{color:#fff;font-weight:850}

.cta{margin:12px 0 38px;padding:28px;border:1px solid rgba(51,207,255,.36);border-radius:24px;background:radial-gradient(circle at 82% 0,rgba(228,76,255,.18),transparent 30%),linear-gradient(135deg,rgba(19,32,75,.96),rgba(49,18,91,.92));display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.cta h2{margin:0 0 7px;font-size:clamp(26px,3vw,38px)}.cta p{margin:0;color:#bec8df}.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

.footer{padding:24px 0 34px;border-top:1px solid rgba(82,83,161,.24);color:#8f9dbc;font-size:12px}.legal{display:flex;justify-content:space-between;gap:20px}

.toast{position:fixed;left:50%;bottom:22px;z-index:120;opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:.24s;padding:11px 15px;border:1px solid rgba(42,211,255,.42);border-radius:12px;background:#10182f;color:#fff;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}

.drawer{position:fixed;inset:0;z-index:110;display:none;background:rgba(1,3,10,.74);padding:18px}.drawer.show{display:grid;place-items:center}.drawer-card{width:min(680px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid rgba(59,205,255,.48);border-radius:22px;background:linear-gradient(150deg,#0d1733,#070a18);box-shadow:var(--shadow)}.drawer-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.drawer-head h3{margin:0;font-size:24px}.close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(95,116,205,.4);background:#080d1e;color:#fff}.review{margin-top:16px;display:grid;gap:10px}.review-row{padding:11px 12px;border:1px solid rgba(84,104,179,.26);border-radius:12px;background:rgba(5,9,22,.7)}.review-row small{display:block;color:#8eeaff;font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.review-row b{display:block;margin-top:4px}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(35,221,255,.86);outline-offset:3px}

@media(max-width:1100px){.formats,.steps{grid-template-columns:repeat(2,1fr)}.builder{grid-template-columns:1fr}.preview{min-height:460px}.hero{grid-template-columns:1fr .7fr}.navlinks{display:none}}

@media(max-width:760px){.wrap{width:min(100% - 22px,var(--max))}.hero{grid-template-columns:1fr;text-align:center;padding-top:36px}.hero-copy{margin:auto}.hero-actions{justify-content:center}.hero-card{min-height:250px}.section-head{align-items:flex-start;flex-direction:column}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.cta{grid-template-columns:1fr;text-align:center}.cta-actions{justify-content:center}.legal{flex-direction:column}.stage{min-height:300px}}

@media(max-width:520px){.brand small{display:none}.formats,.steps{grid-template-columns:1fr}.format{min-height:150px}.hero-card{min-height:220px}.chip{font-size:9px}.controls,.preview{padding:13px}.preview{grid-template-rows:auto minmax(260px,1fr)}.stage{min-height:270px}.mock{grid-template-columns:1fr}.mock-art{display:none}.ad-preview{left:6%;right:6%;grid-template-columns:1fr}.ad-preview button{width:100%}.stage.radio .ad-preview{left:6%;right:6%;grid-template-columns:42px 1fr}.stage.radio .ad-preview button{grid-column:1/-1}.stage.tv .ad-preview,.stage.roku .ad-preview{left:5%;right:5%}.cta-actions{display:grid}.cta-actions>*{width:100%}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Entryway palette: visually related to Sandblast, deliberately outside the core ecosystem */

:root{--bg:#090a08;--panel:#14150f;--panel2:#1b2119;--line:rgba(103,205,171,.3);--cyan:#50d7b0;--blue:#3ba58f;--violet:#9d713d;--pink:#d89a4b;--gold:#f2c06b;--text:#fffaf0;--muted:#bfc4b7;--ok:#72e6bc}

body{background:radial-gradient(circle at 8% 0,rgba(75,211,174,.16),transparent 25%),radial-gradient(circle at 94% 4%,rgba(224,151,68,.17),transparent 25%),radial-gradient(circle at 52% 48%,rgba(162,111,51,.1),transparent 38%),linear-gradient(180deg,#080906,#11130d 50%,#080906)}

body:before{opacity:.42;background:radial-gradient(circle at 12% 20%,#fff5d7 0 1px,transparent 1.7px),radial-gradient(circle at 68% 16%,#9bf1d5 0 1px,transparent 1.7px),radial-gradient(circle at 88% 42%,#f7c978 0 1px,transparent 1.6px),radial-gradient(circle at 34% 72%,#d8f4e6 0 1px,transparent 1.7px),radial-gradient(circle at 74% 84%,#fff 0 1px,transparent 1.7px)}

body:after{content:"";position:fixed;inset:-20% 20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 0 24%,rgba(75,211,174,.1) 33%,rgba(225,153,72,.13) 42%,transparent 58%);filter:blur(28px);animation:threshold 9s ease-in-out infinite alternate}

@keyframes threshold{to{transform:scale(1.07) translateY(2%);opacity:.72}}

.header{border-color:rgba(230,163,76,.25);background:rgba(8,9,6,.9)}

.mark{background:linear-gradient(145deg,#55ddb7,#d6a151 62%,#f2c06b);box-shadow:0 0 28px rgba(216,154,75,.34)}

.brand small,.eyebrow{color:#8ce1c4}.navlinks a:hover{background:rgba(76,192,154,.12)}

.btn{border-color:rgba(245,190,104,.48);background:linear-gradient(105deg,#237b69,#3ca98e 48%,#c68a43 100%);box-shadow:0 0 26px rgba(80,185,148,.2)}

.ghost{border-color:rgba(222,161,79,.4);background:rgba(27,24,15,.78)}

.kicker{border-color:rgba(82,216,177,.36);background:rgba(22,55,45,.52);color:#d5fff1}

.grad{background:linear-gradient(90deg,#fffaf0 0 23%,#f4d69a 41%,#e2a958 57%,#72ddb9 76%,#dffbf0);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero-card{border-color:rgba(231,172,91,.46);background:radial-gradient(circle at 75% 20%,rgba(226,154,71,.24),transparent 26%),radial-gradient(circle at 25% 80%,rgba(76,211,174,.17),transparent 32%),linear-gradient(145deg,#17180f,#0b0d08);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 38px rgba(207,147,70,.15)}

.hero-card:before{width:250px;height:250px;right:11%;top:8%;background:radial-gradient(circle,#070a07 0 40%,transparent 41%),conic-gradient(from 40deg,#4fd2ac,#f0bd68,#9a6737,#4fd2ac);box-shadow:0 0 70px rgba(78,211,173,.2),0 0 95px rgba(220,156,74,.2);animation:gateSpin 18s linear infinite}

.hero-card:after{content:"ENTRYWAY";position:absolute;right:20%;top:43%;z-index:2;color:#fff4d7;font-size:12px;font-weight:950;letter-spacing:.24em;text-shadow:0 0 18px rgba(244,193,106,.7)}

@keyframes gateSpin{to{transform:rotate(360deg)}}

.orbit{border-color:rgba(242,190,104,.58);border-left-color:transparent;border-right-color:transparent;box-shadow:0 0 24px rgba(85,218,180,.22)}

.chip{border-color:rgba(111,209,177,.38);background:rgba(10,12,8,.88);color:#fff8e9}

.surface{border-color:rgba(111,200,170,.3);background:linear-gradient(155deg,rgba(24,27,19,.97),rgba(8,10,7,.98))}

.format{border-color:rgba(137,164,129,.28);background:linear-gradient(150deg,rgba(30,34,23,.96),rgba(10,12,8,.98))}

.format:before{background:radial-gradient(circle,rgba(219,157,73,.25),transparent 62%)}

.format.on{border-color:rgba(83,218,177,.82);box-shadow:0 0 0 2px rgba(83,218,177,.1),0 0 34px rgba(211,151,69,.13)}

.format .ico{background:linear-gradient(145deg,rgba(77,210,173,.28),rgba(221,157,73,.33));border-color:rgba(213,169,103,.36)}

.field input,.field textarea,.field select{border-color:rgba(135,167,130,.34);background:#0d100b}.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(82,218,178,.72);box-shadow:0 0 18px rgba(82,218,178,.09)}

.summary{border-color:rgba(190,143,76,.3);background:rgba(17,18,12,.78)}

.handoff-note{margin:9px 1px 0;color:#9fa99a;font-size:11px;line-height:1.45}

.preview{border-color:rgba(224,163,78,.35);background:linear-gradient(155deg,rgba(19,22,18,.98),rgba(7,9,8,.98))}

.badge{border-color:rgba(78,218,177,.34);background:rgba(20,67,54,.42);color:#d3fff0}

/* The preview intentionally retains Sandblast's blue-violet ecosystem identity */

.stage{border-color:rgba(86,184,255,.44);background:radial-gradient(circle at 70% 18%,rgba(228,76,255,.3),transparent 25%),radial-gradient(circle at 22% 74%,rgba(35,221,255,.17),transparent 32%),linear-gradient(145deg,#07162e,#180d48 60%,#090d22)}

.steps .step{border-color:rgba(135,164,128,.27);background:linear-gradient(150deg,rgba(27,31,21,.95),rgba(10,12,8,.98))}

.step i{background:linear-gradient(145deg,#52d6b1,#d5a051)}

.cta{border-color:rgba(224,163,79,.4);background:radial-gradient(circle at 82% 0,rgba(224,153,68,.18),transparent 30%),radial-gradient(circle at 10% 100%,rgba(75,211,174,.13),transparent 34%),linear-gradient(135deg,rgba(31,36,24,.97),rgba(43,29,15,.94))}

.drawer-card{border-color:rgba(222,164,83,.5);background:linear-gradient(150deg,#1b2118,#0c0e09)}

.review-row{border-color:rgba(126,172,140,.26);background:rgba(11,13,9,.72)}

.review-row small{color:#82dfc0}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:rgba(84,220,179,.9)}

/* Synchronized cosmic gateway graphic */

.hero-card{isolation:isolate;min-height:340px;background:

radial-gradient(circle at 50% 48%,rgba(74,219,181,.14),transparent 23%),

radial-gradient(circle at 78% 16%,rgba(226,154,71,.2),transparent 25%),

radial-gradient(circle at 19% 80%,rgba(73,110,255,.15),transparent 29%),

linear-gradient(145deg,#10150f,#06090b 58%,#0a1016)}

.hero-card:before{content:"";position:absolute;inset:0;width:auto;height:auto;right:auto;top:auto;border-radius:0;z-index:0;box-shadow:none;background:

radial-gradient(circle at 12% 18%,#fff8dc 0 1px,transparent 1.6px),

radial-gradient(circle at 66% 16%,#98f4d5 0 1px,transparent 1.7px),

radial-gradient(circle at 88% 38%,#fff 0 1px,transparent 1.6px),

radial-gradient(circle at 31% 72%,#a8bdff 0 1px,transparent 1.7px),

radial-gradient(circle at 74% 82%,#f5c879 0 1px,transparent 1.7px);

background-size:105px 92px,157px 133px,211px 177px,139px 169px,247px 211px;

animation:gatewayStars 24s linear infinite}

.hero-card:after{content:"";position:absolute;inset:-28%;z-index:0;pointer-events:none;background:

conic-gradient(from 120deg at 50% 50%,transparent 0 19%,rgba(73,211,176,.14) 28%,rgba(91,101,255,.13) 37%,rgba(224,153,70,.14) 48%,transparent 61% 100%);

filter:blur(24px);mix-blend-mode:screen;animation:gatewayNebula 13s ease-in-out infinite alternate}

@keyframes gatewayStars{to{background-position:105px 92px,-157px 133px,211px -177px,-139px 169px,247px 211px}}

@keyframes gatewayNebula{to{transform:rotate(7deg) scale(1.08);opacity:.72}}

.portal{position:absolute;left:50%;top:50%;z-index:3;width:166px;height:166px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;border:1px solid rgba(242,192,107,.64);background:

radial-gradient(circle at 50% 50%,#050907 0 31%,rgba(10,28,23,.96) 32% 43%,rgba(70,211,173,.27) 44% 50%,transparent 51%),

conic-gradient(from 20deg,#4fd2ac,#f0bd68,#8162ff,#4fd2ac);

box-shadow:0 0 0 8px rgba(75,211,174,.05),0 0 42px rgba(75,211,174,.22),0 0 72px rgba(224,153,70,.2);animation:portalPulse 4.8s ease-in-out infinite}

.portal:before{content:"";position:absolute;inset:-17px;border:1px solid rgba(119,146,255,.34);border-left-color:rgba(80,216,178,.8);border-right-color:rgba(239,184,93,.8);border-radius:50%;animation:portalSpin 15s linear infinite}

.portal span{position:relative;z-index:2;color:#fff4d7;font-size:11px;font-weight:950;letter-spacing:.24em;text-shadow:0 0 18px rgba(244,193,106,.72)}

@keyframes portalSpin{to{transform:rotate(360deg)}}

@keyframes portalPulse{50%{box-shadow:0 0 0 11px rgba(75,211,174,.06),0 0 54px rgba(75,211,174,.28),0 0 88px rgba(224,153,70,.24)}}

.orbit{position:absolute;left:50%;top:50%;right:auto;z-index:1;border:1px solid rgba(116,209,184,.35);border-left-color:rgba(242,190,104,.66);border-right-color:rgba(121,128,255,.58);border-radius:50%;box-shadow:0 0 20px rgba(84,208,178,.13);pointer-events:none}

.orbit-a{width:76%;height:48%;transform:translate(-50%,-50%) rotate(-12deg)}

.orbit-b{width:56%;height:77%;transform:translate(-50%,-50%) rotate(57deg);opacity:.72}

.floats{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:28px 30px;gap:108px 28px}

.chip{position:static;width:174px;min-height:42px;padding:9px 13px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(111,209,177,.42);border-radius:999px;background:linear-gradient(100deg,rgba(8,12,10,.94),rgba(24,29,19,.88));color:#fff8e9;font-size:10px;font-weight:900;letter-spacing:.075em;line-height:1.2;box-shadow:0 12px 28px rgba(0,0,0,.32),inset 0 0 15px rgba(80,214,176,.04)}

.chip:nth-child(odd){justify-self:start}.chip:nth-child(even){justify-self:end}

.chip:nth-child(-n+2){align-self:start}.chip:nth-child(n+3){align-self:end}

@media(max-width:760px){.hero-card{min-height:300px}.portal{width:138px;height:138px}.floats{padding:20px;gap:88px 16px}.chip{width:150px;min-height:38px;font-size:9px;padding:8px 10px}}

@media(max-width:520px){.hero-card{min-height:270px}.portal{width:116px;height:116px}.portal span{font-size:9px;letter-spacing:.18em}.floats{padding:15px 13px;gap:76px 10px}.chip{width:128px;min-height:36px;font-size:8px;letter-spacing:.045em}.orbit-a{width:82%;height:45%}.orbit-b{width:53%;height:78%}}

.email-route{margin-top:15px;padding:11px 12px;border:1px solid rgba(82,218,178,.32);border-radius:12px;background:rgba(18,48,39,.48);color:#c9f8e8;font-size:12px}.email-route b{color:#fff}.email-route small{display:block;margin-top:4px;color:#9fd8c5}

</style>

</head>

<body>

<a class="skip" href="#main">Skip to main content</a>

<a class="brand" href="https://www.sandblast.channel/" aria-label="Sandblast home"><span class="mark">S</span><span><strong>SANDBLAST</strong><small>Ecosystem Entryway</small></span></a>

<nav class="navlinks" aria-label="Page navigation"><a href="#inventory">Inventory</a><a href="#builder">Build Demo</a><a href="#process">Process</a><a href="#contact">Contact</a></nav>

<a class="btn" href="#builder">Build a Demo</a>

</div>

</header>

<span class="kicker"><span class="dot"></span> Advertising gateway demonstration</span>

<h1><span class="grad">ENTER THE SANDBLAST ADVERTISING GATEWAY.</span></h1>

<p class="lead">Begin outside the entertainment environment, shape the campaign, then carry the approved details into Sandblast.channel, Radio, TV and Roku through one guided entryway.</p>

<div class="hero-actions"><a class="btn" href="#builder">▶ Build Your Placement</a><a class="ghost" href="#inventory">View Advertising Options</a></div>

</div>

<div class="hero-card" aria-hidden="true"><div class="orbit orbit-a"></div><div class="orbit orbit-b"></div><div class="portal"><span>ENTRYWAY</span></div><div class="floats"><span class="chip">WEB PLACEMENT</span><span class="chip">RADIO SPONSORSHIP</span><span class="chip">TV PRE-ROLL</span><span class="chip">ROKU PRE-ROLL</span></div></div>

</section>

<div class="section-head"><div><span class="eyebrow">Choose the environment</span><h2>One campaign. Multiple Sandblast surfaces.</h2><p>Select a format to see how it works inside the live campaign builder.</p></div></div>

<button class="format on" data-format="web" aria-pressed="true"><span class="ico">▤</span><b>Sandblast.channel</b><span>Premium banners, in-page placements and sponsored ecosystem visibility.</span></button>

<button class="format" data-format="radio" aria-pressed="false"><span class="ico">♫</span><b>Sandblast Radio</b><span>Audio sponsorships, programme mentions and branded radio positioning.</span></button>

<button class="format" data-format="tv" aria-pressed="false"><span class="ico">▶</span><b>Sandblast TV Pre-Roll</b><span>Short campaign creative presented before selected live or scheduled programming.</span></button>

<button class="format" data-format="roku" aria-pressed="false"><span class="ico">R</span><b>Sandblast on Roku</b><span>Pre-roll visibility designed for the Roku viewing environment and connected audience.</span></button>

</div>

</section>

<div class="section-head"><div><span class="eyebrow">Interactive campaign builder</span><h2>Build the placement before the conversation.</h2><p>This demonstration does not publish an advertisement. It shows the advertiser how assets and positioning would work.</p></div></div>

<h3>Campaign details</h3>

<div class="field"><label for="contactName">Contact name</label><input id="contactName" maxlength="52" autocomplete="name" required placeholder="Your name"></div>

<div class="field"><label for="contactEmail">Business email</label><input id="contactEmail" type="email" maxlength="90" autocomplete="email" required placeholder="name@company.com"></div>

<div class="field"><label for="companyName">Company or organization</label><input id="companyName" maxlength="60" autocomplete="organization" placeholder="Company name"></div>

<div class="field"><label for="brandName">Brand name</label><input id="brandName" maxlength="42" value="Your Brand" required></div>

<div class="field"><label for="campaignGoal">Campaign goal</label><select id="campaignGoal"><option>Build awareness</option><option>Drive website visits</option><option>Promote an event</option><option>Generate conversations</option></select></div>

<div class="field full"><label for="headline">Headline</label><input id="headline" maxlength="66" value="Your message belongs in the Sandblast universe."></div>

<div class="field full"><label for="message">Supporting message</label><textarea id="message" maxlength="150">Reach connected audiences across web, radio, television and Roku.</textarea></div>

<div class="field"><label for="ctaText">Call to action</label><input id="ctaText" maxlength="24" value="Learn More"></div>

<div class="field"><label for="destination">Destination</label><input id="destination" type="url" placeholder="https://yourbrand.com"></div>

<div class="field full"><label for="length">Creative length or visibility</label><div class="range-row"><input id="length" type="range" min="5" max="30" value="15"><output id="lengthOut">15 sec</output></div></div>

</div>

<div class="summary" id="summary"><b>Selected:</b> Sandblast.channel premium placement · Build awareness · 15-second demonstration.</div><p class="handoff-note">The completed brief receives a campaign reference, remains saved in this session, and opens the existing Sandblast contact form in a separate tab.</p>

<div class="hero-actions"><button class="btn" type="button" id="reviewBtn">Review Placement</button><button class="ghost" type="reset" id="resetBtn">Reset Demo</button></div>

</form>

<div class="preview-top"><h3 id="previewHeading">Live placement preview</h3><span class="badge" id="previewBadge">WEB PLACEMENT</span></div>

<div class="browser"><div class="browser-bar"><i></i><i></i><i></i></div><div class="mock"><div class="mock-copy"><small>SANDBLAST NETWORK</small><h4>Connected entertainment in motion.</h4><p>Live media, radio, television, Roku and AI guidance.</p></div><div class="mock-art"></div></div></div>

<div class="ad-preview" id="adPreview"><div><small id="adType">PREMIUM WEBSITE PLACEMENT</small><b id="adBrand">Your Brand</b><span id="adMessage">Your message belongs in the Sandblast universe.</span></div><button id="adCta" type="button">Learn More</button></div>

</div>

</section>

</div>

</section>

<div class="section-head"><div><span class="eyebrow">How placement works</span><h2>A clear path from conversation to campaign.</h2></div></div>

<article class="step"><i>1</i><b>Select the surface</b><p>Choose website, radio, Sandblast TV or Sandblast on Roku inventory.</p></article>

<article class="step"><i>2</i><b>Provide the creative</b><p>Supply the approved message, destination, artwork, audio or video asset.</p></article>

<article class="step"><i>3</i><b>Review and approve</b><p>Sandblast confirms formatting, placement, timing and campaign readiness.</p></article>

<article class="step"><i>4</i><b>Activate and monitor</b><p>The approved campaign is positioned in the selected Sandblast environment.</p></article>

</div>

</section>

<div class="section-head"><div><span class="eyebrow">Placement matrix</span><h2>What advertisers can demonstrate.</h2></div></div>

<table>

<thead><tr><th>Surface</th><th>Placement type</th><th>Creative supplied</th><th>Viewer experience</th></tr></thead>

<tbody>

<tr><td>Sandblast.channel</td><td>Premium banner or in-page position</td><td>Artwork, headline, CTA and destination</td><td>Visible inside the connected web ecosystem</td></tr>

<tr><td>Sandblast Radio</td><td>Audio sponsor message or programme mention</td><td>Approved script or produced audio</td><td>Presented within the live listening experience</td></tr>

<tr><td>Sandblast TV</td><td>Pre-roll creative</td><td>Short-form video and campaign metadata</td><td>Displayed before selected television programming</td></tr>

<tr><td>Sandblast on Roku</td><td>Roku pre-roll creative</td><td>Connected-TV video and campaign metadata</td><td>Presented before supported Roku programming</td></tr>

</tbody>

</table>

</div>

</section>

<div><span class="eyebrow">Start the conversation</span><h2>Your campaign begins with the right placement.</h2><p>No public pricing is shown. Review the completed brief, then continue to the existing Sandblast contact form for placement, creative and campaign discussions.</p></div>

<div class="cta-actions"><button class="btn" id="contactBtn">Enter the Placement Conversation</button><a class="ghost" href="https://www.sandblast.channel/">Return to Sandblast</a></div>

</section>

</main>

<div class="drawer-head"><div><span class="eyebrow">Campaign review</span><h3 id="drawerTitle">Placement demonstration</h3></div><button class="close" id="closeDrawer" aria-label="Close review">×</button></div>

<div class="email-route">Secure contact route: <b>sandblastchannel.com/contact/</b><small>Your campaign reference and brief remain available in this browser session.</small></div><div class="review" id="review"></div>

<div class="hero-actions"><button class="btn" id="confirmBtn">Continue to Contact Form</button><button class="ghost" id="editBtn">Return to Builder</button></div>

</div>

window.SB_AD_CONTACT_URL=window.SB_AD_CONTACT_URL||"https://sandblastchannel.com/contact/";

(()=>{"use strict";

const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];

const formats={

web:{label:"Sandblast.channel",badge:"WEB PLACEMENT",type:"PREMIUM WEBSITE PLACEMENT",unit:"visibility"},

radio:{label:"Sandblast Radio",badge:"RADIO SPONSORSHIP",type:"LIVE RADIO SPONSOR MESSAGE",unit:"sec"},

tv:{label:"Sandblast TV",badge:"TV PRE-ROLL",type:"SANDBLAST TV PRE-ROLL",unit:"sec"},

roku:{label:"Sandblast on Roku",badge:"ROKU PRE-ROLL",type:"CONNECTED-TV PRE-ROLL",unit:"sec"}

};

let state={format:"web"};

const stage=$("#stage"),badge=$("#previewBadge"),type=$("#adType"),brand=$("#brandName"),headline=$("#headline"),message=$("#message"),cta=$("#ctaText"),goal=$("#campaignGoal"),length=$("#length"),out=$("#lengthOut"),summary=$("#summary"),drawer=$("#drawer"),review=$("#review"),contact=$("#contactName"),email=$("#contactEmail"),company=$("#companyName"),destination=$("#destination"),form=$("#campaignForm");

function esc(v){return String(v||"").replace(/[&<>"']/g,m=>({"&":"&","<":"<",">":">","\"":""","'":"'"}[m]))}

function toast(v){const t=$("#toast");t.textContent=v;t.classList.add("show");clearTimeout(t._x);t._x=setTimeout(()=>t.classList.remove("show"),2400)}

function update(){

const f=formats[state.format],n=brand.value.trim()||"Your Brand",h=headline.value.trim()||"Your campaign message.",m=message.value.trim();

stage.className="stage "+state.format;badge.textContent=f.badge;type.textContent=f.type;

$("#adBrand").textContent=n;$("#adMessage").textContent=h;$("#adCta").textContent=cta.value.trim()||"Learn More";

out.textContent=state.format==="web"?length.value+" sec view":length.value+" sec";

summary.innerHTML="<b>Selected:</b> "+esc(f.label)+" · "+esc(goal.value)+" · "+esc(out.textContent)+" demonstration.";

window.dispatchEvent(new CustomEvent("sandblast:advertising-demo",{detail:{format:state.format,brand:n,headline:h,message:m,goal:goal.value,length:+length.value}}));

}

$$(".format").forEach(b=>b.onclick=()=>{$$(".format").forEach(x=>{const on=x===b;x.classList.toggle("on",on);x.setAttribute("aria-pressed",String(on))});state.format=b.dataset.format;update();$("#builder").scrollIntoView({behavior:matchMedia("(prefers-reduced-motion:reduce)").matches?"auto":"smooth",block:"start"})});

[brand,headline,message,cta,goal,length,destination].forEach(x=>x.addEventListener(x===goal?"change":"input",update));

function payload(){

const f=formats[state.format],ref="SB-AD-"+Date.now().toString(36).toUpperCase();

return{reference:ref,createdAt:new Date().toISOString(),contact:contact.value.trim(),email:email.value.trim(),company:company.value.trim(),brand:brand.value.trim()||"Your Brand",surface:f.label,format:state.format,goal:goal.value,headline:headline.value.trim(),message:message.value.trim(),cta:cta.value.trim()||"Learn More",destination:destination.value.trim(),length:out.textContent,source:"sandblast-advertising-entryway"}

}

function routeInquiry(){

if(!form.reportValidity())return toast("Complete the required contact and campaign fields.");

const p=payload(),brief=[

"SANDBLAST ADVERTISING CAMPAIGN BRIEF",

"Campaign reference: "+p.reference,

"Contact: "+p.contact+" · "+p.email,

"Company: "+(p.company||"Not supplied"),

"Brand: "+p.brand,

"Surface: "+p.surface,

"Goal: "+p.goal,

"Length / visibility: "+p.length,

"Headline: "+(p.headline||"Not supplied"),

"Message: "+(p.message||"Not supplied"),

"CTA: "+p.cta,

"Destination: "+(p.destination||"To be confirmed")

].join("\n");

p.brief=brief;

try{sessionStorage.setItem("sb.ad.inquiry.v1",JSON.stringify(p))}catch(e){}

window.dispatchEvent(new CustomEvent("sandblast:advertising-inquiry",{detail:p}));

try{navigator.clipboard&&navigator.clipboard.writeText(brief).catch(()=>{})}catch(e){}

const w=window.open(window.SB_AD_CONTACT_URL,"_blank","noopener,noreferrer");

if(!w)return toast("The contact page was blocked. Allow pop-ups, then try again.");

toast("Contact form opened. Campaign reference: "+p.reference+".")

}

function openReview(){

if(!form.reportValidity())return;

const f=formats[state.format],rows=[

["Contact",contact.value.trim()],["Business email",email.value.trim()],["Company",company.value.trim()||"Not supplied"],["Brand",brand.value.trim()||"Your Brand"],["Surface",f.label],["Goal",goal.value],

["Headline",headline.value.trim()||"Your campaign message."],["Supporting message",message.value.trim()||"Not supplied"],

["Call to action",cta.value.trim()||"Learn More"],["Destination",$("#destination").value.trim()||"To be confirmed"],["Creative length",out.textContent]

];

review.innerHTML=rows.map(([a,b])=>'<div class="review-row"><small>'+esc(a)+'</small><b>'+esc(b)+'</b></div>').join("");

drawer.classList.add("show");drawer.setAttribute("aria-hidden","false");$("#closeDrawer").focus()

}

function closeReview(){drawer.classList.remove("show");drawer.setAttribute("aria-hidden","true");$("#reviewBtn").focus()}

$("#reviewBtn").onclick=openReview;$("#closeDrawer").onclick=closeReview;$("#editBtn").onclick=closeReview;

drawer.onclick=e=>{if(e.target===drawer)closeReview()};

document.addEventListener("keydown",e=>{if(e.key==="Escape"&&drawer.classList.contains("show"))closeReview()});

$("#confirmBtn").onclick=routeInquiry;

$("#contactBtn").onclick=()=>{$("#builder").scrollIntoView({behavior:"smooth",block:"start"});setTimeout(()=>{if(!contact.value.trim())contact.focus();else openReview()},450)};

$("#adCta").onclick=()=>{let v=destination.value.trim();if(!v)return toast("Add a valid advertiser destination to test this CTA.");try{let u=new URL(v);if(!/^https?:$/.test(u.protocol))throw 0;const w=window.open(u.href,"_blank");if(w)try{w.opener=null}catch(e){}else location.assign(u.href)}catch(e){toast("Use a complete http or https destination.")}};

$("#campaignForm").addEventListener("reset",()=>setTimeout(()=>{state.format="web";$$(".format").forEach((x,i)=>{x.classList.toggle("on",i===0);x.setAttribute("aria-pressed",String(i===0))});update();toast("Advertising gateway reset.")},0));

update();

})();

</script>

</body>

</html>