/* =====================================================
   AI INNOVATIONS LABS
   MASTER STYLESHEET
   Clean Rebuild: 2026-08-08

   Purpose:
   - Fix broken CSS
   - Remove blank spaces
   - Prevent horizontal overflow
   - Standardise all pages
   - Support real logo image
===================================================== */


/* =====================================================
   1. RESET
===================================================== */

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

html{
    width:100%;
    max-width:100%;
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:#F8FAFC;
    color:#334155;
    line-height:1.7;
}

main{
    width:100%;
    overflow:hidden;
}

section{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:80px 0;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

ul,
ol{
    list-style:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}


/* =====================================================
   2. THEME VARIABLES
===================================================== */

:root{
    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --primary-light:#DBEAFE;

    --secondary:#38BDF8;
    --accent:#10B981;
    --accent-dark:#059669;

    --navy:#0F172A;
    --dark:#1E293B;
    --text:#334155;
    --muted:#64748B;
    --light:#F8FAFC;
    --lighter:#FFFFFF;
    --border:#E2E8F0;

    --white:#FFFFFF;
    --black:#020617;

    --shadow-small:0 8px 22px rgba(15,23,42,.08);
    --shadow:0 18px 45px rgba(15,23,42,.10);
    --shadow-large:0 28px 70px rgba(15,23,42,.16);

    --radius-small:12px;
    --radius:20px;
    --radius-large:30px;

    --container:1180px;
}


/* =====================================================
   3. CONTAINERS
===================================================== */

.container{
    width:min(var(--container),92%);
    max-width:var(--container);
    margin-left:auto;
    margin-right:auto;
}

.container-small{
    width:min(920px,92%);
    max-width:920px;
    margin-left:auto;
    margin-right:auto;
}

.container-wide{
    width:min(1320px,94%);
    max-width:1320px;
    margin-left:auto;
    margin-right:auto;
}


/* =====================================================
   4. TYPOGRAPHY
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--navy);
    line-height:1.15;
    font-weight:900;
}

h1{
    font-size:clamp(2.8rem,6vw,5.2rem);
    letter-spacing:-.04em;
}

h2{
    font-size:clamp(2.2rem,4vw,3.4rem);
    letter-spacing:-.035em;
}

h3{
    font-size:clamp(1.45rem,2.5vw,2rem);
    letter-spacing:-.02em;
}

h4{
    font-size:1.25rem;
}

p{
    color:var(--muted);
    font-size:1rem;
}

.lead,
.section-lead{
    font-size:1.12rem;
    line-height:1.8;
    color:var(--muted);
}

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-primary{
    color:var(--primary);
}

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


/* =====================================================
   5. BADGES
===================================================== */

.badge,
.section-badge,
.hero-badge,
.label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 16px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary-dark);
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:22px;
}


/* =====================================================
   6. BUTTONS
===================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:14px 24px;
    border-radius:14px;
    border:2px solid transparent;
    font-weight:900;
    font-size:.98rem;
    line-height:1.2;
    cursor:pointer;
    transition:.25s ease;
    white-space:normal;
    text-align:center;
}

.btn-primary{
    background:var(--primary);
    color:#FFFFFF;
    box-shadow:0 12px 28px rgba(37,99,235,.24);
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.btn-secondary{
    background:#FFFFFF;
    color:var(--primary);
    border-color:var(--border);
}

.btn-secondary:hover{
    background:#EFF6FF;
    transform:translateY(-2px);
}

.btn-light{
    background:#FFFFFF;
    color:var(--primary);
}

.btn-light:hover{
    background:#F8FAFC;
    transform:translateY(-2px);
}

.btn-dark{
    background:var(--navy);
    color:#FFFFFF;
}

.btn-dark:hover{
    background:#1E293B;
    transform:translateY(-2px);
}

.btn-group,
.hero-actions,
.cta-actions,
.card-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}


/* =====================================================
   7. HEADER + NAVIGATION
===================================================== */

.header,
.site-header{
    width:100%;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:blur(14px);
    box-shadow:0 8px 25px rgba(15,23,42,.04);
}

.navbar{
    width:100%;
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}


/* =====================================================
   8. REAL LOGO FIX
===================================================== */

.logo,
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    flex-shrink:0;
    min-width:0;
}

.logo-image,
.brand-logo{
    width:58px;
    height:58px;
    max-width:58px;
    max-height:58px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    margin:0;
    padding:0;
}

.logo-text,
.brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}

.logo-text h2,
.logo-text h1,
.brand-text h1,
.brand-text h2{
    margin:0 0 5px;
    color:var(--navy);
    font-size:1.28rem;
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.logo-text span,
.brand-text span{
    display:block;
    color:var(--muted);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.13em;
    line-height:1.2;
    text-transform:uppercase;
    white-space:nowrap;
}


/* =====================================================
   9. NAV LINKS
===================================================== */

.nav-menu,
.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
}

.nav-link,
.nav-links a{
    color:var(--navy);
    font-size:.92rem;
    font-weight:800;
    line-height:1.2;
    transition:.25s ease;
}

.nav-link:hover,
.nav-link.active,
.nav-links a:hover,
.nav-links a.active{
    color:var(--primary);
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.admin-link{
    padding:10px 16px;
    border-radius:12px;
    background:#EFF6FF;
    color:var(--primary)!important;
    font-weight:900!important;
}

.mobile-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    border-radius:12px;
    background:#EFF6FF;
    color:var(--primary);
    font-size:1.35rem;
    cursor:pointer;
}


/* =====================================================
   10. STANDARD SECTION TITLES
===================================================== */

.section-title{
    max-width:820px;
    margin:0 auto 48px;
    text-align:center;
}

.section-title h2{
    margin-bottom:16px;
}

.section-title p{
    max-width:720px;
    margin:0 auto;
    font-size:1.08rem;
}

.section-header{
    max-width:820px;
    margin:0 auto 48px;
    text-align:center;
}

.section-header h2{
    margin-bottom:16px;
}

.section-header p{
    max-width:720px;
    margin:0 auto;
    font-size:1.08rem;
}


/* =====================================================
   11. BASIC GRID HELPERS
===================================================== */

.grid{
    display:grid;
    gap:30px;
}

.grid-2{
    grid-template-columns:repeat(2,1fr);
}

.grid-3{
    grid-template-columns:repeat(3,1fr);
}

.grid-4{
    grid-template-columns:repeat(4,1fr);
}


/* =====================================================
   12. STANDARD CARDS
===================================================== */

.card,
.info-card,
.feature-card,
.service-card,
.solution-card,
.product-card,
.platform-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:var(--radius-large);
    padding:34px;
    box-shadow:var(--shadow);
    transition:.25s ease;
    min-height:auto;
}

.card:hover,
.info-card:hover,
.feature-card:hover,
.service-card:hover,
.solution-card:hover,
.product-card:hover,
.platform-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.card-icon,
.feature-icon,
.service-icon,
.solution-icon,
.product-icon,
.platform-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.55rem;
    font-weight:900;
    margin-bottom:22px;
}

.card h3,
.info-card h3,
.feature-card h3,
.service-card h3,
.solution-card h3,
.product-card h3,
.platform-card h3{
    margin-bottom:14px;
}

.card p,
.info-card p,
.feature-card p,
.service-card p,
.solution-card p,
.product-card p,
.platform-card p{
    margin-bottom:0;
}


/* =====================================================
   13. CHECK LISTS
===================================================== */

.check-list,
.feature-list,
.service-list,
.benefit-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin:24px 0;
}

.check-list li,
.feature-list li,
.service-list li,
.benefit-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--text);
    font-size:1rem;
}

.check-list li::before,
.feature-list li::before,
.service-list li::before,
.benefit-list li::before{
    content:"✓";
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:999px;
    background:var(--accent);
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.78rem;
    font-weight:900;
    margin-top:2px;
}

/* =====================================================
   14. HERO SECTIONS
===================================================== */

.hero,
.home-hero,
.page-hero{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:110px 0 90px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.10),transparent 34%),
        radial-gradient(circle at bottom left,rgba(56,189,248,.10),transparent 34%),
        linear-gradient(180deg,#FFFFFF,#F8FAFC);
}

.hero .container,
.home-hero .container,
.page-hero .container{
    position:relative;
    z-index:2;
}

.hero-grid,
.hero-container,
.hero-layout,
.home-hero-grid{
    width:100%;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.hero-content,
.home-hero-content,
.page-hero-content{
    width:100%;
    max-width:680px;
    position:relative;
    z-index:3;
}

.hero-content h1,
.home-hero-content h1,
.page-hero-content h1,
.hero h1,
.home-hero h1,
.page-hero h1{
    margin-bottom:24px;
    max-width:760px;
}

.hero-content p,
.home-hero-content p,
.page-hero-content p,
.hero p,
.home-hero p,
.page-hero p{
    max-width:680px;
    margin-bottom:30px;
    font-size:1.12rem;
    line-height:1.8;
}

.hero-actions{
    margin-top:34px;
}

.hero-visual,
.home-hero-visual,
.page-hero-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
    position:relative;
    z-index:2;
}

.hero-card,
.home-hero-card,
.visual-card{
    width:100%;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    box-shadow:var(--shadow-large);
    padding:32px;
    overflow:hidden;
}

.hero-card h2,
.hero-card h3,
.home-hero-card h2,
.home-hero-card h3,
.visual-card h2,
.visual-card h3{
    margin-bottom:12px;
}

.hero-card p,
.home-hero-card p,
.visual-card p{
    margin-bottom:0;
}


/* =====================================================
   15. HERO DECORATIVE SHAPES
===================================================== */

.hero::before,
.home-hero::before,
.page-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(37,99,235,.06);
    top:-160px;
    right:-120px;
    z-index:1;
}

.hero::after,
.home-hero::after,
.page-hero::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(56,189,248,.07);
    bottom:-140px;
    left:-120px;
    z-index:1;
}

.hero-shape,
.shape,
.bg-shape,
.decorative-shape,
.decorative-circle{
    position:absolute;
    pointer-events:none;
    z-index:1;
    max-width:420px;
    max-height:420px;
    opacity:.7;
}


/* =====================================================
   16. HERO FEATURE PILLS / LABELS
===================================================== */

.hero-features,
.hero-pills,
.platform-tags,
.solution-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}

.hero-feature,
.hero-pill,
.platform-tag,
.solution-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 14px;
    border-radius:999px;
    background:#FFFFFF;
    border:1px solid var(--border);
    color:var(--navy);
    font-size:.88rem;
    font-weight:800;
    box-shadow:var(--shadow-small);
}


/* =====================================================
   17. HERO STATS
===================================================== */

.hero-stats,
.stats-row,
.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:44px;
}

.stat-card,
.stat-box{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--shadow-small);
}

.stat-number,
.stat-card h3,
.stat-box h3{
    display:block;
    color:var(--primary);
    font-size:2rem;
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.stat-label,
.stat-card p,
.stat-box p{
    color:var(--muted);
    font-size:.92rem;
    margin:0;
}


/* =====================================================
   18. HOMEPAGE MAIN PRODUCT / DASHBOARD PREVIEW
===================================================== */

.dashboard-preview,
.product-preview,
.platform-preview,
.software-preview,
.inspection-preview{
    width:100%;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:30px;
    box-shadow:var(--shadow-large);
    overflow:hidden;
}

.preview-header,
.dashboard-header,
.product-preview-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px 26px;
    background:#F8FAFC;
    border-bottom:1px solid var(--border);
}

.preview-title,
.dashboard-title,
.product-preview-title{
    display:flex;
    align-items:center;
    gap:14px;
}

.preview-icon,
.dashboard-icon{
    width:48px;
    height:48px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:1.3rem;
}

.preview-title h3,
.dashboard-title h3,
.product-preview-title h3{
    margin:0;
    font-size:1.15rem;
}

.preview-title p,
.dashboard-title p,
.product-preview-title p{
    margin:3px 0 0;
    font-size:.88rem;
}

.preview-body,
.dashboard-body,
.product-preview-body{
    padding:28px;
}

.preview-image,
.dashboard-image{
    width:100%;
    border-radius:22px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#F8FAFC;
}

.preview-image img,
.dashboard-image img{
    width:100%;
    height:auto;
    display:block;
}


/* =====================================================
   19. HOMEPAGE INTRO / OVERVIEW BLOCKS
===================================================== */

.intro-section,
.overview-section,
.home-intro{
    background:#FFFFFF;
}

.intro-grid,
.overview-grid,
.home-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
    align-items:center;
}

.intro-content,
.overview-content,
.home-intro-content{
    max-width:620px;
}

.intro-content h2,
.overview-content h2,
.home-intro-content h2{
    margin-bottom:20px;
}

.intro-content p,
.overview-content p,
.home-intro-content p{
    margin-bottom:18px;
    font-size:1.06rem;
}

.intro-visual,
.overview-visual,
.home-intro-visual{
    width:100%;
    max-width:540px;
    margin-left:auto;
}


/* =====================================================
   20. STANDARD SPLIT SECTIONS
===================================================== */

.split-section{
    background:#F8FAFC;
}

.split-section:nth-of-type(even){
    background:#FFFFFF;
}

.split-grid,
.two-column,
.content-grid,
.solution-row,
.service-row,
.feature-row,
.platform-row,
.home-solution-row,
.solutions-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.split-content,
.solution-content,
.service-content,
.feature-content,
.platform-content{
    width:100%;
    max-width:620px;
}

.split-content h2,
.solution-content h2,
.service-content h2,
.feature-content h2,
.platform-content h2{
    margin-bottom:20px;
}

.split-content p,
.solution-content p,
.service-content p,
.feature-content p,
.platform-content p{
    margin-bottom:18px;
    font-size:1.05rem;
}

.split-visual,
.solution-visual,
.service-visual,
.feature-visual,
.platform-visual{
    width:100%;
    max-width:540px;
    margin-left:auto;
}

.split-grid.reverse .split-visual,
.two-column.reverse .solution-visual,
.solution-row.reverse .solution-visual,
.service-row.reverse .service-visual,
.feature-row.reverse .feature-visual{
    margin-left:0;
    margin-right:auto;
}


/* =====================================================
   21. HOMEPAGE PRODUCT PLATFORM CARDS
===================================================== */

.platforms-section,
.products-section,
.solutions-section,
.services-section{
    background:#FFFFFF;
}

.platforms-grid,
.products-grid,
.solutions-grid,
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.platform-card,
.product-card,
.solution-card,
.service-card{
    position:relative;
    overflow:hidden;
}

.platform-card::before,
.product-card::before,
.solution-card::before,
.service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.platform-card .btn,
.product-card .btn,
.solution-card .btn,
.service-card .btn{
    margin-top:24px;
}


/* =====================================================
   22. HOMEPAGE FEATURE STRIP
===================================================== */

.feature-strip,
.value-strip,
.trust-strip{
    background:var(--navy);
    color:#FFFFFF;
    padding:55px 0;
}

.feature-strip-grid,
.value-strip-grid,
.trust-strip-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.feature-strip-item,
.value-strip-item,
.trust-strip-item{
    text-align:center;
}

.feature-strip-item h3,
.value-strip-item h3,
.trust-strip-item h3{
    color:#FFFFFF;
    margin-bottom:8px;
}

.feature-strip-item p,
.value-strip-item p,
.trust-strip-item p{
    color:#CBD5E1;
    margin:0;
}


/* =====================================================
   23. HOMEPAGE CTA BLOCKS
===================================================== */

.cta,
.cta-section,
.final-cta{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#FFFFFF;
    text-align:center;
    padding:85px 0;
}

.cta h2,
.cta-section h2,
.final-cta h2{
    color:#FFFFFF;
    margin-bottom:18px;
}

.cta p,
.cta-section p,
.final-cta p{
    max-width:760px;
    margin:0 auto 30px;
    color:rgba(255,255,255,.90);
    font-size:1.08rem;
}

.cta .btn-group,
.cta-section .btn-group,
.final-cta .btn-group,
.cta-actions{
    justify-content:center;
}


/* =====================================================
   24. PREVENT HOMEPAGE BLANK SPACE
===================================================== */

.home-hero,
.hero,
.page-hero,
.intro-section,
.overview-section,
.platforms-section,
.products-section,
.solutions-section,
.services-section,
.cta-section,
.final-cta{
    min-height:auto;
}

.hero-grid > *,
.hero-container > *,
.hero-layout > *,
.home-hero-grid > *,
.split-grid > *,
.two-column > *,
.content-grid > *,
solution-row > *,
.service-row > *,
.feature-row > *,
.platform-row > *{
    min-width:0;
}

.hero-content,
.home-hero-content,
.page-hero-content,
.solution-content,
.service-content,
.feature-content,
.platform-content,
.split-content{
    overflow:visible;
}

.hero-content h1,
.hero-content h2,
.home-hero-content h1,
.home-hero-content h2,
.solution-content h1,
.solution-content h2,
.service-content h1,
.service-content h2,
.feature-content h1,
.feature-content h2,
.platform-content h1,
.platform-content h2{
    overflow:visible;
    word-break:normal;
}

/* =====================================================
   25. PAGE HERO VARIATIONS
===================================================== */

.about-hero,
.solutions-hero,
.inspection-hero,
.inspectionos-hero,
.mednote-hero,
.edunote-hero,
.contact-hero{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:105px 0 85px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.11),transparent 36%),
        radial-gradient(circle at bottom left,rgba(56,189,248,.10),transparent 36%),
        linear-gradient(180deg,#FFFFFF,#F8FAFC);
}

.about-hero .container,
.solutions-hero .container,
.inspection-hero .container,
.inspectionos-hero .container,
.mednote-hero .container,
.edunote-hero .container,
.contact-hero .container{
    position:relative;
    z-index:2;
}

.page-hero-grid,
.product-hero-grid,
.solution-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.page-hero-content,
.product-hero-content,
.solution-hero-content{
    max-width:680px;
}

.page-hero-content h1,
.product-hero-content h1,
.solution-hero-content h1{
    margin-bottom:24px;
}

.page-hero-content p,
.product-hero-content p,
.solution-hero-content p{
    font-size:1.12rem;
    line-height:1.8;
    margin-bottom:30px;
}

.page-hero-visual,
.product-hero-visual,
.solution-hero-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
}


/* =====================================================
   26. SOLUTIONS PAGE
===================================================== */

.solutions-overview{
    background:#FFFFFF;
}

.solutions-intro{
    max-width:850px;
    margin:0 auto 50px;
    text-align:center;
}

.solutions-intro h2{
    margin-bottom:18px;
}

.solutions-intro p{
    font-size:1.08rem;
}

.solution-category-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.solution-category-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:30px;
    padding:36px;
    box-shadow:var(--shadow);
    transition:.25s ease;
    position:relative;
    overflow:hidden;
}

.solution-category-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
}

.solution-category-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-large);
}

.solution-category-card h3{
    margin-bottom:14px;
}

.solution-category-card p{
    margin-bottom:22px;
}

.solution-category-card ul{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.solution-category-card li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text);
}

.solution-category-card li::before{
    content:"✓";
    color:var(--accent);
    font-weight:900;
}


/* =====================================================
   27. SERVICE / SOLUTION DETAIL BLOCKS
===================================================== */

.service-detail,
.solution-detail,
.product-detail{
    background:#F8FAFC;
}

.service-detail:nth-of-type(even),
.solution-detail:nth-of-type(even),
.product-detail:nth-of-type(even){
    background:#FFFFFF;
}

.service-detail-grid,
.solution-detail-grid,
.product-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.service-detail-content,
.solution-detail-content,
.product-detail-content{
    max-width:620px;
}

.service-detail-content h2,
.solution-detail-content h2,
.product-detail-content h2{
    margin-bottom:20px;
}

.service-detail-content p,
.solution-detail-content p,
.product-detail-content p{
    margin-bottom:18px;
    font-size:1.05rem;
}

.service-detail-visual,
.solution-detail-visual,
.product-detail-visual{
    width:100%;
    max-width:540px;
    margin-left:auto;
}


/* =====================================================
   28. PRODUCT PAGE COMMON STYLES
===================================================== */

.product-section,
.platform-section{
    background:#FFFFFF;
}

.product-section.alt,
.platform-section.alt{
    background:#F8FAFC;
}

.product-overview-grid,
.platform-overview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.product-content,
.platform-content{
    max-width:620px;
}

.product-content h2,
.platform-content h2{
    margin-bottom:20px;
}

.product-content p,
.platform-content p{
    margin-bottom:18px;
    font-size:1.05rem;
}

.product-visual,
.platform-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
}

.product-card-large,
.platform-card-large{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    padding:38px;
    box-shadow:var(--shadow-large);
}

.product-card-large h3,
.platform-card-large h3{
    margin-bottom:14px;
}

.product-card-large p,
.platform-card-large p{
    margin-bottom:0;
}


/* =====================================================
   29. FEATURE GRIDS FOR PRODUCT PAGES
===================================================== */

.features-section{
    background:#F8FAFC;
}

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

.feature-item{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:26px;
    padding:32px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.feature-item:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.feature-item h3{
    margin-bottom:12px;
}

.feature-item p{
    margin:0;
}

.feature-number{
    width:48px;
    height:48px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    margin-bottom:20px;
}


/* =====================================================
   30. BENEFITS / WHY CHOOSE SECTIONS
===================================================== */

.benefits-section,
.why-section,
.why-choose-section{
    background:#FFFFFF;
}

.benefits-grid,
.why-grid,
.why-choose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.benefit-card,
.why-card,
.why-choose-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:26px;
    padding:34px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.benefit-card:hover,
.why-card:hover,
.why-choose-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.benefit-card h3,
.why-card h3,
.why-choose-card h3{
    margin-bottom:12px;
}

.benefit-card p,
.why-card p,
.why-choose-card p{
    margin:0;
}


/* =====================================================
   31. INSPECTIONOS STYLES
===================================================== */

.inspectionos-section,
.inspection-section{
    background:#FFFFFF;
}

.inspectionos-section.alt,
.inspection-section.alt{
    background:#F8FAFC;
}

.inspection-dashboard,
.inspectionos-dashboard{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    box-shadow:var(--shadow-large);
    overflow:hidden;
}

.inspection-dashboard-header,
.inspectionos-dashboard-header{
    padding:24px 28px;
    background:linear-gradient(135deg,var(--navy),#1E293B);
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.inspection-dashboard-header h3,
.inspectionos-dashboard-header h3{
    color:#FFFFFF;
    margin:0;
}

.inspection-dashboard-header p,
.inspectionos-dashboard-header p{
    color:#CBD5E1;
    margin:4px 0 0;
}

.dashboard-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(16,185,129,.16);
    color:#86EFAC;
    font-size:.8rem;
    font-weight:900;
    text-transform:uppercase;
}

.inspection-dashboard-body,
.inspectionos-dashboard-body{
    padding:28px;
}

.dashboard-metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:24px;
}

.metric-card{
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
}

.metric-card h4{
    color:var(--primary);
    font-size:1.8rem;
    margin-bottom:6px;
}

.metric-card p{
    font-size:.9rem;
    margin:0;
}

.inspection-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.inspection-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:16px;
}

.inspection-list-item strong{
    color:var(--navy);
}

.status-pill{
    display:inline-flex;
    padding:6px 11px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
    text-transform:uppercase;
}

.status-complete{
    background:#DCFCE7;
    color:#15803D;
}

.status-pending{
    background:#FEF3C7;
    color:#B45309;
}

.status-overdue{
    background:#FEE2E2;
    color:#B91C1C;
}


/* =====================================================
   32. MEDNOTE STYLES
===================================================== */

.mednote-section{
    background:#FFFFFF;
}

.mednote-section.alt{
    background:#F8FAFC;
}

.mednote-card,
.medical-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    box-shadow:var(--shadow-large);
    overflow:hidden;
}

.mednote-card-header,
.medical-card-header{
    padding:24px 28px;
    background:linear-gradient(135deg,#2563EB,#38BDF8);
    color:#FFFFFF;
}

.mednote-card-header h3,
.medical-card-header h3{
    color:#FFFFFF;
    margin-bottom:6px;
}

.mednote-card-header p,
.medical-card-header p{
    color:rgba(255,255,255,.9);
    margin:0;
}

.mednote-card-body,
.medical-card-body{
    padding:30px;
}

.qr-preview{
    width:150px;
    height:150px;
    border-radius:20px;
    background:
        linear-gradient(90deg,#0F172A 12px,transparent 12px) 0 0 / 30px 30px,
        linear-gradient(#0F172A 12px,transparent 12px) 0 0 / 30px 30px,
        #FFFFFF;
    border:8px solid #FFFFFF;
    box-shadow:var(--shadow);
    margin:0 auto 24px;
}

.mednote-steps,
.qr-steps{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mednote-step,
.qr-step{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px;
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:16px;
}

.mednote-step-number,
.qr-step-number{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:999px;
    background:var(--primary);
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:900;
}


/* =====================================================
   33. EDUNOTE STYLES
===================================================== */

.edunote-section{
    background:#FFFFFF;
}

.edunote-section.alt{
    background:#F8FAFC;
}

.edunote-card,
.school-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    box-shadow:var(--shadow-large);
    overflow:hidden;
}

.edunote-card-header,
.school-card-header{
    padding:24px 28px;
    background:linear-gradient(135deg,#10B981,#38BDF8);
    color:#FFFFFF;
}

.edunote-card-header h3,
.school-card-header h3{
    color:#FFFFFF;
    margin-bottom:6px;
}

.edunote-card-header p,
.school-card-header p{
    color:rgba(255,255,255,.9);
    margin:0;
}

.edunote-card-body,
.school-card-body{
    padding:30px;
}

.school-modules,
.edunote-modules{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.school-module,
.edunote-module{
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
}

.school-module h4,
.edunote-module h4{
    margin-bottom:6px;
    font-size:1rem;
}

.school-module p,
.edunote-module p{
    margin:0;
    font-size:.9rem;
}


/* =====================================================
   34. PROCESS / HOW IT WORKS
===================================================== */

.process-section,
.how-section,
.how-it-works{
    background:#F8FAFC;
}

.process-grid,
.steps-grid,
.how-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.process-card,
.step-card,
.how-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:26px;
    padding:30px;
    box-shadow:var(--shadow);
    position:relative;
}

.process-number,
.step-number,
.how-number{
    width:46px;
    height:46px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    margin-bottom:20px;
}

.process-card h3,
.step-card h3,
.how-card h3{
    margin-bottom:12px;
}

.process-card p,
.step-card p,
.how-card p{
    margin:0;
}


/* =====================================================
   35. INDUSTRY SECTIONS
===================================================== */

.industries-section,
.target-section{
    background:#FFFFFF;
}

.industries-grid,
.target-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.industry-card,
.target-card{
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:22px;
    padding:26px;
    text-align:center;
    transition:.25s ease;
}

.industry-card:hover,
.target-card:hover{
    background:#FFFFFF;
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}

.industry-card h3,
.target-card h3{
    font-size:1.1rem;
    margin-bottom:8px;
}

.industry-card p,
.target-card p{
    font-size:.92rem;
    margin:0;
}


/* =====================================================
   36. FIX PREVIOUS SECTION TYPO SAFELY
===================================================== */

.solution-row > *,
.service-row > *,
.feature-row > *,
.platform-row > *,
home-solution-row > *,
.solutions-row > *{
    min-width:0;
}

/* =====================================================
   37. ABOUT PAGE
===================================================== */

.about-section{
    background:#FFFFFF;
}

.about-section.alt{
    background:#F8FAFC;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-content{
    max-width:640px;
}

.about-content h2{
    margin-bottom:20px;
}

.about-content p{
    margin-bottom:18px;
    font-size:1.05rem;
}

.about-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
}

.about-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    padding:38px;
    box-shadow:var(--shadow-large);
}

.about-card h3{
    margin-bottom:14px;
}

.about-card p{
    margin-bottom:0;
}


/* =====================================================
   38. COMPANY MISSION / VISION / VALUES
===================================================== */

.mission-section,
.vision-section,
.values-section{
    background:#F8FAFC;
}

.mission-grid,
.vision-grid,
.values-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.mission-card,
.vision-card,
.value-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.mission-card:hover,
.vision-card:hover,
.value-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.mission-card h3,
.vision-card h3,
.value-card h3{
    margin-bottom:14px;
}

.mission-card p,
.vision-card p,
.value-card p{
    margin-bottom:0;
}


/* =====================================================
   39. FOUNDER / LEADERSHIP SECTIONS
===================================================== */

.founder-section,
.leadership-section{
    background:#FFFFFF;
}

.founder-grid,
.leadership-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:60px;
    align-items:center;
}

.founder-image,
.leadership-image{
    width:100%;
    max-width:420px;
    margin:0 auto;
    border-radius:32px;
    overflow:hidden;
    background:#F8FAFC;
    border:1px solid var(--border);
    box-shadow:var(--shadow-large);
}

.founder-image img,
.leadership-image img{
    width:100%;
    height:auto;
    display:block;
}

.founder-placeholder,
.leadership-placeholder{
    min-height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    font-size:4rem;
    font-weight:900;
}

.founder-content,
.leadership-content{
    max-width:680px;
}

.founder-content h2,
.leadership-content h2{
    margin-bottom:20px;
}

.founder-content p,
.leadership-content p{
    margin-bottom:18px;
    font-size:1.05rem;
}

.credentials-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:28px;
}

.credential-card{
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:18px;
    padding:20px;
}

.credential-card h4{
    margin-bottom:6px;
    color:var(--navy);
}

.credential-card p{
    margin:0;
    font-size:.92rem;
}


/* =====================================================
   40. TIMELINE / EXPERIENCE
===================================================== */

.timeline-section{
    background:#F8FAFC;
}

.timeline{
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:26px;
}

.timeline-item{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:28px;
    align-items:start;
}

.timeline-date{
    background:var(--primary);
    color:#FFFFFF;
    border-radius:16px;
    padding:12px 16px;
    text-align:center;
    font-weight:900;
    font-size:.9rem;
}

.timeline-content{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--shadow);
}

.timeline-content h3{
    margin-bottom:10px;
}

.timeline-content p{
    margin-bottom:0;
}


/* =====================================================
   41. CONTACT PAGE
===================================================== */

.contact-section{
    background:#FFFFFF;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:start;
}

.contact-info{
    max-width:520px;
}

.contact-info h2{
    margin-bottom:18px;
}

.contact-info p{
    margin-bottom:24px;
    font-size:1.05rem;
}

.contact-details{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:28px;
}

.contact-detail{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:#F8FAFC;
    border:1px solid var(--border);
    border-radius:20px;
    padding:20px;
}

.contact-detail-icon{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
}

.contact-detail h3{
    font-size:1.08rem;
    margin-bottom:4px;
}

.contact-detail p,
.contact-detail a{
    color:var(--muted);
    margin:0;
    font-size:.96rem;
}


/* =====================================================
   42. CONTACT FORM
===================================================== */

.contact-form-wrapper,
.form-wrapper{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    padding:38px;
    box-shadow:var(--shadow-large);
}

.contact-form-wrapper h3,
.form-wrapper h3{
    margin-bottom:10px;
}

.contact-form-wrapper p,
.form-wrapper p{
    margin-bottom:28px;
}

.contact-form,
.form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    color:var(--navy);
    font-weight:900;
    font-size:.92rem;
}

.form-group input,
.form-group textarea,
.form-group select{
    width:100%;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px 16px;
    background:#FFFFFF;
    color:var(--text);
    font-size:1rem;
    outline:none;
    transition:.25s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.form-group textarea{
    min-height:150px;
    resize:vertical;
}

.form-note{
    color:var(--muted);
    font-size:.9rem;
    margin-top:4px;
}


/* =====================================================
   43. MAP / LOCATION BLOCK
===================================================== */

.map-section{
    background:#F8FAFC;
}

.map-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    padding:30px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.map-placeholder{
    min-height:360px;
    border-radius:24px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 38%),
        linear-gradient(135deg,#E0F2FE,#EFF6FF);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
}

.map-placeholder h3{
    margin-bottom:10px;
}

.map-placeholder p{
    max-width:520px;
    margin:0 auto;
}


/* =====================================================
   44. FAQ SECTION
===================================================== */

.faq-section{
    background:#FFFFFF;
}

.faq-list{
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:22px;
    padding:26px;
    box-shadow:var(--shadow-small);
}

.faq-item h3{
    font-size:1.16rem;
    margin-bottom:10px;
}

.faq-item p{
    margin:0;
}


/* =====================================================
   45. TESTIMONIALS / TRUST
===================================================== */

.testimonials-section,
.trust-section{
    background:#F8FAFC;
}

.testimonials-grid,
.trust-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.testimonial-card,
.trust-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:26px;
    padding:32px;
    box-shadow:var(--shadow);
}

.testimonial-card p,
.trust-card p{
    margin-bottom:18px;
}

.testimonial-author,
.trust-author{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.testimonial-author strong,
.trust-author strong{
    color:var(--navy);
}

.testimonial-author span,
.trust-author span{
    color:var(--muted);
    font-size:.9rem;
}


/* =====================================================
   46. PRICING / PACKAGES
===================================================== */

.pricing-section,
.packages-section{
    background:#FFFFFF;
}

.pricing-grid,
.packages-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.pricing-card,
.package-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:30px;
    padding:36px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transition:.25s ease;
}

.pricing-card:hover,
.package-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}

.pricing-card.featured,
.package-card.featured{
    border-color:var(--primary);
    box-shadow:0 25px 70px rgba(37,99,235,.18);
}

.pricing-card.featured::before,
.package-card.featured::before{
    content:"Most Popular";
    position:absolute;
    top:18px;
    right:-38px;
    background:var(--primary);
    color:#FFFFFF;
    padding:8px 42px;
    transform:rotate(35deg);
    font-size:.72rem;
    font-weight:900;
    text-transform:uppercase;
}

.price{
    margin:22px 0;
}

.price strong{
    color:var(--navy);
    font-size:2.4rem;
    font-weight:900;
}

.price span{
    color:var(--muted);
    font-size:.95rem;
}


/* =====================================================
   47. TABLES
===================================================== */

.table-section{
    background:#F8FAFC;
}

.table-wrapper{
    width:100%;
    overflow-x:auto;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
}

th,
td{
    padding:16px 18px;
    text-align:left;
    border-bottom:1px solid var(--border);
}

th{
    background:#F8FAFC;
    color:var(--navy);
    font-weight:900;
}

td{
    color:var(--text);
}

tr:last-child td{
    border-bottom:none;
}


/* =====================================================
   48. GENERAL CONTENT BLOCKS
===================================================== */

.content-section{
    background:#FFFFFF;
}

.content-section.alt{
    background:#F8FAFC;
}

.content-block{
    max-width:900px;
    margin:0 auto;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:30px;
    padding:44px;
    box-shadow:var(--shadow);
}

.content-block h2{
    margin-bottom:18px;
}

.content-block h3{
    margin-top:28px;
    margin-bottom:12px;
}

.content-block p{
    margin-bottom:18px;
}

.content-block ul,
.content-block ol{
    list-style:disc;
    margin:20px 0 20px 26px;
}

.content-block li{
    color:var(--text);
    margin-bottom:10px;
}

/* =====================================================
   49. KNOWLEDGE CENTRE
===================================================== */

.knowledge-section,
.blog-section,
.articles-section{
    background:#FFFFFF;
}

.knowledge-hero,
.blog-hero,
.article-list-hero{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:105px 0 85px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.11),transparent 36%),
        radial-gradient(circle at bottom left,rgba(56,189,248,.10),transparent 36%),
        linear-gradient(180deg,#FFFFFF,#F8FAFC);
    text-align:center;
}

.knowledge-hero h1,
.blog-hero h1,
.article-list-hero h1{
    max-width:850px;
    margin:0 auto 22px;
}

.knowledge-hero p,
.blog-hero p,
.article-list-hero p{
    max-width:760px;
    margin:0 auto;
    font-size:1.12rem;
}


/* =====================================================
   50. ARTICLE GRID
===================================================== */

.article-grid,
.blog-grid,
.knowledge-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.article-card,
.blog-card,
.knowledge-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.25s ease;
    display:flex;
    flex-direction:column;
    min-height:auto;
}

.article-card:hover,
.blog-card:hover,
.knowledge-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-large);
}

.article-image,
.blog-image,
.knowledge-image{
    width:100%;
    height:220px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    font-weight:900;
    overflow:hidden;
}

.article-image img,
.blog-image img,
.knowledge-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.article-content,
.blog-content,
.knowledge-content{
    padding:30px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.article-meta,
.blog-meta,
.knowledge-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
    color:var(--muted);
    font-size:.84rem;
}

.category,
.article-category,
.blog-category{
    display:inline-flex;
    padding:6px 11px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary-dark);
    font-size:.72rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.article-content h3,
.blog-content h3,
.knowledge-content h3{
    font-size:1.35rem;
    line-height:1.28;
    margin-bottom:13px;
}

.article-content p,
.blog-content p,
.knowledge-content p{
    margin-bottom:24px;
    flex:1;
}

.read-link,
.read-more,
.article-link{
    color:var(--primary);
    font-weight:900;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:.25s ease;
}

.read-link:hover,
.read-more:hover,
.article-link:hover{
    color:var(--primary-dark);
    transform:translateX(4px);
}


/* =====================================================
   51. FEATURED ARTICLE
===================================================== */

.featured-article,
.featured-box,
.featured-post{
    display:grid;
    grid-template-columns:1fr .7fr;
    gap:35px;
    align-items:center;
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:32px;
    padding:38px;
    box-shadow:var(--shadow);
    margin-bottom:65px;
    overflow:hidden;
}

.featured-content h3,
.featured-article-content h3,
.featured-post-content h3{
    font-size:2rem;
    line-height:1.2;
    margin-bottom:16px;
}

.featured-content p,
.featured-article-content p,
.featured-post-content p{
    margin-bottom:24px;
}

.featured-visual,
.featured-article-visual,
.featured-post-visual{
    min-height:260px;
    border-radius:24px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    font-size:4rem;
    font-weight:900;
    overflow:hidden;
}

.featured-visual img,
.featured-article-visual img,
.featured-post-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* =====================================================
   52. EMPTY STATES
===================================================== */

.empty-state,
.no-results,
.no-articles{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:28px;
    padding:65px 35px;
    text-align:center;
    box-shadow:var(--shadow);
}

.empty-state h3,
.no-results h3,
.no-articles h3{
    font-size:1.8rem;
    margin-bottom:12px;
}

.empty-state p,
.no-results p,
.no-articles p{
    max-width:620px;
    margin:0 auto;
}


/* =====================================================
   53. PUBLIC ARTICLE PAGE
===================================================== */

.article-hero{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:95px 0 60px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.11),transparent 36%),
        radial-gradient(circle at bottom left,rgba(56,189,248,.10),transparent 36%),
        linear-gradient(180deg,#FFFFFF,#F8FAFC);
}

.article-hero h1,
.article-hero h2{
    max-width:900px;
    margin-bottom:24px;
}

.article-hero .summary,
.article-summary{
    max-width:820px;
    color:var(--muted);
    font-size:1.16rem;
    margin-bottom:28px;
}

.article-hero .meta,
.article-page-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    color:var(--muted);
    font-size:.95rem;
}

.article-hero .meta span,
.article-page-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.article-main-image,
.article-page-image{
    margin-top:42px;
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--shadow-large);
    background:#FFFFFF;
    border:1px solid var(--border);
}

.article-main-image img,
.article-page-image img{
    width:100%;
    display:block;
    max-height:460px;
    object-fit:cover;
}

.article-placeholder{
    min-height:300px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#FFFFFF;
    font-size:5rem;
    font-weight:900;
    letter-spacing:.05em;
}


/* =====================================================
   54. ARTICLE BODY LAYOUT
===================================================== */

.article-wrapper,
.article-page-wrapper{
    padding:60px 0 90px;
    background:#F8FAFC;
}

.article-layout,
.article-page-layout{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:38px;
    align-items:start;
}

.article-page-card,
.article-body-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:30px;
    padding:50px;
    box-shadow:var(--shadow);
}

.article-body{
    color:var(--text);
    font-size:1.08rem;
    line-height:1.8;
    white-space:pre-line;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4{
    color:var(--navy);
    line-height:1.2;
    margin-top:32px;
    margin-bottom:16px;
}

.article-body h1{
    font-size:2.4rem;
}

.article-body h2{
    font-size:2rem;
}

.article-body h3{
    font-size:1.55rem;
}

.article-body p{
    margin-bottom:20px;
}

.article-body ul,
.article-body ol{
    list-style:disc;
    margin:20px 0 20px 28px;
}

.article-body li{
    margin-bottom:10px;
}

.article-body strong{
    color:var(--navy);
}

.article-footer-actions{
    margin-top:42px;
    padding-top:28px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}


/* =====================================================
   55. ARTICLE SIDEBAR
===================================================== */

.sidebar,
.article-sidebar{
    position:sticky;
    top:110px;
}

.side-card,
.sidebar-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:24px;
    padding:26px;
    box-shadow:var(--shadow);
    margin-bottom:24px;
}

.side-card h3,
.sidebar-card h3{
    font-size:1.18rem;
    margin-bottom:12px;
}

.side-card p,
.sidebar-card p{
    font-size:.95rem;
    margin-bottom:18px;
}

.side-meta,
.sidebar-meta{
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:.92rem;
    color:var(--muted);
}

.side-meta strong,
.sidebar-meta strong{
    color:var(--navy);
}

.full-btn{
    width:100%;
    margin-top:10px;
}


/* =====================================================
   56. CMS ADMIN PUBLIC TEMPLATE SUPPORT
===================================================== */

.admin-page{
    background:#F8FAFC;
    min-height:100vh;
}

.admin-container{
    width:min(1180px,92%);
    margin:0 auto;
    padding:50px 0;
}

.admin-card{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:34px;
}

.admin-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.admin-header h1,
.admin-header h2{
    margin-bottom:8px;
}

.admin-header p{
    margin:0;
}

.admin-table{
    width:100%;
    overflow-x:auto;
}

.admin-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}


/* =====================================================
   57. LOGIN PAGE SUPPORT
===================================================== */

.login-page{
    min-height:100vh;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 36%),
        linear-gradient(135deg,#0F172A,#1D4ED8);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.login-card{
    width:min(460px,100%);
    background:#FFFFFF;
    border-radius:30px;
    padding:38px;
    box-shadow:0 35px 90px rgba(0,0,0,.28);
}

.login-card h1,
.login-card h2{
    margin-bottom:12px;
}

.login-card p{
    margin-bottom:28px;
}


/* =====================================================
   58. FOOTER
===================================================== */

.footer,
.site-footer{
    background:var(--navy);
    color:#FFFFFF;
    padding:60px 0 28px;
    overflow:hidden;
}

.footer-grid,
.footer-content{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:36px;
    margin-bottom:42px;
}

.footer-brand h2,
.footer-brand h3{
    color:#FFFFFF;
    margin-bottom:12px;
}

.footer-brand p{
    color:#CBD5E1;
    max-width:420px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.footer-logo img{
    width:54px;
    height:54px;
    object-fit:contain;
}

.footer-logo-text h2{
    color:#FFFFFF;
    font-size:1.25rem;
    margin:0 0 4px;
}

.footer-logo-text span{
    color:#CBD5E1;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.footer-column h3,
.footer-column h4{
    color:#FFFFFF;
    font-size:1.08rem;
    margin-bottom:16px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-links a,
.footer-column a{
    color:#CBD5E1;
    font-size:.95rem;
    transition:.25s ease;
}

.footer-links a:hover,
.footer-column a:hover{
    color:#FFFFFF;
    transform:translateX(3px);
}

.footer-column p{
    color:#CBD5E1;
    margin-bottom:10px;
    font-size:.95rem;
}

.footer-bottom{
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
}

.footer-bottom p{
    color:#CBD5E1;
    margin:0;
    font-size:.92rem;
}

.footer-bottom-links{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.footer-bottom-links a{
    color:#CBD5E1;
    font-size:.92rem;
}

.footer-bottom-links a:hover{
    color:#FFFFFF;
}


/* =====================================================
   59. SIMPLE FOOTER FALLBACK
===================================================== */

.footer > .container > p,
.site-footer > .container > p{
    color:#CBD5E1;
    margin:0;
    text-align:center;
}


/* =====================================================
   60. NEWSLETTER / SUBSCRIBE
===================================================== */

.newsletter-section{
    background:#F8FAFC;
}

.newsletter-box{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:34px;
    padding:48px;
    color:#FFFFFF;
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:36px;
    align-items:center;
    overflow:hidden;
}

.newsletter-box h2{
    color:#FFFFFF;
    margin-bottom:12px;
}

.newsletter-box p{
    color:rgba(255,255,255,.9);
    margin:0;
}

.newsletter-form{
    display:flex;
    gap:12px;
    background:#FFFFFF;
    border-radius:18px;
    padding:8px;
}

.newsletter-form input{
    flex:1;
    border:none;
    outline:none;
    padding:12px 14px;
    font-size:1rem;
    color:var(--text);
}

.newsletter-form .btn{
    min-height:46px;
}


/* =====================================================
   61. IMAGE / LOGO SAFETY
===================================================== */

.logo img,
.brand img,
.footer-logo img{
    margin:0;
    padding:0;
    object-fit:contain;
}

img[src*="logo"]{
    object-fit:contain;
}

img[src=""],
img:not([src]){
    display:none;
}

/* =====================================================
   62. GLOBAL OVERFLOW PROTECTION
===================================================== */

html,
body{
    overflow-x:hidden !important;
}

body{
    min-width:0;
}

main,
section,
header,
footer,
.container,
.container-small,
.container-wide{
    max-width:100%;
}

.grid > *,
.grid-2 > *,
.grid-3 > *,
grid-4 > *,
.hero-grid > *,
.hero-container > *,
.hero-layout > *,
.home-hero-grid > *,
.page-hero-grid > *,
product-hero-grid > *,
solution-hero-grid > *,
.split-grid > *,
.two-column > *,
.content-grid > *,
.solution-row > *,
.service-row > *,
.feature-row > *,
.platform-row > *,
.home-solution-row > *,
.solutions-row > *,
.about-grid > *,
.contact-grid > *,
footer-grid > *,
.footer-content > *{
    min-width:0;
}


/* =====================================================
   63. LAPTOP / SMALL DESKTOP
===================================================== */

@media(max-width:1200px){

    .nav-menu,
    .nav-links{
        gap:18px;
    }

    .nav-link,
    .nav-links a{
        font-size:.86rem;
    }

    .nav-actions .btn{
        padding:12px 18px;
        font-size:.9rem;
    }

    .hero-grid,
    .hero-container,
    .hero-layout,
    .home-hero-grid,
    .page-hero-grid,
    .product-hero-grid,
    .solution-hero-grid,
    .split-grid,
    .two-column,
    .content-grid,
    .solution-row,
    .service-row,
    .feature-row,
    .platform-row,
    .home-solution-row,
    .solutions-row{
        gap:45px;
    }

}


/* =====================================================
   64. TABLET
===================================================== */

@media(max-width:992px){

    section{
        padding:65px 0;
    }

    .hero,
    .home-hero,
    .page-hero,
    .about-hero,
    .solutions-hero,
    .inspection-hero,
    .inspectionos-hero,
    .mednote-hero,
    .edunote-hero,
    .contact-hero,
    .knowledge-hero,
    .blog-hero,
    .article-list-hero{
        padding:85px 0 70px;
    }

    .navbar{
        min-height:auto;
        padding:16px 0;
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .logo,
    .brand{
        width:100%;
    }

    .nav-menu,
    .nav-links{
        width:100%;
        justify-content:flex-start;
        gap:14px 18px;
    }

    .nav-actions{
        width:100%;
        justify-content:flex-start;
    }

    .nav-actions .btn{
        min-height:46px;
    }

    .hero-grid,
    .hero-container,
    .hero-layout,
    .home-hero-grid,
    .page-hero-grid,
    .product-hero-grid,
    .solution-hero-grid,
    .split-grid,
    .two-column,
    .content-grid,
    .solution-row,
    .service-row,
    .feature-row,
    .platform-row,
    .home-solution-row,
    .solutions-row,
    .intro-grid,
    .overview-grid,
    .home-intro-grid,
    .service-detail-grid,
    .solution-detail-grid,
    .product-detail-grid,
    .product-overview-grid,
    .platform-overview-grid,
    .about-grid,
    .founder-grid,
    .leadership-grid,
    .contact-grid,
    .newsletter-box{
        grid-template-columns:1fr;
        gap:38px;
    }

    .hero-content,
    .home-hero-content,
    .page-hero-content,
    .solution-content,
    .service-content,
    .feature-content,
    .platform-content,
    .split-content,
    .intro-content,
    .overview-content,
    .home-intro-content,
    .product-content,
    .about-content,
    .contact-info,
    .founder-content,
    .leadership-content{
        max-width:100%;
    }

    .hero-visual,
    .home-hero-visual,
    .page-hero-visual,
    .solution-visual,
    .service-visual,
    .feature-visual,
    .platform-visual,
    .split-visual,
    .intro-visual,
    .overview-visual,
    .home-intro-visual,
    .product-visual,
    .about-visual,
    .service-detail-visual,
    .solution-detail-visual,
    .product-detail-visual{
        max-width:100%;
        margin-left:0;
        margin-right:0;
    }

    .grid-4,
    .feature-strip-grid,
    .value-strip-grid,
    .trust-strip-grid,
    .process-grid,
    .steps-grid,
    .how-grid,
    .industries-grid,
    .target-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .grid-3,
    .platforms-grid,
    .products-grid,
    .solutions-grid,
    .services-grid,
    .solution-category-grid,
    .features-grid,
    .benefits-grid,
    .why-grid,
    .why-choose-grid,
    .testimonials-grid,
    .trust-grid,
    .pricing-grid,
    .packages-grid,
    .article-grid,
    .blog-grid,
    .knowledge-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-article,
    .featured-box,
    .featured-post{
        grid-template-columns:1fr;
    }

    .article-layout,
    .article-page-layout{
        grid-template-columns:1fr;
    }

    .sidebar,
    .article-sidebar{
        position:relative;
        top:auto;
    }

    .footer-grid,
    .footer-content{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   65. MOBILE
===================================================== */

@media(max-width:768px){

    section{
        padding:55px 0;
    }

    .container,
    .container-small,
    .container-wide{
        width:92%;
    }

    .hero,
    .home-hero,
    .page-hero,
    .about-hero,
    .solutions-hero,
    .inspection-hero,
    .inspectionos-hero,
    .mednote-hero,
    .edunote-hero,
    .contact-hero,
    .knowledge-hero,
    .blog-hero,
    .article-list-hero{
        padding:70px 0 55px;
        text-align:left;
    }

    .hero h1,
    .home-hero h1,
    .page-hero h1,
    .hero-content h1,
    .home-hero-content h1,
    .page-hero-content h1{
        font-size:2.45rem;
        line-height:1.12;
        letter-spacing:-.035em;
    }

    h1{
        font-size:2.45rem;
        line-height:1.12;
    }

    h2{
        font-size:2.05rem;
        line-height:1.15;
    }

    h3{
        font-size:1.38rem;
    }

    p,
    .lead,
    .section-lead{
        font-size:1rem;
    }

    .section-title,
    .section-header,
    .solutions-intro{
        text-align:left;
        margin-left:0;
        margin-right:0;
        margin-bottom:34px;
    }

    .section-title p,
    .section-header p,
    .solutions-intro p{
        margin-left:0;
        margin-right:0;
    }

    .navbar{
        padding:14px 0;
        gap:14px;
    }

    .logo-image,
    .brand-logo{
        width:46px;
        height:46px;
        max-width:46px;
        max-height:46px;
    }

    .logo-text h2,
    .logo-text h1,
    .brand-text h1,
    .brand-text h2{
        font-size:1.06rem;
    }

    .logo-text span,
    .brand-text span{
        font-size:.58rem;
        letter-spacing:.07em;
    }

    .nav-menu,
    .nav-links{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding-top:8px;
    }

    .nav-link,
    .nav-links a{
        font-size:.94rem;
    }

    .nav-actions{
        display:none;
    }

    .mobile-toggle{
        display:none;
    }

    .btn-group,
    .hero-actions,
    .cta-actions,
    .card-actions{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .btn{
        width:100%;
    }

    .hero-stats,
    .stats-row,
    .stats-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .platforms-grid,
    .products-grid,
    .solutions-grid,
    .services-grid,
    .solution-category-grid,
    .features-grid,
    .benefits-grid,
    .why-grid,
    .why-choose-grid,
    .testimonials-grid,
    .trust-grid,
    .pricing-grid,
    .packages-grid,
    .article-grid,
    .blog-grid,
    .knowledge-grid,
    .feature-strip-grid,
    .value-strip-grid,
    .trust-strip-grid,
    .process-grid,
    .steps-grid,
    .how-grid,
    .industries-grid,
    .target-grid,
    .mission-grid,
    .vision-grid,
    .values-grid,
    .credentials-grid,
    .school-modules,
    .edunote-modules,
    .dashboard-metrics{
        grid-template-columns:1fr;
    }

    .card,
    .info-card,
    .feature-card,
    .service-card,
    .solution-card,
    .product-card,
    .platform-card,
    .solution-category-card,
    .feature-item,
    .benefit-card,
    .why-card,
    .why-choose-card,
    .process-card,
    .step-card,
    .how-card,
    .pricing-card,
    .package-card,
    .contact-form-wrapper,
    .form-wrapper,
    .content-block,
    .article-page-card,
    .article-body-card{
        padding:28px;
        border-radius:24px;
    }

    .hero-card,
    .home-hero-card,
    .visual-card,
    .product-card-large,
    .platform-card-large,
    .about-card{
        padding:28px;
        border-radius:26px;
    }

    .featured-article,
    .featured-box,
    .featured-post{
        padding:28px;
        border-radius:26px;
    }

    .featured-visual,
    .featured-article-visual,
    .featured-post-visual{
        min-height:220px;
    }

    .article-image,
    .blog-image,
    .knowledge-image{
        height:200px;
    }

    .article-wrapper,
    .article-page-wrapper{
        padding:45px 0 65px;
    }

    .article-footer-actions{
        flex-direction:column;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .timeline-item{
        grid-template-columns:1fr;
        gap:14px;
    }

    .newsletter-box{
        padding:34px;
        text-align:left;
    }

    .newsletter-form{
        flex-direction:column;
        background:transparent;
        padding:0;
    }

    .newsletter-form input{
        border-radius:14px;
        min-height:50px;
    }

    .cta,
    .cta-section,
    .final-cta{
        text-align:left;
        padding:65px 0;
    }

    .cta p,
    .cta-section p,
    .final-cta p{
        margin-left:0;
    }

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

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}


/* =====================================================
   66. SMALL MOBILE
===================================================== */

@media(max-width:480px){

    .container,
    .container-small,
    .container-wide{
        width:90%;
    }

    section{
        padding:48px 0;
    }

    .hero,
    .home-hero,
    .page-hero,
    .about-hero,
    .solutions-hero,
    .inspection-hero,
    .inspectionos-hero,
    .mednote-hero,
    .edunote-hero,
    .contact-hero,
    .knowledge-hero,
    .blog-hero,
    .article-list-hero{
        padding:62px 0 48px;
    }

    h1,
    .hero h1,
    .home-hero h1,
    .page-hero h1,
    .hero-content h1,
    .home-hero-content h1,
    .page-hero-content h1{
        font-size:2.05rem;
    }

    h2{
        font-size:1.75rem;
    }

    h3{
        font-size:1.28rem;
    }

    .logo,
    .brand{
        gap:10px;
    }

    .logo-image,
    .brand-logo{
        width:42px;
        height:42px;
        max-width:42px;
        max-height:42px;
    }

    .logo-text h2,
    .logo-text h1,
    .brand-text h1,
    .brand-text h2{
        font-size:.96rem;
    }

    .logo-text span,
    .brand-text span{
        font-size:.52rem;
        letter-spacing:.055em;
    }

    .badge,
    .section-badge,
    .hero-badge,
    .label{
        font-size:.68rem;
        padding:8px 12px;
    }

    .card,
    .info-card,
    .feature-card,
    .service-card,
    .solution-card,
    .product-card,
    .platform-card,
    .solution-category-card,
    .feature-item,
    .benefit-card,
    .why-card,
    .why-choose-card,
    .process-card,
    .step-card,
    .how-card,
    .pricing-card,
    .package-card,
    .contact-form-wrapper,
    .form-wrapper,
    .content-block,
    .article-page-card,
    .article-body-card,
    .hero-card,
    .home-hero-card,
    .visual-card,
    .product-card-large,
    .platform-card-large,
    .about-card{
        padding:24px;
    }

    .article-content,
    .blog-content,
    .knowledge-content{
        padding:24px;
    }

    .article-image,
    .blog-image,
    .knowledge-image{
        height:180px;
    }

    .article-placeholder{
        min-height:230px;
        font-size:3.5rem;
    }

    .footer,
    .site-footer{
        padding:45px 0 24px;
    }

}


/* =====================================================
   67. VERY SMALL SCREENS
===================================================== */

@media(max-width:360px){

    .logo-text span,
    .brand-text span{
        display:none;
    }

    .logo-text h2,
    .logo-text h1,
    .brand-text h1,
    .brand-text h2{
        font-size:1rem;
    }

    h1{
        font-size:1.85rem;
    }

    h2{
        font-size:1.55rem;
    }

}

/* =====================================================
   68. FINAL SPACING CONTROL
===================================================== */

section:first-of-type{
    margin-top:0;
}

section:last-of-type{
    margin-bottom:0;
}

.hero + section,
.home-hero + section,
.page-hero + section,
.about-hero + section,
.solutions-hero + section,
.inspection-hero + section,
.inspectionos-hero + section,
.mednote-hero + section,
.edunote-hero + section,
.contact-hero + section{
    padding-top:75px;
}

section + section{
    margin-top:0;
}

.container > *:last-child,
.container-small > *:last-child,
.container-wide > *:last-child{
    margin-bottom:0;
}


/* =====================================================
   69. IMAGE AND VIDEO SAFETY
===================================================== */

img,
video,
iframe{
    max-width:100%;
}

iframe{
    border:0;
}

.image-card,
.visual-image,
.section-image,
.page-image{
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.image-card img,
.visual-image img,
.section-image img,
.page-image img{
    width:100%;
    height:auto;
    display:block;
}


/* =====================================================
   70. OLD CLASS COMPATIBILITY SUPPORT
===================================================== */

.hero-section{
    width:100%;
    position:relative;
    overflow:hidden;
    padding:110px 0 90px;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.10),transparent 34%),
        radial-gradient(circle at bottom left,rgba(56,189,248,.10),transparent 34%),
        linear-gradient(180deg,#FFFFFF,#F8FAFC);
}

.hero-section .container{
    position:relative;
    z-index:2;
}

.services{
    background:#FFFFFF;
}

.products{
    background:#F8FAFC;
}

.about-preview{
    background:#FFFFFF;
}

.contact-preview{
    background:#F8FAFC;
}

.product-grid,
.service-grid,
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.product,
.service,
.feature{
    background:#FFFFFF;
    border:1px solid var(--border);
    border-radius:28px;
    padding:34px;
    box-shadow:var(--shadow);
    transition:.25s ease;
}

.product:hover,
.service:hover,
.feature:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-large);
}


/* =====================================================
   71. OLD FOOTER COMPATIBILITY
===================================================== */

.footer-content{
    width:100%;
}

.footer h2,
.footer h3,
.footer h4,
.site-footer h2,
.site-footer h3,
.site-footer h4{
    color:#FFFFFF;
}

.footer p,
.site-footer p{
    color:#CBD5E1;
}

.footer a,
.site-footer a{
    color:#CBD5E1;
}

.footer a:hover,
.site-footer a:hover{
    color:#FFFFFF;
}


/* =====================================================
   72. ANIMATIONS
===================================================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

@keyframes floatSoft{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

.fade-up{
    animation:fadeUp .7s ease both;
}

.fade-in{
    animation:fadeIn .7s ease both;
}

.float-soft{
    animation:floatSoft 5s ease-in-out infinite;
}


/* =====================================================
   73. SCROLL REVEAL FALLBACK
===================================================== */

.reveal,
.scroll-reveal,
.animate-on-scroll{
    opacity:1;
    transform:none;
}

.reveal.active,
.scroll-reveal.active,
.animate-on-scroll.active{
    opacity:1;
    transform:none;
}


/* =====================================================
   74. FORMS FINAL POLISH
===================================================== */

input::placeholder,
textarea::placeholder{
    color:#94A3B8;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled{
    opacity:.65;
    cursor:not-allowed;
}

button{
    border:none;
}

.form-success{
    background:#DCFCE7;
    border:1px solid #86EFAC;
    color:#166534;
    border-radius:16px;
    padding:16px 18px;
    font-weight:800;
}

.form-error{
    background:#FEE2E2;
    border:1px solid #FCA5A5;
    color:#991B1B;
    border-radius:16px;
    padding:16px 18px;
    font-weight:800;
}


/* =====================================================
   75. LINK AND BUTTON SAFETY
===================================================== */

a,
button,
.btn{
    -webkit-tap-highlight-color:transparent;
}

.btn,
.nav-link,
.nav-links a,
.read-link,
.read-more,
.article-link{
    text-decoration:none;
}

.btn:focus,
.nav-link:focus,
.nav-links a:focus,
input:focus,
textarea:focus,
select:focus{
    outline:none;
}


/* =====================================================
   76. TABLET FINAL CLEANUP
===================================================== */

@media(max-width:992px){

    .product-grid,
    .service-grid,
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hero-section{
        padding:85px 0 70px;
    }

    .hero + section,
    .home-hero + section,
    .page-hero + section,
    .about-hero + section,
    .solutions-hero + section,
    .inspection-hero + section,
    .inspectionos-hero + section,
    .mednote-hero + section,
    .edunote-hero + section,
    .contact-hero + section{
        padding-top:65px;
    }

}


/* =====================================================
   77. MOBILE FINAL CLEANUP
===================================================== */

@media(max-width:768px){

    .product-grid,
    .service-grid,
    .feature-grid{
        grid-template-columns:1fr;
    }

    .hero-section{
        padding:70px 0 55px;
        text-align:left;
    }

    .hero + section,
    .home-hero + section,
    .page-hero + section,
    .about-hero + section,
    .solutions-hero + section,
    .inspection-hero + section,
    .inspectionos-hero + section,
    .mednote-hero + section,
    .edunote-hero + section,
    .contact-hero + section{
        padding-top:55px;
    }

    .section-title,
    .section-header{
        margin-bottom:32px;
    }

    .preview-header,
    .dashboard-header,
    .product-preview-header,
    .inspection-dashboard-header,
    .inspectionos-dashboard-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .inspection-list-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .contact-detail{
        flex-direction:column;
    }

}


/* =====================================================
   78. PRINT SAFETY
===================================================== */

@media print{

    .header,
    .site-header,
    .nav-menu,
    .nav-links,
    .nav-actions,
    .mobile-toggle,
    .footer,
    .site-footer,
    .cta,
    .cta-section,
    .final-cta{
        display:none!important;
    }

    body{
        background:#FFFFFF;
        color:#000000;
    }

    section{
        padding:20px 0;
    }

    .card,
    .article-page-card,
    .article-body-card,
    .content-block{
        box-shadow:none;
        border:1px solid #CCCCCC;
    }

}


/* =====================================================
   79. FINAL BLANK SPACE PROTECTION
===================================================== */

.hero,
.home-hero,
.page-hero,
.hero-section,
.about-hero,
.solutions-hero,
.inspection-hero,
.inspectionos-hero,
.mednote-hero,
.edunote-hero,
.contact-hero,
.knowledge-hero,
.blog-hero,
.article-list-hero{
    min-height:auto!important;
}

.card,
.info-card,
.feature-card,
.service-card,
.solution-card,
.product-card,
.platform-card,
.article-card,
.blog-card,
.knowledge-card,
.hero-card,
.home-hero-card,
.visual-card{
    min-height:auto!important;
}

section:empty,
div:empty:not(.logo-image):not(.brand-logo):not(.card-icon):not(.feature-icon):not(.service-icon):not(.solution-icon):not(.product-icon):not(.platform-icon):not(.qr-preview):not(.article-placeholder){
    display:none;
}


/* =====================================================
   80. FINAL LOGO OVERRIDE
===================================================== */

.logo-image,
.brand-logo{
    width:58px!important;
    height:58px!important;
    max-width:58px!important;
    max-height:58px!important;
    object-fit:contain!important;
}

@media(max-width:768px){

    .logo-image,
    .brand-logo{
        width:46px!important;
        height:46px!important;
        max-width:46px!important;
        max-height:46px!important;
    }

}

@media(max-width:480px){

    .logo-image,
    .brand-logo{
        width:42px!important;
        height:42px!important;
        max-width:42px!important;
        max-height:42px!important;
    }

}


/* =====================================================
   81. FINAL END OF FILE
===================================================== */
/* =====================================================
   FINAL MISSING IMAGE FALLBACK FIX
===================================================== */

.image-fallback{
    width:100%;
    min-height:260px;
    border-radius:30px;
    border:1px solid #E2E8F0;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 38%),
        linear-gradient(135deg,#FFFFFF,#EFF6FF);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:35px;
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    color:#0F172A;
    font-weight:900;
    font-size:1.45rem;
}

.image-fallback span{
    display:block;
    max-width:420px;
}

img.broken-image{
    display:none!important;
}

/* =====================================================
   FINAL BROKEN IMAGE AND VISUAL FALLBACK FIX
===================================================== */

img:not(.logo-image):not(.brand-logo):not(.footer-logo img){
    max-width:100%;
}

img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="AI Innovations Labs"],
img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="Zander Cromhout"],
img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="QR Verification"],
img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="EduNote"],
img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="MedNote"],
img:not(.logo-image):not(.brand-logo):not(.footer-logo img)[alt="InspectionOS"]{
    display:none!important;
}

.visual-placeholder,
.clean-visual-card{
    width:100%;
    min-height:300px;
    border-radius:30px;
    border:1px solid #E2E8F0;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 38%),
        linear-gradient(135deg,#FFFFFF,#EFF6FF);
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:36px;
}

.visual-placeholder-content{
    max-width:440px;
}

.visual-placeholder-content h3{
    color:#0F172A;
    font-size:1.9rem;
    margin-bottom:12px;
}

.visual-placeholder-content p{
    color:#64748B;
    font-size:1rem;
    line-height:1.7;
    margin:0;
}

.visual-placeholder-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    background:linear-gradient(135deg,#2563EB,#38BDF8);
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:900;
    margin:0 auto 22px;
}

/* =====================================================
   FIXED VISUAL PLACEHOLDER CARDS
===================================================== */

.visual-placeholder{
    width:100%;
    min-height:300px;
    border-radius:30px;
    border:1px solid #E2E8F0;
    background:
        radial-gradient(circle at top right,rgba(37,99,235,.18),transparent 38%),
        linear-gradient(135deg,#FFFFFF,#EFF6FF);
    box-shadow:0 18px 45px rgba(15,23,42,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:36px;
}

.visual-placeholder-content{
    max-width:440px;
}

.visual-placeholder-icon{
    width:74px;
    height:74px;
    border-radius:22px;
    background:linear-gradient(135deg,#2563EB,#38BDF8);
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:900;
    margin:0 auto 22px;
}

.visual-placeholder-content h3{
    color:#0F172A;
    font-size:1.9rem;
    margin-bottom:12px;
}

.visual-placeholder-content p{
    color:#64748B;
    font-size:1rem;
    line-height:1.7;
    margin:0;
}