/* ===========================================================================
   JDS public/marketing site — premium navy + gold, glass, 3D depth & glow.
   Loaded LAST in website/index.blade so it overrides style.css (orange theme).
   =========================================================================== */
:root{
    --theme-primary:#294261; --theme-secondary:#fca521;
    --jw-p:#294261; --jw-pl:#3a5680; --jw-pd:#1a2c40;
    --jw-s:#fca521; --jw-sl:#ffd071; --jw-sd:#d98c1c;
}
body{ background:#f6f9ff !important; color:#2a3547 !important; }

/* ---------- layout hardening (kill stray floats from old style.css) ---------- */
.header .container{ display:flex !important; align-items:center; justify-content:space-between; }
.header .navbar-brand{ float:none !important; }
.header .navbar-brand img{ height:38px !important; width:auto !important; }
.header .right-nav{ float:none !important; margin:0 !important; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.header .right-nav li{ float:none !important; }
.top-section{ float:none !important; }
.comman-heading{ float:none !important; }
.top-section .row, .jw-section .row{ margin-left:0; margin-right:0; }
.top-section .details h1{ margin-top:6px; }

/* ---------- sticky glass navy header ---------- */
.header{
    background: linear-gradient(135deg, var(--jw-pl) 0%, var(--jw-p) 55%, var(--jw-pd) 100%) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(41,66,97,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
    height: 64px !important; padding: 12px 0 !important;
}
.header .navbar-brand{ height: 40px !important; }
.header .right-nav li a{ color:#fff !important; font-weight:600 !important; }
.header .right-nav li a:hover{ color: var(--jw-sl) !important; }
.header .right-nav li a.login-btn{ border:1px solid rgba(255,255,255,.55) !important; border-radius:9px !important; }
.header .right-nav li a.login-btn:hover{
    background: linear-gradient(135deg, var(--jw-sl), var(--jw-s)) !important;
    border-color: transparent !important; color: var(--jw-pd) !important;
    box-shadow: 0 8px 18px rgba(252,165,33,.45) !important;
}

/* ---------- HERO ---------- */
.top-section{
    background:
        radial-gradient(900px 520px at 82% 8%, rgba(252,165,33,.12), transparent 60%),
        radial-gradient(820px 600px at 8% 92%, rgba(41,66,97,.10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #eaf1fb 100%) !important;
    padding: 132px 0 84px !important; position: relative; overflow: hidden;
}
.top-section .details .sub-title{ color: var(--jw-s) !important; font-style: normal !important; letter-spacing:.5px; font-weight:700 !important; }
.top-section .details h1{ color: var(--jw-p) !important; font-size: 50px !important; }
.top-section .details p{ color:#5a6b85 !important; }
.top-section .img-block img{
    filter: drop-shadow(0 30px 55px rgba(41,66,97,.28));
    border-radius: 18px; animation: jwFloat 6s ease-in-out infinite;
}
@keyframes jwFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ---------- buttons → gold gradient 3D glow ---------- */
.theme-button{
    background-image: linear-gradient(135deg, var(--jw-sl) 0%, var(--jw-s) 55%, var(--jw-sd) 100%) !important;
    background-color: var(--jw-s) !important;
    color: var(--jw-pd) !important; border-radius: 10px !important; padding: 13px 28px !important; font-weight:700 !important;
    box-shadow: 0 12px 26px rgba(252,165,33,.42), inset 0 1px 0 rgba(255,255,255,.6) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}
.theme-button:hover{
    transform: translateY(-3px); color: var(--jw-pd) !important;
    box-shadow: 0 18px 36px rgba(252,165,33,.52), inset 0 1px 0 rgba(255,255,255,.7) !important;
}

/* ---------- section headings ---------- */
.comman-heading .sub-title{ color: var(--jw-s) !important; font-style: normal !important; font-weight:700 !important; }
.comman-heading h3, .c-title, .icon-title, .title{ color: var(--jw-p) !important; }

/* ---------- cards / feature & product boxes — glass depth + hover 3D tilt ---------- */
.detail-info-box, .product-stacks-box, .detail-block{
    background:#fff !important; border:1px solid rgba(41,66,97,.08) !important; border-radius:18px !important;
    box-shadow: 0 14px 34px rgba(41,66,97,.10), 0 4px 10px rgba(0,0,0,.05) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s !important; padding: 24px !important;
}
.detail-info-box:hover, .product-stacks-box:hover, .detail-block:hover{
    transform: perspective(900px) rotateX(4deg) translateY(-8px) scale(1.01);
    box-shadow: 0 32px 58px rgba(41,66,97,.22), 0 10px 20px rgba(0,0,0,.12) !important;
}
.icon, .icon i, .icon-title i{ color: var(--jw-s) !important; }
.icon i, .icon-title i{ filter: drop-shadow(0 4px 8px rgba(252,165,33,.40)); }

/* ---------- pricing cards ---------- */
.plan-category{
    border-radius: 20px !important; border:1px solid rgba(41,66,97,.08) !important;
    box-shadow: 0 16px 40px rgba(41,66,97,.12) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
}
.plan-category:hover{ transform: translateY(-10px) scale(1.01); box-shadow: 0 34px 62px rgba(41,66,97,.24) !important; }
.plan-category.bg-2{ background: linear-gradient(160deg, var(--jw-pl), var(--jw-pd)) !important; color:#fff !important; }
.plan-category.bg-2 *{ color:#eaf1ff !important; }

/* ---------- FAQ accordion ---------- */
.accordion-item{
    border-radius: 14px !important; overflow: hidden; margin-bottom: 12px !important;
    border:1px solid rgba(41,66,97,.08) !important; box-shadow: 0 6px 18px rgba(41,66,97,.08) !important;
}

/* ---------- footer ---------- */
footer, .footer, .footer-nav-wrap{
    background: linear-gradient(135deg, var(--jw-pl), var(--jw-pd)) !important;
}
footer, footer a, footer p, .footer, .footer a, .footer p{ color:#cdd9ee !important; }
footer a:hover, .footer a:hover{ color: var(--jw-sl) !important; }

/* =========================================================================
   Software-company sections (products / why / gateway / contact / footer / modal)
   ========================================================================= */
.jw-section{ padding: 72px 0; }
.jw-about{ background: linear-gradient(180deg,#eef4fb,#f6f9ff); }

/* Products grid — icon cards */
.jw-products{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.jw-prod-card{
    background:#fff; border:1px solid rgba(41,66,97,.08); border-radius:18px; padding:26px 22px;
    box-shadow:0 14px 34px rgba(41,66,97,.10), 0 4px 10px rgba(0,0,0,.05);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; position:relative; overflow:hidden;
}
.jw-prod-card:hover{
    transform: perspective(900px) rotateX(4deg) translateY(-9px) scale(1.02);
    box-shadow:0 32px 58px rgba(41,66,97,.22), 0 10px 20px rgba(0,0,0,.12);
}
.jw-prod-icon{
    width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#fff; margin-bottom:16px;
    background: linear-gradient(135deg, var(--jw-pl), var(--jw-pd));
    box-shadow:0 10px 22px rgba(41,66,97,.30), inset 0 2px 5px rgba(255,255,255,.18);
}
.jw-prod-card:nth-child(3n) .jw-prod-icon{ background: linear-gradient(135deg, var(--jw-sl), var(--jw-sd)); color:var(--jw-pd); box-shadow:0 10px 22px rgba(252,165,33,.35), inset 0 2px 5px rgba(255,255,255,.5); }
.jw-prod-title{ font-size:17px; font-weight:800; color:var(--jw-p); margin-bottom:7px; }
.jw-prod-desc{ font-size:13.5px; color:#5a6b85; line-height:1.6; }
.jw-prod-link{ display:inline-block; margin-top:14px; font-size:13px; font-weight:700; color:var(--jw-s); text-decoration:none; }
.jw-prod-link i{ font-size:11px; margin-left:5px; transition: transform .2s; }
.jw-prod-card:hover .jw-prod-link i{ transform: translateX(4px); }

/* Why-choose */
.jw-why{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.jw-why-card{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid rgba(41,66,97,.08); border-radius:16px; padding:22px; box-shadow:0 10px 26px rgba(41,66,97,.08); }
.jw-why-icon{ flex:0 0 auto; width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--jw-pd); background:linear-gradient(135deg,var(--jw-sl),var(--jw-s)); box-shadow:0 8px 18px rgba(252,165,33,.35); }

/* Gateway banner */
.jw-gateway-box{
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
    background: linear-gradient(135deg, var(--jw-pl) 0%, var(--jw-p) 55%, var(--jw-pd) 100%);
    border-radius:22px; padding:36px 40px; color:#fff;
    box-shadow:0 24px 54px rgba(41,66,97,.30), inset 0 1px 0 rgba(255,255,255,.14); position:relative; overflow:hidden;
}
.jw-gateway-box::after{ content:""; position:absolute; width:280px; height:280px; right:-60px; top:-90px; background:radial-gradient(circle,rgba(252,165,33,.4),transparent 70%); border-radius:50%; }
.jw-gateway-text h3{ font-size:26px; font-weight:800; margin:0 0 6px; color:#fff; position:relative; z-index:1; }
.jw-gateway-text p{ margin:0; color:#cdd9ee; max-width:560px; position:relative; z-index:1; }
.jw-gateway-box .theme-button{ position:relative; z-index:1; }

/* Contact */
.jw-contact-info{ background:#fff; border:1px solid rgba(41,66,97,.08); border-radius:18px; padding:26px; box-shadow:0 14px 34px rgba(41,66,97,.10); height:100%; }
.jw-ci-item{ display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px dashed rgba(41,66,97,.12); }
.jw-ci-item:last-child{ border-bottom:none; }
.jw-ci-item i{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); box-shadow:0 6px 14px rgba(41,66,97,.25); }
.jw-ci-item b{ display:block; color:var(--jw-p); font-size:14px; }
.jw-ci-item span{ color:#5a6b85; font-size:13px; }

.jw-form .form-control{
    border:1.5px solid rgba(41,66,97,.16); border-radius:11px; padding:12px 14px; font-size:14px; margin-bottom:2px; width:100%;
    transition: border-color .2s, box-shadow .2s;
}
.jw-form .form-control:focus{ border-color:var(--jw-s); box-shadow:0 0 0 4px rgba(252,165,33,.16); outline:none; }
.jw-form .form-group{ margin-bottom:14px; }
/* inputs/select must not clip text (override bootstrap fixed height) */
.jw-form .form-control{ height:auto !important; min-height:48px; line-height:1.5; box-sizing:border-box; }
.jw-form textarea.form-control{ min-height:auto; }
.jw-form select.form-control{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    padding:12px 40px 12px 14px !important;
    background-color:#fff;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'><path fill='%23294261' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
    text-overflow:ellipsis;
}

/* Footer */
.jw-footer{ background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); color:#cdd9ee; padding:54px 0 22px; margin-top:10px; }
.jw-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
.jw-footer-brand p{ color:#aebbd3; font-size:13.5px; line-height:1.7; }
.jw-footer h6{ color:#fff; font-weight:800; font-size:15px; margin-bottom:14px; }
.jw-footer a{ display:block; color:#aebbd3; text-decoration:none; font-size:13.5px; padding:5px 0; transition: color .2s, transform .2s; }
.jw-footer a:hover{ color:var(--jw-sl); transform: translateX(3px); }
.jw-footer-bottom{ border-top:1px solid rgba(255,255,255,.10); margin-top:30px; padding-top:18px; text-align:center; font-size:13px; color:#9fb1cd; }

/* Modal */
.jw-modal{ display:none; position:fixed; inset:0; z-index:99999; background:rgba(15,23,42,.6); align-items:center; justify-content:center; padding:20px; }
.jw-modal-box{ background:#fff; width:100%; max-width:460px; border-radius:18px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.jw-modal-head{ background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.jw-modal-head button{ background:rgba(255,255,255,.2); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; }

@media (max-width: 991px){
    .jw-products{ grid-template-columns:repeat(2,1fr); }
    .jw-why{ grid-template-columns:repeat(2,1fr); }
    .jw-footer-grid{ grid-template-columns:1fr 1fr; }
    .top-section .details h1{ font-size:34px !important; }
}
@media (max-width: 575px){
    .jw-products, .jw-why, .jw-footer-grid{ grid-template-columns:1fr; }
}

/* ---------- product detail page ---------- */
.jw-prod-hero{ background: radial-gradient(700px 360px at 80% 0%, color-mix(in srgb, var(--jw-s) 14%, transparent), transparent 60%), linear-gradient(180deg,#eef4fb,#ffffff); padding:118px 18px 48px; text-align:center; }
.jw-prod-hero-icon{ width:84px; height:84px; border-radius:22px; display:inline-flex; align-items:center; justify-content:center; font-size:38px; color:#fff; background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); box-shadow:0 16px 32px rgba(41,66,97,.32), inset 0 2px 6px rgba(255,255,255,.15); margin-bottom:18px; }
.jw-prod-hero h1{ color:var(--jw-p); font-weight:800; font-size:40px; margin:0 0 8px; }
.jw-prod-hero .tag{ color:var(--jw-sd); font-weight:700; font-size:17px; margin-bottom:20px; }
.jw-prod-hero .btn-block{ margin-top:6px; }
.jw-detail{ max-width:1000px; margin:0 auto; padding:46px 18px 20px; }
.jw-detail h2{ color:var(--jw-p); font-weight:800; font-size:24px; margin:30px 0 14px; }
.jw-detail > p{ color:#41506a; font-size:15.5px; line-height:1.85; }
.jw-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px; }
.jw-feature{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid rgba(41,66,97,.08); border-radius:14px; padding:18px; box-shadow:0 8px 22px rgba(41,66,97,.07); transition:transform .25s, box-shadow .25s; }
.jw-feature:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(41,66,97,.16); }
.jw-feature i{ color:var(--jw-s); font-size:18px; margin-top:2px; flex:0 0 auto; }
.jw-feature span{ color:#34415a; font-size:14px; font-weight:600; line-height:1.5; }
.jw-cta-box{ text-align:center; background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); color:#fff; border-radius:20px; padding:36px 24px; margin:40px 0 10px; box-shadow:0 22px 50px rgba(41,66,97,.28); }
.jw-cta-box h3{ color:#fff; font-weight:800; margin:0 0 8px; }
.jw-cta-box p{ color:#cdd9ee; margin:0 0 18px; }
@media(max-width:991px){ .jw-feature-grid{ grid-template-columns:repeat(2,1fr);} .jw-prod-hero h1{ font-size:30px;} }
@media(max-width:575px){ .jw-feature-grid{ grid-template-columns:1fr;} }

/* ---------- legal pages (terms / privacy / disclaimer) ---------- */
.jw-legal{ max-width:920px; margin:0 auto; padding:112px 18px 56px; }
.jw-legal-wrap{ background:#fff; border-radius:18px; box-shadow:0 14px 40px rgba(41,66,97,.10); padding:34px 40px; }
.jw-legal h1{ color:var(--jw-p); font-weight:800; font-size:34px; margin:0 0 6px; }
.jw-legal .upd{ color:#8a97ab; font-size:13px; margin-bottom:26px; }
.jw-legal h2{ color:var(--jw-p); font-weight:700; font-size:20px; margin:26px 0 10px; }
.jw-legal p, .jw-legal li{ color:#41506a; font-size:15px; line-height:1.85; }
.jw-legal ul{ padding-left:20px; margin-bottom:14px; }
.jw-legal a{ color:var(--jw-sd); font-weight:600; }
.jw-back{ display:inline-block; margin-bottom:18px; color:#fff !important; background:linear-gradient(135deg,var(--jw-pl),var(--jw-pd)); padding:8px 16px; border-radius:9px; text-decoration:none; font-weight:600; font-size:13px; box-shadow:0 8px 18px rgba(41,66,97,.25); }