/* =========================================================================
   SeriousWorks - Modern dark-tech theme (2025 redesign)
   Replaces the legacy Bootstrap Studio theme. Bootstrap is still used for
   the grid + interactive components (navbar collapse, dropdown, alerts).
   All existing markup / SEO / functionality is preserved.
   ========================================================================= */

:root {
    --bg:            #070b16;
    --bg-2:          #0b1120;
    --bg-3:          #0f1629;
    --surface:       rgba(255, 255, 255, 0.04);
    --surface-2:     rgba(255, 255, 255, 0.06);
    --border:        rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --text:          #e8edf7;
    --text-muted:    #97a3bf;
    --text-dim:      #6b7790;

    --accent:        #22d3ee;   /* cyan  */
    --accent-2:      #3b82f6;   /* blue  */
    --accent-3:      #818cf8;   /* indigo*/
    --accent-glow:   rgba(34, 211, 238, 0.45);

    --grad:          linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
    --grad-soft:     linear-gradient(135deg, rgba(59,130,246,0.18), rgba(34,211,238,0.18));

    --radius:        16px;
    --radius-lg:     22px;
    --shadow:        0 18px 50px -18px rgba(0, 0, 0, 0.75);
    --shadow-glow:   0 0 0 1px var(--border-strong), 0 20px 60px -20px var(--accent-glow);

    --font-body:     'Inter', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-brand:    'Orbitron', sans-serif;
}

/* ---------- Base ---------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Ambient background glows */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 600px at 78% -8%, rgba(34, 211, 238, 0.14), transparent 60%),
        radial-gradient(800px 600px at 8% 4%, rgba(59, 130, 246, 0.16), transparent 55%),
        radial-gradient(1000px 800px at 50% 110%, rgba(129, 140, 248, 0.10), transparent 60%),
        var(--bg);
}

h1, h2, h3, h4 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

p { color: var(--text-muted); }

a { color: var(--accent); text-decoration: none; transition: color .2s ease; }
a:hover { color: #67e8f9; text-decoration: none; }

::selection { background: rgba(34, 211, 238, 0.3); color: #fff; }

.container { position: relative; }

/* Section heading "intro" block (used on most pages) */
.intro {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.intro h1,
.intro h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    margin: 0 0 14px;
}
.intro p { font-size: 1.08rem; color: var(--text-muted); margin: 0; }

/* Gradient accent under section titles */
.intro h1::after,
.intro h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 4px;
    background: var(--grad);
}

/* ---------- Buttons ------------------------------------------------------ */

.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 12px 30px;
    border: none;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
}

.action-button,
.btn-light,
.btn-primary {
    background: var(--grad);
    color: #04121b;
    box-shadow: 0 10px 30px -10px var(--accent-glow);
}
.action-button:hover,
.btn-light:hover,
.btn-primary:hover {
    color: #04121b;
    transform: translateY(-3px);
    box-shadow: 0 18px 44px -12px var(--accent-glow);
}
.btn-lg { padding: 14px 38px; font-size: 1.05rem; }

/* ---------- Navbar ------------------------------------------------------- */

.header-blue .navbar.navbar-dark {
    background: rgba(7, 11, 22, 0.72);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 14px 0;
    background-image: none;
}

.header-blue .navbar .navbar-brand {
    font-family: var(--font-brand);
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 22px rgba(34, 211, 238, 0.55);
    letter-spacing: .02em;
}
.header-blue .navbar .navbar-brand:hover { color: var(--accent); }

.navbar-dark .navbar-nav .nav-link {
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #fff; background: var(--surface-2); }

.navbar-dark .navbar-nav .nav-item.active .nav-link { color: var(--accent); }

.navbar-toggler {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 6px 10px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--accent-glow); }

/* Dropdown (kept for backward compatibility) */
.dropdown-menu {
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 8px;
    margin-top: 10px;
}
.dropdown-item {
    color: var(--text-muted);
    border-radius: 9px;
    padding: 9px 14px;
    font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--grad-soft);
    color: #fff;
}

/* ---------- Hero (header-blue) ------------------------------------------- */

.header-blue { background: transparent; padding-bottom: 40px; }

.header-blue .hero {
    padding: clamp(60px, 9vw, 120px) 15px clamp(40px, 6vw, 80px);
}

.header-blue .hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    margin: 0 0 22px;
    background: linear-gradient(180deg, #ffffff 30%, #b9c6e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-blue .hero p {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 560px;
}

.header-blue p a { color: var(--accent); text-decoration: none; font-weight: 600; }
.header-blue p a:hover { color: #67e8f9; }

/* Hero image / "phone" holder -> modern framed visual */
.header-blue .phone-holder {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-blue .phone-holder img {
    width: 100% !important;
    height: auto;
    max-width: 420px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow), 0 0 80px -20px var(--accent-glow);
    animation: floaty 6s ease-in-out infinite;
}
.header-blue .iphone-mockup,
.header-blue .iphone-mockup .screen { display: none; } /* drop legacy mockup overlay */

/* Intro lead paragraph below hero */
.header-blue .lead.text-light,
.header-blue .lead {
    color: var(--text-muted) !important;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px !important;
    font-size: 1.05rem;
    text-align: left !important;
    backdrop-filter: blur(6px);
}
.header-blue .lead strong, .header-blue .lead a { color: var(--accent); }

/* ---------- Feature sections (home + szolgaltatas) ---------------------- */

.features-blue,
.features-boxed {
    background: transparent;
    color: var(--text);
    padding: clamp(60px, 9vw, 110px) 0;
}
.features-blue .intro h2,
.features-boxed .intro h2 { color: #fff; }
.features-blue .intro p,
.features-boxed .intro p { color: var(--text-muted); }

/* Card grid items */
.features-blue .features .item,
.features-boxed .features .item {
    margin-bottom: 30px;
}

.features-blue .features .item {
    background: var(--surface);
    background-clip: padding-box;
    /* 15px transparent border = the inter-card gutter (matches Bootstrap row) */
    border: 15px solid transparent;
    border-radius: 30px;
    box-shadow: inset 0 0 0 1px var(--border);
    padding: 32px 28px;
    margin-bottom: 0;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    backdrop-filter: blur(6px);
}
.features-blue .features .item:hover {
    transform: translateY(-6px);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border-strong), 0 22px 55px -22px var(--accent-glow);
}

.features-boxed .features .box {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px 28px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
    backdrop-filter: blur(6px);
}
.features-boxed .features .box:hover {
    transform: translateY(-6px);
    background: var(--surface-2);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-glow);
}

/* Icons */
.features-blue .features .item .icon,
.features-boxed .features .box .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--accent);
    background: var(--grad-soft);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 0 26px -8px var(--accent-glow);
    transition: transform .3s ease;
}
.features-blue .features .item:hover .icon,
.features-boxed .features .box:hover .icon { transform: scale(1.08) rotate(-4deg); }

.features-blue .features .item .name,
.features-boxed .features .box .name {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.features-blue .features .item .description,
.features-boxed .features .box .description {
    color: var(--text-muted);
    font-size: .98rem;
    margin: 0;
}

/* ---------- Referencia (projects-horizontal) ---------------------------- */

.projects-horizontal {
    background: transparent;
    color: var(--text);
    padding: clamp(60px, 9vw, 110px) 0;
}
.projects-horizontal .intro h2 { color: #fff; }
.projects-horizontal .intro p { color: var(--text-muted); }

.row.projects .col-sm-6.item {
    background: var(--surface);
    background-clip: padding-box;
    /* 15px transparent border = the inter-card gutter (matches Bootstrap row) */
    border: 15px solid transparent;
    border-radius: 30px;
    box-shadow: inset 0 0 0 1px var(--border);
    padding: 26px;
    margin-bottom: 0;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    backdrop-filter: blur(6px);
}
.row.projects .col-sm-6.item:hover {
    transform: translateY(-6px);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border-strong), 0 22px 55px -22px var(--accent-glow);
}

.projects-horizontal .item img {
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.projects-horizontal .item a:hover img {
    transform: scale(1.02);
    box-shadow: 0 18px 50px -18px var(--accent-glow);
}

.projects-horizontal .item .name {
    color: #fff;
    font-size: 1.2rem;
    margin: 4px 0 10px;
}
.projects-horizontal .item .description {
    color: var(--text-muted);
    text-align: left;
    font-size: .96rem;
}
.projects-horizontal .item .mt-2 { color: var(--text-dim); font-size: .9rem; }
.projects-horizontal .item .col a[target="_blank"],
.projects-horizontal .item .col-md-12 a[target="_blank"] {
    color: var(--accent);
    word-break: break-word;
}

/* ---------- Kapcsolat (article-clean + contact-clean) ------------------- */

.article-clean {
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    padding: clamp(60px, 9vw, 110px) 0 20px;
}
.article-clean .intro h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-top: 0;
}
.article-clean .intro h1::after {
    content: "";
    display: block;
    width: 64px; height: 4px;
    margin: 18px auto 0;
    border-radius: 4px;
    background: var(--grad);
}
.article-clean p { color: var(--text-muted); font-size: 1.08rem; }
.article-clean .text a { color: var(--accent); font-weight: 600; }

.contact-clean {
    background: transparent;
    padding: 10px 0 clamp(60px, 9vw, 110px);
}
.contact-clean form {
    max-width: 560px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(8px);
}
.contact-clean form h2 {
    color: #fff;
    font-size: 1.6rem;
    margin: 0 0 26px;
}
.contact-clean .form-control {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    padding: 13px 16px;
    margin-bottom: 4px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-clean .form-control::placeholder { color: var(--text-dim); }
.contact-clean .form-control:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    color: #fff;
    outline: none;
}
.contact-clean .btn-primary { width: 100%; margin-top: 8px; }

/* Alerts */
.alert {
    border-radius: 14px;
    border: 1px solid var(--border);
    max-width: 640px;
    margin: 0 auto;
    backdrop-filter: blur(6px);
}
.alert-success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    color: #bbf7d0;
}
.alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fecaca;
}
.alert .close { color: inherit; opacity: .8; }

/* ---------- Footer ------------------------------------------------------- */

.footer-basic {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    padding: 40px 0;
    margin-top: 0;
}
.footer-basic footer { text-align: center; }
.footer-basic .copyright {
    color: var(--text-dim);
    font-size: .92rem;
    margin: 0;
    letter-spacing: .02em;
}

/* ---------- Scroll reveal animation ------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
    .header-blue .phone-holder img { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Keyframes ---------------------------------------------------- */

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 991px) {
    .header-blue .navbar .navbar-collapse {
        background: var(--bg-3);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        margin-top: 12px;
    }
    .header-blue .hero { text-align: center; padding-top: 56px; }
    .header-blue .hero p { margin-left: auto; margin-right: auto; }
}

@media (max-width: 575px) {
    .contact-clean form { padding: 30px 22px; }
    .features-blue .features .item,
    .features-boxed .features .box { padding: 26px 22px; }
}