*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#00030a;color:#f6fbff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.edge-glow{position:fixed;left:0;top:0;bottom:0;width:3px;background:#55caff;box-shadow:0 0 15px #168fff;z-index:45}header{height:82px;display:flex;align-items:center;padding:0 4.5vw;background:#00030aeb;border-bottom:1px solid #176ca4;position:sticky;top:0;z-index:40;backdrop-filter:blur(15px)}.brand{display:grid;grid-template-columns:36px auto;grid-template-rows:30px 12px;gap:0 8px;align-items:center;color:white;text-decoration:none}.brand>span{grid-row:1/3;color:#b7edff;font-size:27px;text-shadow:0 0 8px white,0 0 22px #168fff}.brand>b{font-size:32px;letter-spacing:2px;background:linear-gradient(#fff,#8bdcff 34%,#169cff 50%,#004b99 75%,#e2f9ff);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 9px #168fff)}.brand small{font-size:7px;letter-spacing:2.6px;color:#c5e8ff}nav{display:flex;gap:26px;margin-left:auto}nav a,.footer-links a{color:#e4f5ff;text-decoration:none;font-size:10px;font-weight:900;letter-spacing:1px}.top-listen{margin-left:28px;padding:13px 19px;color:white;text-decoration:none;border:1px solid #70d2ff;font-size:10px;font-weight:900;box-shadow:0 0 20px #087fff55,inset 0 0 16px #087fff22}#menu{display:none;margin-left:auto;border:0;background:none;color:#fff;font-size:27px}
.hero{min-height:720px;padding:78px 4.5vw 50px;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 44%,#078fff42,transparent 28%),linear-gradient(112deg,#00030a,#020915 45%,#021832)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#31baff0a 1px,transparent 1px),linear-gradient(90deg,#31baff0a 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 86%,transparent)}.copy{z-index:5}.eyebrow,.section-head small,.license-copy small,.world-copy small,.manifesto>small{font-size:11px;letter-spacing:4px;color:#61c9ff;font-weight:900}.copy h1{margin:22px 0 20px;line-height:.72;letter-spacing:-7px;transform:perspective(750px) rotateY(-5deg)}.copy h1 span{display:block;font-size:clamp(70px,7.5vw,120px);background:linear-gradient(#fff,#eefaff 35%,#7d9bb9 50%,#fff 67%,#52697f);-webkit-background-clip:text;color:transparent;text-shadow:4px 5px 0 #e2f8ff33,8px 10px 0 #152b42,13px 16px 24px #000}.copy h1 em{display:block;font-size:clamp(95px,10vw,155px);font-style:italic;background:linear-gradient(#eaffff 0,#6fd6ff 20%,#1da5ff 43%,#0065d6 68%,#9fe4ff 100%);-webkit-background-clip:text;color:transparent;text-shadow:0 0 3px #fff,0 0 10px #4cc8ff,0 0 28px #078fff,5px 6px 0 #0061c4,10px 12px 0 #003166,15px 18px 28px #000}.frequency-label{display:flex;gap:12px;align-items:center;margin:4px 0 22px}.frequency-label i{height:1px;flex:1;max-width:90px;background:#49c2ff}.frequency-label b{font-size:9px;letter-spacing:3px;color:#d7f5ff}.lead{color:#c8d9e8;font-size:17px;line-height:1.65}.actions{display:flex;gap:13px;margin-top:27px}.actions a{padding:16px 24px;color:#fff;text-decoration:none;font-size:11px;font-weight:900;border:1px solid #3b92cf;background:#020913}.actions .primary{background:linear-gradient(145deg,#62d1ff,#168fff 45%,#004da8);border-color:#d9f6ff;box-shadow:0 0 10px #fff5,0 0 27px #168fff88}.signal{margin-top:24px;color:#499ac8;font:700 7px monospace;letter-spacing:1.5px}.signal b{color:#bfeeff;margin:0 6px}
.hero-art{height:560px;position:relative;display:grid;place-items:center;z-index:4}.art-frame{position:absolute;inset:2% 0 0 2%;overflow:hidden;clip-path:polygon(9% 0,100% 0,100% 88%,91% 100%,5% 100%,0 91%,0 9%);border:1px solid #2eb4ff;box-shadow:0 0 40px #087fff35}.art-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#00030a 0,transparent 15%,transparent 78%,#00102755 100%),linear-gradient(0deg,#00030acc 0,transparent 20%)}.art-frame img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(1.1) contrast(1.08)}.art-ring{position:absolute;border-radius:50%;border:1px solid #62d1ff;box-shadow:0 0 18px #168fff}.r1{width:390px;height:390px;right:-60px;top:80px}.r2{width:300px;height:300px;right:-15px;top:125px;border-style:dashed;animation:spin 12s linear infinite}.hero-stamp{position:absolute;right:30px;bottom:32px;width:125px;height:125px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #7bd8ff;background:#001027cc;box-shadow:0 0 25px #168fff}.hero-stamp span{color:#dff8ff;font-size:25px}.hero-stamp b{font-size:37px;color:#53c5ff;text-shadow:0 0 13px #168fff}.hero-stamp small{font-size:6px;letter-spacing:2px}.bolt{position:absolute;width:2px;height:250px;background:linear-gradient(transparent,#fff,#35c4ff,transparent);box-shadow:0 0 9px white,0 0 25px #078fff;opacity:.24;clip-path:polygon(45% 0,100% 0,58% 44%,100% 44%,0 100%,38% 55%,0 55%)}.b1{right:47%;top:5%;transform:rotate(31deg)}.b2{right:6%;bottom:-3%;transform:rotate(-30deg)}.social{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;background:#020b18;border:1px solid #167bc0;box-shadow:0 0 20px #087fff44;z-index:8}.social span{width:40px;height:40px;display:grid;place-items:center;border-bottom:1px solid #16486e;color:#c9f2ff}
@keyframes spin{to{transform:rotate(360deg)}}.stats{margin:-16px 4.5vw 0;position:relative;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(#071420,#02060c);border:1px solid #1f87c7;box-shadow:8px 10px 0 #000,0 0 32px #078fff30}.stats article{padding:25px 20px;display:flex;gap:15px;align-items:center;border-right:1px solid #183d5b}.stats article>span{font-size:30px;color:#61ccff;text-shadow:0 0 15px #168fff}.stats b{font-size:27px}.stats small{display:block;font-size:8px;letter-spacing:1.5px}.stats em{display:block;font-style:normal;color:#61788d;font-size:8px;margin-top:5px}.section{padding:90px 5vw}.section-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px}.section-head h2,.license-copy h2,.world-copy h2,.manifesto h2{font-size:clamp(50px,6vw,82px);line-height:.87;letter-spacing:-4px;margin:10px 0 18px;text-shadow:5px 6px 0 #11243a}.section-head h2 em,.license-copy h2 em,.world-copy h2 em,.manifesto h2 em{font-style:normal;color:#4bc1ff;text-shadow:0 0 14px #168fff,5px 6px 0 #004b94}.section-head>a{color:#53c8ff;text-decoration:none;font-size:10px;font-weight:900;letter-spacing:1px}.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}.beat{background:#050b14;border:1px solid #176aa5;box-shadow:8px 10px 0 #000,0 20px 38px #000;transition:.3s}.beat:hover{transform:translateY(-9px);border-color:#6bd1ff;box-shadow:0 20px 40px #087fff25}.cover{height:250px;position:relative;overflow:hidden;background:#02060c}.cover img{width:100%;height:100%;object-fit:cover;transition:.4s}.beat:hover img{transform:scale(1.04)}.cover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#51c6ff;box-shadow:0 0 15px #168fff}.cover button{position:absolute;left:18px;bottom:18px;z-index:3;width:54px;height:54px;border:1px solid #e4f9ff;border-radius:50%;background:linear-gradient(#65d2ff,#087fff);color:white;font-size:18px;box-shadow:0 0 7px #fff6,0 0 25px #168fff}.beat-meta{display:flex;justify-content:space-between;align-items:end;padding:15px 17px 18px}.beat-meta h3{margin:0 0 5px}.beat-meta p{margin:0;color:#748a9f}.beat-meta strong{color:#fff;font-size:13px}.player{margin-top:27px;padding:17px 19px;display:grid;grid-template-columns:44px 1fr 2fr 44px;gap:14px;align-items:center;border:1px solid #168fff;background:#030b15;box-shadow:inset 0 0 22px #087fff18}.player-crown{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#087fff;box-shadow:0 0 18px #168fff}.player small{display:block;color:#657e94;font-size:8px;letter-spacing:2px}.player b{color:#50c5ff}.wave{height:32px;display:flex;gap:5px;align-items:center}.wave i{width:4px;height:8px;background:#58c9ff;box-shadow:0 0 7px #168fff}.player.active .wave i{animation:wave .45s infinite alternate}.player.active .wave i:nth-child(2n){animation-delay:.16s}.player.active .wave i:nth-child(3n){animation-delay:.3s}@keyframes wave{to{height:31px}}#pause{background:#07111c;border:1px solid #168fff;color:white;padding:9px}.services{background:linear-gradient(#00030a,#031229)}.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:32px}.service-grid article{min-height:210px;padding:24px 20px;position:relative;background:linear-gradient(145deg,#071320,#02060c);border:1px solid #175c90;box-shadow:7px 9px 0 #000;transition:.3s}.service-grid article:hover{transform:translateY(-8px);border-color:#58c8ff}.service-grid article>span{font-size:31px;color:#58c8ff;text-shadow:0 0 14px #168fff}.service-grid article>b{position:absolute;right:18px;top:20px;color:#168fff14;font-size:38px;-webkit-text-stroke:1px #168fff55}.service-grid h3{font-size:14px;margin-top:25px}.service-grid p{font-size:12px;color:#8296aa;line-height:1.65}.licensing{padding:95px 6vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:center;border-top:1px solid #154f75;border-bottom:1px solid #154f75;background:radial-gradient(circle at 82% 50%,#087fff25,transparent 28%),#01050c}.license-copy p{color:#859aaf;line-height:1.8}.license-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.license-stack article{padding:28px 20px;min-height:300px;background:#050c16;border:1px solid #175d92;box-shadow:8px 10px 0 #000}.license-stack article.featured{transform:translateY(-18px);border-color:#6cd2ff;box-shadow:0 0 30px #087fff30,8px 10px 0 #000}.license-stack span{font-size:40px;color:#168fff18;-webkit-text-stroke:1px #168fff55}.license-stack h3{color:#67ceff}.license-stack p{font-size:12px;line-height:1.7;color:#8195aa}.license-stack button{margin-top:18px;padding:11px;width:100%;background:#051323;border:1px solid #168fff;color:#dff6ff;font-weight:900;font-size:9px}.world{padding:100px 7vw;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:linear-gradient(115deg,#00142b,#00030a)}.world-emblem{height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;border:1px solid #217ab2;clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%);background:radial-gradient(circle,#168fff35,transparent 35%),repeating-linear-gradient(90deg,#02060c 0 35px,#0c467922 36px 37px);box-shadow:0 0 40px #087fff28}.world-emblem:before,.world-emblem:after{content:"";position:absolute;border-radius:50%;border:1px dashed #5bc9ff}.world-emblem:before{width:320px;height:320px}.world-emblem:after{width:240px;height:240px;animation:spin 10s linear infinite}.world-emblem div{font-size:70px;color:#dff8ff;text-shadow:0 0 10px #fff,0 0 25px #168fff}.world-emblem b{font-size:130px;font-style:italic;background:linear-gradient(#fff,#72d2ff 30%,#168fff 50%,#00468e 75%,#e5f9ff);-webkit-background-clip:text;color:transparent;text-shadow:7px 9px 0 #00346d,0 0 24px #168fff}.world-emblem span{font-size:8px;letter-spacing:4px}.world-copy p{color:#849aad;line-height:1.8}.manifesto{padding:110px 6vw;text-align:center;position:relative;overflow:hidden;min-height:580px;background:radial-gradient(circle,#087fff24,transparent 35%)}.ghost{position:absolute;left:50%;top:50px;transform:translateX(-50%);font-size:29vw;font-style:italic;font-weight:1000;color:#168fff06;-webkit-text-stroke:2px #168fff25}.manifesto>*:not(.ghost){position:relative}.manifesto p{font-style:italic;color:#52c4ff;letter-spacing:4px}footer{padding:48px 5vw;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-top:1px solid #17628e}.footer-links{display:flex;gap:22px}footer>small{grid-column:1/-1;color:#5f7588;font-size:8px;letter-spacing:1px}
@media(max-width:800px){header{height:72px;padding:0 20px}.top-listen{display:none}nav{display:none;position:absolute;top:72px;left:0;right:0;padding:24px;background:#010813;flex-direction:column}nav.open{display:flex}#menu{display:block}.hero{min-height:1120px;padding:68px 25px 40px;display:block}.eyebrow{font-size:10px;line-height:1.8}.copy h1 span{font-size:64px;letter-spacing:-5px}.copy h1 em{font-size:89px;letter-spacing:-5px}.lead{font-size:16px}.actions{flex-direction:column;width:230px}.actions a{text-align:center}.signal{line-height:1.8;max-width:320px}.hero-art{position:absolute;left:0;right:0;bottom:20px;height:490px}.art-frame{inset:0 0 0 18%}.art-frame img{object-position:55% center}.art-ring.r1{width:300px;height:300px;right:-110px;top:100px}.art-ring.r2{width:220px;height:220px;right:-70px;top:140px}.hero-stamp{right:12px;bottom:25px}.social{display:none}.stats{grid-template-columns:1fr 1fr;margin:20px 18px 0}.stats article{padding:17px 12px}.stats b{font-size:21px}.section{padding:70px 22px}.section-head{grid-template-columns:1fr}.section-head h2,.license-copy h2,.world-copy h2,.manifesto h2{font-size:49px;letter-spacing:-3px}.beats{display:flex;overflow-x:auto;padding:4px 7px 25px 0}.beat{min-width:80vw}.cover{height:300px}.player{grid-template-columns:40px 1fr 40px}.wave{display:none}.service-grid{display:flex;overflow-x:auto;padding-bottom:22px}.service-grid article{min-width:68vw}.licensing{grid-template-columns:1fr;padding:72px 22px}.license-stack{display:flex;overflow-x:auto;padding:20px 0}.license-stack article{min-width:76vw}.license-stack article.featured{transform:none}.world{grid-template-columns:1fr;padding:75px 22px}.world-emblem{height:370px;grid-row:2}.world-emblem b{font-size:100px}.world-emblem:before{width:270px;height:270px}.world-emblem:after{width:205px;height:205px}.manifesto{padding:100px 22px 80px;min-height:540px}.ghost{top:100px}footer{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}}
/* V9 TITAN TYPE SYSTEM — sharper, less generic, more premium */
:root{
--display: "Arial Black","Franklin Gothic Heavy","Impact","Haettenschweiler",sans-serif;
--condensed: "Arial Narrow","Aptos Narrow","Roboto Condensed","Helvetica Neue",sans-serif;
--body: "Aptos","Helvetica Neue","Segoe UI",Arial,sans-serif;
}
body{font-family:var(--body);letter-spacing:.01em}
.brand>b{
font-family:var(--display);
font-stretch:condensed;
font-style:italic;
font-size:34px;
letter-spacing:-2px;
transform:skewX(-7deg) scaleX(.9);
transform-origin:left center;
background:linear-gradient(180deg,#ffffff 0%,#bff2ff 15%,#39bfff 38%,#087fff 54%,#003c85 72%,#7fdcff 88%,#fff 100%);
-webkit-background-clip:text;color:transparent;
-webkit-text-stroke:.45px #d9f8ff;
filter:drop-shadow(3px 4px 0 #002f66) drop-shadow(0 0 11px #168fff);
}
.brand small{font-family:var(--condensed);font-weight:800;letter-spacing:3.4px}
nav a,.footer-links a,.top-listen{font-family:var(--condensed);letter-spacing:1.7px}
.eyebrow,.section-head small,.license-copy small,.world-copy small,.manifesto>small{
font-family:var(--condensed);font-style:italic;letter-spacing:5px
}
.copy h1{
font-family:var(--display);
text-transform:uppercase;
transform:perspective(900px) rotateY(-7deg) skewX(-4deg);
transform-origin:left center;
}
.copy h1 span{
letter-spacing:-8px;
-webkit-text-stroke:1px #eaf9ff;
background:linear-gradient(180deg,#fff 0%,#d8e3ed 22%,#788c9f 46%,#f9fdff 51%,#4b6177 68%,#c8d9e7 86%,#fff 100%);
-webkit-background-clip:text;color:transparent;
text-shadow:5px 6px 0 #26384a,10px 12px 0 #071421,16px 18px 28px #000;
}
.copy h1 em{
letter-spacing:-10px;
-webkit-text-stroke:1.2px #c9f6ff;
background:linear-gradient(180deg,#efffff 0%,#78ddff 13%,#18aaff 31%,#0074ed 50%,#0049a5 68%,#159cff 82%,#d8fbff 100%);
-webkit-background-clip:text;color:transparent;
text-shadow:0 0 4px #fff,0 0 14px #34bdff,0 0 35px #087fff,6px 7px 0 #0056b9,12px 14px 0 #002e66,19px 22px 35px #000;
}
.frequency-label b,.actions a,.stats b,.stats small,.beat-meta h3,.service-grid h3,.license-stack h3{
font-family:var(--condensed);font-weight:900;letter-spacing:1px
}
.section-head h2,.license-copy h2,.world-copy h2,.manifesto h2{
font-family:var(--display);
font-stretch:condensed;
transform:skewX(-3deg);
letter-spacing:-5px;
}
.lead,.service-grid p,.license-stack p,.world-copy p{font-family:var(--body);font-weight:400}
@media(max-width:800px){
.brand>b{font-size:35px;letter-spacing:-2.5px}
.brand small{letter-spacing:3px}
.copy h1{transform:skewX(-4deg)}
.copy h1 span{font-size:62px;letter-spacing:-6px}
.copy h1 em{font-size:88px;letter-spacing:-8px}
}
/* V10 — FORGED ELECTRIC: controlled light, heavier metal, tighter mobile composition */
.copy h1{
margin-top:10px;
transform:perspective(1000px) rotateY(-3deg) skewX(-2deg);
}
.copy h1 span{
font-weight:950;
letter-spacing:-6px;
-webkit-text-stroke:1.4px #eaf8ff;
background:
linear-gradient(180deg,#ffffff 0%,#cbd7e1 18%,#596b7c 38%,#f9fdff 48%,#8b9dac 56%,#273b50 74%,#cbd9e4 90%,#ffffff 100%);
-webkit-background-clip:text;color:transparent;
text-shadow:
2px 2px 0 #60788d,
5px 5px 0 #263b50,
9px 9px 0 #0b1a2a,
14px 15px 22px rgba(0,0,0,.85);
filter:drop-shadow(0 0 4px rgba(115,205,255,.35));
}
.copy h1 em{
font-weight:950;
letter-spacing:-7px;
-webkit-text-stroke:1.1px #9ce8ff;
background:
linear-gradient(180deg,#a9ecff 0%,#36bfff 12%,#087ff5 34%,#0059c7 52%,#00367e 68%,#0879e8 83%,#57d2ff 100%);
-webkit-background-clip:text;color:transparent;
text-shadow:
2px 2px 0 #087de8,
5px 5px 0 #0051b5,
9px 9px 0 #002d68,
14px 15px 0 #001a3c,
20px 22px 30px rgba(0,0,0,.92);
filter:drop-shadow(0 0 5px #1ba6ff) drop-shadow(0 0 13px rgba(0,119,255,.58));
}
.hero:before{
opacity:.72;
}
.frequency-label{margin-top:16px}
@media(max-width:800px){
.hero{padding-top:32px}
.hero-grid{gap:16px}
.copy{padding-top:0}
.eyebrow{margin-bottom:22px}
.copy h1{margin:0 0 20px;transform:skewX(-2deg)}
.copy h1 span{font-size:68px;line-height:.78;letter-spacing:-6px}
.copy h1 em{font-size:86px;line-height:.82;letter-spacing:-7px}
.lead{margin-top:28px}
}
/* V11 — TITAN UNIVERSE */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero:after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(circle at 78% 46%,rgba(0,139,255,.24),transparent 25%),
radial-gradient(circle at 55% 68%,rgba(0,74,255,.18),transparent 35%),
linear-gradient(118deg,transparent 0 55%,rgba(60,205,255,.09) 55.3%,transparent 55.7%),
linear-gradient(68deg,transparent 0 67%,rgba(64,179,255,.11) 67.2%,transparent 67.6%);
}
.hero-art{
position:absolute;right:-5%;top:20%;width:55%;height:76%;z-index:-1;
background:url("assets/titan-hero.jpg") center/cover no-repeat;
clip-path:polygon(14% 0,100% 0,100% 100%,0 100%,8% 56%);
opacity:.82;filter:saturate(1.25) contrast(1.12) drop-shadow(0 0 28px #087cff);
mask-image:linear-gradient(to left,#000 60%,transparent 100%);
-webkit-mask-image:linear-gradient(to left,#000 60%,transparent 100%);
}
.energy-ring{
position:absolute;right:3%;top:27%;width:420px;aspect-ratio:1;border:2px solid #168dff;
border-radius:50%;z-index:-1;opacity:.6;box-shadow:0 0 12px #008cff,inset 0 0 22px #006cff,0 0 50px #004dff;
}
.energy-ring:before,.energy-ring:after{
content:"";position:absolute;border-radius:50%;inset:8%;border:1px dashed #6bd5ff;
}
.energy-ring:after{inset:19%;border-style:solid;opacity:.45}
.copy h1{position:relative;z-index:3}
.copy h1 em{position:relative}
.copy h1 em:after{
content:"";position:absolute;left:-3%;right:-6%;bottom:-12px;height:4px;
background:linear-gradient(90deg,transparent,#68ddff 18%,#087cff 50%,#fff 74%,transparent);
box-shadow:0 0 9px #17a8ff,0 0 22px #006cff;transform:skewX(-25deg);
}
.shard-field{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.shard{position:absolute;width:10px;height:24px;background:linear-gradient(150deg,#baf4ff,#087fff 45%,#001b55);
clip-path:polygon(50% 0,100% 75%,38% 100%,0 48%);filter:drop-shadow(0 0 5px #18a7ff);opacity:.72}
.shard:nth-child(1){left:4%;top:38%;transform:rotate(24deg)}
.shard:nth-child(2){left:61%;top:25%;transform:rotate(72deg) scale(.7)}
.shard:nth-child(3){right:7%;top:52%;transform:rotate(-32deg) scale(1.2)}
.shard:nth-child(4){right:25%;top:67%;transform:rotate(116deg) scale(.55)}
.shard:nth-child(5){left:42%;top:74%;transform:rotate(-15deg) scale(.8)}
@media(max-width:800px){
.hero{padding-top:20px;min-height:1040px}
.hero-art{
display:block;right:-30%;top:38%;width:96%;height:58%;opacity:.42;
clip-path:none;background-position:48% center;
mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 68%,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 68%,transparent 100%);
}
.energy-ring{right:-42%;top:41%;width:390px;opacity:.52}
.copy{position:relative;z-index:4}
.copy h1 span{font-size:66px}
.copy h1 em{font-size:88px}
.lead,.actions,.signal-row{position:relative;z-index:5}
}
/* V12 — CROWN SURGE: bring the Titan into the hero, not below it */
.brand>b{font-size:38px;filter:drop-shadow(4px 5px 0 #002756) drop-shadow(0 0 15px #1aa8ff)}
.hero-art{
right:-1%;top:10%;width:61%;height:88%;opacity:.74;
background-position:48% 35%;
filter:saturate(1.35) contrast(1.18) brightness(.72) drop-shadow(0 0 35px #087cff);
}
.copy h1 span,.copy h1 em{position:relative}
.copy h1 span:before{
content:"";position:absolute;left:9%;top:43%;width:80%;height:2px;
background:linear-gradient(90deg,transparent,#fff,#28b9ff,#fff,transparent);
box-shadow:0 0 8px #52d4ff,0 0 20px #087cff;transform:rotate(-2deg);opacity:.62;
}
.copy h1 em:before{
content:"";position:absolute;left:-2%;top:56%;width:104%;height:3px;
background:linear-gradient(90deg,transparent,#2bc5ff 14%,#fff 37%,#087cff 62%,#a9efff 82%,transparent);
box-shadow:0 0 7px #fff,0 0 18px #159dff,0 0 32px #005cff;transform:rotate(1.5deg);opacity:.78;
}
.fore-shard{
position:absolute;z-index:8;width:18px;height:46px;
background:linear-gradient(135deg,#e3fbff 0%,#2dbbff 30%,#0757d9 63%,#00143d 100%);
clip-path:polygon(46% 0,100% 38%,67% 100%,0 68%);
filter:drop-shadow(0 0 7px #2dbbff);opacity:.85;pointer-events:none;
}
.fs1{left:3%;top:57%;transform:rotate(28deg)}
.fs2{right:4%;top:34%;transform:rotate(-34deg) scale(.72)}
.fs3{right:19%;top:64%;transform:rotate(61deg) scale(.52)}
@media(max-width:800px){
.brand>b{font-size:39px}
.hero{min-height:1010px}
.hero-art{
right:-27%;top:27%;width:108%;height:76%;opacity:.58;
background-position:48% 24%;
filter:saturate(1.38) contrast(1.2) brightness(.62) drop-shadow(0 0 30px #087cff);
mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 79%,transparent 100%);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 79%,transparent 100%);
}
.energy-ring{right:-36%;top:34%;width:410px;opacity:.6}
.lead{margin-top:22px}
.actions{margin-top:24px}
.signal-row{margin-top:26px}
.fs1{top:56%}.fs2{top:32%}.fs3{top:68%}
}
/* V13 — TITAN LOCK: fix header collision + make artwork frame the CTA instead of swallowing it */
.brand{min-width:290px;align-items:center}
.brand>b{font-size:34px;line-height:.78;transform:skew(-8deg);letter-spacing:-3px;margin-right:4px}
.brand>small{margin-left:0;letter-spacing:5px;white-space:nowrap;transform:translateY(8px)}
.copy h1{filter:drop-shadow(0 12px 18px rgba(0,0,0,.65))}
.copy h1 span{background:linear-gradient(180deg,#f8fdff 0%,#b8c7d6 46%,#6f8499 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.copy h1 em{background:linear-gradient(180deg,#4ec9ff 0%,#087cff 45%,#0450bd 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-art{opacity:.48;filter:saturate(1.25) contrast(1.22) brightness(.54) drop-shadow(0 0 28px #087cff)}
.lead,.actions,.signal-row{position:relative;z-index:12}
.lead{text-shadow:0 2px 10px #000,0 0 20px #001a3c}
.actions:before{
content:"";position:absolute;inset:-22px -20px -18px;z-index:-1;
background:radial-gradient(ellipse at center,rgba(0,10,26,.88) 0%,rgba(0,8,20,.72) 55%,transparent 78%);
filter:blur(2px)
}
.signal-row{background:linear-gradient(90deg,rgba(0,8,20,.72),rgba(0,20,45,.46),rgba(0,8,20,.72));padding:10px 8px;border-top:1px solid rgba(74,195,255,.16)}
@media(max-width:800px){
.brand{min-width:0;width:auto}
.brand>b{font-size:34px;letter-spacing:-3px}
.brand>small{font-size:9px;letter-spacing:3.5px;transform:translateY(7px)}
.hero{min-height:1030px}
.hero-art{
right:-31%;top:35%;width:108%;height:64%;opacity:.43;
background-position:51% 19%;
filter:saturate(1.3) contrast(1.22) brightness(.5) drop-shadow(0 0 24px #087cff);
}
.copy{padding-top:58px}
.lead{margin-top:28px}
.actions{margin-top:28px}
.signal-row{margin-top:30px}
}
/* V14 — TITAN EXPERIENCE: make the site move like a branded music world */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;background:linear-gradient(90deg,transparent 49.8%,rgba(74,195,255,.025) 50%,transparent 50.2%)}
header{box-shadow:0 10px 35px rgba(0,0,0,.38)}
.top-listen,.actions a,.section-head>a{transition:.25s}
.top-listen:hover,.actions a:hover{transform:translateY(-2px);box-shadow:0 0 9px #fff7,0 0 32px #087fff}
.hero .copy{animation:heroIn .8s ease-out both}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cover:before{content:"";position:absolute;z-index:2;inset:-80% -30%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 49%,rgba(65,195,255,.22) 52%,transparent 58%);transform:translateX(-60%);transition:.7s}
.beat:hover .cover:before{transform:translateX(65%)}
.beat-meta strong{padding:7px 9px;border:1px solid rgba(67,188,255,.25);background:#06111f;box-shadow:inset 0 0 12px rgba(0,128,255,.1)}
.service-grid article:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:#58c8ff;box-shadow:0 0 12px #168fff;transition:.35s}.service-grid article:hover:after{width:100%}
.release-room{min-height:650px;padding:90px 7vw;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:radial-gradient(circle at 70% 50%,#087fff35,transparent 26%),linear-gradient(120deg,#00030a,#00152f);border-top:1px solid #176ea6;border-bottom:1px solid #176ea6}
.release-kicker{position:absolute;left:7vw;top:55px;color:#5fcaff;font:900 9px var(--condensed);letter-spacing:4px}
.release-copy{z-index:3}.release-copy h2{font-family:var(--display);font-size:clamp(58px,7vw,100px);line-height:.82;letter-spacing:-6px;margin:0 0 25px;transform:skewX(-3deg);text-shadow:6px 7px 0 #10243a}.release-copy h2 em{font-style:normal;color:#45c1ff;text-shadow:0 0 14px #168fff,6px 7px 0 #00498f}.release-copy p{max-width:480px;color:#879daf;line-height:1.8}.release-room>a{position:absolute;left:7vw;bottom:65px;color:#c9f3ff;text-decoration:none;font:900 10px var(--condensed);letter-spacing:2px;border-bottom:1px solid #4fc5ff;padding-bottom:8px}
.release-disc{justify-self:center;width:min(42vw,470px);aspect-ratio:1;position:relative;display:grid;place-items:center;border-radius:50%;border:1px solid #59caff;box-shadow:0 0 15px #168fff,0 0 70px #005cff55,inset 0 0 55px #087fff38;background:repeating-radial-gradient(circle,#041020 0 8px,#061a35 9px 10px)}
.disc-core{width:47%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 30%,#dff9ff,#42c6ff 5%,#087fff 15%,#002b64 45%,#00040b 72%);border:1px solid #b8edff;box-shadow:0 0 12px #fff8,0 0 35px #168fff;z-index:3}.disc-core span{font-size:42px;color:#e6fbff;text-shadow:0 0 9px white}.disc-core b{font:italic 900 70px var(--display);background:linear-gradient(#fff,#73d5ff 30%,#168fff 50%,#004b99 75%,#e7faff);-webkit-background-clip:text;color:transparent;text-shadow:5px 6px 0 #00346f}.disc-core small{font-size:6px;letter-spacing:3px}.orbit{position:absolute;border-radius:50%;border:1px dashed #6cd4ff}.o1{inset:7%;animation:spin 12s linear infinite}.o2{inset:17%;animation:spin 8s linear infinite reverse}.o3{inset:-4%;border-style:solid;opacity:.3;box-shadow:0 0 25px #168fff}
.stats article,.beat,.service-grid article,.license-stack article{backdrop-filter:blur(5px)}
@media(max-width:800px){
.release-room{min-height:780px;padding:80px 22px;display:block}.release-kicker{left:22px;top:42px}.release-copy{padding-top:25px}.release-copy h2{font-size:57px;letter-spacing:-4px}.release-disc{width:86vw;margin:65px auto 0}.release-room>a{left:22px;bottom:32px}
.disc-core b{font-size:55px}
.stats{box-shadow:0 0 26px #087fff22}
}
/* V15 — SOUND VAULT */
:root{--ice:#dff7ff;--electric:#168fff;--deep:#020813}
.hero{position:relative}
.copy h1 span,.copy h1 em{filter:drop-shadow(0 7px 0 rgba(0,20,45,.82))}
.actions a:first-child{background:linear-gradient(110deg,#52d2ff 0%,#168fff 44%,#0553c7 100%);box-shadow:inset 0 0 0 1px #d9f8ff,0 0 20px #168fff66}
.vault-transition{height:150px;position:relative;overflow:hidden;background:linear-gradient(#00142a,#00040b);border-top:1px solid #168fff55;border-bottom:1px solid #168fff55;display:flex;align-items:center;justify-content:center}
.vault-transition:before,.vault-transition:after{content:"";position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,#000,transparent);z-index:2}.vault-transition:before{left:0}.vault-transition:after{right:0;transform:scaleX(-1)}
.vault-line{position:absolute;left:0;right:0;top:50%;height:1px;background:#168fff;box-shadow:0 0 12px #168fff,0 0 30px #087fff}
.vault-label{z-index:3;background:#000813;border:1px solid #168fff;padding:14px 24px;text-align:center;box-shadow:0 0 28px #087fff55;transform:skewX(-4deg)}.vault-label span{display:block;font:800 7px var(--condensed);letter-spacing:4px;color:#5ecbff}.vault-label b{display:block;margin-top:5px;font:900 17px var(--display);letter-spacing:2px;color:#e8faff}
.vault-wave{position:absolute;display:flex;gap:7px;align-items:center;height:90px;left:6%;right:6%;justify-content:space-between}.vault-wave i{width:2px;height:18px;background:#4ecaff;box-shadow:0 0 8px #168fff;animation:vwave 1.15s ease-in-out infinite alternate}.vault-wave i:nth-child(2n){height:55px;animation-delay:-.4s}.vault-wave i:nth-child(3n){height:32px;animation-delay:-.8s}.vault-wave i:nth-child(5n){height:76px;animation-delay:-.2s}@keyframes vwave{to{transform:scaleY(.28);opacity:.45}}
.beat{border-color:#1b75aa;background:linear-gradient(145deg,#07111d,#01040a);box-shadow:0 14px 32px #000, inset 0 0 25px #087fff0d}
.beat:hover{transform:translateY(-7px) perspective(700px) rotateX(2deg);box-shadow:0 18px 45px #000,0 0 22px #087fff44}
.beat-meta{position:relative}.beat-meta:before{content:"WAVE //";display:block;color:#48c8ff;font:800 7px var(--condensed);letter-spacing:3px;margin-bottom:7px}
.service-grid article{background:linear-gradient(155deg,#07111c,#010409 70%);border-color:#164c70}
.release-room{box-shadow:inset 0 35px 60px #0009,inset 0 -35px 60px #0009}
@media(max-width:800px){
.hero{min-height:860px!important}
.hero-art{top:31%!important;height:59%!important;right:-35%!important;opacity:.34!important;background-position:50% 20%!important}
.copy{padding-top:45px!important}
.copy h1{margin-bottom:12px}
.lead{margin-top:18px!important}
.actions{margin-top:22px!important}
.signal-row{margin-top:22px!important}
.vault-transition{height:125px}
.vault-label{padding:12px 18px}
.vault-label b{font-size:14px}
}
/* V16 — FREQUENCY ENGINE */
#beats,.beats,.catalog{position:relative}
.section-head h2{letter-spacing:-4px}
.beat{scroll-snap-align:start;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.beat.is-playing{border-color:#9be8ff;box-shadow:0 0 0 1px #e9fbff,0 0 25px #168fff,0 22px 48px #000}
.beat.is-playing .cover{filter:saturate(1.22) contrast(1.08)}
.beat.is-playing .cover:after{content:"NOW PLAYING";position:absolute;right:12px;top:12px;z-index:5;background:#000b17dd;border:1px solid #58caff;color:#dff8ff;padding:7px 9px;font:900 7px var(--condensed);letter-spacing:2px;box-shadow:0 0 15px #168fff}
.live-wave{height:28px;display:flex;align-items:center;gap:3px;margin-top:8px;overflow:hidden}
.live-wave i{width:2px;height:8px;background:#54cbff;box-shadow:0 0 6px #168fff;animation:freq .65s ease-in-out infinite alternate}
.live-wave i:nth-child(2n){height:19px;animation-delay:-.15s}.live-wave i:nth-child(3n){height:12px;animation-delay:-.35s}.live-wave i:nth-child(5n){height:25px;animation-delay:-.5s}
@keyframes freq{to{height:4px;opacity:.4}}
.player-state{display:block}
.dev-electric{color:#4bc9ff;text-shadow:0 0 14px #168fff,0 0 30px #087fff77}
.service-grid article{overflow:hidden}
.service-grid article:before{content:"";position:absolute;width:90px;height:90px;right:-45px;top:-45px;border:1px solid #168fff55;border-radius:50%;box-shadow:0 0 25px #087fff22}
.service-grid article h3{position:relative;z-index:2}
@media(max-width:800px){
.section-head h2{letter-spacing:-3px;line-height:.88}
.beat-grid,.beats-grid,.catalog-grid{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.beat{min-width:82vw}
.player,.audio-player,.now-playing{position:sticky!important;bottom:10px!important;z-index:40!important;box-shadow:0 0 0 1px #168fff,0 0 28px #087fff88,0 14px 35px #000!important;backdrop-filter:blur(18px)}
.service-grid article{min-height:210px}
}
/* V17 — MOBILE VAULT: polish + interaction, not redesign */
.swipe-hint{
display:none;
color:#55caff;
font:900 8px var(--condensed);
letter-spacing:3px;
margin:0 0 15px;
}
.beats,.beat-grid,.catalog-grid{
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.beats::-webkit-scrollbar,.beat-grid::-webkit-scrollbar,.catalog-grid::-webkit-scrollbar{display:none}
.beat{scroll-snap-align:start}
.player,.audio-player,.now-playing{
border-radius:0;
transition:.25s ease;
}
.player.active,.audio-player.active,.now-playing.active{
box-shadow:0 0 0 1px #9ee9ff,0 0 28px #168fff88,0 18px 44px #000!important;
}
.contact-cta{
padding:95px 7vw;
text-align:center;
background:
radial-gradient(circle at 50% 40%,#087fff26,transparent 30%),
linear-gradient(#00030a,#001329);
border-top:1px solid #176ea6;
border-bottom:1px solid #176ea6;
position:relative;
overflow:hidden;
}
.contact-cta:before{
content:"TTZ";
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) skewX(-8deg);
font:900 26vw var(--display);color:#168fff05;-webkit-text-stroke:2px #168fff20;
}
.contact-cta>*{position:relative;z-index:2}
.contact-cta small{color:#58caff;font:900 9px var(--condensed);letter-spacing:4px}
.contact-cta h2{font:900 clamp(52px,6.5vw,90px)/.85 var(--display);letter-spacing:-5px;margin:16px 0 20px}
.contact-cta h2 em{font-style:normal;color:#4cc8ff;text-shadow:0 0 14px #168fff,5px 6px 0 #004a91}
.contact-cta p{color:#8298ad}
.contact-actions{display:flex;justify-content:center;gap:14px;margin-top:30px}
.contact-actions a{padding:15px 22px;border:1px solid #168fff;color:white;text-decoration:none;font:900 10px var(--condensed);letter-spacing:1px;background:#030b15}
.contact-actions a:first-child{background:linear-gradient(145deg,#55caff,#168fff 45%,#004ca8);border-color:#d8f7ff;box-shadow:0 0 24px #087fff66}
@media(max-width:800px){
.swipe-hint{display:block}
.beats,.beat-grid,.catalog-grid{
display:flex!important;
overflow-x:auto!important;
gap:14px!important;
padding:0 18px 18px 0!important;
}
.beat{
min-width:72vw!important;
max-width:72vw!important;
}
.cover{height:255px!important}
.beat-meta{padding:14px 14px 16px!important}
.beat-meta h3{font-size:17px!important}
.beat-meta p{font-size:13px!important}
.beat-meta strong{font-size:13px!important}
.player,.audio-player,.now-playing{
position:sticky!important;
bottom:8px!important;
z-index:45!important;
margin-left:0!important;
margin-right:0!important;
padding:14px 14px!important;
backdrop-filter:blur(16px);
background:rgba(2,8,19,.92)!important;
}
.live-wave{height:22px!important}
.contact-cta{padding:78px 22px}
.contact-cta h2{font-size:48px;letter-spacing:-3px}
.contact-actions{flex-direction:column}
}
/* V18 — LIVE FREQUENCY */
.swipe-hint{display:none!important}
.vault-index{display:none}
@media(max-width:800px){
.vault-index{
display:flex;justify-content:space-between;align-items:center;
margin:0 0 18px;color:#63d5ff;font:900 8px var(--condensed);
letter-spacing:2.6px;
}
.vault-pulse{font-size:7px;color:#dff8ff}
.vault-pulse:before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:#52d7ff;margin-right:7px;box-shadow:0 0 10px #168fff;
animation:ttzPulse 1.4s infinite;
}
.beat{min-width:69vw!important;max-width:69vw!important;transition:.25s ease}
.beat.is-playing{transform:translateY(-5px);box-shadow:0 0 0 1px #7de5ff,0 0 30px #168fff66}
.beat.is-playing .cover:after{
content:"NOW PLAYING";position:absolute;top:12px;right:12px;
background:#0a8fff;color:white;padding:7px 9px;font:900 7px var(--condensed);
letter-spacing:1.6px;box-shadow:0 0 16px #168fff;
}
.cover{position:relative}
.beat .play{transition:.2s ease}
.beat.is-playing .play{transform:scale(.92);box-shadow:0 0 28px #4fd6ff}
.live-wave,.waveform{transform-origin:center}
.player.is-live .live-wave,.player.is-live .waveform,
.audio-player.is-live .live-wave,.audio-player.is-live .waveform,
.now-playing.is-live .live-wave,.now-playing.is-live .waveform{
animation:waveLive .62s ease-in-out infinite alternate;
filter:drop-shadow(0 0 7px #34bfff);
}
}
@keyframes ttzPulse{50%{opacity:.25;transform:scale(.7)}}
@keyframes waveLive{from{transform:scaleY(.7)}to{transform:scaleY(1.25)}}
/* V19 — TITAN AWAKENING */
body{position:relative;background:#00050c}
body>*:not(.titan-atmosphere){position:relative;z-index:2}
.titan-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.titan-ghost{position:absolute;width:100%;height:980px;background:url("assets/titan-v19-concept.png") center top/cover no-repeat;opacity:.14;filter:saturate(1.25) contrast(1.15)}
.titan-ghost-a{top:360px;right:-12%;transform:scale(1.18)}
.titan-ghost-b{top:2350px;left:-18%;transform:scale(1.25) scaleX(-1);opacity:.09}
.electric-fog{position:absolute;inset:0;background:
radial-gradient(circle at 86% 18%,#087fff35,transparent 17%),
radial-gradient(circle at 14% 45%,#00bfff20,transparent 16%),
radial-gradient(circle at 75% 70%,#087fff24,transparent 19%);
mix-blend-mode:screen}
.v19-section{padding:105px 6vw;border-top:1px solid #126da3;background:linear-gradient(180deg,rgba(0,5,12,.82),rgba(0,13,28,.88));overflow:hidden}
.section-kicker{font:900 9px var(--condensed);letter-spacing:4px;color:#5dd5ff;margin-bottom:18px}
.v19-section h2,.movement-v19 h2{font:900 clamp(56px,7vw,105px)/.82 var(--display);letter-spacing:-5px;margin:0 0 45px;color:#eef8ff}
.v19-section h2 em,.movement-v19 h2 em{font-style:normal;color:#3bbcff;text-shadow:0 0 22px #087fff}
.v19-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.v19-cards article{min-height:260px;padding:28px;border:1px solid #167bb7;background:linear-gradient(145deg,rgba(4,18,32,.94),rgba(0,5,12,.92));box-shadow:inset 0 0 30px #087fff0d}
.v19-cards article span{font:900 42px var(--display);color:#168fff44}
.v19-cards h3{font:900 32px var(--display);margin:22px 0 8px}
.v19-cards p{color:#90a4b8;line-height:1.6}
.v19-cards b{display:block;margin-top:24px;color:#59d2ff;font:900 9px var(--condensed);letter-spacing:2px}
.dev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dev-grid>div{padding:32px 20px;border:1px solid #125d8b;background:#020a13d9;text-align:center}
.dev-grid i{display:block;font-style:normal;font-size:40px;color:#3fc5ff;text-shadow:0 0 16px #168fff;margin-bottom:18px}
.dev-grid b{display:block;font:900 13px var(--condensed)}
.dev-grid small{display:block;color:#8194a7;margin-top:9px;line-height:1.4}
.movement-v19{min-height:570px;display:grid;place-items:center;text-align:center;padding:90px 7vw;border-top:1px solid #168fff;background:
linear-gradient(rgba(0,4,10,.4),rgba(0,4,10,.92)),
url("assets/titan-v19-concept.png") center 26%/cover no-repeat}
.movement-inner span{font:900 9px var(--condensed);letter-spacing:5px;color:#65d8ff}
.movement-inner p{color:#b5c5d5;font-size:18px}
@media(max-width:800px){
.titan-ghost{height:820px;opacity:.18;background-position:57% top}
.titan-ghost-a{top:260px;right:-25%}
.titan-ghost-b{top:2200px;left:-30%;opacity:.11}
.v19-section{padding:80px 22px}
.v19-section h2,.movement-v19 h2{font-size:48px;letter-spacing:-3px}
.v19-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
.v19-cards article{min-width:78vw;scroll-snap-align:start}
.dev-grid{grid-template-columns:1fr 1fr}
.movement-v19{min-height:620px;background-position:56% top}
/* compact player: preserve the artwork */
.player,.audio-player,.now-playing{padding:10px 11px!important;min-height:72px!important;bottom:5px!important}
.player img,.audio-player img,.now-playing img{width:48px!important;height:48px!important}
.live-wave,.waveform{height:16px!important}
}
/* V20 — TITAN FUSION: preserve V19's faint Titan presence across the dark negative space */
.titan-atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.titan-atmosphere::before,.titan-atmosphere::after{
content:"";position:absolute;left:0;right:0;height:1180px;
background-image:linear-gradient(180deg,rgba(0,5,12,.08),rgba(0,5,12,.54) 58%,#00050c 100%),url("assets/titan-v19-concept.png");
background-repeat:no-repeat;background-size:cover;background-position:50% 12%;
opacity:.24;filter:saturate(1.35) contrast(1.12) brightness(.82);mix-blend-mode:screen
}
.titan-atmosphere::before{top:1180px}
.titan-atmosphere::after{top:3600px;transform:scaleX(-1);opacity:.15;background-position:52% 10%}
.titan-ghost-a{top:240px!important;right:-8%!important;opacity:.21!important;filter:saturate(1.4) contrast(1.16) brightness(.78)!important}
.titan-ghost-b{top:2320px!important;left:-14%!important;opacity:.14!important}
.beats-section,.v19-section,.licensing,.world,.contact-cta{background-color:rgba(0,5,12,.72)!important;background-blend-mode:multiply}
.beats-section{background-image:radial-gradient(circle at 82% 16%,rgba(20,142,255,.12),transparent 32%),linear-gradient(180deg,rgba(0,5,12,.38),rgba(0,5,12,.78))!important}
.v19-section{background-image:linear-gradient(180deg,rgba(0,5,12,.58),rgba(0,13,28,.76))!important}
.movement-v19{background:linear-gradient(rgba(0,4,10,.30),rgba(0,4,10,.80)),url("assets/titan-v19-concept.png") 56% 12%/cover no-repeat!important}
@media(max-width:800px){
.titan-atmosphere::before,.titan-atmosphere::after{height:980px;background-size:auto 980px;background-position:58% top;opacity:.27}
.titan-atmosphere::before{top:980px}
.titan-atmosphere::after{top:3300px;opacity:.17;background-position:56% top}
.titan-ghost-a{top:220px!important;right:-28%!important;opacity:.22!important}
.titan-ghost-b{top:2050px!important;left:-34%!important;opacity:.15!important}
.beats-section,.v19-section,.licensing,.world,.contact-cta{background-color:rgba(0,5,12,.62)!important}
.movement-v19{background-position:58% top!important}
}
/* =========================================================
V21 — TITAN ASCENSION
Giant Titan + faint Titan atmosphere + tighter mobile flow
========================================================= */
.hero::before{
content:"";
position:absolute;
z-index:2;
right:-2%;
top:2%;
width:58%;
height:94%;
background:
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.55) 18%,transparent 52%),
linear-gradient(0deg,#00030a 0%,transparent 28%),
url("assets/giant-titan-v21.jpg") 72% 12%/cover no-repeat;
opacity:.82;
filter:saturate(1.2) contrast(1.12) brightness(.78);
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 80%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 80%,transparent 100%);
}
.hero .copy{position:relative;z-index:7}
.hero > .hero-art{opacity:.18!important;z-index:3!important}
.titan-atmosphere{z-index:-1}
.titan-ghost-a{opacity:.17!important}
.titan-ghost-b{opacity:.12!important}
.stats{margin-top:-32px}
.vault-transition{position:relative;z-index:5}
@media(max-width:800px){
.hero{
min-height:920px!important;
padding-bottom:70px!important;
background:linear-gradient(180deg,#00030a 0%,#020b17 55%,#001127 100%)!important;
}
.hero::before{
top:0;
right:-28%;
width:105%;
height:100%;
opacity:.48;
background:
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.78) 28%,transparent 67%),
linear-gradient(0deg,#00030a 0%,transparent 38%),
url("assets/giant-titan-v21.jpg") 68% 7%/cover no-repeat;
}
.hero .copy{max-width:100%}
.hero > .hero-art{
top:auto!important;
bottom:-30px!important;
right:-35%!important;
height:52%!important;
opacity:.14!important;
}
.copy h1 span{font-size:61px!important}
.copy h1 em{font-size:86px!important}
.stats{
margin:-12px 16px 0!important;
position:relative;
z-index:12;
}
.titan-ghost-a{
top:760px!important;
right:-36%!important;
opacity:.14!important;
}
.titan-ghost-b{
top:2500px!important;
left:-38%!important;
opacity:.10!important;
}
}
/* =========================================================
V22 — TITAN POWER
Stronger giant Titan visibility + tighter hero transition
========================================================= */
.hero::before{
background:
radial-gradient(circle at 76% 25%,rgba(0,153,255,.20),transparent 20%),
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.43) 20%,transparent 54%),
linear-gradient(0deg,#00030a 0%,transparent 26%),
url("assets/giant-titan-v22.jpg") 72% 10%/cover no-repeat!important;
opacity:.94!important;
filter:saturate(1.35) contrast(1.15) brightness(.94)!important;
}
.hero::after{
content:"";
position:absolute;
z-index:4;
top:9%;
right:4%;
width:48%;
height:58%;
pointer-events:none;
background:
radial-gradient(circle at 64% 24%,rgba(48,181,255,.34),transparent 3%),
radial-gradient(circle at 72% 24%,rgba(48,181,255,.30),transparent 3%),
radial-gradient(ellipse at 68% 32%,rgba(0,127,255,.18),transparent 32%);
filter:blur(2px);
mix-blend-mode:screen;
}
.stats{margin-top:-88px!important}
@media(max-width:800px){
.hero{
min-height:780px!important;
padding-bottom:36px!important;
}
.hero::before{
right:-19%!important;
width:102%!important;
height:92%!important;
opacity:.72!important;
background:
radial-gradient(circle at 69% 21%,rgba(0,157,255,.25),transparent 18%),
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.64) 30%,transparent 72%),
linear-gradient(0deg,#00030a 0%,transparent 40%),
url("assets/giant-titan-v22.jpg") 70% 6%/cover no-repeat!important;
filter:saturate(1.4) contrast(1.18) brightness(.98)!important;
}
.hero::after{
top:7%;
right:-5%;
width:76%;
height:48%;
}
.stats{
margin:-34px 14px 0!important;
}
.titan-ghost-a{opacity:.13!important}
}
/* V23 — TITAN COMMAND: mobile polish + stronger crowned Titan */
.hero::before{
background:
radial-gradient(circle at 78% 19%,rgba(50,190,255,.28),transparent 14%),
radial-gradient(ellipse at 76% 33%,rgba(0,115,255,.18),transparent 30%),
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.48) 22%,transparent 57%),
linear-gradient(0deg,#00030a 0%,transparent 28%),
url("assets/giant-titan-v23.jpg") 73% 8%/cover no-repeat!important;
}
.copy h1{filter:drop-shadow(0 16px 18px rgba(0,0,0,.72))}
.copy h1 em{filter:drop-shadow(0 0 13px rgba(0,150,255,.38))}
.vault{position:relative}
.vault::before{
content:"";
position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse at 82% 24%,rgba(0,132,255,.08),transparent 34%);
}
@media(max-width:800px){
.hero::before{
right:-12%!important;
width:96%!important;
opacity:.80!important;
background:
radial-gradient(circle at 69% 19%,rgba(50,190,255,.30),transparent 14%),
radial-gradient(ellipse at 70% 35%,rgba(0,110,255,.18),transparent 31%),
linear-gradient(90deg,#00030a 0%,rgba(0,3,10,.68) 29%,transparent 73%),
linear-gradient(0deg,#00030a 0%,transparent 42%),
url("assets/giant-titan-v23.jpg") 69% 5%/cover no-repeat!important;
}
.copy h1 span{letter-spacing:-3px}
.copy h1 em{filter:drop-shadow(0 0 15px rgba(0,160,255,.45))}
.stats{margin-top:-48px!important}
}
/* =========================================================
V24 — PLATFORM FLOW
Preserve V23 hero art; tighten transition into TTZ ecosystem
========================================================= */
.hero{padding-bottom:18px!important}
.stats{
position:relative;
z-index:12;
margin-top:-145px!important;
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:0 0 38px rgba(0,139,255,.13);
}
.stats > *{
background:linear-gradient(180deg,rgba(4,16,31,.91),rgba(1,8,18,.88))!important;
}
.vault-transition{
margin-top:0!important;
padding-top:46px!important;
padding-bottom:46px!important;
background:
radial-gradient(ellipse at center,rgba(0,135,255,.10),transparent 48%),
linear-gradient(180deg,rgba(0,5,14,.95),rgba(0,8,20,.98));
}
.vault{padding-top:62px!important}
.vault::after{
content:"TTZ // TITAN SYSTEM";
position:absolute;
top:24px; right:5%;
font-size:10px; letter-spacing:5px;
color:rgba(83,196,255,.48);
}
@media(max-width:800px){
.hero{
min-height:690px!important;
padding-bottom:0!important;
}
.stats{
margin-top:-122px!important;
margin-left:14px!important;
margin-right:14px!important;
}
.vault-transition{
padding-top:32px!important;
padding-bottom:34px!important;
}
.vault{
padding-top:48px!important;
}
.vault::after{
top:16px; right:20px;
font-size:8px; letter-spacing:3px;
}
}
/* =========================================================
V25 — EMPIRE BUILD
Artist Development + Services + Licensing + Movement
========================================================= */
.v25-development,.v25-services,.v25-license,.v25-movement{position:relative;overflow:hidden}
.v25-development{padding:95px 5%;background:linear-gradient(180deg,#020914,#00040b)}
.v25-kicker{font-size:12px;font-weight:800;letter-spacing:5px;color:#55c9ff;margin-bottom:20px}
.v25-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
.v25-head>div,.v25-license h2,.v25-movement h2{font-weight:1000;line-height:.9;font-size:clamp(44px,6vw,86px);letter-spacing:-3px}
.v25-head span{color:#eef6ff}.v25-head strong,.v25-license em,.v25-movement em{color:#168fff;font-style:normal}
.v25-head p{max-width:380px;color:#9eacbb;font-size:17px}
.v25-dev-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #147fc0;background:#020a14;box-shadow:0 0 34px rgba(0,139,255,.12)}
.v25-dev-grid article{min-height:230px;padding:28px 22px;border-right:1px solid rgba(40,166,231,.34);position:relative}
.v25-dev-grid article:last-child{border-right:0}.v25-dev-grid b{font-size:11px;letter-spacing:3px;color:#3fc6ff}
.v25-dev-grid h3{margin:48px 0 12px;font-size:18px;color:#f4f8ff}.v25-dev-grid p{color:#8998aa;line-height:1.55;font-size:13px}
.v25-services{min-height:720px;display:grid;grid-template-columns:1.05fr .95fr;background:#00050d;border-top:1px solid #0d70ac;border-bottom:1px solid #0d70ac}
.v25-service-art{background:linear-gradient(90deg,transparent 58%,#00050d 100%),linear-gradient(0deg,#00050d 0%,transparent 40%),url("assets/giant-titan-v23.jpg") 58% center/cover no-repeat;filter:saturate(1.3) contrast(1.12)}
.v25-service-copy{padding:90px 7% 70px 3%;align-self:center}
.v25-service-copy h2{font-size:clamp(48px,6vw,82px);line-height:.9;margin:0 0 25px;font-weight:1000;letter-spacing:-3px;color:#eef7ff}
.v25-service-copy h2 em{color:#1598ff;font-style:normal}.v25-service-copy>p{color:#aeb9c7;max-width:600px;line-height:1.6}
.v25-service-list{margin:35px 0}.v25-service-list div{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-top:1px solid rgba(50,166,225,.25)}
.v25-service-list span{font-weight:900;letter-spacing:2px}.v25-service-list small{color:#71869b}
.v25-btn,.v25-outline{display:inline-block;padding:18px 28px;border:1px solid #1ba7f5;color:#fff;text-decoration:none;font-weight:900;letter-spacing:1px;box-shadow:inset 0 0 22px rgba(0,140,255,.08)}
.v25-license{padding:105px 5%;background:radial-gradient(circle at 78% 42%,rgba(0,115,255,.14),transparent 30%),#010711}
.v25-license h2{color:#f3f7fc;margin:0 0 20px}.v25-license>p{font-size:18px;color:#9aaabc;margin-bottom:45px}
.v25-license-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:35px}
.v25-license-grid article{padding:34px;border:1px solid #146e9f;background:linear-gradient(145deg,rgba(5,20,36,.92),rgba(1,7,15,.96));min-height:180px}
.v25-license-grid span{color:#36bfff;font-size:12px;letter-spacing:3px}.v25-license-grid h3{font-size:26px;margin:28px 0 8px}.v25-license-grid p{color:#8798aa}
.v25-movement{text-align:center;padding:120px 5% 70px;background:radial-gradient(circle at 50% 30%,rgba(0,139,255,.18),transparent 30%),linear-gradient(180deg,#000713,#000)}
.v25-movement:before{content:"TTZ";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font-size:38vw;font-weight:1000;color:rgba(18,130,220,.035);z-index:0}
.v25-movement>*{position:relative;z-index:1}.v25-crown{font-size:42px;color:#38bdff;text-shadow:0 0 25px #008cff;margin-bottom:18px}
.v25-movement h2{color:#fff;margin:0 0 24px}.v25-movement p{color:#9eacba;font-size:18px}
.v25-actions{display:flex;justify-content:center;gap:12px;margin:35px 0 75px}.v25-actions a{padding:17px 28px;border:1px solid #168fd1;color:#fff;text-decoration:none;font-weight:900}
.v25-actions a:first-child{background:linear-gradient(90deg,#1fb7ff,#0876f5);box-shadow:0 0 25px rgba(0,135,255,.25)}
.v25-footerline{font-size:10px;letter-spacing:4px;color:#4f7896}
@media(max-width:800px){
.v25-development{padding:64px 22px}.v25-head{display:block}.v25-head>div,.v25-license h2,.v25-movement h2{font-size:48px;letter-spacing:-2px}.v25-head p{margin-top:20px}
.v25-dev-grid{grid-template-columns:1fr}.v25-dev-grid article{min-height:145px;border-right:0;border-bottom:1px solid rgba(40,166,231,.34);padding:22px}
.v25-dev-grid h3{margin:24px 0 8px}
.v25-services{display:block;min-height:auto}.v25-service-art{height:480px;background:linear-gradient(0deg,#00050d 0%,transparent 55%),url("assets/giant-titan-v23.jpg") 62% 10%/cover no-repeat}
.v25-service-copy{padding:20px 22px 70px}.v25-service-copy h2{font-size:49px}
.v25-service-list div{display:block}.v25-service-list small{display:block;margin-top:6px}
.v25-license{padding:70px 22px}.v25-license-grid{grid-template-columns:1fr}
.v25-movement{padding:90px 22px 55px}.v25-actions{flex-direction:column}.v25-actions a{display:block}
}
/* V26 — LIVE PLATFORM: functional nav, licensing selector, contact workflow */
html{scroll-behavior:smooth}.menu-open{overflow:hidden}
.v26-menu{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 80% 15%,rgba(0,125,255,.20),transparent 25%),rgba(0,4,11,.985);padding:70px 7%;transform:translateX(105%);transition:transform .38s ease;border-left:1px solid #159be8}
.v26-menu.open{transform:translateX(0)}.v26-close{position:absolute;right:6%;top:28px;background:none;border:1px solid #188bc8;color:white;width:52px;height:52px;font-size:34px}
.v26-menu-mark{color:#48c5ff;letter-spacing:5px;font-size:11px;margin-bottom:45px}
.v26-menu nav{max-width:850px}.v26-menu nav a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(53,175,232,.25);font-size:clamp(30px,5vw,66px);font-weight:1000;color:#edf7ff;text-decoration:none;letter-spacing:-2px}
.v26-menu nav a:hover{color:#1ca9ff}.v26-menu nav span{font-size:10px;color:#41c4ff;letter-spacing:2px}.v26-menu-foot{margin-top:45px;color:#496f89;font-size:9px;letter-spacing:4px}
.v26-license-shop{padding:100px 5%;background:radial-gradient(circle at 50% 0,rgba(0,135,255,.12),transparent 32%),#00050d;border-top:1px solid #126c9e}
.v26-license-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.v26-license-title h2{font-size:clamp(46px,6vw,80px);line-height:.9;margin:0;color:#f3f8ff;letter-spacing:-3px}.v26-license-title h2 em{font-style:normal;color:#159cff}.v26-license-title p{color:#8498ab}
.v26-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.v26-tier{text-align:left;min-height:190px;padding:25px;background:#020b15;border:1px solid #174c6b;color:white;cursor:pointer;transition:.2s}
.v26-tier:hover,.v26-tier.active{border-color:#28b9ff;box-shadow:inset 0 0 30px rgba(0,145,255,.12),0 0 20px rgba(0,145,255,.12);transform:translateY(-3px)}
.v26-tier small{display:block;color:#48c6ff;letter-spacing:3px;font-size:9px}.v26-tier strong{display:block;font-size:24px;margin:42px 0 8px}.v26-tier b{font-size:18px;color:#b9dfff}
.v26-license-console{margin-top:12px;border:1px solid #1b9be2;padding:28px;display:grid;grid-template-columns:1fr auto;gap:35px;background:linear-gradient(90deg,#03111f,#020811);box-shadow:0 0 30px rgba(0,135,255,.12)}
.v26-license-console small{display:block;color:#5b8aa8;letter-spacing:3px;font-size:9px}.v26-license-console strong{font-size:30px;color:#3fc4ff}.v26-license-console p{color:#91a4b5;margin-bottom:0}.v26-license-price{text-align:right}.v26-license-price button{display:block;margin-top:12px;padding:13px 18px;background:#118ef2;border:1px solid #55ceff;color:#fff;font-weight:900}
.v26-contact{max-width:760px;margin:55px auto 65px;padding:28px;border:1px solid #1579ae;background:rgba(0,7,16,.78);text-align:left}
.v26-form-head{display:flex;justify-content:space-between;margin-bottom:20px}.v26-form-head span{font-weight:900;color:#fff}.v26-form-head small{color:#42c3ff;letter-spacing:2px}
.v26-contact input,.v26-contact select,.v26-contact textarea{box-sizing:border-box;width:100%;margin:6px 0;padding:16px;background:#010812;border:1px solid #194f70;color:white;border-radius:0;font:inherit}
.v26-contact textarea{min-height:130px;resize:vertical}.v26-contact button{margin-top:8px;width:100%;padding:17px;background:linear-gradient(90deg,#1bb6ff,#0878f6);border:1px solid #5fd3ff;color:white;font-weight:1000;letter-spacing:1px}.v26-form-status{font-size:10px;letter-spacing:2px;color:#47c6ff;margin-top:12px}
@media(max-width:800px){
.v26-menu{padding:70px 24px 35px}.v26-menu nav a{font-size:34px;padding:15px 0}
.v26-license-shop{padding:70px 22px}.v26-license-title{display:block}.v26-license-title h2{font-size:48px}.v26-license-title p{margin-top:18px}
.v26-tiers{grid-template-columns:1fr 1fr}.v26-tier{min-height:150px;padding:18px}.v26-tier strong{font-size:18px;margin:30px 0 6px}
.v26-license-console{grid-template-columns:1fr}.v26-license-price{text-align:left}
.v26-contact{padding:20px}.v26-form-head{display:block}.v26-form-head small{display:block;margin-top:6px}
}
/* V27 — Titan Vault + Artist Development + Services */
.v27-vault-console,.v27-development,.v27-services{padding:95px 5%;background:#010711;border-top:1px solid rgba(31,159,224,.5);position:relative;overflow:hidden}
.v27-vault-console:before,.v27-development:before{content:"TTZ";position:absolute;font-size:360px;font-weight:1000;color:rgba(20,120,200,.025);right:-30px;top:30px;line-height:1}
.v27-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}.v27-head small,.v27-dev-copy small,.v27-services-title small{color:#4ac8ff;letter-spacing:5px;font-size:10px}.v27-head h2,.v27-dev-copy h2,.v27-services-title h2{font-size:clamp(48px,7vw,88px);line-height:.88;letter-spacing:-4px;color:#f3f8ff;margin:12px 0}.v27-head em,.v27-dev-copy em,.v27-services-title em{font-style:normal;color:#149cf7}
.v27-filter{display:flex;gap:5px;flex-wrap:wrap}.v27-filter button{background:#020b15;border:1px solid #164967;color:#7393a9;padding:10px 13px;font-weight:800}.v27-filter button.active{color:white;border-color:#26b9ff;box-shadow:0 0 16px rgba(0,155,255,.25)}
.v27-beatgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.v27-beat{border:1px solid #145a83;background:#020912}.v27-art{aspect-ratio:1/1;position:relative;display:flex;align-items:end;padding:18px;box-sizing:border-box;overflow:hidden;background:radial-gradient(circle at 50% 35%,#0d6ec0,#03111e 48%,#00050a 72%)}.v27-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,transparent 0 25px,rgba(36,169,255,.06) 26px 27px)}
.v27-art span{position:absolute;top:15px;left:15px;color:#55cfff;font-size:10px;letter-spacing:3px}.v27-art b{font-size:clamp(20px,2.5vw,36px);font-style:italic;z-index:1;text-shadow:0 0 18px #079aff}.v27-play{position:absolute;right:15px;bottom:15px;border-radius:50%;width:55px;height:55px;border:1px solid #8ee2ff;background:#149cf0;color:#fff;font-size:20px;z-index:2}.blue-zone{background:radial-gradient(circle at 55% 35%,#1448a9,#040a1a 55%,#000)}.lone-wolf{background:radial-gradient(circle at 50% 35%,#055a93,#06101e 50%,#000)}.storm{background:radial-gradient(circle at 50% 25%,#147bd1,#020b16 48%,#000)}
.v27-meta{padding:17px;display:flex;justify-content:space-between;align-items:end}.v27-meta strong{display:block;font-size:18px}.v27-meta small{color:#4ac8ff;letter-spacing:2px;font-size:8px}.v27-meta>b{border:1px solid #175a80;padding:8px}
.v27-player{margin-top:20px;border:2px solid #149cff;background:#020a15;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:20px;box-shadow:0 0 25px rgba(0,135,255,.12)}.v27-player-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#148ff2;color:white}.v27-player small{display:block;color:#66869d;letter-spacing:3px;font-size:8px}.v27-player strong{font-size:24px;color:#42c7ff}.v27-player>button{width:58px;height:58px;background:#03101d;border:1px solid #188bd0;color:white}.v27-wave{height:20px;display:flex;align-items:center;gap:3px}.v27-wave i{width:3px;height:7px;background:#2bbaff}.v27-player.playing .v27-wave i{animation:v27wave .55s ease-in-out infinite alternate}.v27-wave i:nth-child(2n){animation-delay:.15s}.v27-wave i:nth-child(3n){animation-delay:.3s}@keyframes v27wave{to{height:20px}}
.v27-development{background:radial-gradient(circle at 80% 40%,rgba(0,113,210,.16),transparent 35%),#01050b}.v27-dev-copy{max-width:850px}.v27-dev-copy p{max-width:690px;color:#9aaab8;font-size:18px;line-height:1.65}.v27-dev-grid{display:grid;grid-template-columns:repeat(5,1fr);margin:50px 0 30px;border:1px solid #174e6c}.v27-dev-grid>div{padding:28px 20px;min-height:190px;border-right:1px solid #174e6c;background:rgba(0,10,20,.75)}.v27-dev-grid>div:last-child{border:0}.v27-dev-grid b{color:#159ef4;font-size:11px}.v27-dev-grid strong{display:block;margin:35px 0 10px;color:white}.v27-dev-grid p{font-size:13px;color:#72899a;line-height:1.5}.v27-dev-cta{display:inline-block;padding:16px 28px;background:#128ff1;border:1px solid #65d2ff;color:white;text-decoration:none;font-weight:900}
.v27-services{background:#00050b}.v27-service-list{margin-top:45px;border-top:1px solid #185574}.v27-service-list>div{display:grid;grid-template-columns:70px minmax(220px,1fr) 1.4fr;gap:25px;align-items:center;padding:28px 10px;border-bottom:1px solid #123c54}.v27-service-list span{color:#38c4ff;font-size:11px}.v27-service-list strong{font-size:24px;color:white}.v27-service-list p{color:#7890a1}
@media(max-width:800px){
.v27-vault-console,.v27-development,.v27-services{padding:70px 24px}.v27-head{display:block}.v27-head h2,.v27-dev-copy h2,.v27-services-title h2{font-size:50px}.v27-filter{margin-top:25px}
.v27-beatgrid{grid-template-columns:1fr 1fr}.v27-meta{padding:12px}.v27-meta strong{font-size:15px}.v27-art b{font-size:22px}.v27-play{width:48px;height:48px}
.v27-player{grid-template-columns:auto 1fr;padding:15px}.v27-player>button{display:none}.v27-player strong{font-size:19px}
.v27-dev-grid{grid-template-columns:1fr 1fr}.v27-dev-grid>div{border-bottom:1px solid #174e6c;min-height:160px}.v27-dev-grid>div:last-child{grid-column:1/-1}
.v27-service-list>div{grid-template-columns:35px 1fr}.v27-service-list p{grid-column:2}.v27-service-list strong{font-size:20px}
}
/* V28 — CLEAN FLOW: retire legacy duplicated vault/player surfaces */
.v25-vault-player,.v25-player,.vault-player,.sticky-player,.old-vault-player{display:none!important}
.v27-vault-console{scroll-margin-top:90px}
.v27-development,.v27-services,.v26-license-shop,#contact{scroll-margin-top:90px}
/* Tighten transitions so the page reads as one continuous system */
.v27-vault-console{border-top:1px solid rgba(38,185,255,.7)}
.v27-player{position:sticky;bottom:10px;z-index:30;backdrop-filter:blur(12px);background:rgba(2,10,21,.94)}
.v27-development{margin-top:0}
@media(max-width:800px){
.v27-player{bottom:8px}
}
/* V29 — CONNECTED FLOW: close dead space + carry Titan energy through transitions */
.v27-vault-console{padding-bottom:38px!important}
.v27-development{padding-top:46px!important;margin-top:0!important;isolation:isolate}
.v27-development:after{content:"";position:absolute;inset:-90px 0 auto 0;height:420px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(1,7,17,.20),rgba(1,5,11,.76)),url('assets/giant-titan-v23.jpg') center 24%/cover no-repeat;opacity:.24;filter:saturate(1.2) contrast(1.08)}
.v27-development:before{z-index:0}.v27-dev-copy,.v27-dev-grid,.v27-dev-cta{position:relative;z-index:1}
.v27-player{margin-bottom:0!important}
@media(max-width:800px){
.v27-vault-console{padding-bottom:24px!important}
.v27-development{padding-top:34px!important}
.v27-development:after{inset:-70px -30px auto -30px;height:360px;opacity:.30;background-position:62% 20%}
}
/* V30 — TITAN CONTINUUM */
.v27-vault-console{padding-bottom:30px!important}
.v26-license-shop{padding-top:42px!important;padding-bottom:46px!important;position:relative;isolation:isolate;overflow:hidden}
.v26-license-shop:before{content:"";position:absolute;inset:-80px 0;z-index:-2;background:linear-gradient(to bottom,rgba(1,7,17,.88),rgba(1,5,11,.93)),url('assets/giant-titan-v23.jpg') 68% 34%/cover no-repeat;opacity:.42;filter:saturate(1.25) contrast(1.08)}
.v26-license-shop:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 18%,rgba(0,154,255,.18),transparent 34%)}
.v27-development{padding-top:34px!important;padding-bottom:56px!important;margin-top:0!important;background:linear-gradient(to bottom,rgba(1,5,11,.88),rgba(1,5,11,.96)),url('assets/giant-titan-v23.jpg') 70% 28%/cover no-repeat!important}
.v27-development:after{inset:-30px 0 0!important;height:auto!important;opacity:.18!important;background:radial-gradient(circle at 82% 18%,rgba(0,150,255,.32),transparent 30%)!important}
.v27-dev-grid>div{background:linear-gradient(145deg,rgba(1,11,22,.92),rgba(0,6,14,.82));box-shadow:inset 0 0 28px rgba(0,122,210,.035)}
.v27-services{background:linear-gradient(to bottom,rgba(1,5,11,.94),rgba(1,5,11,.98)),url('assets/giant-titan-v21.jpg') 25% center/cover no-repeat!important}
.contact-cta{position:relative;overflow:hidden;isolation:isolate}.contact-cta:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(0,6,14,.84),rgba(0,6,14,.96)),url('assets/giant-titan-v22.jpg') center 35%/cover no-repeat;opacity:.65}
@media(max-width:800px){.v27-vault-console{padding-bottom:18px!important}.v26-license-shop{padding-top:28px!important;padding-bottom:32px!important}.v27-development{padding-top:24px!important;padding-bottom:42px!important;background-position:66% 20%!important}.v27-dev-grid{margin-top:28px!important}.v27-dev-grid>div{min-height:168px!important;padding:20px 14px!important}.v27-dev-grid>div strong{margin:24px 0 8px!important;font-size:14px}.v27-dev-grid>div p{font-size:12px!important}}
/* =========================================================
V31 — TITAN BRIDGE
Tightens Vault/Player -> Artist Development on mobile
and carries the Titan atmosphere through the transition.
========================================================= */
@media (max-width: 800px) {
/* Remove inherited/dead spacing around the development transition */
.v27-development,
#artist-development,
.artist-development {
margin-top: 0 !important;
padding-top: 150px !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Keep the player from creating an oversized following gap */
.v27-player {
margin-bottom: 0 !important;
}
/* Titan atmospheric bridge — intentionally subtle behind readable content */
.v27-development::before,
#artist-development::before,
.artist-development::before {
content: "";
position: absolute;
z-index: -2;
inset: 0;
background:
radial-gradient(circle at 72% 10%, rgba(0,145,255,.18), transparent 32%),
radial-gradient(circle at 24% 30%, rgba(0,92,190,.12), transparent 34%),
linear-gradient(180deg, rgba(1,10,20,.15) 0%, rgba(1,9,18,.80) 48%, rgba(1,8,16,.96) 100%);
pointer-events: none;
}
.v27-development::after,
#artist-development::after,
.artist-development::after {
content: "TITAN";
position: absolute;
z-index: -1;
top: 18px;
right: -24px;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-size: clamp(92px, 29vw, 180px);
font-style: italic;
font-weight: 900;
line-height: .82;
letter-spacing: -.06em;
color: rgba(21,137,255,.035);
text-shadow: 0 0 34px rgba(0,153,255,.12);
transform: rotate(-5deg) scaleY(1.18);
pointer-events: none;
}
/* Premium compact cards without changing their content */
.v27-development .dev-grid,
.v27-development .development-grid,
#artist-development .dev-grid,
#artist-development .development-grid {
gap: 14px !important;
}
.v27-development .dev-card,
.v27-development .development-card,
#artist-development .dev-card,
#artist-development .development-card {
min-height: 280px !important;
padding: 28px 20px !important;
background: linear-gradient(180deg, rgba(3,15,29,.93), rgba(1,9,18,.97)) !important;
box-shadow: inset 0 0 38px rgba(0,139,255,.035);
}
}
/* =========================================================
V32 — TITAN PRESSURE
Compresses the mobile Vault -> Development handoff and
upgrades licensing into a harder Titan sales console.
========================================================= */
/* Licensing: stronger hierarchy / premium console */
.v26-license-shop{isolation:isolate}
.v26-license-title{position:relative;z-index:2}
.v26-tiers{position:relative;z-index:2}
.v26-tier{position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;background:linear-gradient(155deg,rgba(5,20,38,.96),rgba(0,7,16,.98))!important}
.v26-tier:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#1db4ff,transparent);opacity:.35}
.v26-tier.active{border-color:#53d2ff!important;box-shadow:inset 0 0 34px rgba(0,139,255,.08),0 0 28px rgba(0,139,255,.14)!important;transform:translateY(-2px)}
.v26-license-console{position:relative;z-index:2;box-shadow:inset 0 0 40px rgba(0,139,255,.05),0 0 30px rgba(0,139,255,.10)}
@media (max-width:800px){
/* V31's 150px top pad was visually reading as dead space. */
.v27-development,
#artist-development,
.artist-development{
margin-top:0!important;
padding-top:48px!important;
padding-bottom:46px!important;
min-height:0!important;
background:
linear-gradient(180deg,rgba(0,5,12,.76),rgba(0,6,14,.95)),
url('assets/giant-titan-v23.jpg') 67% 10%/cover no-repeat!important;
}
/* Pull the title into the energy bridge instead of floating below it. */
.v27-dev-copy{position:relative;z-index:3;margin-top:0!important;padding-top:0!important}
.v27-dev-copy small{display:block;margin-bottom:12px}
.v27-dev-copy h2{margin-top:0!important;margin-bottom:18px!important}
.v27-dev-copy p{margin-top:0!important}
/* Atmospheric Titan stays visible without competing with copy. */
.v27-development::before,
#artist-development::before,
.artist-development::before{
content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
background:
radial-gradient(circle at 76% 4%,rgba(38,181,255,.22),transparent 25%),
linear-gradient(180deg,rgba(0,145,255,.06),transparent 24%,rgba(0,0,0,.16))!important;
pointer-events:none;
}
.v27-development::after,
#artist-development::after,
.artist-development::after{
content:"TITAN"!important;z-index:1!important;top:2px!important;right:-22px!important;
font-size:clamp(88px,27vw,160px)!important;color:rgba(36,166,255,.045)!important;
text-shadow:0 0 42px rgba(0,153,255,.16)!important;
}
.v27-dev-grid,.v27-dev-cta{position:relative;z-index:3}
.v27-dev-grid{margin-top:30px!important;margin-bottom:24px!important}
.v27-dev-grid>div{min-height:158px!important;padding:20px 15px!important}
/* Licensing cards: readable swipeable sales rail on phones. */
.v26-license-shop{padding-top:34px!important;padding-bottom:38px!important}
.v26-license-title{margin-bottom:24px!important}
.v26-license-title h2{font-size:46px!important;line-height:.88!important}
.v26-tiers{display:flex!important;gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;padding:4px 22px 18px 0!important;margin-right:-22px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.v26-tiers::-webkit-scrollbar{display:none}
.v26-tier{flex:0 0 78%!important;min-height:188px!important;scroll-snap-align:start;padding:24px 20px!important;text-align:left!important}
.v26-tier small{letter-spacing:3px!important}
.v26-tier strong{font-size:26px!important}
.v26-tier b{font-size:22px!important}
.v26-license-console{margin-top:4px!important;padding:22px 18px!important;gap:18px!important}
}
/* =========================================================
V33 — TITAN ATMOSPHERE
Mobile flow + visual energy pass. Fills dead black zones
with subtle Titan/lightning/music atmosphere without
touching hero, beat art, or player behavior.
========================================================= */
/* Ambient energy language shared through lower platform */
.v27-development,.v27-services,.v26-license-shop,.v25-movement{isolation:isolate}
.v27-services{position:relative;overflow:hidden}
.v27-services:before{
content:"⚡ ♫ ⚡ ♪";
position:absolute;z-index:0;left:-4%;top:7%;width:108%;
font-size:clamp(38px,7vw,92px);font-weight:900;letter-spacing:.8em;
color:rgba(33,166,255,.045);text-shadow:0 0 28px rgba(0,157,255,.18);
transform:rotate(-7deg);pointer-events:none;white-space:nowrap
}
.v27-services:after{
content:"TITAN";position:absolute;z-index:0;right:-5%;bottom:2%;
font:italic 1000 clamp(110px,24vw,310px)/.8 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
letter-spacing:-.06em;color:rgba(22,132,255,.028);text-shadow:0 0 55px rgba(0,145,255,.11);
pointer-events:none
}
.v27-services-title,.v27-service-list{position:relative;z-index:2}
@media(max-width:800px){
/* Close the player -> development handoff further. */
.v27-vault-console{padding-bottom:10px!important}
.v27-development{padding-top:18px!important;padding-bottom:34px!important}
.v27-dev-copy small{margin-bottom:9px!important}
.v27-dev-copy h2{margin-bottom:14px!important}
/* Titan silhouette becomes the texture in the black gaps. */
.v27-development{
background:
radial-gradient(circle at 79% 13%,rgba(20,163,255,.19),transparent 24%),
linear-gradient(180deg,rgba(0,5,12,.72),rgba(0,6,14,.93)),
url('assets/giant-titan-v23.jpg') 68% 7%/cover no-repeat!important;
}
/* Energy glyphs sit behind content, intentionally faint. */
.v27-development::before{
content:"⚡ ♫ ♪ ⚡"!important;
inset:auto auto 9% -7%!important;
width:115%!important;height:auto!important;
font-size:48px!important;line-height:1!important;letter-spacing:.65em!important;
color:rgba(56,182,255,.055)!important;
text-shadow:0 0 24px rgba(0,157,255,.22)!important;
background:none!important;transform:rotate(-8deg)!important;white-space:nowrap!important;
z-index:1!important
}
.v27-development::after{
content:"TITAN"!important;top:12%!important;right:-38px!important;bottom:auto!important;left:auto!important;
width:auto!important;height:auto!important;
font:italic 1000 128px/.8 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif!important;
letter-spacing:-.07em!important;color:rgba(44,168,255,.04)!important;
text-shadow:0 0 42px rgba(0,153,255,.14)!important;background:none!important;
transform:rotate(-6deg) scaleY(1.12)!important;opacity:1!important;z-index:1!important
}
.v27-dev-copy,.v27-dev-grid,.v27-dev-cta{z-index:3!important}
/* Keep the cards tight so the section feels like a system, not islands. */
.v27-dev-grid{margin-top:22px!important;margin-bottom:18px!important;gap:10px!important}
.v27-dev-grid>div{min-height:150px!important;padding:18px 14px!important}
/* Continue the atmosphere into services rather than returning to flat black. */
.v27-services{
padding-top:42px!important;
background:
radial-gradient(circle at 16% 8%,rgba(0,140,255,.11),transparent 28%),
linear-gradient(180deg,#010711,#01050b)!important
}
.v27-services:before{top:2%;left:-12%;font-size:46px;letter-spacing:.55em;color:rgba(43,174,255,.05)}
.v27-services:after{right:-18%;bottom:4%;font-size:150px;color:rgba(27,145,255,.03)}
/* Small electric traces inside otherwise empty lower gaps. */
.v25-movement:before{
content:"♪ ⚡ ♫";position:absolute;z-index:0;left:5%;top:10%;
font-size:42px;letter-spacing:.7em;color:rgba(50,181,255,.045);
text-shadow:0 0 25px rgba(0,150,255,.2);transform:rotate(-9deg);pointer-events:none
}
.v25-movement>*{position:relative;z-index:2}
}
/* V34 — TITAN CURRENT: lower-page continuity + mobile gap compression */
@media(max-width:800px){
.v27-development,.v27-services,.v25-movement,.v25-development,.v25-services,.v25-license,.manifesto,.contact-cta{position:relative;overflow:hidden}
.v27-development{padding-top:10px!important;padding-bottom:22px!important}
.v27-dev-grid{margin-top:16px!important;margin-bottom:12px!important}
.v27-services{padding-top:28px!important;padding-bottom:30px!important}
.v25-movement{padding-top:34px!important;padding-bottom:34px!important}
.v25-development,.v25-services,.v25-license{padding-top:38px!important;padding-bottom:38px!important}
.manifesto,.contact-cta{padding-top:40px!important;padding-bottom:40px!important}
/* electric current through formerly empty black space */
.v27-services,.v25-movement,.v25-development,.v25-services,.v25-license,.manifesto,.contact-cta{
background-image:
radial-gradient(circle at 82% 18%,rgba(26,158,255,.10),transparent 25%),
radial-gradient(circle at 14% 76%,rgba(0,103,220,.07),transparent 24%),
linear-gradient(180deg,rgba(1,8,17,.98),rgba(0,5,12,.98))!important;
}
.v25-development:before,.v25-services:before,.v25-license:before,.manifesto:before,.contact-cta:before{
content:"⚡ ♫ ♪";position:absolute;z-index:0;right:-12%;top:8%;font-size:42px;letter-spacing:.55em;
color:rgba(55,183,255,.045);text-shadow:0 0 24px rgba(0,157,255,.18);transform:rotate(-8deg);white-space:nowrap;pointer-events:none
}
.v25-development:after,.v25-services:after,.v25-license:after,.manifesto:after,.contact-cta:after{
content:"TTZ";position:absolute;z-index:0;left:-18px;bottom:3%;font:italic 1000 112px/.8 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
letter-spacing:-.06em;color:rgba(33,151,255,.026);text-shadow:0 0 40px rgba(0,145,255,.10);pointer-events:none
}
.v25-development>*,.v25-services>*,.v25-license>*,.manifesto>*,.contact-cta>*{position:relative;z-index:2}
/* make lower typography feel related to the upper platform */
.v25-development h2,.v25-services h2,.v25-license h2,.manifesto h2,.contact-cta h2{letter-spacing:-.045em!important}
.v25-development p,.v25-services p,.v25-license p,.manifesto p,.contact-cta p{line-height:1.45!important}
}
/* =========================================================
V35 — iOS TITAN FLOW
Mobile stabilization + lower-page continuity
========================================================= */
html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
background:#00050c;
}
body{min-height:100dvh}
img,video,canvas,svg{max-width:100%;height:auto}
section,header,footer,main,nav,div{box-sizing:border-box}
.v27-beatgrid,.v27-dev-grid,.v25-dev-grid,.v26-tiers,.v19-cards,.dev-grid{max-width:100%}
/* Safer iOS viewport handling */
@supports (height: 100dvh){
.hero{min-height:100dvh}
}
/* Titan atmosphere carried through lower half */
.v27-development,
.v27-services,
.v26-license-shop,
.v25-movement,
.contact-cta{
background-color:#00050c;
background-image:
radial-gradient(circle at 84% 12%,rgba(0,145,255,.12),transparent 22%),
radial-gradient(circle at 18% 72%,rgba(0,85,190,.08),transparent 25%);
background-blend-mode:screen;
}
/* Faint energy motifs in dead-space zones */
.v27-services::after,
.v26-license-shop::after,
.v25-movement::after,
.contact-cta::after{
content:"⚡ ♫ ♛ ♪";
position:absolute;
right:3%;
top:12%;
z-index:0;
font-size:clamp(36px,7vw,92px);
letter-spacing:.4em;
color:rgba(44,170,255,.045);
text-shadow:0 0 24px rgba(0,145,255,.12);
transform:rotate(-8deg);
pointer-events:none;
}
.v27-services>*,
.v26-license-shop>*,
.v25-movement>*,
.contact-cta>*{position:relative;z-index:2}
/* Prevent oversized cards/sections from forcing a narrow left column in long iOS captures */
@media(max-width:800px){
body{overflow-x:clip}
.hero,.stats,.vault-transition,.v27-vault-console,.v27-development,.v27-services,
.v26-license-shop,.v25-movement,.contact-cta,.v25-services,.v25-license,.v25-development{
width:100%!important;
max-width:100%!important;
}
.v27-beatgrid,
.v25-dev-grid,
.v26-tiers,
.v19-cards{
width:100%!important;
}
/* Horizontal swipe areas remain intentional and bounded */
.beats,.beat-grid,.catalog-grid,.v19-cards,.v26-tiers{
overflow-x:auto!important;
overflow-y:hidden!important;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
/* Reduce true dead gaps without crushing normal Safari breathing room */
.v27-vault-console{padding-bottom:14px!important}
.v27-player{margin-bottom:22px!important}
.v27-development{padding-top:28px!important;padding-bottom:30px!important}
.v27-services{padding-top:42px!important;padding-bottom:42px!important}
.v26-license-shop{padding-top:42px!important;padding-bottom:42px!important}
.v25-movement{padding-top:48px!important;padding-bottom:44px!important}
.contact-cta{padding-top:46px!important;padding-bottom:46px!important}
/* Stronger but still faint Titan-world continuity */
.v27-development{
background:
linear-gradient(180deg,rgba(0,5,12,.90),rgba(0,5,12,.96)),
url("assets/giant-titan-v23.jpg") 68% 14%/cover no-repeat!important;
}
.v27-services{
background:
radial-gradient(circle at 82% 22%,rgba(0,140,255,.15),transparent 25%),
linear-gradient(180deg,#00050b,#000913)!important;
}
.v26-license-shop{
background:
radial-gradient(circle at 15% 20%,rgba(0,120,255,.13),transparent 28%),
linear-gradient(180deg,#010711,#00050b)!important;
}
/* Lower headings stay visually connected to the premium hero language */
.v27-services-title h2,
.v26-license-title h2,
.v25-movement h2,
.contact-cta h2{
line-height:.88!important;
letter-spacing:-.045em!important;
}
/* Avoid huge accidental vertical stretches */
.v25-service-art{height:min(62dvh,520px)!important}
.movement-v19{min-height:auto!important}
.v25-movement{min-height:auto!important}
}
/* Very narrow iPhones */
@media(max-width:430px){
.v27-development,.v27-services,.v26-license-shop,.v25-movement,.contact-cta{
padding-left:18px!important;
padding-right:18px!important;
}
.v27-head h2,.v27-dev-copy h2,.v27-services-title h2,.v26-license-title h2,
.v25-movement h2,.contact-cta h2{
font-size:clamp(38px,12vw,50px)!important;
}
}
/* =========================================================
V36 — TITAN FREQUENCY
Cinematic continuity pass based on actual iOS scroll flow
========================================================= */
:root{
--v36-glow: rgba(28,166,255,.22);
--v36-line: rgba(74,197,255,.14);
}
/* Cinematic connective tissue */
.v27-vault-console,
.v27-development,
.v27-services,
.v26-license-shop,
.v25-movement,
.contact-cta{
isolation:isolate;
}
/* Electric horizon between major sections */
.v27-development:before,
.v27-services:before,
.v26-license-shop:before,
.v25-movement:before{
content:"";
position:absolute;
z-index:-1;
left:-10%;
right:-10%;
top:0;
height:2px;
background:linear-gradient(90deg,transparent,rgba(55,195,255,.2),rgba(138,226,255,.65),rgba(55,195,255,.2),transparent);
box-shadow:0 0 18px rgba(0,151,255,.28);
pointer-events:none;
}
/* Frequency lines — subtle, not competing with copy */
.v27-services,
.v26-license-shop,
.v25-movement{
background-image:
repeating-linear-gradient(0deg,transparent 0 36px,rgba(32,143,213,.025) 37px,transparent 38px),
radial-gradient(circle at 82% 20%,rgba(0,142,255,.12),transparent 25%) !important;
}
/* Ghost TTZ / music-frequency signatures */
.v27-services .v27-services-title:after,
.v26-license-title:after{
content:"TTZ // 808 ♫ ⚡";
display:block;
margin-top:16px;
font-size:9px;
letter-spacing:5px;
color:rgba(86,199,255,.42);
}
/* Licensing cards feel more like illuminated hardware */
.v26-tier{
position:relative;
overflow:hidden;
}
.v26-tier:before{
content:"";
position:absolute;
inset:-40% auto -40% -55%;
width:48%;
transform:rotate(15deg);
background:linear-gradient(90deg,transparent,rgba(93,215,255,.10),transparent);
transition:transform .45s ease;
pointer-events:none;
}
.v26-tier:hover:before,
.v26-tier.active:before{transform:translateX(330%) rotate(15deg)}
.v26-tier.active{
box-shadow:
inset 0 0 38px rgba(0,145,255,.11),
0 0 28px rgba(0,145,255,.13) !important;
}
/* Development cards get a controlled Titan-tech edge */
.v27-dev-grid>div{
position:relative;
overflow:hidden;
}
.v27-dev-grid>div:after{
content:"";
position:absolute;
right:-22px;
bottom:-28px;
width:80px;
height:80px;
border:1px solid rgba(52,182,255,.08);
transform:rotate(45deg);
box-shadow:0 0 20px rgba(0,139,255,.035);
}
/* Movement gets a stronger crown/Titan aura without new clutter */
.v25-movement{
background:
radial-gradient(circle at 50% 20%,rgba(0,153,255,.18),transparent 24%),
radial-gradient(ellipse at 50% 58%,rgba(0,91,190,.08),transparent 40%),
linear-gradient(180deg,#000711,#00040a) !important;
}
.v25-crown{
animation:v36Crown 2.8s ease-in-out infinite alternate;
}
@keyframes v36Crown{
from{filter:drop-shadow(0 0 8px rgba(0,145,255,.25))}
to{filter:drop-shadow(0 0 24px rgba(45,190,255,.58))}
}
/* CTA pulse remains restrained */
.v25-actions a:first-child,
.v27-dev-cta,
.v26-contact button{
transition:transform .2s ease, box-shadow .25s ease;
}
.v25-actions a:first-child:hover,
.v27-dev-cta:hover,
.v26-contact button:hover{
transform:translateY(-2px);
box-shadow:0 0 30px rgba(0,151,255,.25);
}
@media(max-width:800px){
/* Keep actual iOS scroll compact while preserving cinematic breathing room */
.v27-development{padding-top:34px!important}
.v27-services{padding-top:46px!important}
.v26-license-shop{padding-top:46px!important}
.v25-movement{padding-top:54px!important}
/* Atmospheric diagonal energy through otherwise plain mobile gaps */
.v27-development:after,
.v27-services:after,
.v26-license-shop:after{
content:"⚡";
position:absolute;
z-index:-1;
right:-4px;
top:34px;
font-size:112px;
font-weight:900;
color:rgba(28,163,255,.035);
text-shadow:0 0 32px rgba(0,145,255,.08);
transform:rotate(8deg);
pointer-events:none;
}
.v27-dev-grid>div{
box-shadow:inset 0 0 32px rgba(0,133,255,.028);
}
/* Make swipeable license tiers visually advertise the next card */
.v26-tiers{
scroll-padding-left:0;
padding-right:54px;
}
/* Keep animation light for iPhone */
@media(prefers-reduced-motion:reduce){
.v25-crown{animation:none}
}
}
/* =========================================================
V37 — TITAN FINISH
Premium refinement: catalog depth, player, transitions,
services atmosphere, and mobile interaction polish.
========================================================= */
/* Make the Vault feel like a destination instead of a card grid on black */
.v27-vault-console{
background:
radial-gradient(circle at 88% 8%,rgba(0,147,255,.14),transparent 24%),
radial-gradient(circle at 15% 70%,rgba(0,74,170,.09),transparent 30%),
linear-gradient(180deg,#010812 0%,#00050c 100%)!important;
}
.v27-vault-console:after{
content:"THE TITAN VAULT";
position:absolute;
right:-1%;
top:14%;
z-index:0;
font:900 clamp(54px,10vw,150px)/.82 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
font-style:italic;
letter-spacing:-.05em;
color:rgba(23,145,255,.025);
transform:rotate(-5deg);
pointer-events:none;
}
.v27-vault-console>*{position:relative;z-index:1}
/* Beat cards: premium glass/energy lift */
.v27-beat{
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.v27-beat:hover{
transform:translateY(-4px);
border-color:#25baff;
box-shadow:0 15px 38px rgba(0,111,210,.15);
}
.v27-art:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(74,205,255,.07),transparent 32%,transparent 68%,rgba(0,91,255,.07));
pointer-events:none;
}
/* Player becomes a real control console */
.v27-player{
border-color:#20b7ff!important;
background:
linear-gradient(90deg,rgba(3,18,34,.97),rgba(1,9,19,.96))!important;
box-shadow:
0 0 0 1px rgba(85,205,255,.08),
0 12px 35px rgba(0,0,0,.34),
0 0 28px rgba(0,139,255,.12)!important;
}
.v27-player.playing{
box-shadow:
0 0 0 1px rgba(85,205,255,.14),
0 12px 35px rgba(0,0,0,.34),
0 0 38px rgba(0,153,255,.22)!important;
}
.v27-player-icon{
box-shadow:0 0 24px rgba(0,155,255,.25);
}
/* Section bridge: one frequency line flows through lower experience */
.v27-development,
.v27-services,
.v26-license-shop,
.v25-movement{
border-top-color:rgba(48,179,238,.28)!important;
}
.v27-development:before,
.v27-services:before,
.v26-license-shop:before,
.v25-movement:before{
height:1px!important;
background:linear-gradient(90deg,transparent 3%,rgba(37,163,230,.25),rgba(98,216,255,.62),rgba(37,163,230,.25),transparent 97%)!important;
}
/* Services: deeper Titan engine-room environment */
.v27-services{
background:
radial-gradient(circle at 82% 24%,rgba(0,145,255,.16),transparent 26%),
radial-gradient(circle at 14% 82%,rgba(0,72,165,.09),transparent 28%),
repeating-linear-gradient(0deg,transparent 0 42px,rgba(43,157,220,.025) 43px,transparent 44px),
linear-gradient(180deg,#00050b,#010914)!important;
}
.v27-service-list>div{
transition:background .2s ease,padding-left .2s ease;
}
.v27-service-list>div:hover{
background:linear-gradient(90deg,rgba(0,139,255,.07),transparent);
padding-left:18px;
}
/* Licensing console: selected tier reads immediately */
.v26-license-console{
position:relative;
overflow:hidden;
}
.v26-license-console:after{
content:"LICENSE READY";
position:absolute;
right:-5px;
bottom:-9px;
font-size:38px;
font-weight:1000;
letter-spacing:-2px;
color:rgba(57,183,255,.035);
pointer-events:none;
}
/* Contact/project area gets a proper final-stage glow */
.v26-contact{
box-shadow:
inset 0 0 50px rgba(0,120,220,.035),
0 18px 45px rgba(0,0,0,.25);
}
.v26-contact input:focus,
.v26-contact select:focus,
.v26-contact textarea:focus{
outline:none;
border-color:#2cbcff;
box-shadow:0 0 0 1px rgba(44,188,255,.15),0 0 18px rgba(0,139,255,.08);
}
/* Mobile: keep the polish, not the bulk */
@media(max-width:800px){
.v27-vault-console{
padding-top:54px!important;
padding-bottom:12px!important;
}
.v27-vault-console:after{
top:9%;
right:-18%;
font-size:25vw;
}
/* Cards communicate swipe/continuation without widening the page */
.v27-beatgrid{
gap:12px!important;
}
.v27-player{
margin-top:14px!important;
margin-bottom:18px!important;
border-radius:2px;
}
/* Keep transitions tight and cinematic */
.v27-development{padding-top:30px!important}
.v27-services{padding-top:40px!important}
.v26-license-shop{padding-top:40px!important}
.v25-movement{padding-top:48px!important}
/* Larger service labels on phone */
.v27-service-list strong{
letter-spacing:-.02em;
}
/* Tap feedback */
.v27-play:active,
.v26-tier:active,
.v25-actions a:active,
.v27-dev-cta:active{
transform:scale(.97);
}
}
/* =========================================================
V38 — TITAN BRIDGE
Tightens Vault → Development and enriches Creative Services.
========================================================= */
/* Remove the remaining dead runway after the beat player */
@media(max-width:800px){
.v27-vault-console{
padding-bottom:0!important;
}
.v27-player{
margin-bottom:6px!important;
}
.v27-development{
margin-top:0!important;
padding-top:18px!important;
}
}
/* Bridge energy from the player directly into Artist Development */
.v27-development{
position:relative;
overflow:hidden;
background:
radial-gradient(ellipse at 50% 0%,rgba(0,157,255,.14),transparent 34%),
radial-gradient(circle at 92% 62%,rgba(0,87,190,.09),transparent 28%),
linear-gradient(180deg,#000711,#00050c)!important;
}
.v27-development:after{
content:"TTZ // LEVEL UP // ⚡ // BUILD SYSTEM";
position:absolute;
z-index:0;
left:5%;
right:5%;
top:52%;
white-space:nowrap;
overflow:hidden;
font-size:clamp(14px,3vw,34px);
font-weight:900;
letter-spacing:.5em;
color:rgba(44,178,255,.025);
transform:rotate(-5deg);
pointer-events:none;
}
.v27-development>*{position:relative;z-index:1}
/* Subtle circuitry/frequency rails behind development cards */
.v27-dev-grid{
position:relative;
}
.v27-dev-grid:before{
content:"";
position:absolute;
z-index:0;
left:2%;
right:2%;
top:50%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(41,177,244,.20),transparent);
box-shadow:0 -48px 0 rgba(41,177,244,.035),0 48px 0 rgba(41,177,244,.035);
pointer-events:none;
}
.v27-dev-grid>div{z-index:1}
/* Creative Services: turn the black into a Titan engine-room */
.v27-services{
position:relative;
overflow:hidden;
background:
linear-gradient(90deg,rgba(0,4,10,.97),rgba(0,8,17,.90)),
radial-gradient(circle at 85% 20%,rgba(0,157,255,.18),transparent 27%),
linear-gradient(180deg,#00040a,#000914)!important;
}
.v27-services:after{
content:"⚡ ♫ TTZ ◉ ♪ ♛";
position:absolute;
right:-4%;
bottom:7%;
z-index:0;
font-size:clamp(30px,6vw,76px);
font-weight:900;
letter-spacing:.42em;
color:rgba(45,183,255,.035);
text-shadow:0 0 28px rgba(0,142,255,.08);
transform:rotate(-7deg);
pointer-events:none;
}
.v27-services>*{position:relative;z-index:1}
/* Each service row gets a faint illuminated frequency rail */
.v27-service-list>div{
position:relative;
}
.v27-service-list>div:after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:0;
height:1px;
background:linear-gradient(90deg,#22baff,transparent);
transition:width .28s ease;
}
.v27-service-list>div:hover:after{width:100%}
/* Keep lower transitions connected */
.v27-services + .v26-license-shop,
.v26-license-shop + .v25-movement{
margin-top:0!important;
}
/* iPhone-specific restraint */
@media(max-width:430px){
.v27-development{
padding-top:14px!important;
padding-bottom:26px!important;
}
.v27-development:after{
top:45%;
left:3%;
font-size:12px;
opacity:.8;
}
.v27-services{
padding-top:34px!important;
padding-bottom:36px!important;
}
.v27-services:after{
right:-28%;
bottom:10%;
font-size:56px;
}
.v27-service-list>div{
padding-top:16px!important;
padding-bottom:16px!important;
}
}
/* =========================================================
V39 — TITAN PRODUCTION CHAMBER
Creative Services gets the visual power of the hero while
preserving readability and the approved mobile flow.
========================================================= */
.v27-services{
position:relative;
isolation:isolate;
overflow:hidden;
background:
linear-gradient(90deg,rgba(0,4,10,.94) 0%,rgba(0,7,15,.86) 58%,rgba(0,5,12,.82) 100%),
url("assets/giant-titan-v23.jpg") 78% 45%/cover no-repeat!important;
}
/* Dark veil keeps copy clean while Titan remains visible */
.v27-services:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:
linear-gradient(90deg,rgba(0,4,10,.96) 0%,rgba(0,6,13,.86) 47%,rgba(0,5,12,.50) 100%),
radial-gradient(circle at 78% 28%,rgba(0,164,255,.17),transparent 28%),
radial-gradient(circle at 72% 74%,rgba(0,91,255,.11),transparent 34%);
pointer-events:none;
}
/* Production-chamber frequency architecture */
.v27-services:after{
content:"";
position:absolute;
z-index:-1;
left:0;
right:0;
bottom:7%;
height:160px;
opacity:.42;
background:
linear-gradient(90deg,transparent 0 4%,rgba(44,185,255,.18) 4% 4.2%,transparent 4.2% 10%,
rgba(44,185,255,.08) 10% 10.3%,transparent 10.3% 17%,
rgba(44,185,255,.14) 17% 17.2%,transparent 17.2% 28%,
rgba(44,185,255,.08) 28% 28.2%,transparent 28.2% 41%,
rgba(44,185,255,.17) 41% 41.3%,transparent 41.3% 55%,
rgba(44,185,255,.09) 55% 55.2%,transparent 55.2% 68%,
rgba(44,185,255,.15) 68% 68.2%,transparent 68.2% 82%,
rgba(44,185,255,.08) 82% 82.2%,transparent 82.2%);
filter:drop-shadow(0 0 14px rgba(0,145,255,.18));
pointer-events:none;
}
.v27-services-title{
position:relative;
}
.v27-services-title:before{
content:"TITAN // PRODUCTION CHAMBER";
display:block;
margin-bottom:12px;
font-size:9px;
font-weight:800;
letter-spacing:.46em;
color:rgba(82,202,255,.68);
}
/* Service rows become illuminated console lanes */
.v27-service-list{
position:relative;
backdrop-filter:blur(1px);
-webkit-backdrop-filter:blur(1px);
}
.v27-service-list>div{
position:relative;
background:linear-gradient(90deg,rgba(1,12,24,.68),rgba(0,7,15,.24));
border-left:1px solid rgba(50,185,255,.16);
padding-left:16px!important;
}
.v27-service-list>div:before{
content:"";
position:absolute;
left:-2px;
top:50%;
width:4px;
height:4px;
border-radius:50%;
background:#45c8ff;
box-shadow:0 0 12px rgba(69,200,255,.75);
}
.v27-service-list>div:after{
width:100%!important;
opacity:.42;
}
/* Development gets depth, but no extra height */
.v27-development{
background:
radial-gradient(circle at 86% 28%,rgba(0,145,255,.13),transparent 24%),
radial-gradient(circle at 12% 80%,rgba(0,80,180,.08),transparent 28%),
repeating-linear-gradient(90deg,transparent 0 68px,rgba(41,160,220,.018) 69px,transparent 70px),
linear-gradient(180deg,#000711,#00050c)!important;
}
.v27-dev-grid>div{
background:
linear-gradient(145deg,rgba(1,13,25,.88),rgba(0,7,15,.94))!important;
box-shadow:
inset 0 0 32px rgba(0,133,255,.035),
0 12px 28px rgba(0,0,0,.22)!important;
}
/* Mobile tuning from actual iPhone flow */
@media(max-width:800px){
.v27-services{
background:
linear-gradient(180deg,rgba(0,4,10,.93),rgba(0,6,13,.82)),
url("assets/giant-titan-v23.jpg") 69% 40%/auto 105% no-repeat!important;
padding-top:34px!important;
padding-bottom:34px!important;
}
.v27-services:before{
background:
linear-gradient(90deg,rgba(0,4,10,.95) 0%,rgba(0,6,13,.78) 58%,rgba(0,5,12,.43) 100%),
radial-gradient(circle at 72% 28%,rgba(0,164,255,.18),transparent 30%);
}
.v27-services:after{
height:110px;
bottom:4%;
opacity:.34;
}
.v27-service-list>div{
background:linear-gradient(90deg,rgba(0,10,21,.76),rgba(0,7,15,.32));
}
.v27-development{
padding-top:14px!important;
padding-bottom:24px!important;
}
}
/* =========================================================
V40 — TITAN COMMAND CENTER
Final-system cohesion pass: licensing, movement, CTA/footer.
========================================================= */
/* Licensing now feels like part of the same Titan machine */
.v26-license-shop{
position:relative;
isolation:isolate;
overflow:hidden;
background:
radial-gradient(circle at 82% 18%,rgba(0,151,255,.15),transparent 26%),
radial-gradient(circle at 12% 76%,rgba(0,78,190,.09),transparent 30%),
linear-gradient(180deg,#000712,#00040a)!important;
}
.v26-license-shop:after{
content:"TTZ // RIGHTS // RELEASE // OWNERSHIP";
position:absolute;
z-index:0;
right:-3%;
top:14%;
font-size:clamp(16px,3vw,38px);
font-weight:900;
letter-spacing:.34em;
color:rgba(55,187,255,.025);
transform:rotate(-7deg);
pointer-events:none;
}
.v26-license-shop>*{position:relative;z-index:1}
/* License tiers: stronger hierarchy */
.v26-tier{
background:linear-gradient(145deg,rgba(1,14,27,.94),rgba(0,6,13,.97))!important;
border-color:rgba(53,181,239,.32)!important;
}
.v26-tier:hover,
.v26-tier.active{
border-color:rgba(65,198,255,.78)!important;
box-shadow:inset 0 0 34px rgba(0,145,255,.08),0 0 25px rgba(0,145,255,.12)!important;
}
/* Movement becomes the brand payoff */
.v25-movement{
position:relative;
isolation:isolate;
overflow:hidden;
}
.v25-movement:after{
content:"♛";
position:absolute;
z-index:0;
right:5%;
top:15%;
font-size:clamp(110px,22vw,310px);
line-height:1;
color:rgba(49,181,255,.025);
text-shadow:0 0 60px rgba(0,145,255,.08);
pointer-events:none;
}
.v25-movement>*{position:relative;z-index:1}
/* Final CTA feels like a launch console */
.contact-cta{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 50% 0%,rgba(0,149,255,.13),transparent 28%),
linear-gradient(180deg,#000711,#00040a)!important;
}
.contact-cta:before{
content:"READY // SIGNAL LOCKED // TTZ";
display:block;
margin:0 auto 18px;
text-align:center;
font-size:9px;
font-weight:800;
letter-spacing:.42em;
color:rgba(79,201,255,.62);
}
.contact-cta:after{
content:"";
position:absolute;
left:8%;
right:8%;
bottom:18%;
height:1px;
background:linear-gradient(90deg,transparent,rgba(64,194,255,.32),transparent);
box-shadow:0 0 18px rgba(0,145,255,.12);
pointer-events:none;
}
/* Shared hover/tap energy */
.v26-tier,
.v27-dev-grid>div,
.v27-service-list>div{
will-change:transform;
}
.v26-tier:hover,
.v27-dev-grid>div:hover{
transform:translateY(-3px);
}
/* Mobile command-center tuning */
@media(max-width:800px){
.v26-license-shop{
padding-top:34px!important;
padding-bottom:34px!important;
}
.v26-license-shop:after{
top:11%;
right:-28%;
font-size:22px;
}
.v25-movement{
padding-top:42px!important;
padding-bottom:38px!important;
}
.v25-movement:after{
right:-12%;
top:18%;
font-size:190px;
}
.contact-cta{
padding-top:38px!important;
padding-bottom:42px!important;
}
/* Smooth perceived progression on iOS */
.v27-services,
.v26-license-shop,
.v25-movement,
.contact-cta{
scroll-margin-top:12px;
}
/* No accidental hover stickiness on touch */
@media(hover:none){
.v26-tier:hover,
.v27-dev-grid>div:hover{
transform:none;
}
}
}
/* =========================================================
V41 — TITAN ATMOSPHERE / DEAD-SPACE KILLER
Adds low-opacity Titan energy to long black transitions.
========================================================= */
body:before{
content:"";
position:fixed; inset:0; z-index:-2; pointer-events:none;
background:
radial-gradient(circle at 86% 18%,rgba(0,156,255,.08),transparent 24%),
radial-gradient(circle at 12% 55%,rgba(0,83,210,.055),transparent 26%),
linear-gradient(115deg,transparent 0 48%,rgba(36,164,255,.018) 49%,transparent 50% 100%);
}
/* repeating ghost frequency marks behind the site */
main:after{
content:"♛ ϟ ♫ TTZ // ϟ ♛";
position:fixed; left:50%; top:58%; z-index:-1;
width:120vw; transform:translate(-50%,-50%) rotate(-8deg);
text-align:center; white-space:nowrap;
font-size:clamp(34px,8vw,110px); font-weight:900;
letter-spacing:.22em;
color:rgba(35,166,255,.018);
text-shadow:0 0 35px rgba(0,144,255,.035);
pointer-events:none;
}
/* Give major transitions their own faint Titan watermark */
.section,.release-room,.v27-development,.v27-services,.v26-license-shop,.v25-movement,.contact-cta{
position:relative; isolation:isolate;
}
.section:before,.release-room:before,.v27-development:before,.v27-services:before{
content:"TTZ";
position:absolute; z-index:-1; pointer-events:none;
right:3%; top:42%;
font-size:clamp(90px,24vw,330px); line-height:.8;
font-weight:1000; font-style:italic; letter-spacing:-.08em;
color:rgba(32,161,255,.018);
text-shadow:0 0 70px rgba(0,136,255,.05);
}
/* lightning / music-frequency rails in open space */
.vault-transition,.release-room,.v27-development,.v27-services,.v26-license-shop,.v25-movement{
background-image:
linear-gradient(90deg,transparent 0 8%,rgba(42,171,255,.045) 8.1%,transparent 8.3% 91%,rgba(42,171,255,.04) 91.1%,transparent 91.3%),
radial-gradient(circle at 15% 68%,rgba(0,144,255,.075),transparent 18%),
radial-gradient(circle at 86% 30%,rgba(0,91,255,.06),transparent 19%)!important;
}
/* subtle giant lightning sigil */
.v27-development:after,.release-room:after{
content:"ϟ";
position:absolute; z-index:-1; pointer-events:none;
right:7%; bottom:7%;
font-size:clamp(110px,25vw,340px);
color:rgba(57,188,255,.022);
filter:drop-shadow(0 0 28px rgba(0,151,255,.08));
transform:rotate(8deg);
}
@media(max-width:800px){
main:after{font-size:46px;opacity:.9;top:62%}
.section:before,.release-room:before,.v27-development:before,.v27-services:before{
right:-11%;top:48%;font-size:150px;color:rgba(32,161,255,.026);
}
.v27-development:after,.release-room:after{right:-3%;font-size:155px;color:rgba(57,188,255,.028)}
/* Keep decoration behind readable content on narrow iOS */
.section>*,.release-room>*,.v27-development>*,.v27-services>*{position:relative;z-index:1}
}
/* =========================================================
V42 — TITAN STORM POLISH
Mobile-first atmosphere + tighter section transitions.
========================================================= */
@media(max-width:800px){
/* tighten the long black handoff zones without crushing content */
.release-room,.v27-development,.v27-services,.v26-license-shop,.v25-movement,.contact-cta{
min-height:auto!important;
}
.v27-development{padding-top:64px!important;padding-bottom:58px!important}
.v27-services{padding-top:58px!important;padding-bottom:58px!important}
.release-room{padding-top:62px!important;padding-bottom:62px!important}
.v26-license-shop{padding-top:62px!important;padding-bottom:62px!important}
/* blue storm veil across transition zones */
.v27-development,.v27-services,.release-room,.v26-license-shop,.v25-movement{
background-color:#010813!important;
background-image:
radial-gradient(ellipse at 15% 10%,rgba(0,153,255,.12),transparent 31%),
radial-gradient(ellipse at 90% 78%,rgba(0,91,255,.09),transparent 30%),
linear-gradient(122deg,transparent 0 45%,rgba(40,180,255,.035) 45.5%,transparent 46.5%),
linear-gradient(58deg,transparent 0 69%,rgba(24,135,255,.028) 69.5%,transparent 70.5%)!important;
}
/* faint frequency rail — visible in the gaps, never over copy */
.v27-development:before,.v27-services:before,.v26-license-shop:before,.v25-movement:before{
content:"♛ · ϟ · ♫ · TTZ · ♫ · ϟ"!important;
position:absolute!important;left:4%!important;right:auto!important;top:18px!important;
width:92%!important;height:auto!important;
font-size:13px!important;line-height:1!important;font-style:normal!important;font-weight:800!important;
letter-spacing:.42em!important;white-space:nowrap!important;overflow:hidden!important;
color:rgba(76,190,255,.16)!important;text-shadow:0 0 16px rgba(0,157,255,.18)!important;
transform:none!important;
}
/* large ghost crown/bolt tucked into negative space */
.v27-services:after,.v26-license-shop:after,.v25-movement:after{
position:absolute;z-index:0;pointer-events:none;right:-22px;bottom:28px;
font-size:118px;line-height:1;color:rgba(40,174,255,.035);
text-shadow:0 0 36px rgba(0,145,255,.09);transform:rotate(-8deg);
}
.v27-services:after{content:"♛"}
.v26-license-shop:after{content:"ϟ"}
.v25-movement:after{content:"♫"}
/* iOS width guard */
html,body,main{max-width:100%;overflow-x:hidden!important}
section{max-width:100vw}
}
/* FINAL MOBILE STORE PASS */
@media(max-width:760px){
.v27-development{padding-top:48px!important;padding-bottom:44px!important}
.v27-dev-copy h2{font-size:clamp(42px,12.2vw,62px)!important;line-height:.86!important;letter-spacing:-.045em!important;margin-bottom:22px!important}
.v27-dev-copy p{font-size:17px!important;line-height:1.55!important;max-width:92%!important}
.v27-dev-grid{margin-top:30px!important}
.v27-services,.v26-license-shop{padding-top:48px!important;padding-bottom:48px!important}
.v27-player{bottom:max(10px,env(safe-area-inset-bottom))!important}
.v26-license-console{gap:18px!important}
.v26-license-price button{min-height:52px!important}
.v27-beat.selected{outline:2px solid #2db7ff!important;box-shadow:0 0 26px rgba(0,153,255,.25)!important}
.v27-beatgrid{padding-bottom:10px!important}
}
/* FINAL CORRECTION — iOS mobile lock */
@media (max-width:760px){
html,body{width:100%;max-width:100%;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
body{position:relative}
section{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
.v27-player{position:relative!important;bottom:auto!important;margin:24px 18px 0!important;width:calc(100% - 36px)!important;max-width:none!important;box-sizing:border-box!important}
.v27-development{padding:52px 20px 50px!important;overflow:hidden!important}
.v27-dev-copy{max-width:100%!important}
.v27-dev-copy h2{font-size:clamp(38px,10.8vw,54px)!important;line-height:.9!important;letter-spacing:-.04em!important;max-width:100%!important}
.v27-dev-copy p{max-width:100%!important}
.v27-dev-grid{display:flex!important;gap:14px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;padding:2px 2px 16px!important;margin-right:-20px!important;scroll-padding-left:2px!important}
.v27-dev-grid>div{flex:0 0 82vw!important;max-width:330px!important;min-height:245px!important;scroll-snap-align:start!important;box-sizing:border-box!important}
.v26-tiers{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;gap:12px!important;padding-bottom:14px!important}
.v26-tier{flex:0 0 72vw!important;max-width:280px!important;scroll-snap-align:start!important}
.v26-license-console{grid-template-columns:1fr!important;width:100%!important;box-sizing:border-box!important}
.v26-license-price{width:100%!important;box-sizing:border-box!important}
.v26-license-price button{width:100%!important}
.v25-movement h2,.v27-services-title h2{overflow-wrap:normal!important;word-break:keep-all!important}
.v25-movement{padding-bottom:calc(56px + env(safe-area-inset-bottom))!important}
}
/* FINAL130 — Artist Development iPhone viewport correction */
@media (max-width:760px){
.v27-dev-grid{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
padding:2px 0 14px!important;
gap:12px!important;
overflow-x:auto!important;
scroll-padding:0!important;
scroll-snap-type:x mandatory!important;
overscroll-behavior-x:contain;
}
.v27-dev-grid>div{
flex:0 0 100%!important;
width:100%!important;
max-width:100%!important;
min-width:100%!important;
scroll-snap-align:start!important;
scroll-snap-stop:always!important;
box-sizing:border-box!important;
}
.v27-development{
padding-left:20px!important;
padding-right:20px!important;
}
}
/* =========================================================
TTZ 131 — FUNCTIONAL STOREFRONT FLOW
========================================================= */
.ttz-storefront{position:relative;overflow:hidden;padding:70px 20px;background:
radial-gradient(circle at 85% 10%,rgba(0,157,255,.16),transparent 28%),
linear-gradient(180deg,#00050c,#010b17);border-top:1px solid rgba(53,187,255,.38)}
.ttz-storefront:after{content:"⚡ TTZ ♫";position:absolute;right:-2%;top:8%;font:900 clamp(70px,12vw,170px)/1 Impact,sans-serif;color:rgba(44,183,255,.025);transform:rotate(-8deg);pointer-events:none}
.ttz-store-shell{position:relative;z-index:1;max-width:1120px;margin:auto}
.ttz-store-kicker{font-size:10px;font-weight:900;letter-spacing:.42em;color:#45c8ff;margin-bottom:12px}
.ttz-storefront h2{margin:0 0 12px;font:900 clamp(42px,7vw,88px)/.88 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-style:italic;letter-spacing:-.04em;color:#fff}
.ttz-store-sub{max-width:680px;color:#9aa9b7;line-height:1.6}
.ttz-store-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:12px;margin-top:34px}
.ttz-store-panel{min-width:0;padding:22px;border:1px solid rgba(61,187,244,.32);background:linear-gradient(145deg,rgba(2,17,32,.94),rgba(0,7,15,.97));box-shadow:inset 0 0 35px rgba(0,145,255,.035)}
.ttz-step{display:block;font-size:9px;letter-spacing:.34em;color:#42c6ff;font-weight:900;margin-bottom:18px}
.ttz-store-panel label{display:block;color:white;font-weight:900;margin-bottom:10px}
.ttz-store-panel select,.ttz-modal-card input,.ttz-modal-card textarea{width:100%;box-sizing:border-box;border:1px solid #263b4c;background:#020b13;color:#fff;padding:14px;border-radius:0;font:inherit}
.ttz-status{margin-top:12px;color:#8295a5;font-size:12px}
.ttz-license-buttons{display:grid;gap:10px}
.ttz-license-btn,.ttz-continue{border:1px solid #24baff;background:#041321;color:#fff;padding:14px;font-weight:1000;letter-spacing:.08em;cursor:pointer}
.ttz-license-btn.active{background:#18aef0;color:#00101b;box-shadow:0 0 24px rgba(24,174,240,.22)}
.ttz-summary-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(92,168,208,.15);font-size:12px}
.ttz-summary-row span{color:#718697}.ttz-summary-row strong{color:#fff;text-align:right}
.ttz-continue{width:100%;margin-top:20px;background:#21b8f6;color:#00111b}
.ttz-continue:disabled{opacity:.35;cursor:not-allowed}
.ttz-summary small{display:block;color:#637787;line-height:1.45;margin-top:12px}
.ttz-modal{position:fixed;z-index:9999;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,3,8,.88);backdrop-filter:blur(10px)}
.ttz-modal.open{display:flex}
.ttz-modal-card{position:relative;width:min(560px,100%);max-height:88dvh;overflow:auto;padding:28px;border:1px solid #25baff;background:#010914;box-shadow:0 0 50px rgba(0,145,255,.2)}
.ttz-modal-card h3{font:900 42px/.9 Impact,sans-serif;font-style:italic;color:white;margin:8px 0 12px}
.ttz-modal-card p{color:#43c7ff;font-weight:800}
.ttz-modal-card form{display:grid;gap:10px;margin-top:20px}
.ttz-modal-card textarea{min-height:110px;resize:vertical}
.ttz-modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:#fff;font-size:30px}
.ttz-prepared{margin-top:16px;padding:16px;border:1px solid rgba(49,187,245,.3);color:#b8c7d2;line-height:1.55;background:rgba(0,145,255,.04)}
.ttz-prepared strong{color:#42c7ff}.ttz-prepared span{color:#7d91a0}
@media(max-width:800px){
.ttz-storefront{padding:48px 18px}
.ttz-store-grid{grid-template-columns:1fr;gap:10px;margin-top:24px}
.ttz-store-panel{padding:18px}
.ttz-storefront h2{font-size:48px}
.ttz-modal-card{padding:24px 18px}
.ttz-modal-card h3{font-size:36px}
}
.ttz-launch-strip{display:grid;grid-template-columns:repeat(4,1fr);max-width:1120px;margin:0 auto;padding:0 20px 50px;gap:8px}
.ttz-launch-strip>div{min-height:110px;border:1px solid rgba(52,180,239,.25);background:linear-gradient(145deg,rgba(2,16,29,.95),rgba(0,7,14,.97));display:grid;place-items:center;text-align:center;padding:15px}
.ttz-launch-strip span{color:#46c8ff;font-size:24px;text-shadow:0 0 16px rgba(0,153,255,.45)}
.ttz-launch-strip strong{font:900 25px Impact,sans-serif;color:white}.ttz-launch-strip small{font-size:8px;letter-spacing:.24em;color:#6f8da3}
.ttz-launch-faq{padding:72px 20px;max-width:1120px;margin:auto}
.ttz-launch-faq h2,.ttz-final-cta h2{font:900 clamp(42px,7vw,84px)/.88 Impact,sans-serif;font-style:italic;letter-spacing:-.04em;color:white;margin:0 0 28px}
.ttz-launch-faq h2 em,.ttz-final-cta h2 em{font-style:normal;color:#25baff;text-shadow:0 0 20px rgba(0,145,255,.24)}
.ttz-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ttz-faq-grid details{border:1px solid rgba(50,177,236,.25);background:#020b14;padding:18px}
.ttz-faq-grid summary{cursor:pointer;font-weight:900;color:#e7f6ff}.ttz-faq-grid p{color:#8fa0af;line-height:1.55;margin-bottom:0}
.ttz-final-cta{text-align:center;padding:90px 20px;background:radial-gradient(circle at 50% 20%,rgba(0,150,255,.16),transparent 28%),linear-gradient(180deg,#010913,#00040a);border-top:1px solid rgba(51,179,238,.3)}
.ttz-final-crest{font-size:52px;color:#43c7ff;text-shadow:0 0 25px rgba(0,153,255,.5);margin-bottom:12px}
.ttz-final-cta p{max-width:700px;margin:0 auto;color:#97a7b5;line-height:1.6}
.ttz-final-actions{display:flex;justify-content:center;gap:10px;margin-top:28px}
.ttz-final-actions a,.ttz-mail-request{display:inline-block;padding:14px 20px;border:1px solid #25baff;color:#fff;text-decoration:none;font-weight:1000;background:#041321}
.ttz-final-actions a:first-child,.ttz-mail-request{background:#20b9f4;color:#00111a}.ttz-mail-request{margin-top:14px}
.ttz-mobile-dock{display:none}
@media(max-width:800px){
.ttz-launch-strip{grid-template-columns:1fr 1fr;padding:0 18px 36px}.ttz-launch-strip>div{min-height:95px}
.ttz-launch-faq{padding:48px 18px}.ttz-faq-grid{grid-template-columns:1fr}
.ttz-final-cta{padding:62px 18px 110px}.ttz-final-actions{flex-direction:column}
.ttz-mobile-dock{position:fixed;z-index:9998;display:grid;grid-template-columns:repeat(5,1fr);left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));height:62px;border:1px solid rgba(69,193,245,.28);background:rgba(0,8,16,.92);backdrop-filter:blur(16px);box-shadow:0 0 26px rgba(0,126,230,.12)}
.ttz-mobile-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7893a6;text-decoration:none;font-size:16px}
.ttz-mobile-dock small{font-size:7px;letter-spacing:.08em;margin-top:3px}
.ttz-mobile-dock .dock-main{color:#45caff}.ttz-mobile-dock .dock-main span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0a86d5;color:#fff;box-shadow:0 0 18px rgba(0,150,255,.32);margin-top:-16px}
body{padding-bottom:78px}
}