*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;background:#050508;color:#f8f7ff;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.container{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:120px 0;position:relative}.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(112,66,255,.14),transparent 65%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none}.glass{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 70px rgba(0,0,0,.34);backdrop-filter:blur(22px)}.loader{position:fixed;inset:0;background:#050508;z-index:10000;display:grid;place-content:center;text-align:center;transition:.8s}.loader.hide{opacity:0;visibility:hidden}.loader-mark{font-family:"Space Grotesk";font-size:70px;font-weight:700;letter-spacing:-5px}.loader p{letter-spacing:11px;font-size:11px;color:#8d88a1}.loader-line{width:200px;height:1px;background:#202028;margin:18px 0;overflow:hidden}.loader-line span{display:block;width:60%;height:100%;background:linear-gradient(90deg,#8257ff,#00d8ff);animation:load 1.5s infinite}@keyframes load{from{transform:translateX(-120%)}to{transform:translateX(230%)}}.nav-wrap{position:fixed;top:18px;left:0;right:0;z-index:1000}.nav{height:70px;border-radius:20px;display:flex;align-items:center;padding:0 20px}.brand{display:inline-flex;flex-direction:column;line-height:.85}.brand-mark{font-family:"Space Grotesk";font-size:22px;font-weight:800;letter-spacing:-1px}.brand-sub{font-size:8px;letter-spacing:5px;color:#a9a4bc;margin-left:1px;margin-top:6px}.nav-links{margin-left:auto;display:flex;align-items:center;gap:28px}.nav-links a{font-size:13px;color:#c8c4d3;transition:.25s}.nav-links a:hover{color:#fff}.nav-cta{padding:12px 18px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.06)}.language{position:relative;margin-left:14px}.lang-btn{background:#111118;border:1px solid #282833;color:#fff;padding:10px 13px;border-radius:11px;font-size:12px;cursor:pointer}.lang-menu{position:absolute;right:0;top:48px;width:140px;border:1px solid #262631;border-radius:14px;background:#101016;padding:7px;display:none;box-shadow:0 20px 50px #000}.lang-menu.open{display:block}.lang-menu button{width:100%;background:none;border:0;color:#ccc;text-align:left;padding:10px;border-radius:8px;cursor:pointer}.lang-menu button:hover{background:#1b1b25;color:white}.menu-btn{display:none}.hero{min-height:100vh;padding:170px 0 70px;display:flex;align-items:center;background:radial-gradient(circle at 64% 40%,rgba(93,55,255,.12),transparent 34%),radial-gradient(circle at 82% 15%,rgba(0,210,255,.08),transparent 28%)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:60px;align-items:center}.eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:2px;color:#aaa4ba;margin-bottom:25px}.eyebrow span{width:34px;height:1px;background:linear-gradient(90deg,#7d4cff,#00d9ff)}h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif}.hero h1{font-size:clamp(54px,6vw,88px);line-height:.94;letter-spacing:-5px}.hero h1 span{display:block}.gradient-text{background:linear-gradient(100deg,#a47cff,#5d7dff 48%,#00d5ff);-webkit-background-clip:text;color:transparent}.hero-copy>p{font-size:17px;line-height:1.75;color:#a9a5b8;max-width:640px;margin:30px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:0 24px;border-radius:14px;font-size:13px;font-weight:700;letter-spacing:.2px;border:1px solid transparent;cursor:pointer;transition:.3s}.btn.primary{background:linear-gradient(100deg,#7750ff,#4d76ff 60%,#00bddb);box-shadow:0 14px 40px rgba(96,68,255,.3)}.btn.primary:hover{transform:translateY(-3px);box-shadow:0 20px 55px rgba(96,68,255,.45)}.btn.ghost{border-color:#2a2934;background:#0d0d13;color:#d9d7e1}.btn.ghost:hover{border-color:#555062;background:#161620}.trust-row{display:flex;gap:34px;margin-top:45px}.trust-row div{display:flex;flex-direction:column}.trust-row strong{font-family:"Space Grotesk";font-size:22px}.trust-row span{font-size:10px;color:#777384;text-transform:uppercase;letter-spacing:1.2px;margin-top:5px}.hero-visual{height:650px;display:grid;place-items:center;perspective:1400px}.scene{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:.15s}.ring{position:absolute;border:1px solid rgba(135,96,255,.25);border-radius:50%;inset:10% 8%;transform:rotateX(68deg) rotateZ(18deg);box-shadow:0 0 60px rgba(110,72,255,.12)}.ring-b{inset:20% 20%;border-color:rgba(0,220,255,.18);transform:rotateX(70deg) rotateZ(-25deg)}.device{position:absolute;overflow:hidden}.laptop{width:490px;height:315px;left:4%;top:24%;border-radius:22px;transform:rotateY(-13deg) rotateX(5deg) translateZ(30px);box-shadow:40px 70px 120px rgba(0,0,0,.6),0 0 80px rgba(88,55,255,.15)}.device-top{height:33px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;padding:0 12px;gap:6px}.device-top i{width:6px;height:6px;border-radius:50%;background:#555}.device-top span{margin-left:auto;font-size:7px;letter-spacing:2px;color:#797586}.screen{height:calc(100% - 33px);padding:20px;background:radial-gradient(circle at 70% 30%,rgba(97,71,255,.25),transparent 38%),#09090f}.screen-nav{font-size:12px}.screen-nav span{font-size:6px;letter-spacing:4px;margin-left:5px;color:#8a849a}.screen-hero{padding:40px 0 28px}.screen-hero small{font-size:6px;letter-spacing:2px;color:#888}.screen-hero h3{font-size:28px;line-height:1;margin:12px 0;width:80%;letter-spacing:-1.5px}.mini-btn{display:inline-block;padding:8px 12px;border-radius:6px;background:linear-gradient(90deg,#7651ff,#00bedf);font-size:6px;font-weight:800}.screen-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.screen-cards div{height:55px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(145deg,#171722,#0c0c12)}.phone{width:150px;height:315px;right:2%;top:39%;border-radius:28px;transform:rotateY(-18deg) rotateZ(5deg) translateZ(90px);padding:7px;background:#101017;border:1px solid #3b3948;box-shadow:30px 50px 100px #000}.phone-screen{height:100%;border-radius:22px;overflow:hidden;background:#0b0b0e}.phone-notch{position:absolute;width:55px;height:14px;background:#08080b;left:50%;transform:translateX(-50%);top:7px;border-radius:0 0 10px 10px;z-index:2}.insta-head{height:45px;padding:20px 10px 0;font-size:7px;letter-spacing:1px}.insta-post{height:220px;background:radial-gradient(circle at 30% 30%,#7749ff,transparent 30%),radial-gradient(circle at 70% 70%,#00a8d6,transparent 32%),#111118;display:grid;place-items:center;text-align:center}.insta-post span{font-family:"Space Grotesk";font-size:20px;font-weight:800;line-height:.95}.insta-icons{font-size:11px;padding:11px}.float-card{position:absolute;padding:13px 16px;border-radius:14px;display:flex;flex-direction:column;z-index:3}.float-card b{font-size:17px}.float-card span{font-size:8px;color:#9b96a8;margin-top:3px}.card-seo{right:10%;top:16%;transform:translateZ(140px)}.card-brand{left:5%;bottom:12%;transform:translateZ(100px)}.hero-orb{position:absolute;border-radius:50%;filter:blur(4px);opacity:.5}.orb-one{width:230px;height:230px;border:1px solid #6147bf;right:-100px;top:170px}.orb-two{width:100px;height:100px;background:#623cff;filter:blur(70px);left:30%;bottom:10%}.marquee{position:absolute;left:0;right:0;bottom:0;border-top:1px solid #17171e;border-bottom:1px solid #17171e;overflow:hidden;padding:13px 0}.marquee div{display:flex;gap:28px;width:max-content;animation:marquee 25s linear infinite}.marquee span{font-size:10px;letter-spacing:2px;color:#706c7d}.marquee i{font-style:normal;color:#6746d9}@keyframes marquee{to{transform:translateX(-50%)}}.section-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:55px}.section-head>div{max-width:720px}.section-kicker{font-size:10px;letter-spacing:3px;color:#805cff;font-weight:800}.section-head h2,.process h2,.contact h2{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-3px;margin-top:16px}.section-head>p{max-width:390px;color:#8f8a9e;line-height:1.7;font-size:14px}.services{background:linear-gradient(#050508,#08080d)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.service-card{min-height:310px;padding:28px;border:1px solid #1c1c25;border-radius:22px;background:linear-gradient(145deg,#0d0d13,#08080d);position:relative;transition:.35s;overflow:hidden}.service-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:#744cff;filter:blur(90px);opacity:0;right:-80px;bottom:-80px;transition:.4s}.service-card:hover{transform:translateY(-8px);border-color:#3a3157}.service-card:hover:after{opacity:.25}.service-card.featured{grid-column:span 2;background:radial-gradient(circle at 80% 20%,rgba(103,68,255,.25),transparent 40%),linear-gradient(145deg,#11111a,#09090f)}.service-card>span{position:absolute;right:24px;top:25px;color:#4e4a5c;font-size:11px}.service-icon{width:45px;height:45px;border-radius:13px;border:1px solid #34303f;background:#14141d;display:grid;place-items:center;color:#9d78ff}.service-card h3{font-size:23px;margin:48px 0 15px;letter-spacing:-.8px}.service-card p{font-size:13px;line-height:1.7;color:#8d8998;max-width:620px}.tags{display:flex;gap:8px;margin-top:24px}.tags b{font-size:9px;padding:7px 9px;border:1px solid #2b2834;border-radius:30px;color:#918b9e}.industries{overflow:hidden}.industry-track{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.industry-card{height:230px;border-radius:22px;padding:25px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);background-size:cover}.industry-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(4,4,8,.95));z-index:0}.industry-card>*{position:relative;z-index:1}.industry-card>span{position:absolute;top:20px;right:20px;font-size:10px}.industry-card h3{font-size:25px}.industry-card p{font-size:11px;color:#aaa4b5;margin-top:7px}.restaurant{background:radial-gradient(circle at 60% 20%,#a95f34,transparent 28%),linear-gradient(140deg,#3b1712,#0a0909)}.barber{background:radial-gradient(circle at 60% 20%,#69717d,transparent 28%),linear-gradient(140deg,#252a31,#07080a)}.auto{background:radial-gradient(circle at 60% 20%,#3153a8,transparent 28%),linear-gradient(140deg,#111b39,#07080d)}.fitness{background:radial-gradient(circle at 60% 20%,#8b1e35,transparent 28%),linear-gradient(140deg,#2c0f16,#080708)}.hotel{background:radial-gradient(circle at 60% 20%,#6e5b39,transparent 28%),linear-gradient(140deg,#241e14,#080807)}.local{background:radial-gradient(circle at 60% 20%,#256c66,transparent 28%),linear-gradient(140deg,#0e2c2b,#060909)}.work{background:#08080d}.work-grid{display:grid;gap:45px}.project-ui{height:520px;border-radius:28px;padding:35px;position:relative;overflow:hidden;border:1px solid #24232d;box-shadow:0 40px 90px rgba(0,0,0,.35)}.mock-nav{font-family:"Space Grotesk";font-size:18px;display:flex;justify-content:space-between}.mock-nav span{font:500 10px Inter;color:#aaa}.mock-copy{position:absolute;left:8%;top:50%;transform:translateY(-50%);max-width:500px}.mock-copy small{font-size:9px;letter-spacing:2px}.mock-copy h3{font-size:55px;line-height:.95;letter-spacing:-3px;margin:15px 0 25px}.mock-copy button{border:0;padding:13px 17px;font-size:8px;font-weight:900;letter-spacing:1px}.restaurant-ui{background:radial-gradient(circle at 70% 40%,rgba(197,111,59,.5),transparent 25%),linear-gradient(130deg,#25110d,#090707)}.restaurant-ui button{background:#d0a36e}.barber-ui{background:radial-gradient(circle at 70% 40%,rgba(170,178,187,.3),transparent 25%),linear-gradient(130deg,#1d2228,#070809)}.barber-ui button{background:#e8edf2}.auto-ui{background:radial-gradient(circle at 70% 40%,rgba(60,104,238,.45),transparent 25%),linear-gradient(130deg,#111a36,#05070d)}.auto-ui button{background:#426cff;color:white}.project-meta{display:flex;justify-content:space-between;align-items:end;padding:20px 5px}.project-meta span,.project-meta b{font-size:10px;color:#777283;text-transform:uppercase;letter-spacing:1px}.project-meta h3{font-size:25px;margin-top:6px}.process-wrap{border-radius:35px;padding:70px;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;background:radial-gradient(circle at 20% 50%,rgba(105,63,255,.16),transparent 35%),rgba(255,255,255,.035)}.process-copy p{color:#908b9b;line-height:1.7;margin:22px 0 30px}.steps{display:grid}.step{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:25px 0;border-bottom:1px solid #24232d}.step:last-child{border:0}.step>b{color:#7555e7;font-size:11px}.step h3{font-size:20px}.step p{font-size:12px;color:#898594;margin-top:6px;line-height:1.6}.pricing{background:linear-gradient(#050508,#08080d)}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:center}.price-card{border:1px solid #23222c;background:#0c0c12;border-radius:25px;padding:32px;min-height:520px;display:flex;flex-direction:column;position:relative}.price-card.popular{min-height:570px;background:radial-gradient(circle at 70% 10%,rgba(113,68,255,.22),transparent 30%),#101018;border-color:#5d458b}.popular-tag{position:absolute;right:20px;top:20px;font-size:8px;letter-spacing:1px;color:#bda9ff}.plan{font-size:9px;letter-spacing:2px;color:#7a7588}.price-card h3{font-size:29px;margin:14px 0}.price{font-family:"Space Grotesk";font-size:52px;font-weight:700;letter-spacing:-3px}.price span{font-size:18px;color:#777}.price-card>p{color:#898594;font-size:13px;line-height:1.6;margin:20px 0}.price-card ul{list-style:none;margin-bottom:28px}.price-card li{padding:11px 0;border-bottom:1px solid #1f1e26;font-size:12px;color:#b4afbd}.price-card li:before{content:"✓";color:#8966ff;margin-right:10px}.price-card .btn{margin-top:auto;width:100%}.statement-box{text-align:center;max-width:950px;margin:auto;padding:50px}.statement-box p{font-size:13px;letter-spacing:2px;color:#8461f1}.statement-box h2{font-size:clamp(40px,6vw,75px);line-height:1.05;letter-spacing:-4px;margin-top:25px}.contact{background:radial-gradient(circle at 20% 50%,rgba(97,59,255,.18),transparent 28%),#07070b}.contact-grid{display:grid;grid-template-columns:1fr .85fr;gap:70px;align-items:start}.contact-copy>p{color:#918c9e;max-width:530px;line-height:1.7;margin:25px 0 40px}.contact-info{display:grid;gap:12px}.contact-info a,.contact-info div{padding:17px 0;border-bottom:1px solid #22212a;display:flex;justify-content:space-between}.contact-info span{font-size:9px;letter-spacing:2px;color:#6f6a7b}.contact-info b{font-size:13px}.contact-form{border-radius:28px;padding:32px;display:grid;gap:18px}.contact-form label{display:grid;gap:8px}.contact-form label span{font-size:10px;color:#aaa4b5}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #292833;border-radius:12px;background:#0c0c12;color:#fff;padding:14px;outline:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#7355d7}.submit{width:100%}.contact-form small{text-align:center;color:#6e6979}.whatsapp{position:fixed;right:24px;bottom:24px;width:56px;height:56px;border-radius:18px;background:#26d366;color:#07160c;font-weight:900;display:grid;place-items:center;z-index:500;box-shadow:0 15px 40px rgba(38,211,102,.3)}footer{padding:70px 0 25px;background:#050508;border-top:1px solid #17171d}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:60px}.footer-grid>div{display:flex;flex-direction:column;gap:10px}.footer-grid>div>span{font-size:9px;letter-spacing:2px;color:#686474;margin-bottom:9px}.footer-grid p,.footer-grid a{font-size:12px;color:#96919f}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid #17171d;margin-top:55px;padding-top:22px;font-size:10px;color:#5d5967}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}@media(max-width:960px){.nav-links{position:fixed;left:20px;right:20px;top:82px;display:none;flex-direction:column;align-items:stretch;padding:20px;border:1px solid #272631;background:#0d0d13;border-radius:18px}.nav-links.open{display:flex}.menu-btn{display:block;margin-left:auto;margin-right:10px;background:none;border:0;width:34px}.menu-btn span{display:block;height:1px;background:white;margin:7px}.hero-grid,.contact-grid,.process-wrap{grid-template-columns:1fr}.hero-copy{text-align:center}.eyebrow,.hero-actions,.trust-row{justify-content:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-visual{height:550px}.services-grid{grid-template-columns:1fr 1fr}.service-card.featured{grid-column:span 2}.industry-track{grid-template-columns:1fr 1fr}.section-head{align-items:start;flex-direction:column}.pricing-grid{grid-template-columns:1fr}.price-card.popular{min-height:520px}.process-wrap{padding:40px}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.container{width:min(100% - 24px,1180px)}.section{padding:85px 0}.nav-wrap{top:10px}.nav{height:62px}.hero{padding-top:125px}.hero h1{font-size:50px;letter-spacing:-3px}.hero-copy>p{font-size:14px}.trust-row{gap:18px}.hero-visual{height:430px}.laptop{width:330px;height:230px;left:0}.screen-hero{padding:25px 0 18px}.screen-hero h3{font-size:19px}.phone{width:110px;height:235px;right:0;top:42%}.insta-post{height:160px}.insta-post span{font-size:14px}.float-card{display:none}.services-grid,.industry-track{grid-template-columns:1fr}.service-card.featured{grid-column:auto}.project-ui{height:390px;padding:22px}.mock-copy h3{font-size:38px}.process-wrap{padding:26px;gap:35px}.section-head h2,.process h2,.contact h2{letter-spacing:-2px}.contact-info a,.contact-info div{flex-direction:column;gap:7px}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-bottom{flex-direction:column;gap:8px}.language{margin-left:0}.lang-menu{right:0}}
/* CINEMATIC SCROLL STORY */
.story-section{height:520vh;position:relative;background:
radial-gradient(circle at 20% 20%,rgba(108,65,255,.08),transparent 30%),
linear-gradient(180deg,#050508,#09090f 50%,#050508)}
.story-shell{height:100%;position:relative}
.story-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:85px}
.story-label{display:flex;justify-content:space-between;align-items:center;padding:0 4px 20px;font-size:9px;letter-spacing:2px;color:#6e697a}
.story-label b{color:#a79dbe;font-weight:500}
.story-stage{height:min(720px,76vh);border:1px solid #1b1a22;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;background:linear-gradient(145deg,#0b0b10,#07070a);box-shadow:0 50px 140px rgba(0,0,0,.48)}
.story-copy-wrap{position:relative;padding:70px;display:flex;align-items:center}
.story-copy{position:absolute;left:70px;right:55px;opacity:0;transform:translateY(35px);transition:opacity .65s,transform .65s;pointer-events:none}
.story-copy.active{opacity:1;transform:none;pointer-events:auto}
.story-kicker{font-size:9px;letter-spacing:3px;color:#8460f1;font-weight:800}
.story-copy h2{font-size:clamp(42px,5vw,72px);line-height:.97;letter-spacing:-4px;margin:18px 0 24px}
.story-copy p{max-width:560px;color:#8f899b;font-size:14px;line-height:1.8}
.story-visual{position:relative;overflow:hidden;background:
radial-gradient(circle at 50% 50%,rgba(104,66,255,.17),transparent 35%),
linear-gradient(145deg,#0e0e16,#07070c)}
.story-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent)}
.story-scene{position:absolute;inset:0;opacity:0;transform:scale(.94) rotateX(5deg);transition:opacity .75s,transform .9s;perspective:1200px}
.story-scene.active{opacity:1;transform:scale(1) rotateX(0)}
.identity-monolith{position:absolute;width:230px;height:330px;left:50%;top:50%;transform:translate(-50%,-50%) rotateY(-18deg) rotateX(8deg);background:linear-gradient(145deg,#171720,#08080c);border:1px solid #393247;border-radius:10px;box-shadow:40px 55px 90px #000,0 0 100px rgba(110,68,255,.2);display:grid;place-content:center;text-align:center}
.identity-monolith span{font-family:"Space Grotesk";font-weight:800;font-size:74px;letter-spacing:-6px}
.identity-monolith small{font-size:8px;letter-spacing:4px;color:#9c96aa}
.palette{position:absolute;width:65px;height:65px;border-radius:20px;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px #000}
.p1{background:#7650ff;left:15%;top:18%;transform:rotate(-13deg)}.p2{background:#00bcd7;right:13%;top:25%;transform:rotate(17deg)}.p3{background:#f2f0ff;right:18%;bottom:17%;transform:rotate(-8deg)}
.brand-sheet{position:absolute;left:10%;bottom:13%;width:190px;height:105px;background:#f1eff7;color:#0a0a0d;border-radius:12px;padding:18px;transform:rotate(8deg);box-shadow:0 25px 45px #000}
.brand-sheet b{display:block;font-size:12px}.brand-sheet span{font-family:"Space Grotesk";font-size:34px;font-weight:800;float:right}.brand-sheet i{font-style:normal;font-size:7px;position:absolute;bottom:15px;left:18px}
.browser-story{position:absolute;width:78%;height:60%;left:8%;top:18%;border:1px solid #353243;border-radius:20px;background:#0b0b11;box-shadow:40px 50px 90px #000;transform:rotateY(-12deg) rotateX(5deg);overflow:hidden}
.browser-bar{height:37px;border-bottom:1px solid #24222d;display:flex;align-items:center;padding:0 12px;gap:6px}.browser-bar i{width:6px;height:6px;border-radius:50%;background:#4b4757}.browser-bar span{margin:auto;font-size:7px;color:#6e6878}
.browser-body{padding:48px;background:radial-gradient(circle at 80% 30%,rgba(92,61,255,.35),transparent 30%),#09090e;height:100%}.browser-body small{font-size:7px;letter-spacing:2px;color:#847d90}.browser-body h3{font-size:38px;line-height:.95;max-width:400px;margin:12px 0 22px}.browser-body button{padding:10px 16px;background:#7650ff;color:#fff;border:0;font-size:7px}.browser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px}.browser-grid span{height:55px;border:1px solid #24222d;border-radius:8px;background:#111119}
.mobile-story{position:absolute;right:7%;bottom:9%;width:125px;height:245px;border-radius:26px;background:linear-gradient(160deg,#171722,#09090e);border:1px solid #413b52;box-shadow:30px 40px 70px #000;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(7deg)}
.mobile-story div{width:68px;height:68px;border-radius:50%;border:7px solid #7650ff;border-right-color:#00cde8}.mobile-story b{font-size:28px;margin-top:14px}.mobile-story span{font-size:7px;letter-spacing:1px;color:#8e889a}
.social-phone{position:absolute;width:240px;height:500px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);border-radius:38px;background:#0c0c11;border:1px solid #3a3645;padding:11px;box-shadow:45px 70px 100px #000}
.social-head{height:55px;padding:22px 12px;font-size:9px;letter-spacing:2px}.social-art{height:340px;border-radius:22px;background:radial-gradient(circle at 20% 20%,#8659ff,transparent 30%),radial-gradient(circle at 80% 70%,#00b8d4,transparent 30%),linear-gradient(145deg,#20133b,#08080c);display:grid;place-items:center;text-align:center}.social-art b{font-size:49px;line-height:.86;letter-spacing:-3px}.social-meta{padding:18px;font-size:12px}
.social-tile{position:absolute;width:150px;height:120px;border:1px solid #343041;border-radius:20px;background:rgba(17,17,25,.9);padding:22px;font-size:9px;letter-spacing:2px;color:#898296;box-shadow:0 25px 50px #000}.social-tile b{font-size:28px;letter-spacing:-1px;color:white}.tile-one{left:8%;top:20%;transform:rotate(-8deg)}.tile-two{right:7%;bottom:18%;transform:rotate(10deg)}
.billboard{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotateY(-10deg);width:500px}.billboard-face{height:285px;border:8px solid #16161b;background:radial-gradient(circle at 70% 20%,rgba(0,205,230,.38),transparent 30%),linear-gradient(140deg,#5632d5,#101019 70%);padding:38px;box-shadow:40px 50px 100px #000;display:flex;flex-direction:column;justify-content:center}.billboard-face small{font-size:8px;letter-spacing:3px}.billboard-face b{font-size:70px;line-height:.82;letter-spacing:-5px;margin:12px 0}.billboard-face span{font-size:8px}.billboard-legs{display:flex;justify-content:space-around}.billboard-legs i{display:block;width:15px;height:130px;background:#19191f}
.poster-stack{position:absolute;right:4%;bottom:7%;width:150px;height:190px}.poster-stack div{position:absolute;inset:0;border:1px solid #3a3546;border-radius:8px;background:#121219;padding:22px;font-family:"Space Grotesk";font-size:22px;font-weight:800;box-shadow:20px 25px 50px #000}.poster-stack div:first-child{transform:rotate(-11deg) translate(-30px,-10px);background:#e8e5f0;color:#09090d}.poster-stack div:last-child{transform:rotate(8deg);background:#7250ed}
.growth-orbit{position:absolute;width:440px;height:440px;left:50%;top:50%;transform:translate(-50%,-50%)}.growth-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:145px;height:145px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#8d68ff,#30205e 55%,#08080d);box-shadow:0 0 90px rgba(114,76,255,.45);display:grid;place-content:center;text-align:center;font:800 38px "Space Grotesk"}.growth-core span{font:600 7px Inter;letter-spacing:3px;color:#c9c1dd}
.orbit{position:absolute;inset:0;border:1px solid rgba(137,100,255,.28);border-radius:50%;animation:orbitspin 18s linear infinite}.orbit i{position:absolute;background:#12121a;border:1px solid #383246;border-radius:13px;padding:10px 14px;font:normal 9px Inter;color:#bbb4c9}.orbit1 i{left:35%;top:-18px}.orbit2{inset:45px;animation-direction:reverse;animation-duration:14s}.orbit2 i{right:-20px;top:45%}.orbit3{inset:90px;animation-duration:10s}.orbit3 i{left:-30px;bottom:18%}@keyframes orbitspin{to{transform:rotate(360deg)}}.growth-stat{position:absolute;right:8%;bottom:12%;border:1px solid #363143;background:#101018;padding:17px 22px;border-radius:16px;box-shadow:0 25px 60px #000}.growth-stat span{font-size:7px;letter-spacing:2px;color:#817a8d;display:block}.growth-stat b{font-size:28px}
.story-progress{height:2px;background:#17171d;margin-top:20px;border-radius:5px;overflow:hidden}.story-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a54ff,#00cde5);transition:width .2s}
@media(max-width:900px){.story-stage{grid-template-columns:1fr;height:78vh}.story-copy-wrap{padding:40px;min-height:42%}.story-copy{left:40px;right:35px}.story-copy h2{font-size:44px;letter-spacing:-2.5px}.story-visual{min-height:58%}.identity-monolith{height:230px;width:165px}.browser-story{height:72%;top:10%}.social-phone{height:330px;width:165px}.social-art{height:220px}.social-art b{font-size:34px}.billboard{width:390px}.billboard-face{height:220px}.growth-orbit{transform:translate(-50%,-50%) scale(.72)}}@media(max-width:640px){.story-section{height:500vh}.story-sticky{padding-top:75px}.story-stage{height:80vh;border-radius:24px}.story-copy-wrap{padding:26px}.story-copy{left:26px;right:22px}.story-copy h2{font-size:35px;line-height:1;letter-spacing:-2px;margin:12px 0 15px}.story-copy p{font-size:11px;line-height:1.6}.story-visual{min-height:52%}.brand-sheet,.palette,.social-tile,.poster-stack,.growth-stat{display:none}.browser-body{padding:28px}.browser-body h3{font-size:27px}.mobile-story{width:90px;height:180px}.billboard{width:290px}.billboard-face{height:180px}.billboard-face b{font-size:48px}.billboard-legs i{height:80px}.growth-orbit{transform:translate(-50%,-50%) scale(.58)}}
body{background:#050507!important;position:relative;overflow-x:hidden}
body:before{content:'';position:fixed;inset:-20%;z-index:-1;background:
radial-gradient(circle at 15% 20%,rgba(123,92,255,.42),transparent 28%),
radial-gradient(circle at 82% 18%,rgba(0,214,255,.34),transparent 25%),
radial-gradient(circle at 70% 78%,rgba(255,110,80,.22),transparent 22%),
radial-gradient(circle at 30% 75%,rgba(0,255,170,.18),transparent 20%);
filter:blur(70px);animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(3%,2%) scale(1.08)}100%{transform:translate(-2%,3%) scale(1.02)}}
/* =========================================================
FINAL INDUSTRY PHOTOS — exact mapping to the six cards
========================================================= */
.industry-card {
min-height: 285px;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
isolation: isolate;
border-color: rgba(255,255,255,.18);
box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
/* Homepage asset-safe paths: root files survive manual Netlify deploys. */
.industry-card.restaurant,.mobile-restaurant{background-image:url("restaurant.jpg")!important}
.industry-card.barber,.mobile-barber{background-image:url("barber_salon.jpg")!important}
.industry-card.auto,.mobile-auto{background-image:url("auto_dealer.jpg")!important}
.industry-card.fitness,.mobile-fitness{background-image:url("gym_fitness.jpg")!important}
.industry-card.hotel,.mobile-hotel{background-image:url("hotel_travel.jpg")!important}
.industry-card.local,.mobile-local{background-image:url("local_services.jpg")!important}
.srb-contact-button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srb-mail-button{color:#111;background:#fff!important}
.srb-whatsapp-button{color:#fff;background:#25d366!important}
.industry-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, rgba(4,4,8,.06) 0%, rgba(4,4,8,.18) 42%, rgba(4,4,8,.92) 100%);
pointer-events: none;
}
.industry-card::after {
background: linear-gradient(180deg, transparent 28%, rgba(4,4,8,.94) 100%) !important;
}
.industry-card.restaurant {
background-image: url("assets/topics/restaurant.jpg") !important;
}
.industry-card.barber {
background-image: url("assets/topics/barber_salon.jpg") !important;
}
.industry-card.auto {
background-image: url("assets/topics/auto_dealer.jpg") !important;
}
.industry-card.fitness {
background-image: url("assets/topics/gym_fitness.jpg") !important;
}
.industry-card.hotel {
background-image: url("assets/topics/hotel_travel.jpg") !important;
}
.industry-card.local {
background-image: url("assets/topics/local_services.jpg") !important;
}
.industry-card > * {
position: relative;
z-index: 2;
}
.industry-card h3 {
font-size: 28px;
text-shadow: 0 3px 18px rgba(0,0,0,.9);
}
.industry-card p {
color: rgba(255,255,255,.84);
text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.industry-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 85px rgba(0,0,0,.45);
}
@media (max-width: 640px) {
.industry-card { min-height: 250px; }
}
/* =========================================================
PROFESSIONAL VISUAL REFINEMENT
========================================================= */
.industry-card {
min-height: 300px;
border-radius: 26px;
border: 1px solid rgba(255,255,255,.12);
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
overflow: hidden;
isolation: isolate;
box-shadow: 0 28px 70px rgba(0,0,0,.32);
}
.industry-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, rgba(4,4,7,.02) 0%, rgba(4,4,7,.12) 42%, rgba(4,4,7,.88) 100%);
}
.industry-card::after {
background: linear-gradient(180deg, transparent 35%, rgba(4,4,7,.90) 100%) !important;
}
.industry-card.restaurant { background-image: url("assets/topics/restaurant.jpg") !important; }
.industry-card.barber { background-image: url("assets/topics/barber_salon.jpg") !important; }
.industry-card.auto { background-image: url("assets/topics/auto_dealer.jpg") !important; }
.industry-card.fitness { background-image: url("assets/topics/gym_fitness.jpg") !important; }
.industry-card.hotel { background-image: url("assets/topics/hotel_travel.jpg") !important; }
.industry-card.local { background-image: url("assets/topics/local_services.jpg") !important; }
.industry-card h3 {
font-size: 29px;
letter-spacing: -1px;
text-shadow: 0 4px 24px rgba(0,0,0,.95);
}
.industry-card p {
color: rgba(255,255,255,.80);
text-shadow: 0 3px 18px rgba(0,0,0,.95);
}
.industry-card:hover {
transform: translateY(-7px);
border-color: rgba(255,255,255,.24);
box-shadow: 0 35px 90px rgba(0,0,0,.44);
}
/* Design concept cards */
.project-ui {
min-height: 520px;
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
border: 1px solid rgba(255,255,255,.12);
border-radius: 28px;
overflow: hidden;
isolation: isolate;
box-shadow: 0 35px 90px rgba(0,0,0,.38);
}
.project-ui::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(90deg, rgba(4,4,7,.92) 0%, rgba(4,4,7,.58) 46%, rgba(4,4,7,.12) 100%),
linear-gradient(180deg, rgba(4,4,7,.02), rgba(4,4,7,.45));
}
.project-ui > * {
position: relative;
z-index: 2;
}
.restaurant-ui { background-image: url("assets/topics/concept_restaurant.jpg") !important; }
.barber-ui { background-image: url("assets/topics/concept_barber.jpg") !important; }
.auto-ui { background-image: url("assets/topics/concept_auto.jpg") !important; }
.project-ui .mock-copy h3 {
max-width: 540px;
font-size: clamp(42px, 5vw, 72px);
line-height: .94;
text-shadow: 0 5px 28px rgba(0,0,0,.95);
}
.project-ui .mock-copy small,
.project-ui .mock-nav {
text-shadow: 0 3px 18px rgba(0,0,0,.95);
}
.project-ui:hover {
transform: translateY(-6px);
border-color: rgba(255,255,255,.22);
box-shadow: 0 45px 115px rgba(0,0,0,.48);
}
@media (max-width: 640px) {
.industry-card { min-height: 260px; }
.project-ui { min-height: 400px; }
.project-ui::before {
background:
linear-gradient(90deg, rgba(4,4,7,.94) 0%, rgba(4,4,7,.68) 68%, rgba(4,4,7,.28) 100%),
linear-gradient(180deg, rgba(4,4,7,.02), rgba(4,4,7,.52));
}
}
/* Top six industry cards */
.industry-card{
min-height: 310px !important;
border-radius: 24px !important;
overflow: hidden !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center 38% !important;
border: 1px solid rgba(255,255,255,.13) !important;
box-shadow: 0 26px 70px rgba(0,0,0,.36) !important;
isolation: isolate;
}
.industry-card::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background:
linear-gradient(180deg, rgba(3,3,6,.02) 0%, rgba(3,3,6,.08) 45%, rgba(3,3,6,.88) 100%) !important;
}
.industry-card::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(180deg, transparent 42%, rgba(3,3,6,.92) 100%) !important;
}
.industry-card.restaurant { background-image:url("assets/topics/restaurant.jpg") !important; }
.industry-card.barber { background-image:url("assets/topics/barber_salon.jpg") !important; }
.industry-card.auto { background-image:url("assets/topics/auto_dealer.jpg") !important; }
.industry-card.fitness { background-image:url("assets/topics/gym_fitness.jpg") !important; }
.industry-card.hotel { background-image:url("assets/topics/hotel_travel.jpg") !important; }
.industry-card.local { background-image:url("assets/topics/local_services.jpg") !important; }
.industry-card > *{
position:relative;
z-index:2;
}
.industry-card h3{
font-size:30px !important;
letter-spacing:-1.2px !important;
text-shadow:0 4px 24px rgba(0,0,0,.95) !important;
}
.industry-card p{
color:rgba(255,255,255,.82) !important;
text-shadow:0 3px 18px rgba(0,0,0,.95) !important;
}
.industry-card:hover{
transform:translateY(-6px) !important;
border-color:rgba(255,255,255,.24) !important;
box-shadow:0 36px 90px rgba(0,0,0,.48) !important;
}
/* Bottom three concept cards */
.project-ui{
min-height:540px !important;
border-radius:26px !important;
overflow:hidden !important;
background-size:cover !important;
background-repeat:no-repeat !important;
background-position:center 42% !important;
border:1px solid rgba(255,255,255,.13) !important;
box-shadow:0 34px 90px rgba(0,0,0,.40) !important;
isolation:isolate;
}
.project-ui::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background:
linear-gradient(90deg, rgba(3,3,6,.94) 0%, rgba(3,3,6,.62) 46%, rgba(3,3,6,.10) 100%),
linear-gradient(180deg, rgba(3,3,6,.02) 0%, rgba(3,3,6,.44) 100%) !important;
}
.project-ui > *{
position:relative;
z-index:2;
}
.restaurant-ui { background-image:url("assets/topics/concept_restaurant.jpg") !important; }
.barber-ui { background-image:url("assets/topics/concept_barber.jpg") !important; }
.auto-ui { background-image:url("assets/topics/concept_auto.jpg") !important; }
.project-ui .mock-copy h3{
max-width:560px !important;
font-size:clamp(44px,5vw,74px) !important;
line-height:.94 !important;
letter-spacing:-3px !important;
text-shadow:0 5px 30px rgba(0,0,0,.96) !important;
}
.project-ui .mock-copy small,
.project-ui .mock-nav{
text-shadow:0 3px 18px rgba(0,0,0,.95) !important;
}
.project-ui:hover{
transform:translateY(-5px) !important;
border-color:rgba(255,255,255,.22) !important;
box-shadow:0 46px 120px rgba(0,0,0,.52) !important;
}
@media (max-width:640px){
.industry-card{
min-height:270px !important;
background-position:center 35% !important;
}
.project-ui{
min-height:410px !important;
background-position:center 40% !important;
}
.project-ui::before{
background:
linear-gradient(90deg, rgba(3,3,6,.96) 0%, rgba(3,3,6,.72) 70%, rgba(3,3,6,.30) 100%),
linear-gradient(180deg, rgba(3,3,6,.02), rgba(3,3,6,.52)) !important;
}
}
/* =========================================================
SRB STUDIO V1.1 — PREMIUM POLISH
Same logo, same structure, same dark theme
========================================================= */
:root{
--srb-purple:#7b5cff;
--srb-blue:#3b82f6;
--srb-cyan:#22d3ee;
--srb-text:#f7f7fb;
--srb-muted:#a4a1b0;
}
/* Better rendering */
html{
scroll-behavior:smooth;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
body{
overflow-x:hidden;
}
/* More refined animated background */
body::before{
opacity:.78 !important;
filter:blur(88px) saturate(1.08) !important;
animation-duration:24s !important;
}
/* Navbar polish */
.nav-wrap{
transition:transform .35s ease, opacity .35s ease;
}
.nav{
border-color:rgba(255,255,255,.10) !important;
background:linear-gradient(135deg,rgba(14,14,20,.78),rgba(9,9,14,.60)) !important;
box-shadow:0 18px 60px rgba(0,0,0,.34) !important;
}
.nav-links a{
position:relative;
letter-spacing:.01em;
}
.nav-links a:not(.nav-cta)::after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:-6px;
height:1px;
background:linear-gradient(90deg,var(--srb-purple),var(--srb-cyan));
transition:right .3s ease;
}
.nav-links a:not(.nav-cta):hover::after{
right:0;
}
.nav-cta{
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.nav-cta:hover{
transform:translateY(-2px);
box-shadow:0 14px 34px rgba(112,78,255,.24);
border-color:rgba(135,105,255,.55) !important;
}
/* Hero typography and spacing */
.hero{
min-height:100svh !important;
padding-top:170px !important;
}
.hero-grid{
gap:72px !important;
}
.hero h1{
font-size:clamp(58px,6.7vw,98px) !important;
line-height:.92 !important;
letter-spacing:-5.5px !important;
max-width:880px;
text-wrap:balance;
}
.hero-copy>p{
font-size:18px !important;
max-width:660px !important;
line-height:1.75 !important;
color:var(--srb-muted) !important;
}
.eyebrow{
letter-spacing:2.5px !important;
}
.hero-actions{
margin-top:34px !important;
}
.btn{
border-radius:14px !important;
transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.btn:hover{
transform:translateY(-3px);
}
.btn.primary:hover{
box-shadow:0 20px 52px rgba(96,72,255,.38) !important;
}
.btn.ghost:hover{
border-color:rgba(255,255,255,.28) !important;
}
/* Better section rhythm */
.section{
padding-top:132px !important;
padding-bottom:132px !important;
}
.section-head{
margin-bottom:62px !important;
}
.section-head h2{
text-wrap:balance;
}
.section-head>p{
font-size:15px !important;
line-height:1.75 !important;
}
/* Industry cards: same photos, cleaner presentation */
.industry-track{
gap:20px !important;
}
.industry-card{
min-height:315px !important;
border-radius:24px !important;
border-color:rgba(255,255,255,.11) !important;
box-shadow:0 28px 75px rgba(0,0,0,.34) !important;
transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.industry-card::before{
background:
linear-gradient(180deg,rgba(4,4,8,.02) 0%,rgba(4,4,8,.10) 45%,rgba(4,4,8,.88) 100%) !important;
}
.industry-card:hover{
transform:translateY(-9px) scale(1.008) !important;
border-color:rgba(255,255,255,.22) !important;
box-shadow:0 38px 95px rgba(0,0,0,.48) !important;
}
.industry-card h3{
font-size:29px !important;
letter-spacing:-1.2px !important;
}
.industry-card p{
font-size:11px !important;
letter-spacing:.02em;
}
/* Services cards */
.service-card{
border-radius:20px !important;
transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.service-card:hover{
transform:translateY(-8px) !important;
border-color:rgba(126,95,255,.34) !important;
box-shadow:0 28px 74px rgba(70,45,160,.16) !important;
}
.service-card h3{
letter-spacing:-1px !important;
}
.service-card p{
line-height:1.72 !important;
}
/* Process and pricing polish */
.process-wrap,
.price-card,
.contact-form{
border-radius:28px !important;
}
.step{
transition:transform .25s ease, background .25s ease;
}
.step:hover{
transform:translateX(6px);
}
.price-card{
transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.price-card:hover{
transform:translateY(-8px);
border-color:rgba(124,91,255,.32) !important;
box-shadow:0 30px 80px rgba(0,0,0,.32);
}
/* Contact polish */
.contact-form input,
.contact-form select,
.contact-form textarea{
transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
box-shadow:0 0 0 4px rgba(123,92,255,.10);
}
/* Footer */
footer{
padding-top:82px !important;
}
.footer-grid{
gap:70px !important;
}
.footer-bottom{
margin-top:62px !important;
}
/* WhatsApp */
.whatsapp{
transition:transform .25s ease, box-shadow .25s ease;
}
.whatsapp:hover{
transform:translateY(-4px) scale(1.03);
box-shadow:0 20px 46px rgba(38,211,102,.38) !important;
}
/* Scroll reveal slightly smoother */
.reveal{
transition-duration:.9s !important;
transition-timing-function:cubic-bezier(.2,.7,.2,1) !important;
}
/* Mobile refinement */
@media(max-width:960px){
.hero{
padding-top:135px !important;
}
.hero-grid{
gap:42px !important;
}
}
@media(max-width:640px){
.section{
padding-top:92px !important;
padding-bottom:92px !important;
}
.hero{
min-height:auto !important;
padding-top:120px !important;
}
.hero h1{
font-size:50px !important;
line-height:.96 !important;
letter-spacing:-3.2px !important;
}
.hero-copy>p{
font-size:15px !important;
}
.industry-card{
min-height:270px !important;
}
.nav{
border-radius:16px !important;
}
}
/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}
/* =========================================================
SRB STUDIO — ULTRA PREMIUM EDITION
Same logo. Same structure. Premium visual refinement only.
========================================================= */
:root{
--lux-purple:#8b6cff;
--lux-violet:#623dff;
--lux-blue:#4d7cff;
--lux-cyan:#33d4e7;
--lux-gold:#d8b36a;
--lux-white:#faf9ff;
--lux-muted:#a7a1b4;
}
/* Film grain and cinematic depth */
.luxury-grain{
position:fixed;
inset:0;
pointer-events:none;
z-index:9998;
opacity:.028;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.65'/%3E%3C/svg%3E");
}
.luxury-vignette{
position:fixed;
inset:0;
pointer-events:none;
z-index:9997;
box-shadow:inset 0 0 180px rgba(0,0,0,.38);
}
.premium-cursor{
position:fixed;
width:18px;
height:18px;
border:1px solid rgba(255,255,255,.78);
border-radius:50%;
pointer-events:none;
z-index:10020;
transform:translate(-50%,-50%);
mix-blend-mode:difference;
transition:width .22s ease,height .22s ease,background .22s ease,border-color .22s ease;
}
.premium-cursor.active{
width:48px;
height:48px;
background:rgba(255,255,255,.92);
border-color:#fff;
}
/* Luxury background depth */
body{
background:
radial-gradient(circle at 15% 12%,rgba(116,78,255,.15),transparent 26%),
radial-gradient(circle at 85% 20%,rgba(30,185,230,.10),transparent 24%),
radial-gradient(circle at 75% 82%,rgba(120,75,255,.10),transparent 25%),
linear-gradient(180deg,#050507 0%,#08080e 44%,#050507 100%) !important;
}
body::before{
animation:ultraAurora 28s ease-in-out infinite alternate !important;
filter:blur(96px) saturate(1.12) !important;
opacity:.82 !important;
}
@keyframes ultraAurora{
0%{transform:translate3d(-3%,-2%,0) scale(1)}
50%{transform:translate3d(3%,2%,0) scale(1.08)}
100%{transform:translate3d(-1%,4%,0) scale(1.03)}
}
/* High-end navbar */
.nav{
min-height:74px !important;
border-radius:22px !important;
background:
linear-gradient(135deg,rgba(20,20,28,.82),rgba(8,8,13,.66)) !important;
border:1px solid rgba(255,255,255,.105) !important;
box-shadow:
0 22px 70px rgba(0,0,0,.44),
inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.nav::after{
content:"";
position:absolute;
left:18%;
right:18%;
bottom:-1px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(139,108,255,.55),rgba(51,212,231,.35),transparent);
}
.nav-links a{
font-weight:600;
letter-spacing:.02em;
}
.nav-cta{
background:linear-gradient(110deg,#7451ff,#5d73ff 62%,#2ebfd4) !important;
border:0 !important;
box-shadow:
0 12px 34px rgba(96,68,255,.32),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
/* Hero */
.hero{
min-height:102svh !important;
overflow:hidden;
}
.hero::after{
content:"";
position:absolute;
width:780px;
height:780px;
left:58%;
top:45%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(139,108,255,.11);
box-shadow:
0 0 110px rgba(110,74,255,.10),
inset 0 0 110px rgba(51,212,231,.04);
pointer-events:none;
}
.hero h1{
font-size:clamp(62px,7vw,108px) !important;
line-height:.90 !important;
letter-spacing:-6.5px !important;
text-shadow:0 30px 80px rgba(0,0,0,.38);
}
.hero .gradient-text{
background:
linear-gradient(110deg,#d8ceff 0%,#9c7cff 22%,#6e83ff 56%,#49d3e5 100%) !important;
-webkit-background-clip:text !important;
filter:drop-shadow(0 12px 36px rgba(104,76,255,.18));
}
.hero-copy>p{
font-size:19px !important;
color:#aaa5b5 !important;
}
.hero-signature{
margin-top:22px;
color:#7f788d;
font-size:10px;
letter-spacing:2.1px;
text-transform:uppercase;
}
.trust-row{
border-top:1px solid rgba(255,255,255,.07);
padding-top:26px;
}
.trust-row strong{
font-size:24px !important;
}
.trust-row span{
letter-spacing:1.6px !important;
}
/* Hero glass device */
.device{
border:1px solid rgba(255,255,255,.13) !important;
box-shadow:
48px 75px 140px rgba(0,0,0,.62),
0 0 95px rgba(91,58,255,.16),
inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.float-card{
border:1px solid rgba(255,255,255,.13) !important;
box-shadow:
0 24px 72px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Section presentation */
.section{
position:relative;
}
.section::before{
content:"";
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:min(1180px,calc(100% - 40px));
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
}
.section-head>div{
position:relative;
}
.section-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
margin-right:12px;
border:1px solid rgba(139,108,255,.26);
border-radius:50%;
color:#a890ff;
font:700 9px Inter,sans-serif;
vertical-align:middle;
box-shadow:0 0 30px rgba(103,73,255,.10);
}
.section-kicker{
vertical-align:middle;
color:#9a7dff !important;
}
.section-head h2{
font-size:clamp(46px,5.4vw,74px) !important;
line-height:.98 !important;
letter-spacing:-4px !important;
margin-top:20px !important;
}
/* Cards get a true spotlight */
.service-card,
.industry-card,
.price-card,
.process-wrap,
.contact-form{
position:relative;
overflow:hidden;
}
.service-card::before,
.price-card::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(129,94,255,.13),transparent 42%);
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
}
.service-card:hover::before,
.price-card:hover::before{
opacity:1;
}
.service-card,
.price-card{
box-shadow:
0 24px 70px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.service-card:hover,
.price-card:hover{
border-color:rgba(143,108,255,.38) !important;
box-shadow:
0 36px 95px rgba(0,0,0,.36),
0 0 55px rgba(105,76,255,.10),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* Industry imagery */
.industry-card{
min-height:330px !important;
border-radius:26px !important;
}
.industry-card::after{
background:
linear-gradient(180deg,transparent 30%,rgba(3,3,6,.90) 100%) !important;
}
.industry-card h3{
font-size:31px !important;
}
.industry-card:hover{
transform:translateY(-10px) scale(1.012) !important;
}
.industry-card:hover::after{
background:
linear-gradient(180deg,rgba(4,4,8,.02) 25%,rgba(3,3,6,.84) 100%) !important;
}
/* Process */
.process-wrap{
border:1px solid rgba(255,255,255,.11) !important;
box-shadow:
0 36px 110px rgba(0,0,0,.34),
inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.step{
position:relative;
}
.step::after{
content:"";
position:absolute;
left:0;
bottom:-1px;
width:0;
height:1px;
background:linear-gradient(90deg,var(--lux-purple),var(--lux-cyan));
transition:width .35s ease;
}
.step:hover::after{
width:100%;
}
/* Pricing */
.price-card.popular{
transform:scale(1.025);
border-color:rgba(139,108,255,.48) !important;
box-shadow:
0 38px 100px rgba(0,0,0,.38),
0 0 70px rgba(104,70,255,.10) !important;
}
.price-card.popular:hover{
transform:translateY(-8px) scale(1.03) !important;
}
/* Contact */
.contact-form{
box-shadow:
0 38px 105px rgba(0,0,0,.36),
inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
background:rgba(7,7,11,.82) !important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
border-color:rgba(139,108,255,.62) !important;
box-shadow:
0 0 0 4px rgba(123,92,255,.10),
0 14px 34px rgba(0,0,0,.18) !important;
}
/* Footer */
footer{
background:
radial-gradient(circle at 50% 0%,rgba(107,73,255,.07),transparent 34%),
#050508 !important;
}
.footer-bottom{
letter-spacing:.04em;
}
/* Button sweep */
.btn{
overflow:hidden;
position:relative;
}
.btn::after{
content:"";
position:absolute;
inset:-50%;
background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.26) 50%,transparent 64%);
transform:translateX(-120%) rotate(8deg);
transition:transform .75s ease;
}
.btn:hover::after{
transform:translateX(120%) rotate(8deg);
}
/* Mobile */
@media(max-width:960px){
.premium-cursor{display:none}
.hero::after{width:560px;height:560px;left:50%}
.price-card.popular{transform:none}
}
@media(max-width:640px){
.hero h1{
font-size:52px !important;
letter-spacing:-3.8px !important;
}
.hero-signature{
line-height:1.7;
}
.section-head h2{
font-size:42px !important;
letter-spacing:-2.5px !important;
}
.section-number{
width:27px;
height:27px;
}
.industry-card{
min-height:280px !important;
}
}
/* =========================================================
SRB STUDIO — SIGNATURE EDITION
Premium restraint, gold micro-accents, refined hierarchy
========================================================= */
:root{
--signature-gold:#d4b06a;
--signature-gold-soft:#f0d79a;
--signature-ink:#050507;
}
/* Signature badge */
.signature-badge{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:18px;
padding:8px 12px;
border:1px solid rgba(212,176,106,.22);
border-radius:999px;
background:linear-gradient(135deg,rgba(212,176,106,.08),rgba(255,255,255,.02));
color:#d7bd82;
font-size:8px;
font-weight:800;
letter-spacing:2.4px;
box-shadow:
0 10px 30px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.04);
}
.signature-badge::before{
content:"";
width:5px;
height:5px;
border-radius:50%;
background:var(--signature-gold);
box-shadow:0 0 16px rgba(212,176,106,.75);
}
/* Luxury rule under hero copy */
.luxury-rule{
display:flex;
align-items:center;
gap:12px;
width:180px;
margin:30px 0 2px;
}
.luxury-rule span{
flex:1;
height:1px;
background:linear-gradient(90deg,transparent,rgba(212,176,106,.65));
}
.luxury-rule span:last-child{
background:linear-gradient(90deg,rgba(212,176,106,.65),transparent);
}
.luxury-rule i{
width:7px;
height:7px;
border:1px solid rgba(212,176,106,.75);
transform:rotate(45deg);
box-shadow:0 0 14px rgba(212,176,106,.24);
}
/* More premium typography rhythm */
.hero h1{
font-weight:700 !important;
max-width:960px !important;
letter-spacing:-6.8px !important;
}
.hero-copy>p{
max-width:700px !important;
font-weight:400;
letter-spacing:.01em;
}
.section-head h2,
.process h2,
.contact h2{
font-weight:650 !important;
}
.section-head>p{
color:#9c97a8 !important;
}
/* Gold accent on micro details only */
.section-number{
color:#e0c186 !important;
border-color:rgba(212,176,106,.32) !important;
box-shadow:0 0 28px rgba(212,176,106,.08) !important;
}
.section-kicker{
color:#c9ad73 !important;
}
.eyebrow span{
background:linear-gradient(90deg,#8b6cff,#d4b06a) !important;
}
/* Navbar premium edge */
.nav{
box-shadow:
0 24px 80px rgba(0,0,0,.46),
inset 0 1px 0 rgba(255,255,255,.055),
0 0 0 1px rgba(212,176,106,.025) !important;
}
.nav::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(120deg,rgba(212,176,106,.05),transparent 22%,transparent 78%,rgba(78,113,255,.05));
}
/* Buttons: more expensive, less flashy */
.btn.primary{
background:
linear-gradient(110deg,#6d4eff 0%,#6376ff 58%,#35bfd0 100%) !important;
box-shadow:
0 16px 40px rgba(91,66,220,.28),
inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.btn.ghost{
background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
}
.btn:hover{
transform:translateY(-4px) scale(1.01) !important;
}
/* Cards: smoother, more luxurious */
.service-card,
.price-card,
.process-wrap,
.contact-form{
background:
linear-gradient(145deg,rgba(19,19,27,.86),rgba(8,8,13,.78)) !important;
backdrop-filter:blur(24px) !important;
}
.service-card::after,
.price-card::after{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(135deg,rgba(255,255,255,.035),transparent 28%,transparent 72%,rgba(212,176,106,.025));
}
.service-icon{
box-shadow:
0 14px 30px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.06);
}
/* Industry card text block refinement */
.industry-card h3{
font-weight:650 !important;
}
.industry-card p{
color:rgba(255,255,255,.76) !important;
}
.industry-card::before{
background:
linear-gradient(180deg,rgba(2,2,5,.01) 0%,rgba(2,2,5,.06) 38%,rgba(2,2,5,.92) 100%) !important;
}
.industry-card:hover{
filter:saturate(1.04) contrast(1.03);
}
/* Process index becomes luxury */
.step>b{
color:#d1b474 !important;
}
.step h3{
font-weight:650;
}
/* Price cards */
.price{
font-weight:650 !important;
}
.price-card.popular::after{
background:
linear-gradient(135deg,rgba(212,176,106,.06),transparent 30%,transparent 70%,rgba(103,76,255,.06)) !important;
}
.popular-tag{
color:#e0c486 !important;
}
/* Contact and footer */
.contact-info span{
color:#b69b67 !important;
}
footer{
border-top-color:rgba(212,176,106,.08) !important;
}
.footer-bottom{
position:relative;
}
.footer-bottom::before{
content:"";
position:absolute;
top:-22px;
left:50%;
transform:translateX(-50%);
width:120px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(212,176,106,.45),transparent);
}
/* Reveal feels more editorial */
.reveal{
transform:translateY(42px) scale(.992) !important;
}
.reveal.visible{
transform:translateY(0) scale(1) !important;
}
/* Subtle light sweep on industry cards */
.industry-card::marker{display:none}
.industry-card .shine-layer{display:none}
.industry-card{
position:relative;
}
.industry-card > *{
position:relative;
z-index:3;
}
.industry-card:hover::before{
background:
linear-gradient(180deg,rgba(2,2,5,.02) 0%,rgba(2,2,5,.04) 34%,rgba(2,2,5,.88) 100%) !important;
}
/* Responsive */
@media(max-width:640px){
.signature-badge{
font-size:7px;
letter-spacing:1.8px;
}
.luxury-rule{
margin-left:auto;
margin-right:auto;
}
.hero h1{
letter-spacing:-4px !important;
}
}
/* =========================================================
SEPARATE MOBILE EXPERIENCE
Desktop site remains untouched
========================================================= */
.mobile-site{display:none}
@media(max-width:760px){
body > .nav-wrap,
body > .desktop-main,
body > footer,
body > .whatsapp,
body > .noise,
body > .luxury-grain,
body > .luxury-vignette,
body > .premium-cursor{
display:none !important;
}
html,body{
width:100%;
max-width:100%;
overflow-x:hidden;
background:
radial-gradient(circle at 20% 10%,rgba(118,78,255,.16),transparent 24%),
radial-gradient(circle at 88% 18%,rgba(35,199,224,.10),transparent 24%),
#060609 !important;
}
.mobile-site{
display:block;
min-height:100vh;
color:#f8f7fc;
font-family:Inter,Arial,sans-serif;
padding-bottom:84px;
}
.mobile-topbar{
position:fixed;
top:10px;
left:10px;
right:10px;
z-index:1000;
height:58px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 12px 0 15px;
border:1px solid rgba(255,255,255,.09);
border-radius:17px;
background:rgba(9,9,14,.82);
backdrop-filter:blur(22px);
box-shadow:0 18px 55px rgba(0,0,0,.40);
}
.mobile-logo{
font:800 19px "Space Grotesk",sans-serif;
letter-spacing:-1px;
}
.mobile-logo span{
display:block;
margin-top:3px;
font:700 6px Inter,sans-serif;
letter-spacing:4px;
color:#918a9d;
}
.mobile-top-cta{
padding:10px 14px;
border-radius:11px;
background:linear-gradient(110deg,#7854ff,#4e7aff);
font-size:10px;
font-weight:800;
}
.mobile-hero{
padding:112px 18px 58px;
}
.mobile-hero-badge{
display:inline-flex;
padding:8px 11px;
border:1px solid rgba(255,255,255,.09);
border-radius:999px;
background:rgba(255,255,255,.035);
color:#a59faf;
font-size:7px;
font-weight:800;
letter-spacing:1.8px;
}
.mobile-hero h1{
margin:18px 0 18px;
font:700 clamp(47px,13vw,65px)/.94 "Space Grotesk",sans-serif;
letter-spacing:-4px;
}
.mobile-hero h1 span{
background:linear-gradient(90deg,#a78bff,#6684ff,#3ad3e4);
-webkit-background-clip:text;
color:transparent;
}
.mobile-hero>p{
max-width:340px;
color:#a8a2b1;
font-size:15px;
line-height:1.65;
}
.mobile-hero-actions{
display:grid;
grid-template-columns:1fr auto;
gap:9px;
margin-top:26px;
}
.mobile-primary,.mobile-secondary{
min-height:51px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
font-size:11px;
font-weight:800;
}
.mobile-primary{
background:linear-gradient(110deg,#7653ff,#4f7aff,#33c7dc);
box-shadow:0 16px 38px rgba(92,69,220,.28);
}
.mobile-secondary{
padding:0 18px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.035);
}
.mobile-hero-frame{
position:relative;
height:305px;
margin-top:38px;
}
.mobile-frame-glow{
position:absolute;
inset:20px 10px;
background:radial-gradient(circle at 50% 45%,rgba(109,75,255,.24),transparent 62%);
filter:blur(22px);
}
.mobile-frame-window{
position:absolute;
left:5%;
top:12px;
width:90%;
height:255px;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
background:
radial-gradient(circle at 75% 20%,rgba(53,208,225,.15),transparent 28%),
linear-gradient(145deg,#14141d,#08080d);
box-shadow:0 35px 85px rgba(0,0,0,.52);
transform:rotate(-2deg);
animation:mobileFrameFloat 5s ease-in-out infinite;
}
@keyframes mobileFrameFloat{
0%,100%{transform:rotate(-2deg) translateY(0)}
50%{transform:rotate(-1deg) translateY(-7px)}
}
.mobile-frame-bar{
height:32px;
display:flex;
gap:5px;
align-items:center;
padding:0 12px;
border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-frame-bar i{
width:6px;height:6px;border-radius:50%;background:#716b7c;
}
.mobile-frame-content{
padding:34px 27px;
}
.mobile-frame-content small{
font-size:7px;
letter-spacing:2px;
color:#8f889a;
}
.mobile-frame-content h3{
max-width:240px;
margin:12px 0 25px;
font:700 33px/.96 "Space Grotesk";
letter-spacing:-2px;
}
.mobile-mini-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
}
.mobile-mini-grid span{
height:55px;
border-radius:10px;
border:1px solid rgba(255,255,255,.07);
background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
}
.mobile-float-card{
position:absolute;
z-index:4;
display:flex;
flex-direction:column;
padding:12px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:rgba(13,13,19,.86);
backdrop-filter:blur(16px);
box-shadow:0 18px 44px rgba(0,0,0,.42);
}
.mobile-float-card b{font-size:17px}
.mobile-float-card span{font-size:7px;color:#8e8798;margin-top:3px}
.mobile-float-a{left:0;bottom:5px;animation:floatA 4.5s ease-in-out infinite}
.mobile-float-b{right:0;top:2px;animation:floatB 5s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-8px) rotate(0)}}
.mobile-services,.mobile-industries,.mobile-why{
padding:68px 18px;
}
.mobile-section-head span{
color:#9a7bff;
font-size:8px;
font-weight:800;
letter-spacing:2.2px;
}
.mobile-section-head h2{
margin-top:11px;
font:700 38px/1 "Space Grotesk";
letter-spacing:-2.5px;
}
.mobile-service-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:11px;
margin-top:28px;
}
.mobile-service-card{
min-height:190px;
position:relative;
padding:19px;
border:1px solid rgba(255,255,255,.09);
border-radius:19px;
background:
radial-gradient(circle at 85% 15%,rgba(117,79,255,.13),transparent 28%),
linear-gradient(145deg,rgba(18,18,25,.96),rgba(8,8,13,.98));
box-shadow:0 22px 58px rgba(0,0,0,.32);
}
.mobile-service-card span{
color:#7f788b;font-size:8px;letter-spacing:1px;
}
.mobile-service-card h3{
margin-top:42px;
font:700 23px "Space Grotesk";
letter-spacing:-1px;
}
.mobile-service-card p{
margin-top:8px;
color:#9b95a5;
font-size:11px;
line-height:1.55;
}
.mobile-service-card b{
position:absolute;
right:16px;
bottom:14px;
color:#9d82ff;
}
.mobile-industry-rail{
display:flex;
gap:14px;
margin-top:27px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scrollbar-width:none;
padding-bottom:8px;
}
.mobile-industry-rail::-webkit-scrollbar{display:none}
.mobile-industry-card{
flex:0 0 84%;
height:330px;
position:relative;
overflow:hidden;
border-radius:22px;
scroll-snap-align:center;
border:1px solid rgba(255,255,255,.10);
background-size:cover;
background-position:center;
box-shadow:0 28px 75px rgba(0,0,0,.42);
}
.mobile-industry-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 38%,rgba(2,2,5,.92) 100%);
}
.mobile-industry-card>div{
position:absolute;
left:21px;
right:21px;
bottom:22px;
z-index:2;
}
.mobile-industry-card small{
font-size:7px;
letter-spacing:2px;
color:#b4adbd;
}
.mobile-industry-card h3{
margin-top:8px;
font:700 29px/.98 "Space Grotesk";
letter-spacing:-1.7px;
}
.mobile-restaurant{background-image:url("assets/topics/restaurant.jpg")}
.mobile-barber{background-image:url("assets/topics/barber_salon.jpg")}
.mobile-auto{background-image:url("assets/topics/auto_dealer.jpg")}
.mobile-hotel{background-image:url("assets/topics/hotel_travel.jpg")}
.mobile-why-list{
margin-top:27px;
border-top:1px solid rgba(255,255,255,.08);
}
.mobile-why-list div{
display:grid;
grid-template-columns:40px 1fr;
gap:12px;
padding:19px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-why-list b{
color:#a58aff;font-size:9px;
}
.mobile-why-list span{
font-size:15px;
}
.mobile-final-cta{
margin:28px 14px 34px;
padding:42px 24px;
text-align:center;
border:1px solid rgba(255,255,255,.10);
border-radius:25px;
background:
radial-gradient(circle at 50% 0%,rgba(117,80,255,.19),transparent 38%),
linear-gradient(145deg,#14141c,#08080d);
box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.mobile-final-cta small{
color:#9b7dff;font-size:8px;letter-spacing:2px;
}
.mobile-final-cta h2{
margin:14px 0 24px;
font:700 36px/1 "Space Grotesk";
letter-spacing:-2.3px;
}
.mobile-final-cta>a:first-of-type{
min-height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
background:#25d366;
color:#07150b;
font-size:11px;
font-weight:900;
}
.mobile-email{
display:block;
margin-top:18px;
color:#a39cac;
font-size:11px;
}
.mobile-bottom-nav{
position:fixed;
left:10px;
right:10px;
bottom:10px;
z-index:1000;
display:grid;
grid-template-columns:repeat(3,1fr);
padding:7px;
border:1px solid rgba(255,255,255,.10);
border-radius:17px;
background:rgba(9,9,14,.84);
backdrop-filter:blur(22px);
box-shadow:0 20px 60px rgba(0,0,0,.48);
}
.mobile-bottom-nav a{
min-height:43px;
display:flex;
align-items:center;
justify-content:center;
border-radius:11px;
color:#a49eae;
font-size:10px;
font-weight:800;
}
.mobile-bottom-nav a:active{
background:rgba(255,255,255,.05);
color:#fff;
}
@media(max-width:390px){
.mobile-service-grid{grid-template-columns:1fr}
.mobile-service-card{min-height:160px}
}
}
/* =========================================================
VERIFIED DESKTOP / MOBILE SEPARATION
Desktop: original website only
Mobile: dedicated mobile website only
========================================================= */
/* Default: desktop */
.mobile-site{
display:none !important;
}
.desktop-main,
body > .nav-wrap,
body > footer,
body > .whatsapp{
display:block;
}
/* Mobile only */
@media (max-width:760px){
.mobile-site{
display:block !important;
}
.desktop-main,
body > .nav-wrap,
body > footer,
body > .whatsapp{
display:none !important;
}
}
/* Desktop and tablet above mobile breakpoint */
@media (min-width:761px){
.mobile-site{
display:none !important;
}
.desktop-main{
display:block !important;
}
}
/* =========================================================
FINAL MOBILE COMPACT FIX
No blank spaces, no sticky sections, no book-like scroll
========================================================= */
@media(max-width:760px){
html,body{
min-height:0 !important;
height:auto !important;
overflow-x:hidden !important;
scroll-behavior:smooth;
}
body{
padding:0 0 74px !important;
}
.mobile-site{
min-height:0 !important;
height:auto !important;
}
.mobile-site main,
.mobile-site section{
min-height:0 !important;
height:auto !important;
margin:0 !important;
}
.mobile-topbar{
top:8px !important;
left:8px !important;
right:8px !important;
height:54px !important;
border-radius:15px !important;
}
.mobile-hero{
padding:92px 16px 38px !important;
}
.mobile-hero-badge{
font-size:6.5px !important;
padding:7px 10px !important;
}
.mobile-hero h1{
margin:16px 0 14px !important;
font-size:clamp(43px,12vw,58px) !important;
line-height:.95 !important;
letter-spacing:-3.6px !important;
}
.mobile-hero>p{
font-size:14px !important;
line-height:1.58 !important;
max-width:320px !important;
}
.mobile-hero-actions{
margin-top:22px !important;
}
.mobile-primary,
.mobile-secondary{
min-height:48px !important;
}
.mobile-hero-frame{
height:222px !important;
margin-top:26px !important;
}
.mobile-frame-window{
top:4px !important;
height:196px !important;
border-radius:20px !important;
}
.mobile-frame-content{
padding:24px 20px !important;
}
.mobile-frame-content h3{
margin:9px 0 16px !important;
font-size:26px !important;
max-width:210px !important;
}
.mobile-mini-grid span{
height:38px !important;
}
.mobile-float-card{
padding:9px 11px !important;
border-radius:12px !important;
}
.mobile-float-card b{
font-size:14px !important;
}
.mobile-float-card span{
font-size:6px !important;
}
.mobile-float-a{
bottom:2px !important;
}
.mobile-float-b{
top:0 !important;
}
.mobile-services,
.mobile-industries,
.mobile-why{
padding:48px 16px !important;
}
.mobile-section-head h2{
margin-top:9px !important;
font-size:34px !important;
line-height:1.01 !important;
letter-spacing:-2.1px !important;
}
.mobile-service-grid{
gap:10px !important;
margin-top:22px !important;
}
.mobile-service-card{
min-height:152px !important;
padding:17px !important;
border-radius:17px !important;
}
.mobile-service-card h3{
margin-top:27px !important;
font-size:21px !important;
}
.mobile-service-card p{
font-size:10px !important;
line-height:1.45 !important;
}
.mobile-service-card b{
right:14px !important;
bottom:12px !important;
}
.mobile-industry-rail{
margin-top:22px !important;
gap:12px !important;
}
.mobile-industry-card{
flex-basis:82% !important;
height:250px !important;
border-radius:19px !important;
}
.mobile-industry-card>div{
left:18px !important;
right:18px !important;
bottom:18px !important;
}
.mobile-industry-card h3{
font-size:25px !important;
}
.mobile-why-list{
margin-top:22px !important;
}
.mobile-why-list div{
padding:15px 0 !important;
}
.mobile-why-list span{
font-size:14px !important;
}
.mobile-final-cta{
margin:18px 12px 18px !important;
padding:34px 20px !important;
border-radius:22px !important;
}
.mobile-final-cta h2{
margin:12px 0 20px !important;
font-size:32px !important;
}
.mobile-email{
margin-top:14px !important;
}
.mobile-bottom-nav{
left:8px !important;
right:8px !important;
bottom:8px !important;
padding:6px !important;
border-radius:15px !important;
}
.mobile-bottom-nav a{
min-height:40px !important;
}
/* Remove any leftover animation/spacer elements from earlier versions */
.story-section,
.story-shell,
.story-spacer,
.story-sticky,
.story-stage,
.mobile-cinematic-story,
.mobile-quick-actions,
.service-sheet{
display:none !important;
height:0 !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
}
/* Kill any accidental large viewport heights */
[style*="100vh"],
[style*="100svh"],
[style*="200vh"],
[style*="300vh"]{
min-height:0 !important;
height:auto !important;
}
}
@media(max-width:390px){
.mobile-service-grid{
grid-template-columns:1fr !important;
}
.mobile-service-card{
min-height:138px !important;
}
.mobile-industry-card{
flex-basis:88% !important;
}
}
/* Restaurant live demo link */
.industry-demo-link{
color:inherit;
text-decoration:none;
cursor:pointer;
}
.demo-card-cta{
display:inline-flex;
align-items:center;
margin-top:13px;
padding:8px 11px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
background:rgba(5,5,8,.48);
backdrop-filter:blur(10px);
color:#fff;
font-size:8px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.industry-demo-link:hover .demo-card-cta{
border-color:rgba(255,255,255,.38);
background:rgba(255,255,255,.10);
}
.mobile-industry-card.industry-demo-link{
display:block;
}
.mobile-industry-card .demo-card-cta{
margin-top:14px;
}
/* CUSTOM DEMO CARD POLISH */
.industry-card{min-height:360px!important;background-size:cover!important;background-position:center!important;isolation:isolate}
.industry-card::before,.mobile-industry-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.18) 48%,rgba(0,0,0,.92) 100%);z-index:1}
.industry-card>*,.mobile-industry-card>*{position:relative;z-index:2}
.industry-card:hover{transform:translateY(-8px)!important;box-shadow:0 34px 80px rgba(0,0,0,.45)!important}
.demo-card-cta{display:inline-flex;margin-top:15px;padding:8px 11px;border:1px solid rgba(255,255,255,.2);font-size:9px;letter-spacing:.7px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px)}
/* ===== FINAL WOW PASS — MAIN PORTFOLIO ===== */
.industry-card,
.mobile-industry-card{
overflow:hidden !important;
position:relative !important;
isolation:isolate !important;
}
.industry-card::after{
content:"";
position:absolute;
inset:-30%;
z-index:1;
background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.14) 48%,transparent 60%);
transform:translateX(-120%) rotate(8deg);
transition:transform .8s ease;
}
.industry-card:hover::after{transform:translateX(120%) rotate(8deg)}
.industry-card h3{font-size:34px!important;line-height:1!important}
.industry-card p{max-width:80%!important;line-height:1.5!important}
.demo-card-cta{
border-radius:999px!important;
padding:9px 13px!important;
background:rgba(6,6,10,.52)!important;
box-shadow:0 10px 35px rgba(0,0,0,.28)!important;
}
.industry-card.barber{background-position:center 38%!important}
.industry-card.auto{background-position:center 44%!important}
.industry-card.fitness{background-position:center 34%!important}
.industry-card.hotel{background-position:center 45%!important}
.industry-card.local{background-position:center 42%!important}
@media(max-width:760px){
.mobile-industry-card{
flex-basis:88%!important;
min-height:330px!important;
border-radius:24px!important;
}
}
.mobile-fitness{background-image:url("assets/topics/gym_fitness.jpg")!important}
.mobile-local{background-image:url("assets/topics/local_services.jpg")!important}
.industry-demo-link{cursor:pointer}
/* ===== MAIN SITE MOBILE / LANGUAGE FINAL PASS ===== */
.mobile-language-control{display:none}
.main-srb-signature{display:none}
@media(max-width:760px){
.mobile-topbar{
height:62px!important;
align-items:center!important;
}
.mobile-language-control{
display:flex;
align-items:center;
gap:5px;
margin-left:auto;
margin-right:7px;
}
.mobile-language-control span{display:none}
.mobile-language-control select{
width:82px!important;
min-height:35px!important;
padding:0 7px!important;
border:1px solid rgba(255,255,255,.11)!important;
border-radius:9px!important;
background:#111119!important;
color:#fff!important;
font-size:9px!important;
}
.mobile-top-cta{padding:10px 11px!important}
.mobile-hero{padding-top:94px!important}
.mobile-hero h1{font-size:clamp(43px,12vw,57px)!important}
.mobile-service-card{min-width:0}
.mobile-industry-rail{padding-right:16px}
.mobile-industry-card{flex-basis:88%!important}
.main-srb-signature{
display:block;
position:fixed;
z-index:999;
right:12px;
bottom:76px;
padding:7px 9px;
border:1px solid rgba(255,255,255,.10);
border-radius:9px;
background:rgba(9,9,14,.78);
backdrop-filter:blur(16px);
color:#a89fad;
font-size:6px;
font-weight:800;
letter-spacing:1.4px;
}
}
/* ===== FINAL REALISTIC PHOTO CARD REDESIGN ===== */
.industry-card,
.mobile-industry-card{
position:relative!important;
overflow:hidden!important;
background-size:cover!important;
background-repeat:no-repeat!important;
border:1px solid rgba(255,255,255,.10)!important;
box-shadow:0 26px 70px rgba(0,0,0,.35)!important;
filter:none!important;
}
.industry-card{
min-height:410px!important;
border-radius:24px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
padding:26px!important;
}
.industry-card::before,
.mobile-industry-card::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(180deg,
rgba(2,4,7,0) 0%,
rgba(2,4,7,.02) 40%,
rgba(2,4,7,.18) 58%,
rgba(2,4,7,.78) 82%,
rgba(2,4,7,.95) 100%)!important;
}
.industry-card::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 50%,transparent 62%);
transform:translateX(-130%);
transition:transform .9s ease;
}
.industry-card:hover::after{transform:translateX(130%)}
.industry-card>*,
.mobile-industry-card>*{
position:relative!important;
z-index:2!important;
}
.industry-card span{
font-size:8px!important;
letter-spacing:2.2px!important;
color:rgba(255,255,255,.74)!important;
}
.industry-card h3{
font-size:34px!important;
line-height:1!important;
letter-spacing:-1.5px!important;
margin:8px 0 7px!important;
text-shadow:0 5px 22px rgba(0,0,0,.65)!important;
}
.industry-card p{
font-size:11px!important;
line-height:1.5!important;
color:rgba(255,255,255,.72)!important;
margin:0!important;
}
.demo-card-cta{
align-self:flex-start!important;
display:inline-flex!important;
margin-top:17px!important;
padding:9px 13px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.18)!important;
background:rgba(5,7,10,.46)!important;
backdrop-filter:blur(10px)!important;
font-size:8px!important;
letter-spacing:.7px!important;
}
.industry-card:hover{
transform:translateY(-9px) scale(1.01)!important;
box-shadow:0 40px 100px rgba(0,0,0,.5)!important;
}
.industry-card.restaurant{background-position:center 44%!important}
.industry-card.barber{background-position:center 42%!important}
.industry-card.auto{background-position:center 48%!important}
.industry-card.fitness{background-position:center 46%!important}
.industry-card.hotel{background-position:center 48%!important}
.industry-card.local{background-position:center 48%!important}
@media(max-width:760px){
.mobile-industry-card{
min-height:340px!important;
flex-basis:88%!important;
border-radius:22px!important;
background-position:center!important;
}
.mobile-industry-card::before{
background:linear-gradient(180deg,rgba(2,4,7,0) 0%,rgba(2,4,7,.18) 55%,rgba(2,4,7,.92) 100%)!important;
}
}
/* ===== SRB ECOSYSTEM MAIN FINAL POLISH ===== */
.srb-price-note{margin:12px 0;color:rgba(255,255,255,.64);font-size:10px;line-height:1.55}
.mobile-app-highlight{
margin:18px 14px;padding:26px 20px;border:1px solid rgba(224,184,99,.22);
border-radius:20px;background:linear-gradient(145deg,rgba(224,184,99,.08),rgba(255,255,255,.025));
}
.mobile-app-highlight span{font-size:8px;letter-spacing:2px;color:#d8b063}
.mobile-app-highlight h2{margin:8px 0;font-size:34px}
.mobile-app-highlight p{color:#9d96a2;font-size:13px;line-height:1.6}
@media(max-width:760px){
html,body{overflow-x:hidden!important}
.mobile-story-step,.mobile-chapter{min-height:auto!important;padding-top:58px!important;padding-bottom:58px!important}
.mobile-industry-card{scroll-snap-align:center}
}
/* USER-PROVIDED TOPIC PHOTOS — CROP ONLY, CARD DESIGN UNCHANGED */
.industry-card.restaurant{background-position:center 48%!important}
.industry-card.barber{background-position:center 48%!important}
.industry-card.auto{background-position:center 50%!important}
.industry-card.fitness{background-position:center 50%!important}
.industry-card.hotel{background-position:center 47%!important}
.industry-card.local{background-position:center 47%!important}
.mobile-restaurant{background-position:center 48%!important}
.mobile-barber{background-position:center 48%!important}
.mobile-auto{background-position:center 50%!important}
.mobile-fitness{background-position:center 50%!important}
.mobile-hotel{background-position:center 47%!important}
.mobile-local{background-position:center 47%!important}
/* FULL-FRAME USER PHOTOS — KEEP ALL SRB BRANDING VISIBLE */
.industry-card.restaurant,
.industry-card.barber,
.industry-card.auto,
.industry-card.fitness,
.industry-card.hotel,
.industry-card.local,
.mobile-restaurant,
.mobile-barber,
.mobile-auto,
.mobile-fitness,
.mobile-hotel,
.mobile-local{
background-position:center center!important;
background-size:cover!important;
}
.industry-card::before,
.mobile-industry-card::before{
background:
linear-gradient(180deg,
rgba(3,5,9,.01) 0%,
rgba(3,5,9,.04) 46%,
rgba(3,5,9,.58) 77%,
rgba(3,5,9,.91) 100%)!important;
}
/* ===== TRUE FINAL SAFE POLISH ===== */
.srb-loader-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .4s ease,visibility .4s ease!important}
.srb-contact-dock{position:fixed;z-index:10050;right:14px;bottom:18px;display:flex;flex-direction:column;gap:8px}
.srb-contact-button{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 36px rgba(0,0,0,.34);transition:transform .2s ease}
.srb-contact-button:hover{transform:translateY(-3px)}
.srb-contact-button img{width:32px;height:32px;object-fit:contain}
.srb-mail-button{background:#fff}.srb-whatsapp-button{background:#31b33b}.srb-whatsapp-button img{width:38px;height:38px;border-radius:10px}
.srb-back-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:10px 12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04);color:inherit;text-decoration:none}
.srb-back-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.08);font:800 10px Arial}
.srb-back-link>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.srb-back-link strong{font:800 10px Arial}.srb-back-link small{font:600 7px Arial;opacity:.55}
html[lang="ur"] body{direction:rtl}html[lang="ur"] .hero-content,html[lang="ur"] .section-head,html[lang="ur"] .story-copy,html[lang="ur"] form{text-align:right}
.service-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.service-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}.service-chips b{padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.035);color:#bbb7c7;font-size:8px}
.service-badge{position:absolute;right:22px;top:52px;padding:6px 9px;border:1px solid rgba(139,108,255,.35);border-radius:999px;color:#a994ff;font-size:7px;font-weight:800;letter-spacing:1px}
@media(max-width:760px){.srb-contact-dock{right:9px;bottom:76px}.srb-contact-button{width:44px;height:44px}.srb-back-link{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* SRB homepage refinement — August 2026 */
:root{--srb-ink:#08090c;--srb-paper:#f3f0e9;--srb-acid:#c9ff3d;--srb-blue:#6d73ff}
body{background:var(--srb-ink);font-feature-settings:"ss01" 1,"cv11" 1}
.nav-wrap{top:20px}.nav{height:66px;border-radius:999px;padding:0 12px 0 22px;background:rgba(12,13,17,.78);border-color:rgba(255,255,255,.1);box-shadow:0 12px 45px rgba(0,0,0,.28)}
.nav-cta{border-radius:999px;background:var(--srb-paper);color:#0a0b0e!important;padding:13px 20px;font-weight:700}
.hero{min-height:900px;padding:168px 0 86px;background:radial-gradient(circle at 82% 26%,rgba(109,115,255,.22),transparent 28%),radial-gradient(circle at 52% 90%,rgba(201,255,61,.07),transparent 25%),#08090c}
.hero-grid{grid-template-columns:1.08fr .92fr;gap:42px}.hero-copy{position:relative;z-index:4}
.signature-badge{display:inline-flex;margin-bottom:18px;padding:8px 12px;border:1px solid rgba(201,255,61,.35);border-radius:999px;color:var(--srb-acid);font-size:9px;letter-spacing:1.6px;background:rgba(201,255,61,.05)}
.eyebrow{margin-bottom:22px}.eyebrow b{font-weight:600;color:#d2cfda}.eyebrow span{background:var(--srb-acid)}
.hero h1{font-size:clamp(62px,6.3vw,96px);line-height:.91;letter-spacing:-6.5px;max-width:760px}.hero h1 span{margin-bottom:5px}.hero h1 .gradient-text{background:linear-gradient(105deg,#f3f0e9 0%,#aeb1ff 44%,#737bff 100%);-webkit-background-clip:text;color:transparent}.hero h1 span:last-child{font-size:.49em;line-height:1.05;letter-spacing:-2.4px;margin-top:22px;color:#8f8d99;font-weight:500}
.hero-copy>p{font-size:17px;line-height:1.65;max-width:610px;margin:27px 0 28px;color:#bbb8c3}.luxury-rule{display:none}.hero-actions{gap:10px}.btn{border-radius:999px;min-height:58px;padding:0 26px}.btn.primary{background:var(--srb-acid);color:#0b0d08;box-shadow:0 16px 50px rgba(201,255,61,.12)}.btn.primary:hover{box-shadow:0 22px 60px rgba(201,255,61,.23)}
.hero-signature{margin-top:24px;color:#76737e;font-size:11px;letter-spacing:.15px}.trust-row{margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);max-width:610px}.trust-row strong{font-size:20px}.trust-row span{color:#7f7c87}
.hero-visual{height:610px}.laptop{border-color:rgba(255,255,255,.16);box-shadow:45px 70px 130px rgba(0,0,0,.65),0 0 100px rgba(109,115,255,.2)}.screen{background:radial-gradient(circle at 70% 30%,rgba(109,115,255,.34),transparent 38%),#0a0b0e}.mini-btn{background:var(--srb-acid);color:#111}.card-seo b{color:var(--srb-acid)}
.marquee{padding:15px 0;background:#0c0d11}.marquee span{font-size:9px;letter-spacing:2.4px;color:#85828e}.marquee i{color:var(--srb-acid)}
.services{padding-top:140px;background:linear-gradient(180deg,#08090c,#0d0e12)}.services .section-head{margin-bottom:64px}.section-number{display:none}.section-kicker{color:var(--srb-acid)}.section-head h2{max-width:800px;font-size:clamp(44px,5.4vw,72px);line-height:.98;letter-spacing:-4.2px}.section-head>p{font-size:15px;color:#a4a1ac}
.services-grid{grid-template-columns:repeat(12,1fr);gap:14px}.service-card,.service-card.featured{grid-column:span 4;min-height:360px;border-radius:26px;padding:28px;background:#111217;border-color:rgba(255,255,255,.08);box-shadow:none}.service-card.featured{grid-column:span 8;background:radial-gradient(circle at 82% 10%,rgba(109,115,255,.28),transparent 42%),#14151b}.service-card:nth-child(7){grid-column:span 8;min-height:260px}.service-card:hover{transform:translateY(-6px);border-color:rgba(201,255,61,.34)}.service-card:after{background:var(--srb-acid)}.service-icon{width:50px;height:50px;border-radius:16px;color:var(--srb-acid);background:rgba(201,255,61,.06);border-color:rgba(201,255,61,.18)}.service-icon svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.5}.service-card>span{color:#696671;letter-spacing:1px}.service-card h3{font-size:25px;line-height:1.04;margin:54px 0 15px;letter-spacing:-1.2px}.service-card p{font-size:13px;line-height:1.72;color:#9996a1}.service-chips,.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.service-chips b,.tags b{font-size:9px;letter-spacing:.4px;padding:7px 10px;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:#bbb8c2}.service-badge{background:var(--srb-acid)!important;color:#111!important;border-radius:999px!important}
.reveal{transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
@media(max-width:960px) and (min-width:761px){.hero-grid{grid-template-columns:1fr}.hero-visual{height:500px}.services-grid{grid-template-columns:repeat(2,1fr)}.service-card,.service-card.featured,.service-card:nth-child(7){grid-column:auto}}
@media(max-width:760px){
body{background:#090a0d}.mobile-site{background:#090a0d;color:#f5f2eb}.mobile-site>.desktop-main{display:block!important}body>main{display:none!important}.mobile-topbar{padding:15px 18px;background:rgba(9,10,13,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}.mobile-logo{font-size:18px;letter-spacing:-.7px}.mobile-logo span{color:#8b8993}.mobile-top-cta{background:var(--srb-acid)!important;color:#10120b!important;border-radius:999px!important;padding:10px 16px!important}
.mobile-hero{min-height:760px;padding:118px 18px 54px!important;background:radial-gradient(circle at 88% 26%,rgba(109,115,255,.28),transparent 32%),#090a0d!important;text-align:left!important}.mobile-hero-badge{display:inline-block;color:var(--srb-acid)!important;border:1px solid rgba(201,255,61,.25);border-radius:999px;padding:7px 10px;font-size:8px!important;letter-spacing:1.3px!important}.mobile-hero h1{font-size:clamp(47px,14.5vw,64px)!important;line-height:.91!important;letter-spacing:-4.2px!important;margin:24px 0 20px!important}.mobile-hero h1 span{color:#898fff!important;background:none!important}.mobile-hero>p{font-size:16px!important;line-height:1.55!important;color:#aaa7b1!important;max-width:340px}.mobile-hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:28px!important}.mobile-primary,.mobile-secondary{min-height:55px!important;border-radius:999px!important;display:flex!important;align-items:center!important;justify-content:center!important}.mobile-primary{background:var(--srb-acid)!important;color:#10120b!important}.mobile-secondary{border:1px solid rgba(255,255,255,.15)!important;background:rgba(255,255,255,.025)!important;color:#eee!important}
.mobile-hero-frame{margin-top:42px!important;transform:none!important}.mobile-frame-window{border-radius:20px!important;border-color:rgba(255,255,255,.14)!important;box-shadow:0 28px 75px rgba(0,0,0,.55)!important}.mobile-frame-content h3{letter-spacing:-1.3px}.mobile-float-card{border-radius:14px!important}
.mobile-services{padding:86px 18px!important;background:#f0ede6!important;color:#111217!important}.mobile-section-head span{color:#555a40!important;font-weight:800!important}.mobile-section-head h2{font-size:43px!important;line-height:.96!important;letter-spacing:-3px!important;margin-top:13px!important}.mobile-service-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-top:34px!important}.mobile-service-card{min-height:210px!important;padding:24px!important;border:1px solid rgba(15,16,20,.1)!important;border-radius:22px!important;background:#faf8f3!important;color:#111217!important;box-shadow:none!important}.mobile-service-card:first-child{background:#111217!important;color:#f5f2eb!important}.mobile-service-card>span{font-size:9px!important;letter-spacing:1.3px!important;color:#6d7158!important}.mobile-service-card:first-child>span{color:var(--srb-acid)!important}.mobile-service-card h3{font-size:32px!important;letter-spacing:-1.7px!important;margin-top:42px!important}.mobile-service-card p{font-size:13px!important;line-height:1.55!important;color:#77746f!important;max-width:260px}.mobile-service-card:first-child p{color:#9d9aa3!important}.mobile-service-card>b{position:absolute!important;right:22px!important;bottom:22px!important;width:38px!important;height:38px!important;border-radius:50%!important;background:var(--srb-acid)!important;color:#111!important;display:grid!important;place-items:center!important}
}
/* FINAL TOUCHUP */
.srb-contact-dock{
right:16px!important;
bottom:18px!important;
gap:10px!important;
}
.srb-contact-button{
display:flex!important;
}
.srb-contact-dock > *:not(.srb-contact-button){
display:none!important;
}
.srb-contact-dock .wa,
.srb-contact-dock .WA,
.srb-contact-dock .whatsapp-label,
.srb-contact-dock .label,
.srb-contact-dock span,
.srb-contact-dock p{
display:none!important;
}
/* LEGACY WA PERMANENT REMOVAL */
a.whatsapp:not(.srb-contact-button){display:none!important}
/* Mobile motion and unobstructed service cards */
@media(max-width:760px){
.srb-contact-dock{display:none!important}
.mobile-hero-badge,.mobile-hero h1,.mobile-hero>p,.mobile-hero-actions,.mobile-hero-frame{opacity:0;animation:mobileRise .8s cubic-bezier(.22,1,.36,1) forwards}
.mobile-hero h1{animation-delay:.08s}.mobile-hero>p{animation-delay:.17s}.mobile-hero-actions{animation-delay:.25s}.mobile-hero-frame{animation-delay:.38s}
.mobile-frame-window{animation:mobileFloat 5s ease-in-out infinite}.mobile-float-a{animation:mobileFloat 4.2s ease-in-out .4s infinite}.mobile-float-b{animation:mobileFloat 4.8s ease-in-out .9s infinite}
.mobile-service-card{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.mobile-service-card.mobile-in{opacity:1;transform:none}.mobile-service-card.mobile-in:nth-child(2){transition-delay:.07s}.mobile-service-card.mobile-in:nth-child(3){transition-delay:.12s}.mobile-service-card.mobile-in:nth-child(4){transition-delay:.17s}
.mobile-service-card>b{transition:transform .3s ease,background .3s ease}.mobile-service-card:active>b{transform:scale(.88) rotate(-12deg)}
}
@keyframes mobileRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mobileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.mobile-hero-badge,.mobile-hero h1,.mobile-hero>p,.mobile-hero-actions,.mobile-hero-frame,.mobile-frame-window,.mobile-float-card{opacity:1;animation:none!important}.mobile-service-card{opacity:1;transform:none}}
/* Final mobile dark-theme correction */
@media(max-width:760px){
.mobile-site,.mobile-services,.mobile-app-highlight,.mobile-industries,.mobile-why{background:#090a0d!important;color:#f5f2eb!important}
.mobile-services{border-top:1px solid rgba(255,255,255,.07)!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
.mobile-services .mobile-section-head>span{color:var(--srb-acid)!important}
.mobile-services .mobile-section-head h2{color:#f5f2eb!important}
.mobile-service-card,.mobile-service-card:first-child{background:linear-gradient(145deg,#15161c,#0f1015)!important;color:#f5f2eb!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 18px 50px rgba(0,0,0,.22)!important}
.mobile-service-card:first-child{background:radial-gradient(circle at 90% 5%,rgba(109,115,255,.25),transparent 38%),linear-gradient(145deg,#171820,#101116)!important;border-color:rgba(137,143,255,.3)!important}
.mobile-service-card>span,.mobile-service-card:first-child>span{color:var(--srb-acid)!important}
.mobile-service-card h3{color:#f5f2eb!important}
.mobile-service-card p,.mobile-service-card:first-child p{color:#a8a5b0!important}
.mobile-service-card>b{background:var(--srb-acid)!important;color:#10120b!important;box-shadow:0 8px 24px rgba(201,255,61,.16)!important}
}
/* Mobile reliability + compact industry grid */
@media(max-width:760px){
.mobile-services{min-height:0!important}
.mobile-service-grid{min-height:0!important}
.mobile-service-card,.mobile-service-card.mobile-in{opacity:1!important;transform:none!important;min-height:168px!important;padding:20px!important}
.mobile-service-card h3{font-size:27px!important;margin-top:28px!important}
.mobile-service-card p{font-size:12px!important;line-height:1.5!important;padding-right:38px!important}
.mobile-service-card>b{width:34px!important;height:34px!important;right:18px!important;bottom:18px!important;animation:mobileArrowPulse 2.8s ease-in-out infinite}
.mobile-industries{padding:72px 18px!important;overflow:visible!important}
.mobile-industries .mobile-section-head h2{font-size:39px!important}
.mobile-industry-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;overflow:visible!important;padding:0!important;margin-top:30px!important;scroll-snap-type:none!important}
.mobile-industry-card{width:auto!important;min-width:0!important;max-width:none!important;flex:initial!important;flex-basis:auto!important;height:220px!important;min-height:220px!important;border-radius:18px!important;padding:16px!important;background-position:center!important}
.mobile-industry-card>div{padding:0!important;max-width:100%!important}
.mobile-industry-card small{font-size:7px!important;letter-spacing:1px!important}
.mobile-industry-card h3{font-size:20px!important;line-height:1.02!important;letter-spacing:-.8px!important;margin:7px 0 10px!important}
.mobile-industry-card .demo-card-cta{font-size:7px!important;padding:7px 9px!important;white-space:nowrap!important}
.mobile-industry-card:nth-child(odd){animation:industryBreathe 5s ease-in-out infinite}.mobile-industry-card:nth-child(even){animation:industryBreathe 5s ease-in-out .7s infinite}
.mobile-industry-card::before{background:linear-gradient(180deg,rgba(4,5,7,.42) 0%,rgba(4,5,7,.22) 34%,rgba(4,5,7,.88) 68%,#050609 100%)!important}
.mobile-industry-card>div{position:absolute!important;left:14px!important;right:14px!important;bottom:14px!important;top:auto!important;z-index:3!important}
.mobile-industry-card small{display:block!important;color:#d4d0da!important;margin-bottom:6px!important}
.mobile-industry-card h3{max-width:145px!important;text-shadow:0 2px 16px rgba(0,0,0,.75)!important}
.mobile-industry-card h3{font-family:Inter,Arial,sans-serif!important;font-size:14px!important;line-height:1.28!important;letter-spacing:0!important;font-weight:400!important;max-width:138px!important;margin:7px 0 11px!important}
.mobile-industry-card .demo-card-cta{font-size:7px!important;font-weight:600!important;letter-spacing:.4px!important}
}
@keyframes mobileArrowPulse{0%,100%{box-shadow:0 8px 24px rgba(201,255,61,.12);transform:translateX(0)}50%{box-shadow:0 8px 30px rgba(201,255,61,.28);transform:translateX(3px)}}
@keyframes industryBreathe{0%,100%{border-color:rgba(255,255,255,.1)}50%{border-color:rgba(137,143,255,.28)}}
@media(max-width:370px){.mobile-industry-rail{grid-template-columns:1fr!important}.mobile-industry-card{height:205px!important;min-height:205px!important}}
/* Mobile pricing */
@media(max-width:760px){
.mobile-pricing{padding:78px 18px;background:#0d0e12;color:#f5f2eb;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-pricing .mobile-section-head>span{color:var(--srb-acid)!important}.mobile-pricing .mobile-section-head h2{font-size:40px!important;color:#f5f2eb!important}.mobile-pricing .mobile-section-head p{margin-top:14px;color:#96939e;font-size:12px;line-height:1.55;max-width:330px}
.mobile-price-list{display:grid;gap:10px;margin-top:30px}.mobile-price-list article{position:relative;padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:#14151a}.mobile-price-list article.recommended{background:radial-gradient(circle at 90% 5%,rgba(109,115,255,.28),transparent 40%),#171820;border-color:rgba(137,143,255,.3)}
.mobile-price-list small{font-size:8px;letter-spacing:1.5px;color:var(--srb-acid)}.mobile-price-list h3{font-size:20px;margin:10px 0 14px;letter-spacing:-.5px}.mobile-price-list strong{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-size:38px;letter-spacing:-2px}.mobile-price-list strong span{font-size:17px;color:#8f8c97}.mobile-price-list p{color:#9d9aa5;font-size:12px;line-height:1.5;margin:12px 0 18px}.mobile-price-list a{display:inline-flex;padding:10px 13px;border-radius:999px;background:var(--srb-acid);color:#10120b;font-size:9px;font-weight:700}
.mobile-service-card{cursor:pointer}.mobile-service-card:focus-visible{outline:2px solid var(--srb-acid);outline-offset:3px}
}
/* Mobile request questionnaire */
.mobile-request-sheet{display:none}
@media(max-width:760px){
body.mobile-request-open{overflow:hidden!important}
.mobile-request-sheet{position:fixed;inset:0;z-index:20000;display:block;visibility:hidden;pointer-events:none}
.mobile-request-sheet.open{visibility:visible;pointer-events:auto}
.mobile-request-backdrop{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(2,3,5,.76);opacity:0;transition:opacity .28s ease}
.mobile-request-sheet.open .mobile-request-backdrop{opacity:1}
.mobile-request-panel{position:absolute;left:8px;right:8px;bottom:8px;max-height:calc(100svh - 28px);overflow-y:auto;padding:28px 18px 22px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:radial-gradient(circle at 90% 0,rgba(109,115,255,.23),transparent 30%),#111217;color:#f5f2eb;box-shadow:0 -24px 80px rgba(0,0,0,.55);transform:translateY(105%);transition:transform .38s cubic-bezier(.22,1,.36,1)}
.mobile-request-sheet.open .mobile-request-panel{transform:translateY(0)}
.mobile-request-close{position:absolute;right:15px;top:15px;width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:#1b1c22;color:#fff;font-size:24px;line-height:1}
.mobile-request-panel>small{font-size:8px;letter-spacing:1.7px;color:var(--srb-acid)}.mobile-request-panel>h2{font-size:34px;letter-spacing:-2px;margin:10px 42px 7px 0}.mobile-request-panel>p{font-size:12px;line-height:1.5;color:#9e9ba6;max-width:310px}
#mobileRequestForm{display:grid;gap:12px;margin-top:22px}#mobileRequestForm label{display:grid;gap:7px}#mobileRequestForm label>span{font-size:9px;color:#b9b6c0}#mobileRequestForm input,#mobileRequestForm select,#mobileRequestForm textarea{width:100%;min-height:48px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0b0c10;color:#fff;padding:12px;outline:none}#mobileRequestForm textarea{resize:vertical;min-height:82px}#mobileRequestForm input:focus,#mobileRequestForm select:focus,#mobileRequestForm textarea:focus{border-color:var(--srb-acid)}
.mobile-request-submit{min-height:52px;border:0;border-radius:999px;background:var(--srb-acid);color:#10120b;font-weight:800}
}
/* Final homepage asset-safe paths. */
.industry-card.restaurant,.mobile-restaurant{background-image:url("restaurant.jpg")!important}
.industry-card.barber,.mobile-barber{background-image:url("barber_salon.jpg")!important}
.industry-card.auto,.mobile-auto{background-image:url("auto_dealer.jpg")!important}
.industry-card.fitness,.mobile-fitness{background-image:url("gym_fitness.jpg")!important}
.industry-card.hotel,.mobile-hotel{background-image:url("hotel_travel.jpg")!important}
.industry-card.local,.mobile-local{background-image:url("local_services.jpg")!important}
.srb-contact-button svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.srb-mail-button{color:#111;background:#fff!important}
.srb-whatsapp-button{color:#fff;background:#25d366!important}