/* =========================================================
   OSI REFERENCE HOMEPAGE — faithful visual recreation
   Built from the supplied reference screenshot.
   ========================================================= */
:root{
  --r-bg:#020a20; --r-panel:#06183d; --r-panel2:#08234d;
  --r-line:#0c6ecb; --r-text:#f5f8ff; --r-muted:#b9c8e7;
  --r-blue:#168cff; --r-cyan:#13e7ff; --r-purple:#8b36ff;
  --r-pink:#df28ff; --r-green:#00d98b; --r-orange:#ff8a1f;
  --r-yellow:#ffd51a; --r-red:#ff3d54;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.osi-reference{margin:0;background:
 radial-gradient(circle at 12% 6%,rgba(0,149,255,.18),transparent 25%),
 radial-gradient(circle at 88% 20%,rgba(150,0,255,.18),transparent 26%),
 radial-gradient(circle at 50% 70%,rgba(0,80,190,.13),transparent 35%),
 #02091d;color:var(--r-text);font-family:'Hind Siliguri',Inter,Arial,sans-serif;overflow-x:hidden}
body.osi-reference:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:radial-gradient(#5bbcff 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,black,transparent 85%);z-index:0}
.osi-reference a{color:inherit;text-decoration:none}
.osi-reference .ref-wrap{width:calc(100% - 80px);max-width:1760px;margin:auto;position:relative;z-index:2}
.osi-reference .ref-header{height:72px;position:sticky;top:0;z-index:100;background:rgba(2,9,29,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,139,255,.35)}
.ref-header .inner{height:100%;display:flex;align-items:center;gap:22px}
.ref-logo{display:flex;align-items:center;gap:9px;min-width:245px;flex-shrink:0}
.ref-logo .osi-badge{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#0de5ff,#7e2cff);display:grid;place-items:center;font-weight:900;font-size:18px;box-shadow:0 0 28px rgba(0,190,255,.45);transform:skew(-5deg)}
.ref-logo .site-logo-img,.footer-brand .site-logo-img{width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0}
.ref-logo strong{font-size:18px;line-height:1.05}.ref-logo small{display:block;color:#53e7ff;font-size:12px;margin-top:3px}
.ref-nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.25vw,22px);flex:1;min-width:0}
.ref-nav a{font-size:clamp(13px,0.9vw,15px);color:#eef5ff;opacity:.9;transition:.2s}.ref-nav a:hover{color:#3fe9ff;text-shadow:0 0 14px #00dfff}
.ref-tools{display:flex;gap:8px;align-items:center}.ref-icon-btn{width:31px;height:31px;border:1px solid #124d8f;border-radius:50%;display:grid;place-items:center;font-size:13px}
.ref-quote{padding:10px 18px;border-radius:999px;background:linear-gradient(90deg,#4a5bff,#8f31ff);font-size:14px;font-weight:800;box-shadow:0 8px 25px rgba(102,52,255,.35)}
.ref-menu{display:none}
@media(max-width:1180px){.ref-nav{display:none}.ref-menu{display:grid}.ref-logo{min-width:0}.ref-tools .ref-icon-btn{display:none}}

.ref-hero{min-height:580px;position:relative;overflow:hidden;border-bottom:1px solid rgba(17,111,224,.35)}
.ref-hero .hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 60% 45%,#0b2f77 0%,#030b22 64%,#02091d 100%);transition:transform .3s ease-out;will-change:transform;}
.ref-hero .hero-bg:before{content:"";position:absolute;inset:0;background-image:var(--hero-img);background-size:cover;background-position:var(--hero-pos,center);filter:saturate(1.08) contrast(1.04);}
.ref-hero .hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#02091d 0%,rgba(2,9,29,.95) 28%,rgba(2,9,29,.68) 46%,rgba(2,9,29,.32) 64%,rgba(2,9,29,.18) 100%),linear-gradient(0deg,#02091d 0%,transparent 16%,transparent 86%,#02091d 100%);opacity:var(--hero-ov,1);}
.ref-hero .hero-bg.no-img:before{display:none}
.ref-hero .hero-layout{position:relative;z-index:5}
.ref-hero .hero-copy{padding:70px 0 54px;max-width:560px}
.ref-pill{display:inline-block;padding:5px 13px;border:1px solid #0c83d8;border-radius:999px;background:rgba(0,130,255,.1);color:#55ddff;font-size:13px;font-weight:800;letter-spacing:.06em}
.ref-hero h1{font-family:'Hind Siliguri',Inter,Arial,sans-serif;font-size:clamp(38px,4.5vw,64px);line-height:1.03;margin:15px 0 12px;font-weight:900;letter-spacing:-.035em}
.ref-hero h1 .grad{background:linear-gradient(90deg,#1ae5ff,#bd3cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ref-hero p{font-family:'Hind Siliguri',Inter,Arial,sans-serif;max-width:620px;color:#c5d3ef;font-size:17px;line-height:1.6}
.ref-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.ref-btn{border:0;border-radius:999px;padding:11px 18px;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;position:relative;transform:translateZ(0);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,filter .22s;will-change:transform}
.ref-btn:hover{transform:translateY(-7px) perspective(700px) rotateX(3deg) scale(1.025);filter:brightness(1.08);box-shadow:0 18px 34px rgba(0,170,255,.34)}
.ref-btn:active{transform:translateY(-2px) scale(.985)}
.ref-btn.primary{background:linear-gradient(90deg,#08baff,#7147ff);box-shadow:0 10px 26px rgba(0,153,255,.28)}
.ref-btn.secondary{background:rgba(255,255,255,.05);border:1px solid #1760a6;color:#fff}
.ref-mini-stats{display:flex;gap:30px;margin-top:25px}.ref-mini-stats span{font-size:13px;color:#9cb2d6}.ref-mini-stats b{display:block;color:#fff;font-size:20px;margin-bottom:3px}
.ref-floating-label{position:absolute;right:5%;top:24%;font-size:25px;font-family:cursive;color:#74eaff;line-height:1.1;transform:rotate(-6deg);text-align:center;text-shadow:0 0 18px rgba(0,230,255,.5)}
@media(max-width:900px){.ref-hero .hero-copy{padding:56px 0 40px;max-width:640px}}
@media(max-width:700px){.ref-hero{min-height:480px}.ref-hero .hero-copy{padding:46px 0 34px}.ref-floating-label{display:none}}

.ref-quick{margin-top:-18px;position:relative;z-index:5}.quick-bar{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:8px;padding:8px;border:1px solid #075eb3;border-radius:19px;background:rgba(4,20,52,.93);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.quick-title{padding:10px 13px}.quick-title b{font-size:18px;display:block}.quick-title small{color:#a9bbd9;font-size:13px}
.q-item{min-height:58px;border:1px solid #18538e;border-radius:12px;display:flex;align-items:center;gap:9px;padding:8px 10px;background:linear-gradient(145deg,#0a2b5d,#061a3a);transition:.25s}
.q-item{transform-style:preserve-3d;will-change:transform}.q-item:hover{transform:translateY(-8px) perspective(700px) rotateX(5deg) rotateY(-2deg) scale(1.02);border-color:#24dfff;box-shadow:0 14px 25px rgba(0,170,255,.2)}
.q-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:20px;color:#fff;background:linear-gradient(135deg,#067eff,#423eff)}
.q-item b{font-size:14px}.q-item small{display:block;color:#9db3d8;font-size:12px;margin-top:3px}
.q-pink .q-icon{background:linear-gradient(135deg,#ff2cc2,#6e35ff)}.q-green .q-icon{background:linear-gradient(135deg,#00ce88,#007f83)}.q-orange .q-icon{background:linear-gradient(135deg,#ffae22,#ff5b00)}.q-purple .q-icon{background:linear-gradient(135deg,#7c32ff,#c21cff)}
@media(max-width:900px){.osi-reference .ref-wrap{width:calc(100% - 32px)}.quick-bar{grid-template-columns:repeat(3,1fr)}.quick-title{grid-column:1/-1}}@media(max-width:560px){.quick-bar{grid-template-columns:1fr 1fr}.quick-title{grid-column:1/-1}}

.ref-section{padding:18px 0}.ref-card{border:1px solid #0c63b6;border-radius:18px;background:linear-gradient(145deg,rgba(5,28,67,.95),rgba(3,14,39,.95));box-shadow:0 12px 30px rgba(0,0,0,.18)}
.problem-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:210px;overflow:hidden}.problem-copy{padding:22px 25px}.problem-copy h2{font-size:28px;margin:8px 0}.problem-copy p{font-size:15px;color:#aebfdf}.problem-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:13px}.problem-list span{font-size:14px;color:#f5f7ff;display:block}.problem-list span::first-letter{color:#ff4258}.problem-art{min-height:210px;background:linear-gradient(90deg,rgba(5,18,47,.12),rgba(5,18,47,0)),var(--problem-img,url('../uploads/reference/problem-visual.jpg')) center/cover no-repeat}
@media(max-width:760px){.problem-card{grid-template-columns:1fr}.problem-art{min-height:180px}.problem-list{grid-template-columns:1fr}}

.section-title{font-size:26px;margin:0 0 12px}.section-title .accent{color:#2de6ff}.section-title:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5a49ff;box-shadow:0 0 12px #4a52ff;margin:0 8px 3px 0}
.help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.help-card{min-height:150px;border-radius:14px;padding:14px;background:#f1f8ff;color:#0c2752;border:2px solid #168fff;position:relative;overflow:hidden;transition:.25s;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.help-card:nth-child(2){border-color:#9b55ff}.help-card:nth-child(3){border-color:#29a9ff}.help-card:nth-child(4){border-color:#ff7b2b}.help-card{transform-style:preserve-3d}.help-card:hover{transform:translateY(-9px) perspective(800px) rotateX(3deg) rotateY(-2deg) scale(1.015);box-shadow:0 20px 34px rgba(0,120,255,.25)}
.help-card .hc-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#00b8ff,#1b65ff);color:#fff;display:grid;place-items:center;font-size:18px;margin-bottom:7px}.help-card:nth-child(2) .hc-icon{background:linear-gradient(135deg,#a23dff,#702cff)}.help-card:nth-child(3) .hc-icon{background:linear-gradient(135deg,#21bfff,#2870ff)}.help-card:nth-child(4) .hc-icon{background:linear-gradient(135deg,#ff922c,#ff4f13)}
.help-card h3{font-size:18px;margin:0 0 7px}.help-card ul{list-style:none;padding:0;margin:0}.help-card li{font-size:14px;margin:5px 0}.help-card li:before{content:"✓";color:#00a97a;font-weight:900;margin-right:5px}
@media(max-width:800px){.help-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.help-grid{grid-template-columns:1fr}}

.software-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.8fr;gap:12px;align-items:center;padding:15px 18px}.software-card:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(4,16,40,.95) 0%,rgba(4,16,40,.8) 45%,rgba(4,16,40,.55) 100%),var(--software-img) center/cover no-repeat}.software-copy,.software-strip{position:relative;z-index:1}.software-copy h2{font-size:26px}.software-copy p{font-size:14px;color:#9db2d5;margin:7px 0}.software-copy .ref-btn{padding:8px 12px;font-size:13px}.software-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.soft-item{min-height:75px;border:1px solid #1460aa;border-radius:9px;background:linear-gradient(145deg,#082a5c,#061b3c);display:grid;place-items:center;text-align:center;padding:6px;transition:.2s}.soft-item{transform-style:preserve-3d}.soft-item:hover{transform:translateY(-7px) perspective(700px) rotateX(4deg);border-color:#24dcff}.soft-item i{font-size:18px;color:#fff}.soft-item span{font-size:12px;margin-top:4px}
@media(max-width:800px){.software-card{grid-template-columns:1fr}.software-strip{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){.software-strip{grid-template-columns:repeat(2,1fr)}}

.eco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.eco-card{min-height:210px;border-radius:14px;padding:14px;color:#fff;position:relative;overflow:hidden;transition:.25s;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 25px rgba(0,0,0,.25)}.eco-card{transform-style:preserve-3d}.eco-card:hover{transform:translateY(-9px) perspective(800px) rotateX(2deg) rotateY(-2deg) scale(1.015);box-shadow:0 24px 40px rgba(0,0,0,.35)}.eco-card:nth-child(1){background:linear-gradient(145deg,#0876ee,#0c2d7b)}.eco-card:nth-child(2){background:linear-gradient(145deg,#0b9f86,#056050)}.eco-card:nth-child(3){background:linear-gradient(145deg,#8c2ff2,#4b197f)}.eco-card:nth-child(4){background:linear-gradient(145deg,#ff841f,#b84405)}.eco-card h3,.eco-card p,.eco-card li{text-shadow:0 1px 6px rgba(0,0,0,.65)}.eco-card h3{font-size:19px;margin:0 0 4px;position:relative;z-index:2}.eco-card p{font-size:14px;color:#d9e6ff;position:relative;z-index:2}.eco-card ul{padding:0 0 0 14px;margin:8px 0;position:relative;z-index:2}.eco-card li{font-size:13px;margin:5px 0}
.eco-card .eco-img{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:var(--eco-img)}
.eco-card:nth-child(1) .eco-img:after{background:linear-gradient(0deg,rgba(4,16,48,.62) 0%,rgba(4,16,48,.22) 55%,rgba(8,118,238,.08) 100%)}
.eco-card:nth-child(2) .eco-img:after{background:linear-gradient(0deg,rgba(3,28,24,.62) 0%,rgba(3,28,24,.22) 55%,rgba(11,159,134,.08) 100%)}
.eco-card:nth-child(3) .eco-img:after{background:linear-gradient(0deg,rgba(24,7,42,.62) 0%,rgba(24,7,42,.22) 55%,rgba(140,47,242,.08) 100%)}
.eco-card:nth-child(4) .eco-img:after{background:linear-gradient(0deg,rgba(42,17,3,.62) 0%,rgba(42,17,3,.22) 55%,rgba(255,132,31,.08) 100%)}
.eco-card .eco-img:after{content:"";position:absolute;inset:0}
.eco-card .ref-btn{position:absolute;bottom:9px;right:12px;padding:7px 11px;font-size:12px;z-index:2}
@media(max-width:800px){.eco-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.eco-grid{grid-template-columns:1fr}}

.industry-panel{padding:14px}.industry-grid{display:flex;flex-wrap:wrap;gap:7px}.industry-item{flex:1 1 calc(10% - 7px);min-width:90px;min-height:55px;border:1px solid #0d5b9e;border-radius:8px;background:linear-gradient(145deg,#072c5e,#061a3b);display:grid;place-items:center;text-align:center;font-size:12px;transition:.2s;padding:5px}.industry-item{transform-style:preserve-3d}.industry-item:hover{transform:translateY(-5px) perspective(600px) rotateX(3deg);border-color:#20dcff;color:#5feaff}.industry-item i{font-size:17px;margin-bottom:3px}
@media(max-width:900px){.industry-item{flex-basis:calc(20% - 7px)}}@media(max-width:520px){.industry-item{flex-basis:calc(33.333% - 7px)}}

.package-layout{display:grid;grid-template-columns:1fr 1.8fr 1.1fr;gap:10px}.package-intro,.why-mini{padding:14px}.package-intro h2{font-size:26px}.package-intro p,.why-mini li{font-size:14px;color:#afc0df}.package-grid-ref{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.p-card{padding:11px;border-radius:9px;min-height:145px;background:#0a3b7c;border:1px solid #218dff;transition:.2s;display:flex;flex-direction:column}.p-card:nth-child(2){background:#35148a;border-color:#a14aff}.p-card:nth-child(3){background:#7c2a8b;border-color:#ff54dd}.p-card:nth-child(4){background:#9c350e;border-color:#ff8d3b}.p-card{transform-style:preserve-3d}.p-card:hover{transform:translateY(-8px) perspective(700px) rotateX(3deg) rotateY(-1deg);box-shadow:0 18px 30px rgba(0,130,255,.24)}.p-card h3{font-size:16px}.p-card .price{font-size:22px;font-weight:900;margin:8px 0}.p-card small{font-size:12px;color:#d7e6ff}.p-card .ref-btn{padding:6px 9px;font-size:12px;margin-top:auto;align-self:flex-end}.why-mini{border:1px solid #1b65aa;border-radius:10px;background:#061d43}.why-mini h3{font-size:17px;margin:0 0 8px}.why-mini ul{padding:0;list-style:none;margin:0}.why-mini li{margin:7px 0}.why-mini li:before{content:"✓";color:#00e88d;margin-right:5px}
@media(max-width:1000px){.package-layout{grid-template-columns:1fr}.package-grid-ref{grid-template-columns:repeat(4,1fr)}}@media(max-width:600px){.package-grid-ref{grid-template-columns:repeat(2,1fr)}}

.lower-grid{display:grid;grid-template-columns:1.4fr 1fr 1.1fr;gap:10px}.mini-panel{padding:13px}.mini-panel h3{font-size:17px;margin:0 0 8px}.project-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.project-thumb{height:52px;border-radius:7px;background:linear-gradient(135deg,#0b4f99,#0c1e4c);display:grid;place-items:center;font-size:11px;color:#fff;border:1px solid #1268b5}.stats-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.stat-box{padding:10px 5px;text-align:center;border-radius:8px;background:#072858;border:1px solid #135eaa}.stat-box b{font-size:24px;color:#25dfff;display:block}.stat-box span{font-size:12px;color:#b4c6e4}.team-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tm{text-align:center}.tm img,.tm .avatar{width:46px;height:46px;border-radius:50%;margin:auto;object-fit:cover;border:2px solid #167dca}.tm .avatar{display:grid;place-items:center;background:linear-gradient(135deg,#185cff,#9c36ff);font-size:15px}.tm b{display:block;font-size:13px;margin-top:4px}.tm span{font-size:11px;color:#91a9ce}
@media(max-width:900px){.lower-grid{grid-template-columns:1fr}.project-strip{grid-template-columns:repeat(4,1fr)}}@media(max-width:500px){.project-strip{grid-template-columns:repeat(2,1fr)}.team-mini{grid-template-columns:repeat(2,1fr)}}

.testi-blog{display:grid;grid-template-columns:1fr 1fr;gap:10px}.testi-card-ref,.blog-card-ref{padding:13px;min-height:145px}.quote{font-size:14px;color:#dbe7fb;line-height:1.6}.client{display:flex;gap:7px;align-items:center;margin-top:10px}.client .avatar{width:28px;height:28px;border-radius:50%;background:#14447d;display:grid;place-items:center;font-size:13px}.client b{font-size:13px}.client span{display:block;color:#91a8c8;font-size:12px}.blog-items{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.blog-card-ref{min-height:120px}.blog-card-ref .thumb{height:48px;border-radius:7px;background:#0a3974;margin-bottom:7px}.blog-card-ref b{font-size:14px}.blog-card-ref p{font-size:12px;margin-top:5px}
@media(max-width:760px){.testi-blog{grid-template-columns:1fr}.blog-items{grid-template-columns:1fr 1fr}}

.ref-cta{margin:18px 0}.cta-box{min-height:145px;border-radius:18px;overflow:hidden;position:relative;padding:30px;background:linear-gradient(90deg,#071f4a,#122f69 55%,#10184c);border:1px solid #1672c9}.cta-box:after{content:"";position:absolute;right:0;top:0;bottom:0;width:40%;background:var(--cta-img,url('../uploads/reference/cta-visual.jpg')) center/cover no-repeat;opacity:.9;mask-image:linear-gradient(90deg,transparent,#000)}.cta-box h2{font-size:30px;max-width:560px}.cta-box p{font-size:15px;color:#b7c8e6;max-width:540px;margin:8px 0 15px}.cta-box .ref-btn{position:relative;z-index:2}
.ref-footer{border-top:1px solid #104c8e;background:#020817;padding:22px 0 12px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:22px}.footer-grid h4{font-size:14px;color:#fff;margin:0 0 9px}.footer-grid p,.footer-grid a{font-size:13px;color:#9db2d4;display:block;margin:5px 0}.footer-brand b{font-size:17px}.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:10px;display:flex;justify-content:space-between;color:#6f83a5;font-size:12px}
@media(max-width:800px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}
.ref-hidden{display:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

.ref-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:9999;background:#071f4a;border:1px solid #21dfff;color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;box-shadow:0 15px 35px rgba(0,0,0,.45)}
.buy-modal-overlay{position:fixed;inset:0;background:rgba(0,8,25,.78);backdrop-filter:blur(8px);z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px}
.buy-modal{width:min(430px,100%);padding:25px;border-radius:18px;background:#071b3c;border:1px solid #1a72c7;box-shadow:0 25px 80px rgba(0,0,0,.55);position:relative;color:#fff}
.buy-modal h3{margin:0 0 6px;font-size:22px}.buy-modal .item-name{color:#42e4ff;font-size:14px;margin-bottom:16px}
.buy-modal input,.buy-modal textarea{width:100%;margin:0 0 10px;padding:10px 12px;border-radius:9px;border:1px solid #1b5d9d;background:#041431;color:#fff;outline:none}
.buy-modal .close-x{position:absolute;right:14px;top:10px;background:none;border:0;color:#9db7dc;font-size:24px}
@media(max-width:1180px){.ref-header{position:relative}.ref-nav.mobile-open{display:flex!important;position:absolute;top:72px;left:0;right:0;padding:20px;flex-direction:column;background:#02091d;border-bottom:1px solid #14558e;box-shadow:0 20px 40px rgba(0,0,0,.45);z-index:200}}

/* ===== Reference fidelity + interaction fixes (v3) ===== */
.osi-icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.osi-reference svg{width:1em;height:1em;display:block;fill:none}

/* Hero now uses one true full-bleed background image (set above); min-height bumped so it reads as a proper banner. */
.ref-hero{min-height:580px;overflow:visible}

/* Real, visible, database-driven 3D glass hotspot buttons — sit at the
   same fixed positions/rotations as the artwork's cube layout, but are
   actual DOM buttons with live icon+label content (not baked into the
   background image), so they're fully editable and genuinely clickable. */
.hero-hotspot{
  position:absolute; z-index:8; border-radius:16px; outline:none; rotate:var(--tilt,0deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px; text-align:center; text-decoration:none;
  background:linear-gradient(160deg, rgba(30,50,90,.55), rgba(10,20,45,.45));
  border:1px solid rgba(120,200,255,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transform-style:preserve-3d;
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease, background .22s ease;
}
.hero-hotspot:hover{
  transform:translateY(-9px) scale(1.06) perspective(800px) rotateX(5deg) rotateY(-3deg);
  filter:drop-shadow(0 10px 18px rgba(0,220,255,.42));
  background:linear-gradient(160deg, rgba(40,70,120,.7), rgba(15,30,60,.6));
  border-color:rgba(150,220,255,.6);
}
.hero-hotspot:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 5px #19dfff}
.hotspot-icon{width:36px;height:36px;border-radius:9px;background:rgba(0,217,255,.18);display:flex;align-items:center;justify-content:center;color:#5eeaff;flex-shrink:0;}
.hotspot-icon svg{width:19px;height:19px;}
.hotspot-label{font:700 12.5px/1.25 'Hind Siliguri',Inter,Arial,sans-serif;color:#fff;white-space:normal;}
/* Right-side stage: 3D hub in the centre, 5 cards orbiting around it */
.hero-stage{position:absolute;z-index:8;right:3%;top:50%;translate:0 -50%;width:clamp(420px,44vw,660px);height:500px;perspective:1100px;--mx:0;--my:0}
.hero-orbit-line{position:absolute;left:50%;top:50%;width:92%;height:76%;translate:-50% -50%;border:1px dashed rgba(94,234,255,.28);border-radius:50%;animation:orbitSpin 60s linear infinite;pointer-events:none}
.hero-hub{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;translate:-50% -50%;z-index:6;transform-style:preserve-3d;transform:rotateX(calc(var(--my)*-10deg)) rotateY(calc(var(--mx)*12deg));transition:transform .25s ease-out;pointer-events:none}
.hub-glow{position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,rgba(40,150,255,.45) 0,rgba(110,60,255,.18) 45%,transparent 70%);filter:blur(6px)}
.hub-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(94,234,255,.6);box-shadow:0 0 18px rgba(0,200,255,.35),inset 0 0 18px rgba(0,200,255,.18)}
.hub-ring.r1{animation:ring1 9s linear infinite}
.hub-ring.r2{inset:9%;border-color:rgba(189,60,255,.6);box-shadow:0 0 18px rgba(189,60,255,.35),inset 0 0 18px rgba(189,60,255,.18);animation:ring2 12s linear infinite}
.hub-ring.r3{inset:-7%;border:1.5px dashed rgba(255,255,255,.3);box-shadow:none;animation:ring3 18s linear infinite}
.hub-core{position:absolute;inset:24%;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 32% 26%,#b4f6ff 0,#2aa8ff 22%,#3b3bd8 58%,#0a1450 100%);
  box-shadow:0 0 60px rgba(30,160,255,.6),inset -14px -18px 34px rgba(0,0,30,.55),inset 8px 8px 22px rgba(255,255,255,.35);
  animation:hubFloat 5s ease-in-out infinite}
.hub-core b{font:900 clamp(20px,2.3vw,32px)/1 Inter,Arial,sans-serif;letter-spacing:-.03em;text-shadow:0 2px 10px rgba(0,0,40,.5)}
@keyframes ring1{from{transform:rotateX(72deg) rotateZ(0)}to{transform:rotateX(72deg) rotateZ(360deg)}}
@keyframes ring2{from{transform:rotateY(72deg) rotateZ(0)}to{transform:rotateY(72deg) rotateZ(-360deg)}}
@keyframes ring3{from{transform:rotateX(55deg) rotateY(35deg) rotateZ(0)}to{transform:rotateX(55deg) rotateY(35deg) rotateZ(360deg)}}
@keyframes hubFloat{50%{translate:0 -8px}}
@keyframes orbitSpin{to{rotate:360deg}}
.hero-hotspot{width:27%;height:24%}
.hotspot-software{left:36.5%;top:0;--tilt:0deg}
.hotspot-marketing{left:0;top:24%;--tilt:-9deg}
.hotspot-training{right:0;top:24%;--tilt:8deg}
.hotspot-services{left:5%;bottom:2%;--tilt:7deg}
.hotspot-projects{right:5%;bottom:2%;--tilt:-7deg}
@media(prefers-reduced-motion:reduce){.hero-orbit-line,.hub-ring,.hub-core{animation:none}}

/* True 3D quick-action controls and stable icon sizing. */
.quick-bar{perspective:1200px}
.q-item,.ref-btn,.ref-icon-btn,.ref-quote,.soft-item,.eco-card,.help-card,.industry-item,.p-card{transform-style:preserve-3d;backface-visibility:hidden}
.q-item:hover{transform:translateY(-9px) rotateX(5deg) rotateY(-2deg) scale(1.025);}
.q-icon{flex:0 0 40px;display:grid;place-items:center}
.q-icon svg{width:22px;height:22px;stroke:currentColor;fill:none}
.hc-icon svg{width:23px;height:23px;stroke:currentColor}
.soft-item i.svg-icon{font-style:normal;color:#fff;display:grid;place-items:center}
.soft-item i.svg-icon svg{width:23px;height:23px;stroke:currentColor}
.industry-item i{width:30px;height:30px;display:grid;place-items:center;color:#6ddfff}
.industry-item i svg{width:24px;height:24px;stroke:currentColor}

/* Let uploaded artwork fill these banners properly (cover), instead of being squished to fit. */
.problem-card{overflow:hidden;grid-template-columns:1.02fr .98fr;}
.problem-art{min-height:210px;background-position:center;background-size:cover;}
.cta-box{overflow:hidden}
.cta-box:after{background-size:cover;background-position:center right}

/* Consistent hover sound targets; JS unlocks audio on first user gesture. */
@media(max-width:1180px){
  .ref-hero .hero-copy{max-width:600px;padding-top:54px}
  .hero-stage{position:relative;right:auto;top:auto;translate:none;margin:0 auto 40px;width:min(560px,92%);height:420px}
}
@media(max-width:700px){
  .ref-hero{min-height:440px}
  .ref-hero .hero-copy{padding-top:40px}
}

@media(max-width:560px){.hero-stage{height:340px}.hotspot-label{font-size:11px}.hotspot-icon{width:30px;height:30px}}