/* =====================================================
   BRAND VARIABLES / THEME
   ===================================================== */

:root {
    --brand: #940d20;
    --brand-dark: #540712;
    --brand-light: #cd1d36;
    --ink: #940d20;
    --text-muted: #555;

    --bg: #ffffff;
    --bg-alt: #faeef0;
    --card-bg: #ffffff;
    --text: #333333;
    --border: var(--brand);
    --nav-pill-bg: #940d20;
    --nav-pill-text: #ffffff;
}

[data-theme="dark"] {
    --brand: #e9354e;
    --brand-dark: #efc8cd;
    --brand-light: #ec6578;
    --ink: #e8eefc;
    --text-muted: #b7c2d6;

    --bg: #200b0e;
    --bg-alt: #2e1014;
    --card-bg: #331318;
    --text: #e6ebf5;
    --border: #5c2a31;
    --nav-pill-bg: #6b1622;
    --nav-pill-text: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =====================================================
   BASE STYLES
   ===================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 13px;
    letter-spacing: 4px;
    font-weight: 600;
    margin-bottom: 40px;
    color: var(--ink);
}

.section-label::before,
.section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand);
    max-width: 120px;
}

/* =====================================================
   NAVBAR
   ===================================================== */

.navbar {
    background-color: var(--card-bg);
    padding: 10px 20px;
    border-radius: 10px;
    margin: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
    height: 60px;
    transition: background-color 0.3s ease;
}

/* Logo starts where the other sections' content starts, tools end where
   they end: the same 1100px container, just inside the navbar too. */
.navbar-inner {
    max-width: 1100px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
}

/* The logo is wrapped in an <a> on inner pages, so height:100% would resolve
   against an auto-height parent and blow up to the image's natural size.
   Pin an absolute height instead. */
.navbar .logo img {
    height: 36px;
    max-height: 36px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

/* Anchor wrapper used on inner pages */
.navbar .logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    text-decoration: none;
}

.logo-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--brand);
    white-space: nowrap;
}

.navbar ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

/* iOS-style pill: dark blue capsule holding the nav items, always centered
   on the navbar regardless of how wide the logo or the tools group are. */
@media (min-width: 769px) {
    .navbar ul#menu {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: var(--nav-pill-bg);
        border-radius: 999px;
        padding: 6px;
        gap: 2px;
    }
}

.navbar ul li {
    margin: 0 15px;
}

.navbar ul li a {
    text-decoration: none;
    color: var(--brand);
    transition: color 0.3s;
}

.navbar ul li a:hover {
    color: var(--brand-light);
}

.navbar ul li a.active {
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
    padding-bottom: 4px;
}

/* Inside the pill, items lose the underline/border treatment and become
   individual capsules on a dark-blue field, white text. */
@media (min-width: 769px) {
    .navbar ul#menu li {
        margin: 0;
    }

    .navbar ul#menu li a {
        display: inline-flex;
        align-items: center;
        padding: 9px 18px;
        border-radius: 999px;
        color: var(--nav-pill-text);
        font-size: 14px;
        border-bottom: none;
    }

    .navbar ul#menu li a:hover {
        color: var(--nav-pill-text);
        background: rgba(255, 255, 255, 0.12);
    }

    .navbar ul#menu li a.active {
        color: var(--nav-pill-text);
        border-bottom: none;
        padding-bottom: 9px;
        background: rgba(255, 255, 255, 0.2);
        font-weight: 600;
    }
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.lang-dropdown-wrapper {
    position: relative;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 46px;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    min-width: 140px;
    box-shadow: 0 8px 20px rgba(148, 13, 32, 0.15);
    z-index: 20;
}

.lang-dropdown.open {
    display: block;
}

.lang-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease;
}

.lang-dropdown button:hover,
.lang-dropdown button.active {
    background: var(--bg-alt);
    color: var(--brand);
}

.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    color: var(--brand);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.tool-btn.icon-only span {
    display: none;
}

.tool-btn:hover {
    background: var(--brand);
    color: #fff;
}

.navbar .menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--brand);
}

/* =====================================================
   HERO SECTION
   ===================================================== */

.hero {
    position: relative;
    height: 80vh;
    background: var(--bg);
    overflow: hidden;
    padding: 0 5%;
    transition: background-color 0.3s ease;
}

.hero-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.central-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: 0 5px 20px rgba(148, 13, 32, 0.18);
    border: 3px solid var(--brand);
    z-index: 3;
}

.central-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bubble {
    position: absolute;
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px rgba(148, 13, 32, 0.12);
    font-size: 14px;
    cursor: grab;
    z-index: 4;
    word-break: break-word;
    max-width: 150px;
    text-align: center;
    transition: left 5s ease, top 5s ease, background-color 0.3s ease, opacity 0.4s ease;
    user-select: none;
    opacity: 0;
}

.bubble.positioned {
    opacity: 1;
}

.bubble:active {
    cursor: grabbing;
    transition: none;
}

.product-bubble {
    padding: 8px 14px;
    border-radius: 14px;
    border: 1px solid var(--border);
    max-width: 110px;
    background-color: #ffffff;
}

[data-theme="dark"] .product-bubble {
    background-color: #f4f6fa;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.product-bubble img {
    max-width: 82px;
    max-height: 26px;
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

#lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#lines-svg line {
    stroke: var(--brand-light);
    opacity: 0.35;
    transition: x2 0.3s ease, y2 0.3s ease, x1 0.3s ease, y1 0.3s ease;
}

/* =====================================================
   ABOUT SECTION
   ===================================================== */

.about {
    padding: 64px 24px;
    background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about .container {
    position: relative;
    z-index: 1;
}

/* About: two-column editorial card */

.about-card {
    position: relative;
    width: 100%;
    margin: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    text-align: left;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px 1fr;
}

/* Left rail: persona counter + dots */
.about-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 44px 0;
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.about-rail-index {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.about-rail-line {
    width: 1px;
    flex: 1;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.35);
}

.about-rail-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.about-rail .carousel-dots {
    margin: 0;
    flex-direction: column;
    gap: 8px;
}

.about-rail .carousel-dots span {
    background: #fff;
    width: 7px;
    height: 7px;
}

/* Right column: content */
.about-main {
    padding: 44px 48px 40px;
    position: relative;
}

.about-main::after {
    content: "\201C";
    position: absolute;
    top: -22px;
    right: 22px;
    font-size: 150px;
    line-height: 1;
    color: var(--brand);
    opacity: 0.05;
    pointer-events: none;
}

.about-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.title-wrapper {
    display: flex;
    justify-content: flex-start;
    min-height: 40px;
}

.about-title {
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0;
    line-height: 1.3;
}

.typing {
    border-right: 2px solid var(--brand);
    padding-right: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50%, 100% { border-color: transparent; }
    25%, 75% { border-color: var(--brand); }
}

.about-body {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.about-text {
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 18px;
    color: var(--text-muted);
    transition: opacity 0.4s ease;
}

.about-text:last-child {
    margin-bottom: 0;
}

.actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.btn {
    padding: 16px 36px;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
}

.btn-outline {
    border: 2px solid var(--brand);
    color: var(--brand);
}

.btn-outline:hover {
    background: var(--brand);
    color: #fff;
}

.btn-fill {
    background: var(--brand);
    color: #fff;
}

.btn-fill:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
}

/* =====================================================
   WORKS SECTION
   ===================================================== */

.works {
    padding: 64px 24px;
    background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.work-card {
    border: 1px solid var(--border);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
    background: var(--card-bg);
}

.work-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(148, 13, 32, 0.12);
}

.work-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: var(--brand-dark);
}

.work-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.work-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: background 0.2s ease, color 0.2s ease;
}

.work-links a i {
    font-size: 10px;
}

.work-links a:hover {
    background: var(--brand);
    color: #fff;
}

.persona-works {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 24px;
    transition: opacity 0.4s ease;
}

.persona-works a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: background 0.2s ease, color 0.2s ease;
}

.persona-works a i {
    font-size: 10px;
}

.persona-works a:hover {
    background: var(--brand);
    color: #fff;
}

.persona-works .persona-works-empty {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

.more-work {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand);
}

.more-work:hover {
    text-decoration: underline;
}

.store-cta {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.store-btn {
    padding: 14px 30px;
}

/* =====================================================
   TESTIMONIALS CAROUSEL
   ===================================================== */

.testimonials-label {
    margin-top: 56px;
    margin-bottom: 40px;
}

.testimonials-wrapper {
    overflow: hidden;
    max-width: 1024px;
    margin: 0 auto;
}

.testimonials-track {
    display: flex;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.testimonial {
    flex: 0 0 320px;
    width: 320px;
    border-left: 2px solid var(--brand);
    padding: 28px 28px 24px 36px;
    background: var(--card-bg);
    transition: background-color 0.3s ease;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.testimonial-header img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(100%);
}

.stars {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    color: var(--brand);
}

.testimonial p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.testimonial p::first-letter {
    font-weight: 700;
    font-size: 22px;
}

/* =====================================================
   NEWS/ARTICLES SECTION
   ===================================================== */

.news {
    padding: 64px 24px;
    background: var(--bg);
}

.articles-wrapper {
    overflow: hidden;
    max-width: 1069px;
    margin: 0 auto;
}

.articles-track {
    display: flex;
    gap: 32px;
    transition: transform 0.6s ease;
    will-change: transform;
}

.article-card {
    flex: 0 0 335px;
    width: 335px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: background-color 0.3s ease;
}

.article-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.article-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.article-date {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.6;
}

.article-card .article-content h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: var(--brand-dark);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}

.article-content p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: calc(1.6em * 2);
}

.article-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

/* Project news cards have no "read more" link (short blurbs, no full post),
   so pin the meta icons to the right instead of them drifting left, to keep
   the same visual rhythm as the homepage article cards */
.news-list .article-actions {
    justify-content: flex-end;
}

.read-more {
    font-weight: 600;
    text-decoration: none;
    color: var(--brand);
}

.read-more:hover {
    text-decoration: underline;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.icon-btn {
    cursor: pointer;
    transition: color 0.3s;
}

.icon-btn:hover {
    color: var(--brand-light);
}

.icon-btn.hearted {
    color: #e63946;
}

.share-menu {
    position: absolute;
    bottom: 70px;
    right: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px;
    display: none;
    gap: 12px;
    z-index: 10;
}

.share-menu.active {
    display: flex;
}

.share-menu i {
    cursor: pointer;
    font-size: 18px;
    transition: color 0.3s;
    color: var(--brand);
}

.share-menu i:hover {
    color: var(--brand-light);
}

/* =====================================================
   CAROUSEL DOTS (SHARED)
   ===================================================== */

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.carousel-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.3s;
}

.carousel-dots span:hover {
    opacity: 0.6;
}

.carousel-dots span.active {
    opacity: 1;
}

#persona-dots {
    margin: 0;
    justify-content: flex-start;
}

/* =====================================================
   FAQ SECTION
   ===================================================== */

.faq {
    padding: 64px 24px;
    background: linear-gradient(to bottom, var(--bg), var(--bg-alt));
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    color: var(--brand-dark);
}

.faq-question:hover {
    color: var(--brand-light);
}

.faq-answer {
    display: none;
    padding-bottom: 20px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
}

/* =====================================================
   CONTACT SECTION
   ===================================================== */

.contact-section {
    padding: 64px 24px;
    background: var(--bg-alt);
    text-align: center;
}

.contact-lead {
    max-width: 560px;
    margin: 0 auto 36px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
}

.contact-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 36px;
}

.contact-method {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background: var(--card-bg);
    color: var(--brand);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.contact-method:hover {
    background: var(--brand);
    color: #fff;
}

.contact-social {
    margin-top: 0;
}

.contact-social a {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.contact-social a:hover {
    background: var(--brand-dark);
    color: #fff;
}

.faq-item.active .faq-answer {
    display: block;
}

/* =====================================================
   FOOTER
   ===================================================== */

footer {
    background: var(--brand-dark);
    color: #fff;
    padding: 64px 24px 28px;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] footer {
    background: #060a14;
}

.footer-top {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 56px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand img {
    height: 30px;
    width: auto;
    margin-bottom: 14px;
}

.footer-tagline {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    max-width: 280px;
    margin: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

footer h4 {
    margin: 0 0 16px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

footer a {
    display: block;
    color: #fff;
    opacity: 0.85;
    text-decoration: none;
    margin-bottom: 12px;
    font-size: 14px;
    transition: opacity 0.3s;
}

footer a:hover {
    opacity: 1;
}

/* Newsletter: present, visually intact, but deliberately inactive for now */
.newsletter-note {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.newsletter-disabled {
    opacity: 0.5;
}

.newsletter-disabled input {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    cursor: not-allowed;
}

.newsletter-disabled input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-disabled button {
    width: 100%;
    padding: 11px;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    color: var(--brand-dark);
    font-weight: 600;
    cursor: not-allowed;
    font-family: 'Poppins', sans-serif;
}

.footer-bottom {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 24px;
    font-size: 13px;
    opacity: 0.6;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    opacity: 1;
    font-size: 15px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-tagline {
        max-width: none;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .newsletter-disabled input,
    .newsletter-disabled button {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   CONTACT MODAL
   ===================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 30, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--card-bg);
    color: var(--text);
    border-radius: 16px;
    padding: 36px 32px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modal-pop 0.25s ease;
}

@keyframes modal-pop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--brand-dark);
}

.modal-subtitle {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text-muted);
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-alt);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.modal-close:hover {
    background: var(--brand);
    color: #fff;
}

#contact-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#contact-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 10px;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    resize: vertical;
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.modal-submit {
    margin-top: 20px;
    justify-content: center;
    width: 100%;
}

/* =====================================================
   FLOATING BUTTONS
   ===================================================== */

.float-btn {
    position: fixed;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    z-index: 1000;
    transition: transform 0.3s;
}

.float-btn:hover {
    transform: scale(1.1);
}

.whatsapp {
    bottom: 80px;
    background: var(--brand);
}

.to-top {
    bottom: 20px;
    background: var(--brand-dark);
}

/* =====================================================
   RESPONSIVE - MOBILE
   ===================================================== */

@media (max-width: 768px) {
    .logo-text {
        display: none;
    }

    .navbar ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--card-bg);
        box-shadow: 0 2px 10px rgba(148, 13, 32, 0.12);
        padding: 10px 0;
    }

    .navbar ul.active {
        display: flex;
    }

    .navbar ul li {
        margin: 10px 0;
        text-align: center;
    }

    .navbar .menu-toggle {
        display: block;
    }

    .nav-tools {
        margin-right: 10px;
    }

    .hero {
        height: auto;
        min-height: 600px;
        padding: 20px;
    }

    .central-image {
        width: 150px;
        height: 150px;
        top: 20%;
        transform: translate(-50%, 0);
    }

    .bubble {
        font-size: 12px;
        padding: 6px 12px;
        max-width: 120px;
    }

    .product-bubble img {
        max-width: 60px;
        max-height: 20px;
    }

    .about {
        padding: 56px 20px;
    }

    .about-card {
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    /* Rail becomes a slim horizontal strip above the content */
    .about-rail {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
        padding: 16px 24px;
    }

    .about-rail-index {
        font-size: 24px;
    }

    .about-rail-line {
        flex: 0 0 auto;
        width: 24px;
        height: 1px;
        min-height: 0;
    }

    .about-rail-label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .about-rail .carousel-dots {
        flex-direction: row;
        margin-left: auto;
    }

    .about-main {
        padding: 28px 24px 26px;
    }

    .about-main::after {
        font-size: 100px;
        right: 12px;
    }

    .actions {
        width: 100%;
    }

    .actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 14px 24px;
    }

    .about-title {
        font-size: 20px;
    }

    .about-text {
        font-size: 15px;
    }

    .works {
        padding: 56px 20px;
    }

    .testimonial {
        flex: 0 0 100%;
        width: 100%;
    }

    .article-card {
        flex: 0 0 100%;
        width: 100%;
    }

    .faq {
        padding: 48px 20px;
    }
}

/* =====================================================
   RESPONSIVE - TABLET
   ===================================================== */

@media (min-width: 769px) and (max-width: 1023px) {
    .testimonial {
        flex: 0 0 calc(50% - 16px);
        width: calc(50% - 16px);
    }

    .article-card {
        flex: 0 0 calc(50% - 16px);
        width: calc(50% - 16px);
    }
}

/* =====================================================
   RESPONSIVE - DESKTOP
   ===================================================== */

@media (min-width: 769px) {
    .hero {
        padding-top: 100px;
    }
}

@media (min-width: 1024px) {
    .testimonial {
        flex: 0 0 320px;
        width: 320px;
    }

    .article-card {
        flex: 0 0 335px;
        width: 335px;
    }
}

/* =====================================================
   INNER PAGES (blog, post, legal) - SHARED SHELL
   ===================================================== */

.page-header {
    padding: 140px 24px 56px;
    text-align: center;
    background: linear-gradient(to bottom, var(--bg-alt), var(--bg));
}

/* Project pages: tighter top gap (back link closer to navbar) and tighter
   bottom gap (tagline closer to the tabs that follow it) */
.project-header {
    padding-top: 48px;
    padding-bottom: 28px;
}

.project-header p {
    margin-bottom: 0;
}

.page-header h1 {
    font-size: clamp(28px, 5vw, 42px);
    color: var(--brand-dark);
    margin: 0 0 12px;
}

.page-header p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.page-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    line-height: 1.8;
    font-size: 15px;
}

/* Less top padding right after a project header, so the tagline sits close
   to the tabs that follow it */
.project-header + .page-content {
    padding-top: 24px;
}

.page-content h2 {
    color: var(--brand-dark);
    margin-top: 40px;
    font-size: 22px;
}

.page-content h3 {
    color: var(--brand-dark);
    margin-top: 28px;
    font-size: 17px;
}

.page-content ul {
    padding-left: 20px;
}

.page-content a:not(.btn) {
    color: var(--brand);
}

.legal-updated {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-top: -32px;
    margin-bottom: 32px;
}

.legal-disclaimer {
    background: var(--bg-alt);
    border-left: 3px solid var(--brand);
    padding: 16px 20px;
    font-size: 14px;
    color: var(--text-muted);
    margin: 32px auto 0;
    max-width: 760px;
    border-radius: 0 8px 8px 0;
}

/* Blog listing */

.blog-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 96px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.blog-card {
    border: 1px solid var(--border);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(148, 13, 32, 0.12);
}

.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.blog-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

.blog-card h3 {
    margin: 0;
    font-size: 18px;
    color: var(--brand-dark);
}

.blog-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Single post */

.post-hero-image {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

.post-hero-image img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 12px;
}

.post-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    text-decoration: none;
    font-size: 14px;
}

.post-back:hover {
    text-decoration: underline;
}

/* Project header top row: back link flush left (roughly under the navbar
   logo), next-project link flush right. Not centered like the rest of the
   header text. */
.project-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    text-align: left;
    margin: 0 auto 28px;
    max-width: 1100px;
    width: 100%;
}

.next-project-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    text-decoration: none;
    font-size: 14px;
}

.next-project-link:hover {
    text-decoration: underline;
}

.next-project-link .np-label {
    color: var(--text-muted);
    font-weight: 400;
}

@media (max-width: 600px) {
    .project-nav-row {
        justify-content: center;
        text-align: center;
    }
}

.post-share {
    display: flex;
    gap: 12px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.post-share a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.post-share a:hover {
    background: var(--brand);
    color: #fff;
}

/* =====================================================
   PROJECT DETAIL PAGES
   ===================================================== */

.tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.tech-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bg-alt);
    color: var(--brand);
}

.project-links {
    justify-content: flex-start;
}

/* Prominent logo badge on project pages. Width is auto so both wide
   wordmark logos and square icon marks fit their natural proportions
   instead of being squeezed into a fixed square. */
.project-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 4px auto 20px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 12px 22px;
}

[data-theme="dark"] .project-logo-badge {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.project-logo-badge img {
    display: block;
    width: auto;
    height: 56px;
    max-width: 260px;
    max-height: 56px;
    object-fit: contain;
}

/* Horizontal tabs for project pages: Description | Details (stack+links+meta
   merged, too little content each to deserve a separate tab) | News */
.project-tabs {
    margin-top: 8px;
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.tab-btn:hover {
    color: var(--brand);
}

.tab-btn.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.tab-panels {
    min-width: 0;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-panel h2 {
    margin-top: 0;
}

.tab-panel p:first-child {
    margin-top: 0;
}

/* Details tab: stack + links + meta stacked with light separation */
.details-block {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.details-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.details-block h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin: 0 0 14px;
}

@media (max-width: 768px) {
    .tab-buttons {
        gap: 0;
    }

    .tab-btn {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* =====================================================
   PROJECT PAGE EXTRAS (logo, meta, news+pagination)
   ===================================================== */

.project-header .project-logo,
img.project-logo {
    display: block;
    width: auto !important;
    height: 64px !important;
    max-width: 220px !important;
    max-height: 64px !important;
    margin: 12px auto 18px;
    object-fit: contain;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding: 20px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.meta-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.meta-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.meta-value {
    color: var(--brand-dark);
    font-weight: 600;
}

.news-item {
    border: 1px solid var(--border);
    background: var(--card-bg);
    padding: 20px;
    border-radius: 8px;
}

.news-item.hidden-page,
.article-card.hidden-page {
    display: none !important;
}

/* News cards inside a project page: same visual language as the homepage
   articles, laid out as a responsive grid instead of a horizontal carousel */
.news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.news-list .article-card {
    flex: none;
    width: 100%;
    max-width: 335px;
}

/* Small disabled newsletter signup for a single product, inside the News tab */
.project-visit-cta {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.project-newsletter {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.project-newsletter h3 {
    font-size: 15px;
    color: var(--brand-dark);
    margin: 0 0 4px;
}

.project-newsletter .newsletter-note {
    color: var(--text-muted);
    background: var(--bg-alt);
}

.project-newsletter .newsletter-disabled {
    max-width: 360px;
    margin: 12px auto 0;
}

.project-newsletter .newsletter-disabled input {
    border: 1px solid var(--border);
    background: var(--bg-alt);
    color: var(--text);
}

.project-newsletter .newsletter-disabled button {
    background: var(--brand);
    color: #fff;
}

.news-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--brand);
    background: var(--bg-alt);
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.news-item h3 {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--brand-dark);
}

.news-item p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.news-pagination button {
    background: none;
    border: 1px solid var(--border);
    color: var(--brand);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.news-pagination button:hover:not(:disabled) {
    background: var(--brand);
    color: #fff;
}

.news-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

.news-pagination span {
    font-size: 13px;
    color: var(--text-muted);
}