:root {
    --wt-primary: #4f46e5;
    --wt-primary-dark: #4338ca;
    --wt-dark: #0f172a;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1e293b;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, var(--wt-primary) 0%, #7c3aed 50%, #2563eb 100%);
}

/* Navbar */
.navbar {
    background: var(--wt-dark);
}
.navbar .nav-link:hover { color: #c7d2fe !important; }

/* Tool cards */
.tool-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    transition: all .15s ease;
    height: 100%;
}
.tool-card:hover {
    border-color: var(--wt-primary);
    box-shadow: 0 8px 24px rgba(79, 70, 229, .12);
    transform: translateY(-2px);
}
.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--wt-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* CTA band */
.cta { background: var(--wt-dark); }

/* Footer */
.footer { background: #f8fafc; border-top: 1px solid #e2e8f0; }
.footer a { color: #475569; }
.footer a:hover { color: var(--wt-primary); }

/* Tool page */
.output-card .card-header { background: #f8fafc; }
.result-img { background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%) 0 8px/16px 16px,
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%) 8px -8px/16px 16px,
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%) -8px 0/16px 16px;
    background-color: #fff;
}

/* Plans */
.plan-card { transition: transform .15s ease; }
.plan-card:hover { transform: translateY(-3px); }
.plan-featured { box-shadow: 0 12px 32px rgba(79, 70, 229, .18) !important; }

/* Tables */
.table > :not(caption) > * > * { padding: .6rem .75rem; }

/* Forms */
.form-control:focus, .form-select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15);
}

/* Search no-results */
[data-search-area] { position: relative; }

/* Slightly tighter badges */
.badge { font-weight: 600; }

/* Breadcrumb on dark */
.breadcrumb-item + .breadcrumb-item::before { color: #64748b; }

/* ============================================================
   HOME — sophisticated 3D theme (scoped to body.page-3d)
   ============================================================ */
body.page-3d {
    background: #05070f;
    color: #cbd5e1;
}
body.page-3d a { text-decoration: none; }

/* hero scene */
.hero3d {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 500px at 50% -12%, rgba(99, 102, 241, .28), transparent 60%),
        radial-gradient(700px 400px at 12% 8%, rgba(139, 92, 246, .16), transparent 55%),
        radial-gradient(700px 400px at 88% 12%, rgba(37, 99, 235, .14), transparent 55%),
        #05070f;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.h3d-grid {
    position: absolute;
    inset: auto 0 -40% 0;
    height: 75%;
    background-image:
        linear-gradient(rgba(99, 102, 241, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .16) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(520px) rotateX(62deg);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 78%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), transparent 78%);
    pointer-events: none;
}
.h3d-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
    animation: h3dOrb 14s ease-in-out infinite alternate;
}
.h3d-orb-1 { width: 420px; height: 420px; left: -120px; top: 10%; background: #4f46e5; }
.h3d-orb-2 { width: 380px; height: 380px; right: -100px; top: 25%; background: #7c3aed; animation-delay: -7s; }
@keyframes h3dOrb {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(40px, -30px, 0) scale(1.15); }
}

.h3d-scene {
    position: relative;
    perspective: 1200px;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.h3d-center {
    position: relative;
    z-index: 3;
    text-align: center;
    transform-style: preserve-3d;
    transition: transform .25s ease-out;
    max-width: 760px;
    margin: 0 auto;
}
.h3d-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: #c7d2fe;
    background: rgba(99, 102, 241, .12);
    border: 1px solid rgba(99, 102, 241, .35);
    backdrop-filter: blur(6px);
}
.h3d-title {
    font-size: clamp(2.3rem, 5.2vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: #f8fafc;
    text-shadow: 0 0 40px rgba(99, 102, 241, .45);
    margin-bottom: 0;
}
.h3d-sub {
    font-size: 1.08rem;
    color: #aab6cd;
    margin: 1rem auto 0;
    max-width: 640px;
    line-height: 1.5;
}
.h3d-search {
    background: rgba(10, 15, 30, .65);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}
.h3d-search .form-control {
    background: transparent;
    color: #f1f5f9;
    font-size: 1.05rem;
    padding: .9rem 1rem;
}
.h3d-search .form-control::placeholder { color: #64748b; }
.h3d-search .form-control:focus { box-shadow: none; color: #fff; }
.h3d-search .input-group-text { color: #818cf8; font-size: 1.1rem; }
.h3d-perks {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    color: #8ea0bd;
    font-size: .875rem;
}
.h3d-perks .dot { width: 4px; height: 4px; border-radius: 50%; background: #475569; align-self: center; }
.h3d-perks i { color: #818cf8; margin-right: .3rem; }

/* floating glass tiles */
.h3d-tile {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86px;
    height: 86px;
    margin: -43px 0 0 -43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 2rem;
    color: #c7d2fe;
    background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(148, 163, 184, .22);
    backdrop-filter: blur(8px);
    box-shadow:
        0 25px 50px rgba(2, 6, 23, .55),
        inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rz));
    transform-style: preserve-3d;
    translate: 0 0;
    animation: h3dFloat 6s ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
    transition: color .2s ease, border-color .2s ease;
    z-index: 1;
}
.h3d-tile-sm { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 1.5rem; border-radius: 15px; }
.h3d-tile:hover {
    color: #fff;
    border-color: rgba(129, 140, 248, .65);
    box-shadow: 0 25px 60px rgba(2, 6, 23, .65), 0 0 30px rgba(99, 102, 241, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}
@keyframes h3dFloat {
    from { translate: 0 -6px; }
    to   { translate: 0 6px; }
}

/* sections */
.h3d-section { padding: 4.5rem 0 3rem; position: relative; }
.h3d-section-alt {
    background: linear-gradient(180deg, rgba(15, 23, 42, .45), rgba(5, 7, 15, 0));
    border-top: 1px solid rgba(148, 163, 184, .08);
}
.section-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #818cf8;
}
.h3d-section h2 { color: #f1f5f9; font-size: 1.35rem; letter-spacing: -.01em; }
.cat-ico { color: #818cf8; }

/* 3D tilt cards */
.tilt-card {
    perspective: 800px;
    display: block;
}
.tilt-inner {
    background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 16px;
    padding: 1.2rem;
    height: 100%;
    transition: transform .18s ease-out, border-color .2s ease, box-shadow .25s ease;
    transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
    transform-style: preserve-3d;
}
.tilt-card:hover .tilt-inner {
    border-color: rgba(129, 140, 248, .55);
    box-shadow: 0 30px 60px rgba(2, 6, 23, .6), 0 0 26px rgba(99, 102, 241, .16);
}
.tilt-inner .tool-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, .22), rgba(139, 92, 246, .14));
    color: #a5b4fc;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .3);
}
.tilt-inner .small { color: #8ea0bd; }
.tilt-cta {
    font-size: .82rem;
    font-weight: 600;
    color: #818cf8;
    opacity: 0;
    transform: translateY(4px);
    transition: all .2s ease;
}
.tilt-card:hover .tilt-cta { opacity: 1; transform: none; }

/* buttons */
.h3d-btn-main {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(99, 102, 241, .4);
}
.h3d-btn-main:hover { color: #fff; box-shadow: 0 14px 40px rgba(99, 102, 241, .55); transform: translateY(-2px); }
.h3d-btn-ghost {
    color: #a5b4fc;
    border: 1px solid rgba(129, 140, 248, .4);
    border-radius: 10px;
    background: rgba(99, 102, 241, .06);
}
.h3d-btn-ghost:hover { color: #e0e7ff; border-color: rgba(129, 140, 248, .7); background: rgba(99, 102, 241, .12); }

/* CTA band */
.h3d-cta {
    background:
        radial-gradient(800px 300px at 50% 120%, rgba(99, 102, 241, .25), transparent 65%),
        #070b16;
    border-top: 1px solid rgba(148, 163, 184, .1);
}
.h3d-cta h2 { color: #f8fafc; }

/* footer blends into dark */
body.page-3d .footer {
    background: #05070f;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
body.page-3d .footer, body.page-3d .footer a { color: #8ea0bd; }
body.page-3d .footer a:hover { color: #c7d2fe; }
body.page-3d .footer hr { border-color: rgba(148, 163, 184, .14); }
body.page-3d .text-muted { color: #8ea0bd !important; }

/* announcement bar blends */
body.page-3d .alert-warning {
    background: linear-gradient(90deg, rgba(99, 102, 241, .18), rgba(139, 92, 246, .14));
    border: 0;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    color: #c7d2fe;
}

@media (max-width: 991px) {
    .h3d-tile { display: none; }
    .h3d-scene { min-height: 420px; }
}