/*
 * DASGROUPS EMS — 3D glassmorphism skin for the SaaS product website.
 * Loaded after saas_main.css; every rule is scoped to body.sg3d (added by saas_glass.js).
 * Deep blue background with glowing orbs and floating 3D shapes, frosted-glass
 * cards that tilt toward the mouse, 3D push buttons and a 3D hero showcase.
 */
:root {
    --sg-bg-1: #0a1440;
    --sg-bg-2: #142c80;
    --sg-glass: rgba(255, 255, 255, .09);
    --sg-glass-2: rgba(255, 255, 255, .16);
    --sg-line: rgba(255, 255, 255, .2);
    --sg-text: #ffffff;
    --sg-muted: rgba(226, 235, 255, .78);
    --sg-cyan: #5ee1ff;
    --sg-blue: #4c6bff;
    --sg-violet: #8b5cff;
    --sg-pink: #ff7ad9;
    --sg-grad: linear-gradient(135deg, #3ad0ff 0%, #4c6bff 50%, #8b5cff 100%);
}

body.sg3d {
    color: var(--sg-text);
    font-family: 'Poppins', 'Inter', sans-serif;
    background: radial-gradient(1100px 800px at 10% 0%, #2552ff 0%, transparent 60%),
                radial-gradient(900px 800px at 100% 40%, #6a2fff 0%, transparent 55%),
                radial-gradient(900px 700px at 0% 100%, #0e8bd8 0%, transparent 55%),
                linear-gradient(180deg, var(--sg-bg-1) 0%, var(--sg-bg-2) 50%, #0c1a52 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}
body.sg3d h1, body.sg3d h2, body.sg3d h3, body.sg3d h4, body.sg3d h5 { color: #fff; }
body.sg3d p { color: var(--sg-muted); }
body.sg3d a { transition: color .2s; }

/* ---------------- animated background scene ---------------- */
.sg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 900px; }
.sg-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .42; animation: sg-drift 20s ease-in-out infinite alternate; }
.sg-orb.o1 { width: 520px; height: 520px; left: -160px; top: 8%; background: #36c8ff; }
.sg-orb.o2 { width: 560px; height: 560px; right: -200px; top: 40%; background: #8b5cff; animation-delay: -7s; }
.sg-orb.o3 { width: 360px; height: 360px; left: 40%; bottom: -120px; background: #ff6bd5; opacity: .35; animation-delay: -12s; }
@keyframes sg-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 50px) scale(1.12); } 100% { transform: translate(-50px, 80px) scale(.94); } }
.sg-shape { position: absolute; transform-style: preserve-3d; animation: sg-float 10s ease-in-out infinite; opacity: .85; }
@keyframes sg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -28px; } }
.sg-cube { width: 60px; height: 60px; top: 22%; left: 4%; }
.sg-cube .spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: sg-spin 16s linear infinite; }
.sg-cube i { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.4); }
.sg-cube i:nth-child(1) { transform: translateZ(30px); }
.sg-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(30px); }
.sg-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(30px); }
.sg-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(30px); }
.sg-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(30px); }
.sg-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(30px); }
@keyframes sg-spin { to { transform: rotateX(360deg) rotateY(720deg); } }
.sg-sphere { width: 90px; height: 90px; right: 5%; top: 70%; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, #9be7ff 18%, #3a7bff 55%, #1b2f8a 100%);
    box-shadow: 0 30px 60px rgba(10, 20, 80, .5), inset -10px -14px 26px rgba(0,0,0,.25); animation-duration: 12s; }
.sg-ring { width: 130px; height: 130px; right: 8%; top: 14%; border-radius: 50%;
    border: 12px solid transparent;
    background: linear-gradient(135deg, #ff9be9, #8b6bff, #5ee1ff) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: sg-ring 14s ease-in-out infinite; }
@keyframes sg-ring { 0%, 100% { transform: rotateX(62deg) rotateZ(0); } 50% { transform: rotateX(62deg) rotateZ(180deg) translateY(-20px); } }
.sg-pill { width: 40px; height: 104px; left: 6%; bottom: 10%; border-radius: 999px;
    background: linear-gradient(160deg, #ffd36b, #ff7ad9 60%, #8b6bff);
    box-shadow: 0 24px 50px rgba(60, 10, 90, .4), inset -8px -10px 18px rgba(0,0,0,.18), inset 8px 10px 18px rgba(255,255,255,.35);
    transform: rotate(-28deg); animation-duration: 11s; animation-delay: -5s; }

/* everything else sits above the scene */
body.sg3d > section, body.sg3d > footer { position: relative; z-index: 2; }
body.sg3d > header { z-index: 99; }
body.sg3d > header:not(.sticky) { position: relative; }
body.sg3d .scroll-top { position: fixed; z-index: 50; }

/* ---------------- preloader ---------------- */
body.sg3d .preloader { background: var(--sg-bg-1); }
body.sg3d .preloader-icon span { background: var(--sg-cyan); }

/* ---------------- shared glass surface ---------------- */
body.sg3d .single-feature,
body.sg3d .single-tutorial,
body.sg3d .pp-plans,
body.sg3d .accordion-item,
body.sg3d .contact-form,
body.sg3d .contact-item,
body.sg3d .tutorial-empty {
    background: var(--sg-glass) !important;
    border: 1px solid var(--sg-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 60px rgba(4, 10, 50, .38), inset 0 1px 0 rgba(255,255,255,.25) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    color: var(--sg-text);
}

/* ---------------- header ---------------- */
body.sg3d .header.navbar-area {
    background: transparent;
    border: 0 !important;
    padding: 14px 0;
    transition: background .3s, box-shadow .3s, padding .3s;
}
body.sg3d .header.navbar-area .nav-inner {
    padding: 8px 14px 8px 18px;
    border-radius: 22px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--sg-line);
    box-shadow: 0 14px 40px rgba(4, 10, 50, .35), inset 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
body.sg3d .header.navbar-area.sticky { background: transparent !important; box-shadow: none !important; padding: 8px 0; }
body.sg3d .header.navbar-area.sticky .nav-inner { background: rgba(12, 24, 80, .72); }
body.sg3d .header .navbar-brand {
    background: #fff;
    border-radius: 14px;
    padding: 6px 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.06);
}
body.sg3d .header .navbar-brand img { max-height: 40px; width: auto; }
body.sg3d .header .navbar-nav .nav-item a,
body.sg3d .header.sticky .navbar-nav .nav-item a { color: rgba(255,255,255,.85) !important; font-weight: 500; }
body.sg3d .header .navbar-nav .nav-item a:hover,
body.sg3d .header .navbar-nav .nav-item a.active,
body.sg3d .header.sticky .navbar-nav .nav-item a.active { color: #fff !important; }
body.sg3d .header .navbar-nav .nav-item a.active::before { background: var(--sg-cyan) !important; }
body.sg3d .header .toggler-icon { background: #fff !important; }
@media (max-width: 991px) {
    body.sg3d .header .navbar-collapse {
        background: rgba(12, 24, 80, .94) !important;
        border: 1px solid var(--sg-line);
        border-radius: 18px;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 20px 40px rgba(0,0,0,.35);
    }
    body.sg3d .header .navbar-nav .nav-item a { color: #fff !important; }
}

/* ---------------- 3D push buttons ---------------- */
body.sg3d .button .btn,
body.sg3d .header .button .btn,
body.sg3d .header.sticky .button .btn {
    position: relative;
    overflow: hidden;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px;
    background: var(--sg-grad) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 5px 0 #2a2f8f, 0 16px 30px rgba(40, 60, 200, .45), inset 0 1px 0 rgba(255,255,255,.45) !important;
    transition: transform .15s ease, box-shadow .15s ease, background-position .5s ease !important;
    font-weight: 600;
}
body.sg3d .button .btn:hover { transform: translateY(-2px); background-position: 100% 0 !important; color: #fff !important; }
body.sg3d .button .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #2a2f8f, 0 8px 16px rgba(40, 60, 200, .4) !important; }
body.sg3d .button .btn.btn-alt {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: 0 5px 0 rgba(10, 20, 70, .6), 0 16px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35) !important;
    backdrop-filter: blur(10px);
}
body.sg3d .button .btn.btn-alt:hover { background: rgba(255,255,255,.22) !important; }

/* ---------------- hero ---------------- */
body.sg3d .hero-area {
    background: none !important;
    padding-top: 90px;
    padding-bottom: 110px;
    overflow: visible;
}
body.sg3d .hero-area::before, body.sg3d .hero-area::after { display: none; }
body.sg3d .hero-area .hero-content .sg-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px;
    margin-bottom: 20px;
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid var(--sg-line);
    backdrop-filter: blur(10px);
}
body.sg3d .sg-badge b { padding: 3px 10px; border-radius: 999px; background: var(--sg-grad); font-weight: 600; font-size: 12px; }
body.sg3d .hero-area .hero-content h1 {
    color: #fff;
    font-size: 52px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.5px;
    text-transform: none;
    text-shadow: 0 10px 30px rgba(0, 0, 40, .35);
}
body.sg3d .hero-area .hero-content h1 .sg-grad-text,
body.sg3d .sg-grad-text {
    background: linear-gradient(90deg, #7ff0ff, #c8b6ff 50%, #ffb8f0);
    text-shadow: none;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.sg3d .hero-area .hero-content p { color: var(--sg-muted); font-size: 17px; line-height: 1.7; }
body.sg3d .hero-area .hero-content .button .btn { margin-right: 12px; margin-top: 10px; }
.sg-trust { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.sg-trust div { font-size: 13px; color: var(--sg-muted); }
.sg-trust b { display: block; font-size: 24px; color: #fff; font-weight: 700; }

/* 3D showcase: the screenshot (or built-in mock dashboard) on a tilted glass slab */
body.sg3d .hero-area .hero-image { position: relative; perspective: 1400px; }
.sg-stage {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-16deg) rotateX(8deg);
    transition: transform .4s ease-out;
    animation: sg-stage-in 1.1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sg-stage-in { from { opacity: 0; transform: rotateY(-30deg) rotateX(18deg) translateY(60px); } }
.sg-slab {
    position: relative;
    padding: 14px;
    border-radius: 26px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    box-shadow: 0 60px 120px rgba(2, 6, 40, .6), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform-style: preserve-3d;
}
.sg-slab > img { display: block; width: 100%; border-radius: 16px; }
body.sg3d .hero-area .hero-image img.overly { position: absolute; right: -6%; bottom: -8%; width: 40%; transform: translateZ(70px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }

/* built-in mock dashboard (shown when no hero image is set) */
.sg-mock { border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(232,240,255,.92)); color: #1b2a5a; }
.sg-mock-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(76, 107, 255, .08); }
.sg-mock-top i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b81; }
.sg-mock-top i:nth-child(2) { background: #ffc94d; }
.sg-mock-top i:nth-child(3) { background: #3ddc97; }
.sg-mock-top span { margin-left: 10px; font-size: 12px; font-weight: 600; opacity: .7; }
.sg-mock-body { display: grid; grid-template-columns: 70px 1fr; min-height: 300px; }
.sg-mock-side { background: linear-gradient(180deg, #1f3cb8, #4c2fd1); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sg-mock-side b { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.18); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.sg-mock-side b:first-child { background: #fff; }
.sg-mock-main { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; }
.sg-stat { border-radius: 14px; padding: 12px; color: #fff; box-shadow: 0 10px 20px rgba(30, 40, 120, .25), inset 0 -3px 0 rgba(0,0,0,.15); }
.sg-stat small { display: block; font-size: 11px; opacity: .85; }
.sg-stat strong { font-size: 20px; }
.sg-stat.s1 { background: linear-gradient(145deg, #4fd1ff, #2a6bff); }
.sg-stat.s2 { background: linear-gradient(145deg, #7dffb0, #13a86b); }
.sg-stat.s3 { background: linear-gradient(145deg, #ffb36b, #ff6b81); }
.sg-chart { grid-column: 1 / -1; height: 130px; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(30, 40, 120, .12); display: flex; align-items: flex-end; gap: 8px; padding: 14px; }
.sg-chart span { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8b5cff, #4c6bff); animation: sg-bar 2.4s ease-in-out infinite alternate; transform-origin: bottom; }
.sg-chart span:nth-child(odd) { background: linear-gradient(180deg, #5ee1ff, #2a8bff); animation-delay: -1.2s; }
@keyframes sg-bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

/* floating glass chips around the showcase */
.sg-chip {
    position: absolute;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
    background: rgba(22, 38, 120, .72);
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 20px 40px rgba(4, 10, 50, .4), inset 0 1px 0 rgba(255,255,255,.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateZ(90px);
    animation: sg-float 7s ease-in-out infinite;
    white-space: nowrap;
}
.sg-chip i {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 14px;
    box-shadow: 0 6px 12px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35);
}
.sg-chip b { display: block; font-size: 15px; }
.sg-chip.c1 { left: -8%; top: 12%; }
.sg-chip.c1 i { background: linear-gradient(145deg, #7dffb0, #13a86b); }
.sg-chip.c2 { right: -6%; top: 46%; animation-delay: -2.5s; }
.sg-chip.c2 i { background: linear-gradient(145deg, #ffd36b, #ff8a3d); }
.sg-chip.c3 { left: 6%; bottom: -7%; animation-delay: -4.5s; }
.sg-chip.c3 i { background: linear-gradient(145deg, #ff9be9, #8b5cff); }

/* ---------------- section titles ---------------- */
body.sg3d .section { background: transparent !important; background-image: none !important; }
body.sg3d .section-title h3 {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    color: #fff !important;
    background: rgba(255,255,255,.1);
    border: 1px solid var(--sg-line);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
body.sg3d .section-title h3::before, body.sg3d .section-title h3::after { display: none; }
body.sg3d .section-title h2 { color: #fff; font-size: 38px; font-weight: 700; }
body.sg3d .section-title h2::before { display: none; }
body.sg3d .section-title p { color: var(--sg-muted); }

/* ---------------- features ---------------- */
body.sg3d .features .single-feature {
    padding: 34px 28px;
    margin-top: 30px;
    transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, background .3s !important;
    transform-style: preserve-3d;
}
body.sg3d .features .single-feature::before, body.sg3d .features .single-feature::after { display: none; }
body.sg3d .features .single-feature:hover { background: var(--sg-glass-2) !important; }
body.sg3d .features .single-feature i {
    width: 66px; height: 66px; line-height: 66px;
    border-radius: 20px;
    font-size: 26px;
    color: #fff !important;
    background: var(--sg-grad) !important;
    box-shadow: 0 14px 28px rgba(40, 60, 200, .45), inset 0 -5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35) !important;
    transform: translateZ(40px);
    transition: transform .35s cubic-bezier(.2,.9,.3,1.5);
}
body.sg3d .features .col-lg-4:nth-child(3n+2) .single-feature i { background: linear-gradient(145deg, #7dffb0, #13a86b) !important; box-shadow: 0 14px 28px rgba(20, 150, 100, .4), inset 0 -5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35) !important; }
body.sg3d .features .col-lg-4:nth-child(3n+3) .single-feature i { background: linear-gradient(145deg, #ffd36b, #ff6b81) !important; box-shadow: 0 14px 28px rgba(220, 90, 80, .4), inset 0 -5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35) !important; }
body.sg3d .features .single-feature:hover i { transform: translateZ(60px) rotate(-8deg) scale(1.08); }
body.sg3d .features .single-feature h3 { color: #fff; transform: translateZ(25px); }
body.sg3d .features .single-feature p { color: var(--sg-muted); }

/* ---------------- tutorials ---------------- */
body.sg3d .single-tutorial { overflow: hidden; margin-top: 30px; }
body.sg3d .single-tutorial .tutorial-content { background: transparent; }
body.sg3d .single-tutorial .tutorial-content h3 { color: #fff; }
body.sg3d .tutorial-empty { padding: 40px; text-align: center; color: var(--sg-muted); }
body.sg3d .tutorial-empty i { font-size: 46px; background: var(--sg-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.sg3d .tutorial-empty p { color: var(--sg-muted); margin-top: 10px; }

/* ---------------- pricing ---------------- */
body.sg3d .pricing-table .bg-ring-right { display: none; }
body.sg3d .pp-plans {
    padding: 34px 28px 28px;
    margin-top: 30px;
    transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s !important;
    transform-style: preserve-3d;
    overflow: visible;
}
body.sg3d .pp-plans.pxp-is-featured {
    background: linear-gradient(160deg, rgba(94, 225, 255, .22), rgba(139, 92, 255, .22)) !important;
    border-color: rgba(255,255,255,.45) !important;
}
body.sg3d .pp-plans-featured-label { background: var(--sg-grad) !important; color: #fff; border-radius: 999px; box-shadow: 0 10px 20px rgba(40, 60, 200, .4); }
body.sg3d .pp-plans-title { color: #fff !important; font-size: 22px; font-weight: 700; }
body.sg3d .pp-plans-price,
body.sg3d .pp-plans.pxp-is-featured .pp-plans-price { color: #fff !important; font-size: 40px; font-weight: 700; transform: translateZ(30px); }
body.sg3d .pp-plans-price span { color: var(--sg-muted) !important; font-size: 15px; font-weight: 400; }
body.sg3d .pp-plans-price .discount { color: rgba(255,255,255,.5) !important; }
body.sg3d .pricing-feature-list li { color: rgba(235, 242, 255, .9) !important; border-color: rgba(255,255,255,.08) !important; }
body.sg3d .pricing-feature-list li i.lni-checkmark, body.sg3d .pricing-feature-list li i.lni-user { color: #6dffb4 !important; }
body.sg3d .pricing-feature-list li i.lni-close { color: #ff8fa8 !important; }
body.sg3d .pricing-feature-list li.sg-hidden { display: none; }
.sg-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 6px 0 4px;
    padding: 6px 14px;
    border: 1px solid var(--sg-line);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}
.sg-more:hover { background: rgba(255,255,255,.16); }
body.sg3d .pp-plans-bottom { border: 0 !important; background: transparent !important; }
body.sg3d .pp-plans-bottom .btn { width: 100%; }

/* ---------------- FAQ ---------------- */
body.sg3d .faq .accordion-item { margin-bottom: 16px; overflow: hidden; }
body.sg3d .faq .accordion-button {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 600;
}
body.sg3d .faq .accordion-button .serial {
    background: var(--sg-grad) !important;
    color: #fff !important;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(40, 60, 200, .4), inset 0 -3px 0 rgba(0,0,0,.15);
}
body.sg3d .faq .accordion-button i { color: #fff !important; }
body.sg3d .faq .accordion-button::after { filter: invert(1); }
body.sg3d .faq .accordion-body { color: var(--sg-muted); background: rgba(255,255,255,.04); }

/* ---------------- contact ---------------- */
body.sg3d .call-action { background: transparent !important; }
body.sg3d .call-action::before, body.sg3d .call-action::after { display: none; }
body.sg3d .contact-form { padding: 36px 30px; }
body.sg3d .contact-form h3 { color: #fff; }
body.sg3d .contact-form .form-control,
body.sg3d .modal .form-control,
body.sg3d .modal .form-select {
    color: #fff;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 14px;
    min-height: 50px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.15);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
body.sg3d .contact-form .form-control::placeholder, body.sg3d .modal .form-control::placeholder { color: rgba(226, 235, 255, .6); }
body.sg3d .contact-form .form-control:focus,
body.sg3d .modal .form-control:focus {
    background: rgba(255,255,255,.14);
    border-color: var(--sg-cyan);
    box-shadow: 0 0 0 4px rgba(94, 225, 255, .2);
    color: #fff;
}
body.sg3d .contact-title { color: #fff !important; }
body.sg3d .contact-item { padding: 22px; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; transition: transform .3s; }
body.sg3d .contact-item:hover { transform: translateY(-4px); }
body.sg3d .contact-item .contact-icon i,
body.sg3d .contact-item .contact-icon {
    color: #fff !important;
}
body.sg3d .contact-item .contact-icon {
    width: 56px; height: 56px; min-width: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    background: var(--sg-grad) !important;
    box-shadow: 0 12px 24px rgba(40, 60, 200, .45), inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35);
    font-size: 22px;
}
body.sg3d .contact-item h4 { color: #fff; }
body.sg3d .contact-item p { color: var(--sg-muted); }
body.sg3d span.error { color: #ffb4c8; }

/* ---------------- footer ---------------- */
body.sg3d .footer, body.sg3d .footer .footer-top { background: transparent !important; }
body.sg3d .footer .footer-top > .container {
    padding: 44px 34px 20px;
    border-radius: 28px;
    background: rgba(255,255,255,.07);
    border: 1px solid var(--sg-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(4, 10, 50, .38);
}
body.sg3d .footer h3 { color: #fff !important; }
body.sg3d .footer p, body.sg3d .footer li, body.sg3d .footer a { color: var(--sg-muted) !important; }
body.sg3d .footer a:hover { color: #fff !important; }
body.sg3d .footer .f-about .logo a { display: inline-block; background: #fff; padding: 8px 12px; border-radius: 14px; box-shadow: 0 10px 20px rgba(0,0,0,.25); }
body.sg3d .footer .social li a {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid var(--sg-line) !important;
    border-radius: 12px !important;
    color: #fff !important;
    transition: transform .25s cubic-bezier(.2,.9,.3,1.5), background .25s;
}
body.sg3d .footer .social li a:hover { transform: translateY(-4px) rotate(-6deg); background: var(--sg-grad) !important; }
body.sg3d .footer .address li i { color: var(--sg-cyan) !important; }
body.sg3d .footer-copyright { background: transparent !important; border-top: 1px solid rgba(255,255,255,.1); }
body.sg3d .footer-copyright span { color: rgba(226, 235, 255, .6); }
body.sg3d .payment-logo img { background: #fff; padding: 4px 8px; border-radius: 8px; }

/* ---------------- scroll-to-top ---------------- */
body.sg3d .scroll-top {
    background: var(--sg-grad) !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 0 #2a2f8f, 0 14px 26px rgba(40, 60, 200, .45) !important;
    color: #fff !important;
}

/* ---------------- registration modal ---------------- */
body.sg3d .modal-content {
    color: #fff;
    background: rgba(16, 30, 90, .9);
    border: 1px solid var(--sg-line);
    border-radius: 24px;
    box-shadow: 0 40px 90px rgba(0, 0, 30, .6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
body.sg3d .modal-header, body.sg3d .modal-footer { border-color: rgba(255,255,255,.12); }
body.sg3d .modal .btn-close { filter: invert(1); }
body.sg3d .modal label { color: rgba(235, 242, 255, .9); }
body.sg3d .modal .card { background: rgba(255,255,255,.08); border: 1px solid var(--sg-line); border-radius: 18px; color: #fff; }
body.sg3d .modal .chart-title, body.sg3d .modal .sp-summary li { color: #fff; }
body.sg3d .modal .form-select option { color: #000; }
body.sg3d #termsModal .modal-body { color: #fff !important; }
body.sg3d .select2-container--default .select2-selection--single {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 14px; height: 50px;
}
body.sg3d .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 48px; }
body.sg3d .select2-container--default .select2-selection--single .select2-selection__arrow { height: 48px; }

/* ---------------- 3D tilt (set by saas_glass.js) ---------------- */
.sg-tilt { will-change: transform; }
.sg-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s;
    background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 50%); }
.sg-tilt.is-active .sg-glare { opacity: 1; }

/* reveal on scroll for elements that are not animated by wow.js */
.sg-reveal { opacity: 0; transform: translateY(40px) rotateX(10deg); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.sg-reveal.is-in { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 1199px) {
    body.sg3d .hero-area .hero-content h1 { font-size: 42px; }
}
@media (max-width: 991px) {
    body.sg3d .hero-area { padding-top: 60px; padding-bottom: 70px; text-align: center; }
    body.sg3d .hero-area .hero-image { margin-top: 50px; }
    .sg-trust { justify-content: center; }
    .sg-stage { transform: rotateY(-8deg) rotateX(6deg); }
    .sg-chip.c1 { left: 0; }
    .sg-chip.c2 { right: 0; }
    .sg-ring, .sg-pill { display: none; }
}
@media (max-width: 575px) {
    .sg-sphere, .sg-cube { display: none; }
    body.sg3d .hero-area .hero-content h1 { font-size: 32px; }
    body.sg3d .hero-area .hero-content p { font-size: 15px; }
    body.sg3d .section-title h2 { font-size: 28px; }
    .sg-chip { font-size: 11px; padding: 7px 10px; }
    .sg-chip i { width: 26px; height: 26px; font-size: 12px; }
    .sg-chip.c3 { display: none; }
    .sg-mock-body { grid-template-columns: 46px 1fr; min-height: 220px; }
    .sg-mock-side b { width: 24px; height: 24px; }
    .sg-stat strong { font-size: 15px; }
    body.sg3d .footer .footer-top > .container { padding: 30px 18px 10px; border-radius: 20px; }
    body.sg3d .header.navbar-area .nav-inner { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-scene *, .sg-stage, .sg-chip, .sg-chart span { animation: none !important; }
    .sg-reveal { opacity: 1; transform: none; }
}

/* center the plans when a school offers only one or two */
body.sg3d .pricing-table .row { justify-content: center; }

body.sg3d .contact-item .contact-content { min-width: 0; }
body.sg3d .contact-item p { overflow-wrap: anywhere; }

/* ---------------- hero chips: an even row under the dashboard preview ---------------- */
/* (they used to float on top of the preview and covered its content) */
body.sg3d .sg-stage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 16px;
}
body.sg3d .sg-stage .sg-slab { flex: 1 1 100%; }
body.sg3d .sg-stage .sg-chip {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-top: 10px;
}
/* stacked layout: the logo is already in the menu bar, so drop the extra 3D one */
@media (max-width: 991px) {
    body.sg3d .sg-logo3d { display: none; }
    body.sg3d .sg-stage .sg-chip.c3 { display: flex; }
}
@media (max-width: 575px) {
    body.sg3d .sg-stage { gap: 10px; }
    body.sg3d .sg-stage .sg-chip { flex: 1 1 calc(50% - 10px); justify-content: center; }
}