/* SoftBari Premium v5 — Visual Proof Edition */
:root{
  --sb-ink:#071a30;--sb-navy:#031427;--sb-navy-2:#082d53;--sb-blue:#0f6fff;--sb-cyan:#18c9e8;
  --sb-soft:#f5f9ff;--sb-line:#dfe9f5;--sb-muted:#65778e;--sb-white:#fff;--sb-shadow:0 24px 70px rgba(5,35,69,.12);
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#fff 0,#f8fbff 42%,#fff 100%);color:var(--sb-ink)}
body::selection{background:#0f6fff;color:#fff}

/* safer contrast */
.v4-section.dark,.dark-section,.v4-custom,.v4-final{color:#fff}
.v4-section.dark .v4-title,.v4-section.dark .v4-lead,.v4-section.dark h2,.v4-section.dark h3,.v4-section.dark p,
.v4-final h2,.v4-final p{color:#fff!important;text-shadow:none!important}
.v4-section.dark .v4-lead,.v4-section.dark p,.v4-final p{color:#cfe1f4!important}
.v4-section.alt{background:linear-gradient(180deg,#f7fbff,#f2f7fd)}
.v4-section{position:relative;overflow:hidden}
.v4-section::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 0,rgba(15,111,255,.035),transparent 26%),radial-gradient(circle at 92% 86%,rgba(24,201,232,.03),transparent 24%)}
.v4-section>.container{position:relative;z-index:1}

/* Header polish */
.header{transition:background .35s,box-shadow .35s,transform .35s}.header.scrolled{background:rgba(255,255,255,.94)!important;box-shadow:0 16px 45px rgba(3,25,49,.10)!important}
.brand-logo-header img{filter:drop-shadow(0 7px 18px rgba(11,85,190,.08));transition:transform .35s ease}.brand-logo-header:hover img{transform:scale(1.035)}
.nav-links a{position:relative}.nav-links a::after{content:"";position:absolute;left:16%;right:84%;bottom:5px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--sb-blue),var(--sb-cyan));transition:.28s}.nav-links a:hover::after,.nav-links a.active::after{right:16%}

/* Buttons: premium, tactile, obvious */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}
.btn::after{content:"";position:absolute;top:-120%;left:-40%;width:32%;height:340%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:rotate(18deg);transition:left .65s ease;z-index:-1}.btn:hover::after{left:118%}
.btn:hover{transform:translateY(-3px)}.btn:active{transform:translateY(-1px) scale(.985)}
.btn-primary{box-shadow:0 14px 34px rgba(15,111,255,.28)!important}.btn-primary:hover{box-shadow:0 22px 48px rgba(15,111,255,.36)!important}
.btn-outline:hover{border-color:#72a9ff!important;background:#f5f9ff!important;color:#0b5fd8!important}.v4-section.dark .btn-outline:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.55)!important}

/* hero readability / media */
.v4-hero{min-height:780px}.v4-hero h1{filter:drop-shadow(0 5px 20px rgba(255,255,255,.42))}.v4-hero p{color:#4c6078;font-weight:500}
.v4-photo-wrap{border:1px solid rgba(255,255,255,.58)}.v4-photo-wrap img{transition:transform 8s cubic-bezier(.2,.6,.2,1),filter .6s}.v4-slide.active .v4-photo-wrap img{transform:scale(1.045)}
.v4-media::after{content:"";position:absolute;inset:7% -5% -4% 10%;border-radius:50%;background:radial-gradient(circle,rgba(15,111,255,.13),transparent 66%);filter:blur(14px);z-index:-1}
.v4-float-card{border-color:rgba(215,231,248,.88)!important}.v4-float-card:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 26px 58px rgba(4,33,68,.18)}

/* Actual dashboard previews */
.v5-dashboard-shot{height:190px;overflow:hidden;background:linear-gradient(145deg,#06203a,#0c3a66);padding:10px;border-bottom:1px solid #dfeaf6;position:relative}
.v5-dashboard-shot::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.14) 42%,transparent 62%);transform:translateX(-120%);transition:transform .75s ease;z-index:2;pointer-events:none}.v4-product:hover .v5-dashboard-shot::before,.product-card:hover .v5-dashboard-shot::before{transform:translateX(120%)}
.v5-dashboard-shot img{width:100%;height:100%;display:block;object-fit:cover;object-position:top left;border-radius:13px;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .35s}.v4-product:hover .v5-dashboard-shot img,.product-card:hover .v5-dashboard-shot img{transform:scale(1.055);filter:saturate(1.05) contrast(1.02)}
.v4-product{overflow:hidden!important;border:1px solid #dce8f5!important;background:rgba(255,255,255,.95)!important;box-shadow:0 16px 42px rgba(6,38,75,.08)!important;transition:transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s,border-color .35s!important}
.v4-product:hover{transform:translateY(-10px)!important;border-color:#a7c9f5!important;box-shadow:0 30px 70px rgba(6,48,101,.17)!important}
.v4-product-body{padding:22px!important}.v4-product h3{font-size:1.28rem}.v4-product p{color:#5c6f86}.v4-feature-list span{background:#eff6ff!important;border:1px solid #d9e9fb!important;color:#376083!important}

/* Device showcase now uses real dashboard images */
.showcase-laptop{overflow:hidden!important;background:#061a31!important;padding:9px!important;border:1px solid rgba(141,195,255,.28)!important;box-shadow:0 40px 90px rgba(0,0,0,.28)!important}.ui-view{display:none!important;width:100%;height:100%;border-radius:14px;overflow:hidden;background:#edf5ff}.ui-view.active{display:block!important;animation:screenIn .48s cubic-bezier(.2,.75,.2,1)}.ui-view img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}.showcase-phone{background:linear-gradient(180deg,#f7fbff,#eef6ff)!important;border-color:#071a30!important;overflow:hidden}.showcase-phone::before{content:"SoftBari";display:block;margin:12px 8px 18px;padding:8px 10px;border-radius:10px;background:linear-gradient(135deg,#0f6fff,#18c9e8);color:#fff;font:700 11px Inter;text-align:center}.phone-block{position:relative;background:#fff!important;border:1px solid #dbe8f5!important}.phone-block::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:4px;border-radius:999px;background:linear-gradient(90deg,#dbe8f6,#bdeaf2)}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* story and photo standards */
.v4-story-photo,.industry-card,.consult-band{box-shadow:0 24px 65px rgba(5,34,67,.13)}
.v4-story-photo img,.industry-card img,.consult-band img{filter:saturate(.94) contrast(1.04) brightness(1.015);transition:transform .75s cubic-bezier(.2,.75,.2,1),filter .4s}.v4-story-photo:hover img,.industry-card:hover img,.consult-band:hover img{transform:scale(1.05);filter:saturate(1.03) contrast(1.04)}
.industry-card{border-radius:24px!important;overflow:hidden!important;border:1px solid #dbe7f5!important;transition:transform .35s,box-shadow .35s}.industry-card:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(5,38,78,.18)}.industry-card .content{background:linear-gradient(180deg,transparent,rgba(3,20,39,.94))!important}.industry-card .content h3,.industry-card .content p{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.35)}

/* bento/service richness */
.bento-card,.portal-card,.project-card,.resource-card,.v4-plan{border:1px solid #dce8f5!important;box-shadow:0 15px 38px rgba(6,39,76,.075)!important;transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease!important}.bento-card:hover,.portal-card:hover,.project-card:hover,.resource-card:hover,.v4-plan:hover{transform:translateY(-7px);box-shadow:0 28px 65px rgba(6,44,92,.15)!important;border-color:#a7c8f2!important}

/* resource visuals from real dashboards */
.resource-visual{height:190px!important;background-size:cover!important;background-position:top left!important;border-bottom:1px solid #dce8f5;position:relative;overflow:hidden}.resource-card:nth-child(1) .resource-visual{background-image:url('../img/dashboards/pos.webp')!important}.resource-card:nth-child(2) .resource-visual{background-image:url('../img/dashboards/erp.webp')!important}.resource-card:nth-child(3) .resource-visual{background-image:url('../img/dashboards/crm.webp')!important}.resource-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(3,20,39,.14))}

/* Portfolio/dashboard cards */
.v5-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.v5-proof{overflow:hidden;border-radius:24px;background:#fff;border:1px solid #dce8f5;box-shadow:0 18px 48px rgba(5,37,75,.09);transition:.35s}.v5-proof:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(5,37,75,.16)}.v5-proof .media{height:230px;background:#061b33;padding:10px}.v5-proof .media img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:14px;transition:transform .55s}.v5-proof:hover .media img{transform:scale(1.045)}.v5-proof .copy{padding:20px}.v5-proof .copy p{color:#60738a;margin:8px 0 0}

/* Demo gallery */
.v5-demo-hero{padding:72px 0 40px;background:radial-gradient(circle at 90% 0,rgba(15,111,255,.14),transparent 30%),linear-gradient(180deg,#f9fcff,#eff6ff)}
.v5-demo-grid{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:stretch}.v5-demo-list{background:#061b33;padding:15px;border-radius:24px;box-shadow:var(--sb-shadow)}.v5-demo-item{width:100%;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:#bdd1e7;border-radius:14px;padding:12px 13px;text-align:left;cursor:pointer;font:600 14px inherit;transition:.25s}.v5-demo-item:hover,.v5-demo-item.active{background:linear-gradient(90deg,rgba(15,111,255,.38),rgba(24,201,232,.14));color:#fff;transform:translateX(3px)}.v5-demo-item i{width:34px;height:34px;border-radius:11px;background:#10385f;display:grid;place-items:center;color:#8adcf0;font-style:normal;font-family:Inter;font-weight:800}.v5-demo-preview{background:#061b33;border-radius:28px;padding:12px;box-shadow:0 36px 90px rgba(5,30,62,.23);min-height:480px;position:relative}.v5-demo-preview img{width:100%;height:100%;max-height:520px;object-fit:cover;object-position:top left;border-radius:18px;display:block;background:#edf5ff}.v5-demo-caption{position:absolute;left:30px;right:30px;bottom:28px;background:rgba(3,20,39,.88);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.13);color:#fff;padding:16px 18px;border-radius:16px;display:flex;justify-content:space-between;align-items:center;gap:20px}.v5-demo-caption p{margin:2px 0 0;color:#c8dcef}.v5-demo-caption .btn{flex:none}

/* Generic product cards on products.html */
.product-card{overflow:hidden}.product-card .v5-dashboard-shot{margin:-22px -22px 18px;height:175px}.product-card:hover{box-shadow:0 28px 68px rgba(6,44,92,.15)!important}

/* Form and input premium feedback */
.input,select,textarea{transition:border-color .2s,box-shadow .2s,background .2s}.input:focus,select:focus,textarea:focus{outline:0;border-color:#65a3ff!important;box-shadow:0 0 0 4px rgba(15,111,255,.11)!important;background:#fff!important}

/* cards receive stronger mouse-light */
.card,.v4-product,.product-card,.portal-card,.project-card,.resource-card,.v4-plan,.bento-card{position:relative}.card::before,.v4-product::before,.product-card::before,.portal-card::before,.project-card::before,.resource-card::before,.v4-plan::before,.bento-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(47,144,255,.10),transparent 35%);opacity:0;transition:opacity .25s;z-index:0}.card:hover::before,.v4-product:hover::before,.product-card:hover::before,.portal-card:hover::before,.project-card:hover::before,.resource-card:hover::before,.v4-plan:hover::before,.bento-card:hover::before{opacity:1}.card>* ,.v4-product>* ,.product-card>* ,.portal-card>* ,.project-card>* ,.resource-card>* ,.v4-plan>* ,.bento-card>*{position:relative;z-index:1}

/* CTA / footer */
.v4-final{background:radial-gradient(circle at 85% 30%,rgba(24,201,232,.18),transparent 28%),linear-gradient(135deg,#02152a,#073e68)!important;border:1px solid rgba(74,171,255,.18)!important;box-shadow:0 32px 80px rgba(3,25,54,.24)!important}.footer{background:radial-gradient(circle at 85% 0,rgba(24,201,232,.09),transparent 30%),#021225!important}.footer a{transition:color .2s,transform .2s}.footer a:hover{color:#7be5f4!important;transform:translateX(3px)}

/* nav slider animations */
.v4-show-tab{transition:.25s!important}.v4-show-tab:hover{transform:translateX(6px);border-color:#55a2ff!important}.v4-show-tab.active{box-shadow:0 12px 30px rgba(15,111,255,.28)!important}
.carousel-nav button,.v4-arrow{transition:transform .22s,background .22s,box-shadow .22s}.carousel-nav button:hover,.v4-arrow:hover{transform:translateY(-3px) scale(1.04);background:#fff;box-shadow:0 14px 28px rgba(3,34,70,.14)}

/* animated intro for visible elements */
.v4-reveal{will-change:transform,opacity}.v4-reveal.visible{animation:v5Reveal .65s cubic-bezier(.2,.75,.2,1) both}@keyframes v5Reveal{from{opacity:0;transform:translateY(26px) scale(.99)}to{opacity:1;transform:none}}

/* Mobile */
@media(max-width:900px){
 .v4-hero{min-height:auto}.v4-slide .container{grid-template-columns:1fr;min-height:auto;padding-top:56px;padding-bottom:95px}.v4-media{min-height:420px}.v4-hero h1{font-size:clamp(3rem,13vw,5.2rem)}
 .v5-proof-grid{grid-template-columns:1fr}.v5-demo-grid{grid-template-columns:1fr}.v5-demo-list{display:flex;overflow:auto;gap:8px}.v5-demo-item{min-width:155px}.v5-demo-preview{min-height:330px}.v5-demo-caption{position:static;margin-top:10px}.v5-demo-preview img{max-height:340px}
 .v5-dashboard-shot{height:165px}.resource-visual{height:160px!important}
}
@media(max-width:600px){
 .v4-actions .btn{width:100%;justify-content:center}.v4-media{min-height:360px}.v4-photo-wrap{inset:20px 0 0!important}.v4-laptop{left:3%!important;right:3%!important;height:235px!important}.v4-float-card{display:none}
 .v5-demo-caption{display:block}.v5-demo-caption .btn{margin-top:12px;width:100%;justify-content:center}.quick-dock{bottom:14px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}
.v5-carousel-dashboard{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .55s ease}.demo-device:hover .v5-carousel-dashboard{transform:scale(1.025)}
.portal-screen{overflow:hidden!important;background:#edf6ff!important}.portal-screen>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s}.portal-card:hover .portal-screen>img{transform:scale(1.035)}
.v5-proof-note{margin:-8px 0 24px;padding:12px 16px;border:1px solid #d8e8f8;border-radius:14px;background:linear-gradient(90deg,#f5faff,#effcff);color:#23547b;font-weight:650;font-size:.92rem}
.card>.v5-project-media{margin:-22px -22px 18px}

/* Admin / client portal premium shell */
.app-shell{background:radial-gradient(circle at 92% 2%,rgba(15,111,255,.10),transparent 28%),linear-gradient(180deg,#f8fbff,#eef5fb)!important}
.sidebar{background:linear-gradient(180deg,#03172b 0%,#082f54 72%,#03172b 100%)!important;border-right:1px solid rgba(255,255,255,.06)!important;box-shadow:18px 0 55px rgba(2,18,36,.13)!important}
.side-brand{font-weight:800!important;letter-spacing:-.01em}.side-brand .brand-icon{box-shadow:0 10px 28px rgba(18,119,255,.34)!important}
.side-link{border-radius:12px!important;transition:background .22s,color .22s,transform .22s!important}.side-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;transform:translateX(4px)}.side-link.active{background:linear-gradient(90deg,rgba(15,111,255,.5),rgba(24,201,232,.14))!important;color:#fff!important;box-shadow:0 10px 28px rgba(2,18,36,.16)!important}
.app-top{background:rgba(255,255,255,.86)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid #dce8f5!important;box-shadow:0 10px 30px rgba(6,37,73,.045)!important}
.app-content{padding-top:28px!important}.app-card{background:rgba(255,255,255,.96)!important;border:1px solid #dce8f5!important;border-radius:20px!important;box-shadow:0 16px 42px rgba(6,39,76,.075)!important}.app-kpi strong{background:linear-gradient(135deg,#071a30,#0f6fff);-webkit-background-clip:text;background-clip:text;color:transparent}.metric-chart{background:linear-gradient(180deg,#f7fbff,#eef6ff);border-radius:16px;padding:14px!important}.metric-chart span{background:linear-gradient(180deg,#18c9e8,#0f6fff)!important;border-radius:8px 8px 2px 2px!important;box-shadow:0 8px 20px rgba(15,111,255,.18)}
.table thead th{background:#f4f8fd;color:#5e728b}.table tbody tr{transition:background .18s,transform .18s}.table tbody tr:hover{background:#f7fbff}.progress{background:#e8f0f8!important;border-radius:99px!important;overflow:hidden}.progress span{background:linear-gradient(90deg,#0f6fff,#18c9e8)!important}

/* Product detail dashboard */
.v5-detail-dashboard{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;border-radius:0 0 18px 18px}.hero-app{overflow:hidden!important;background:#061b33!important;border:1px solid #d6e5f5!important;box-shadow:0 28px 70px rgba(6,34,70,.15)!important}.hero-app .browserbar{background:#071b32!important}

/* Project media */
.v5-project-media{height:210px;background:#061b33;padding:10px;overflow:hidden}.v5-project-media img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:13px;transition:transform .55s}.project-card:hover .v5-project-media img{transform:scale(1.05)}
.portal-screen{background:#061b33!important;padding:10px!important;overflow:hidden!important}.portal-screen img{width:100%;height:100%;object-fit:cover!important;object-position:top left!important;border-radius:12px!important;transition:transform .55s}.portal-card:hover .portal-screen img{transform:scale(1.045)}
.demo-device{background:#061b33!important;padding:10px!important;overflow:hidden}.demo-device img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:14px;transition:transform .55s}.demo-slide:hover .demo-device img{transform:scale(1.04)}
.final-devices .lap .s{overflow:hidden!important;background:#eef5ff!important}.final-devices .lap .s img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}