/**
 * Global CSS - LaserCleanerPro Design System  (Premium Industrial v2)
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

/* ========== 1. CSS Reset ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px; line-height: 1.65; color: #2b2f36; background: #fff;
    overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-accent); color: #fff; }

/* ========== 2. Design Tokens ========== */
:root {
    --brand-primary:   #0B1628;   /* deep navy */
    --brand-secondary: #00A6D6;   /* cyan */
    --brand-accent:    #FF7A1A;   /* orange CTA */
    --primary-dark:    #060c16;
    --secondary-dark:  #0089b3;
    --accent-dark:     #e5650a;
    --text-primary:    #131a24;
    --text-secondary:  #59636f;
    --text-light:      #8b929d;
    --bg-white:        #ffffff;
    --bg-light:        #f4f7fa;
    --bg-dark:         #0B1628;
    --border-color:    #e5e9ef;
    --success:         #1ba672;
    --error:           #dc3545;
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-body:    'Inter', sans-serif;
    --shadow-sm: 0 2px 10px rgba(11,22,40,.05);
    --shadow-md: 0 14px 40px -12px rgba(11,22,40,.18);
    --shadow-lg: 0 30px 70px -20px rgba(11,22,40,.30);
    --radius: 14px;
}

/* ========== 3. Typography ========== */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); letter-spacing: -.015em; color: var(--text-primary); }
h1 { font-size: clamp(2.3rem, 4vw, 3.4rem); font-weight: 700; line-height: 1.08; margin-bottom: 1.25rem; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 700; line-height: 1.18; margin-bottom: 1rem; }
h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.3; margin-bottom: .65rem; }
h4 { font-size: 1.15rem; font-weight: 600; line-height: 1.4; margin-bottom: .5rem; letter-spacing: -.01em; }
p  { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; color: var(--text-secondary); }
.lead { font-size: 1.16rem; line-height: 1.7; color: var(--text-secondary); font-weight: 400; }
a { color: var(--brand-secondary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--secondary-dark); }
strong { color: var(--text-primary); font-weight: 600; }

/* ========== 4. Spacing Utilities ========== */
.section-padding { padding: 6rem 0; position: relative; }
@media (max-width: 768px) { .section-padding { padding: 3.5rem 0; } }

/* ========== 5. Layout Utilities ========== */
.bg-light { background: var(--bg-light); }
.bg-navy  { background: var(--brand-primary); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy p { color: rgba(255,255,255,.74); }
/* subtle hairline divider between stacked light sections */
.section-padding + .section-padding::before {
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(1140px,90%); height:1px; background:var(--border-color);
}
.eyebrow {
    display: inline-flex; align-items:center; gap:.5rem;
    font-family: var(--font-heading); font-size: .78rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--brand-secondary); margin-bottom: .9rem;
}
.eyebrow::before { content:""; width:22px; height:2px; background:var(--brand-secondary); display:inline-block; }
.section-head { max-width: 740px; margin: 0 auto 3.25rem; text-align: center; }
.section-head .eyebrow { justify-content:center; }

/* ========== 6. Buttons ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: 14px 30px; font-size: .98rem; font-weight: 600; font-family: var(--font-body);
    text-align: center; border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer; border: 1.5px solid transparent; min-height: 50px; line-height: 1.2; letter-spacing:.005em;
}
.btn-primary   { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); box-shadow: 0 8px 22px -8px rgba(255,122,26,.7); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(255,122,26,.85); }
.btn-secondary { background: var(--brand-secondary); color: #fff; border-color: var(--brand-secondary); }
.btn-secondary:hover { background: var(--secondary-dark); border-color: var(--secondary-dark); color: #fff; transform: translateY(-2px); }
.btn-outline   { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline:hover { background: #fff; color: var(--brand-primary); border-color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; min-height: 40px; font-size: .88rem; border-radius: 8px; }

/* ========== 7. Cards ========== */
.card-base {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius);
    overflow: hidden; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
    height: 100%; position: relative;
}
.card-base::after {
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg,var(--brand-secondary),var(--brand-accent));
    transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.card-base:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-base:hover::after { transform: scaleX(1); }

/* ========== 8. Accessibility ========== */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--brand-primary); color: #fff; padding: 8px 14px; z-index: 10000; }
.skip-link:focus { top: 0; }

/* ========== 9. Images ========== */
img, .img-fluid { max-width: 100%; height: auto; }
.rounded, .img-fluid.rounded { border-radius: var(--radius) !important; }

/* ========== 10. Scroll reveal (driven by footer.js) ========== */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1 !important; transform:none !important; } }

/* ========== 11. Misc polish ========== */
.table-responsive { border-radius: var(--radius); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c4ccd6; border-radius: 6px; border:3px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-secondary); }