/* Eye Tracking Solutions — style.css
   Paleta: #C8001A red, #F5F4F0 off-white, #0C0C0B near-black
   Font: Neue Haas Grotesk Display Pro (local)
   -------------------------------------------------- */

/* FONTS */
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Roman.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Mediu.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'NHD'; src: url('/fonts/NeueHaasDisplay-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --red:       #C8001A;
    --off-white: #F5F4F0;
    --black:     #0C0C0B;
    --gray:      #6B6B69;
    --gray-lt:   #D6D5D0;

    --font:      'NHD', -apple-system, sans-serif;
    --ease:      cubic-bezier(.16,1,.3,1);

    --max-w: 1280px;
    --pad:   clamp(1.25rem, 4vw, 3rem);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--black);
    background: var(--off-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* BASELINE — signature detail */
body::after {
    content: '';
    position: fixed;
    top: 47vh;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--red);
    opacity: .12;
    pointer-events: none;
    z-index: 9999;
}

/* CONTAINER */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* TYPOGRAPHY */
h1, h2, h3, h4 {
    line-height: 1.15;
    font-weight: 500;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 300; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 400; margin-bottom: 1.25rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; margin-bottom: .75rem; }
h4 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }

p { margin-bottom: 1rem; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1.75rem;
    font-family: var(--font);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .2s var(--ease);
}
.btn-primary  { background: var(--red);   color: #fff; border-color: var(--red); }
.btn-primary:hover { background: #a80016; border-color: #a80016; text-decoration: none; }
.btn-ghost    { background: transparent; color: var(--black); border-color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--off-white); text-decoration: none; }
.btn-outline  { background: transparent; color: var(--red); border-color: var(--red); }
.btn-outline:hover { background: var(--red); color: #fff; text-decoration: none; }
.btn-sm { padding: .5rem 1.25rem; font-size: .8rem; }
.btn-lg { padding: 1rem 2.5rem; font-size: 1rem; }

/* HEADER / NAV */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--off-white);
    border-bottom: 1px solid var(--gray-lt);
}
.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad);
    height: 64px;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.logo img { display: block; }
.main-nav { flex: 1; }
.main-nav ul { display: flex; gap: 0; }
.main-nav a {
    display: block;
    padding: .5rem .85rem;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    transition: color .15s;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--red); }
.nav-cta {
    flex-shrink: 0;
    padding: .5rem 1.25rem;
    border: 1.5px solid var(--black);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--black);
    transition: all .15s;
}
.nav-cta:hover { background: var(--black); color: var(--off-white); text-decoration: none; }
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
}
.nav-toggle span {
    display: block;
    width: 24px; height: 1.5px;
    background: var(--black);
}

/* HERO */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 8rem var(--pad);
}
.hero-inner { max-width: var(--max-w); margin: 0 auto; width: 100%; }
.hero h1 { max-width: 14ch; margin-bottom: 1.5rem; }
.hero-lead { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 300; max-width: 40ch; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* SECTIONS */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section + .section { border-top: 1px solid var(--gray-lt); }
.section-lead { font-size: 1.2rem; font-weight: 300; max-width: 60ch; margin-bottom: 2rem; }
.section-more { margin-top: 2.5rem; }
.section-cta { text-align: center; }
.section-cta h2 { margin-bottom: 1rem; }
.section-cta p { max-width: 50ch; margin: 0 auto 2rem; }

/* PAGE HEADER */
.page-header { padding: 5rem 0 3rem; }
.page-header h1 { margin-bottom: .75rem; }
.page-lead { font-size: 1.1rem; font-weight: 300; color: var(--gray); }

/* PROCESS STEPS */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.step { position: relative; padding-top: 1rem; border-top: 2px solid var(--red); }
.step-num { display: block; font-size: 3rem; font-weight: 100; color: var(--red); opacity: .4; line-height: 1; margin-bottom: .5rem; }

/* GRIDS */
.labs-grid,
.applications-grid,
.features-grid,
.topics-grid,
.benefits-grid,
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.option-card { padding: 1.75rem; border: 1px solid var(--gray-lt); }
.option-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.br-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 1rem 0 2rem; }

/* DEVICES */
.devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; }
.device-card { background: #fff; display: flex; flex-direction: column; }
.device-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--off-white); padding: 1.5rem; }
.device-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.device-brand { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.device-category { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.device-card h3 { font-size: 1.1rem; margin: 0; }
.device-card p { font-size: .9rem; color: var(--gray); flex: 1; }
.device-card .btn-sm { align-self: flex-start; margin-top: auto; }

/* DEVICE SINGLE */
.device-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 4rem 0; align-items: start; }
.device-image img { width: 100%; border-radius: 0; }
.device-intro h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 1rem; }
.device-excerpt { font-size: 1.1rem; font-weight: 300; margin-bottom: 2rem; }
.specs-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: .9rem; }
.specs-table caption { text-align: left; font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem; color: var(--gray); }
.specs-table tr { border-bottom: 1px solid var(--gray-lt); }
.specs-table th { font-weight: 400; color: var(--gray); padding: .6rem .5rem .6rem 0; width: 50%; text-align: left; }
.specs-table td { font-weight: 500; padding: .6rem 0; }
.device-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.device-description { padding: 3rem 0; border-top: 1px solid var(--gray-lt); }
.similar-devices { padding: 3rem 0; border-top: 1px solid var(--gray-lt); }

/* DEVICES LISTING */
.devices-group { margin-bottom: 4rem; }
.devices-group h2 { margin-bottom: 1.5rem; }
.cat-filter { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 3rem; }
.filter-btn { padding: .4rem 1rem; border: 1px solid var(--gray-lt); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--gray); text-decoration: none; transition: all .15s; }
.filter-btn.active, .filter-btn:hover { border-color: var(--red); color: var(--red); background: transparent; text-decoration: none; }

/* BLOG */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.post-card { background: #fff; display: flex; flex-direction: column; }
.post-card-img img { width: 100%; aspect-ratio: 5/3; object-fit: cover; display: block; }
.post-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.post-card h2, .post-card h3 { font-size: 1.1rem; font-weight: 500; }
.post-card h2 a, .post-card h3 a { color: var(--black); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--red); text-decoration: none; }
.post-card p { font-size: .9rem; color: var(--gray); flex: 1; }
.post-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--gray); }
.post-author::before { content: '— '; }
.tag-filter { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.tag { padding: .35rem .9rem; border: 1px solid var(--gray-lt); font-size: .78rem; font-weight: 500; color: var(--gray); text-decoration: none; transition: all .15s; }
.tag:hover, .tag-active { border-color: var(--red); color: var(--red); text-decoration: none; }
.pagination { display: flex; gap: .5rem; margin-top: 3rem; }
.page-num { padding: .5rem .9rem; border: 1px solid var(--gray-lt); font-size: .85rem; color: var(--black); text-decoration: none; }
.page-num.current, .page-num:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.no-results { color: var(--gray); }

/* POST SINGLE */
.post-single { padding: 4rem 0; }
.post-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray-lt); }
.post-header h1 { margin: 1rem 0; }
.post-excerpt { font-size: 1.15rem; font-weight: 300; color: var(--gray); }
.post-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.post-content { max-width: 72ch; }
.post-content h2 { margin-top: 2.5rem; }
.post-content h3 { margin-top: 1.75rem; }
.post-content p { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; list-style: disc; }
.post-content img { max-width: 100%; margin: 2rem 0; }
.post-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gray-lt); }

/* CONTACT */
.contact-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; padding: 2rem 0 5rem; align-items: start; }
.contact-info h2 { margin-bottom: 1.5rem; }
.contact-info h3 { margin-top: 2rem; margin-bottom: .75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.contact-info address { font-style: normal; }
.contact-info p { margin-bottom: .75rem; }
.contact-form-wrap h2 { margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; color: var(--gray); }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--gray-lt);
    background: #fff;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--black);
    transition: border-color .15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--red); }
.form-consent label { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-consent input { width: auto; flex-shrink: 0; }
.checkbox-label { cursor: pointer; }

/* FEATURE LIST */
.feature-list { padding-left: 1.25rem; list-style: disc; }
.feature-list li { padding: .4rem 0; }

/* QUOTE */
.section-quote { padding: 4rem 0; }
blockquote { border-left: 3px solid var(--red); padding: 1rem 0 1rem 2rem; }
blockquote p { font-size: 1.25rem; font-weight: 300; font-style: italic; margin-bottom: .75rem; }
cite { font-size: .85rem; font-weight: 500; color: var(--gray); }

/* FOOTER */
.site-footer { background: var(--black); color: var(--off-white); margin-top: 6rem; }
.footer-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 5rem var(--pad) 3rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
}
.footer-brand img { margin-bottom: 1rem; filter: brightness(0) invert(1); }
.footer-brand p { font-size: .9rem; color: #888; }
.footer-nav h3 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #888; margin-bottom: 1rem; }
.footer-nav li { margin-bottom: .5rem; }
.footer-nav a { color: var(--off-white); font-size: .9rem; text-decoration: none; }
.footer-nav a:hover { color: var(--red); }
.footer-contact h3 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #888; margin-bottom: 1rem; }
.footer-contact address { font-style: normal; font-size: .9rem; line-height: 1.8; }
.footer-contact a { color: var(--off-white); text-decoration: none; }
.footer-contact a:hover { color: var(--red); }
.footer-bottom {
    border-top: 1px solid #222;
    padding: 1.5rem var(--pad);
    max-width: var(--max-w);
    margin: 0 auto;
    font-size: .8rem;
    color: #555;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .device-hero { grid-template-columns: 1fr; gap: 2rem; }
    .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
    .main-nav { display: none; }
    .nav-toggle { display: flex; margin-left: auto; }
    .main-nav.open { display: block; position: absolute; top: 64px; left: 0; right: 0; background: var(--off-white); border-bottom: 1px solid var(--gray-lt); padding: 1rem 0; z-index: 99; }
    .main-nav.open ul { flex-direction: column; }
    .main-nav.open a { padding: .75rem var(--pad); }
    .nav-cta { display: none; }
    .hero { min-height: 60vh; padding: 5rem var(--pad); }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; padding: 3rem var(--pad) 2rem; }
    .process-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .process-steps { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; }
}