:root {
    --bg-main: #0B0F19;         /* Rich dark technical background */
    --bg-card: #141B2D;         /* Slightly lighter container fill */
    --accent-blue: #38BDF8;     /* High-precision diagnostic blue */
    --accent-teal: #2DD4BF;     /* Clinical exocad teal */
    --text-primary: #F8FAFC;    /* High contrast crisp white text */
    --text-secondary: #94A3B8;  /* Readable muted slate text */
    --border-subtle: #222F43;   /* Fine structure lines */
    --font-stack: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-stack);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
*/

/* Reset margins and make sure content stacks correctly */
body {
    margin: 0;
    padding: 0;
    font-family: system-ui, sans-serif;
    background-color: #0d1117; /* Dark background matching the theme */
    color: #ffffff;
}

/* Force the canvas to pin to the window behind everything else */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Puts it behind your text/images */
    pointer-events: none; /* Allows clicks to pass through to buttons beneath it if needed, or remove if you want mouse interactions over the entire page */
}

/* Sample styling for content overlay */
.content {
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
    text-align: center;
}

body.home-page {
  /* Set the relative path to the image we discussed previously */
  background-image: url('../img/bg.png');

  /* Crucial: Prevents the image from tiling (repeating) */
  background-repeat: no-repeat;

  /* Stretches the image. 'cover' ensures the image covers the entire 
     width and height, even if it has to scale the image up. 
     (This is usually preferred over background-size: 100% 100%,
     which often distort proportions.) */
  background-size: cover;

  /* Ensures the image is centered on the screen */
  background-position: center;

  /* Ensures the background area doesn't collapse if content is short */
  min-height: 100vh;
}

/* Structural Layout elements */
.navbar {
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(11, 15, 25, 0.8);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
}

.logo {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.logo span {
    color: var(--accent-blue);
    font-weight: 400;
}

.site-logo {
    height: 60px; 
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--text-primary);
}

.btn-nav {
    border: 1px solid var(--accent-blue);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: var(--accent-blue) !important;
}

/* Hero Section */
.hero {
    padding: 8rem 2rem 5rem 2rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.badge, .badge-dental {
    background: rgba(56, 189, 248, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(56, 189, 248, 0.2);
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    display: inline-block;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.badge-dental {
    background: rgba(45, 212, 191, 0.1);
    color: var(--accent-teal);
    border: 1px solid rgba(45, 212, 191, 0.2);
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.hero-subtext {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
}

.hero-actions a {
    text-decoration: none;
    padding: 0.8rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 4px;
    display: inline-block;
    margin: 0 0.5rem;
}

.btn-primary {
    background: var(--accent-blue);
    color: var(--bg-main);
}

.btn-secondary {
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    background: var(--bg-card);
}

/* Grid & Content Frameworks */
.grid-3 {
    max-width: 1200px;
    margin: 4rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
}

.grid-2 {
    max-width: 1200px;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    padding: 0 2rem;
}

.service-card, .card-p, .dental-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 2.5rem;
    border-radius: 6px;
    transition: transform 0.2s, border-color 0.2s;
}

.service-card:hover {
    border-color: rgba(56, 189, 248, 0.4);
}

.dental-card:hover {
    border-color: rgba(45, 212, 191, 0.4);
}

.icon-header {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h3, h4 {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Page Headers */
.page-header, .section-title-wrapper {
    text-align: center;
    max-width: 700px;
    margin: 5rem auto 1rem auto;
    padding: 0 2rem;
}

.page-header h2, .section-title-wrapper h3 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

/* Dental Workspace Layouts */
.dental-hero {
    padding: 6rem 2rem 3rem 2rem;
    background: radial-gradient(circle at top right, rgba(45, 212, 191, 0.05), transparent);
    text-align: center;
}

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

.dental-container h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Form Styling */
.contact-section {
    max-width: 1200px;
    margin: 5rem auto;
    padding: 0 2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.info-block {
    margin-top: 2rem;
}

.info-block strong {
    color: var(--accent-blue);
    display: block;
    margin-bottom: 0.5rem;
}

.secure-form {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 2.5rem;
    border-radius: 6px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.secure-form input, .secure-form select, .secure-form textarea {
    width: 100%;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    padding: 0.85rem;
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-stack);
    font-size: 0.95rem;
}

.secure-form input:focus, .secure-form select:focus, .secure-form textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.btn-submit {
    background: var(--accent-blue);
    color: var(--bg-main);
    border: none;
    width: 100%;
    padding: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

/* Footer Section */
.footer {
    border-top: 1px solid var(--border-subtle);
    padding: 3rem 2rem;
    text-align: center;
    margin-top: 8rem;
}

.footer p {
    font-size: 0.85rem;
}

.tagline {
    margin-top: 0.5rem;
    color: var(--accent-blue);
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.flash-message {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 1rem;
    border-radius: 4px;
    background: rgba(45, 212, 191, 0.2);
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal);
    text-align: center;
}

/************************************/
/* --- Hamburger Menu           --- */
/************************************/

/* Hide mobile toggle on desktop */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

/* Three lines of the hamburger icon */
.hamburger, .hamburger::before, .hamburger::after {
    display: block;
    background: var(--text-primary);
    height: 2px;
    width: 24px;
    position: relative;
    transition: background 0.2s, transform 0.2s;
}

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Animate hamburger to an 'X' when open */
.nav-toggle.open .hamburger {
    background: transparent;
}
.nav-toggle.open .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}
.nav-toggle.open .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/************************************/
/* --- Mobile Responsive Format --- */
/************************************/
@media (max-width: 768px) {
/* Keep logo and hamburger on the same horizontal row */
    .nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
    }

    /* Show the hamburger menu trigger */
    .nav-toggle {
        display: block;
        z-index: 101; /* Keeps toggle above menu */
    }

    /* Convert the menu links into a hidden dropdown menu drawer */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        
        position: absolute;
        top: 100%; /* Sits exactly below the navbar */
        left: 0;
        width: 100%;
        background: rgba(11, 15, 25, 0.95); /* Matches navbar glassmorphism */
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-subtle);
        padding: 2rem 0;
        
        /* Smooth opening slide/fade transition */
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
    }

    /* JavaScript will toggle this class to open the menu */
    .nav-menu.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Clean up links for clean mobile tap margins */
    .nav-links a {
        font-size: 1.1rem;
        margin-left: 0; /* Remove desktop left margin offset */
        text-align: center;
        width: 100%;
    }

    .nav-links .btn-nav {
        display: inline-block;
        width: auto;
        padding: 10px 32px;
    }

/* Targets the container holding buttons */
    .hero-actions {
        display: flex;
        flex-direction: column; /* Stack the buttons vertically on mobile */
        align-items: center;    /* Center them horizontally on the screen */
        gap: 16px;              /* Adds crisp, deliberate vertical spacing only when stacked */
        width: 100%;            /* Keeps layout contained */
    }

    /* Optional but highly recommended for mobile UI */
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 85%;             /* Makes both buttons the exact same width on phones */
        max-width: 320px;       /* Stops them from stretching too wide on small tablets */
        text-align: center;     /* Centers text within the buttons */
    }

/* MOBILE-FRIENDLY FORMAT FOR CONTACT FORM */
/* 1. Break the side-by-side grid into a single vertical stack */
    .contact-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;          /* Clean separation between text and form card */
        width: 100%;
        padding: 0 16px;    /* Prevents the edge of the boxes from touching the screen boundary */
        box-sizing: border-box;
    }

    /* 2. Center-align or adjust typography for smaller screens */
    .contact-info {
        text-align: center;
    }
    
    .contact-info h2 {
        font-size: 1.75rem; /* Scales down header text so it doesn't look overwhelming */
        line-height: 1.3;
    }

    /* 3. Expand the form container to fill the phone's width comfortably */
    .contact-form-container {
        width: 100%;
        max-width: 500px;   /* Keeps the form card looking crisp and proportional on small tablets */
        margin: 0 auto;     /* Centers the form container if it maxes out */
        box-sizing: border-box;
    }

    /* 4. Ensure individual inputs and buttons take full width of the container */
    .secure-form {
        width: 100%;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;        /* Forces input boxes to stretch across the full available space */
        box-sizing: border-box; 
        font-size: 16px;    /* IMPORTANT: Prevents iOS Safari from auto-zooming into fields when tapped */
        padding: 12px;      /* Slightly larger touch target area for fingers */
    }

    /* 5. Make the submit button feel solid and easy to tap */
    .btn-submit {
        width: 100%;        /* Stretches the button for an optimal mobile thumb target */
        padding: 14px;
        font-size: 1rem;
    }
}