/* ==========================================================================
   Prejag Petrochem — design system
   Palette: asphalt black, paper white, brand green, road-marking yellow
   Type: Archivo Black (display) / Archivo (body) / IBM Plex Mono (data)
   Signature: the dashed road center-line
   ========================================================================== */

:root {
    --asphalt: #161814;
    --asphalt-2: #1e211c;
    --ink: #22261f;
    --paper: #f4f3ee;
    --paper-2: #eceade;
    --green: #308852;
    --green-deep: #1e5c38;
    --brown: #5b2a1d;
    --roadline: #f2c14e;
    --muted: #6d7268;
    --radius: 14px;
}

/* ---------- base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    font-family: 'Archivo', system-ui, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.display-font {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    letter-spacing: -0.015em;
    line-height: 1.02;
    text-transform: uppercase;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-deep); }

::selection { background: var(--roadline); color: var(--asphalt); }

/* ---------- signature: the road line ---------- */

.roadline {
    height: 4px;
    border: 0;
    margin: 0;
    opacity: 1;
    background-image: repeating-linear-gradient(90deg,
        var(--roadline) 0 42px, transparent 42px 74px);
}
.roadline--dark { background-image: repeating-linear-gradient(90deg, #3a3e36 0 42px, transparent 42px 74px); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--green);
}
.eyebrow::before {
    content: "";
    width: 42px;
    height: 4px;
    background: var(--roadline);
    display: inline-block;
}
.text-light-section .eyebrow { color: #8fd0a9; }

/* ---------- navbar ---------- */

.navbar-prejag {
    background: rgba(22, 24, 20, 0.92);
    backdrop-filter: blur(10px);
    padding-top: .9rem;
    padding-bottom: .9rem;
}
.navbar-prejag .navbar-brand img { height: 44px; }
.navbar-prejag .nav-link {
    color: #cfd2ca;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: 1.1rem;
    padding-bottom: .35rem;
    border-bottom: 3px solid transparent;
}
.navbar-prejag .nav-link:hover { color: #fff; border-bottom-color: rgba(242,193,78,.45); }
.navbar-prejag .nav-link.active { color: #fff; border-bottom-color: var(--roadline); }
.navbar-prejag .navbar-toggler { border-color: #3a3e36; }
.navbar-prejag .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(244,243,238,.85)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    background:
        radial-gradient(1100px 460px at 82% -10%, rgba(48,136,82,.20), transparent 60%),
        radial-gradient(800px 420px at -10% 110%, rgba(91,42,29,.25), transparent 55%),
        linear-gradient(180deg, var(--asphalt) 0%, var(--asphalt-2) 100%);
    color: var(--paper);
    overflow: hidden;
}
/* asphalt grain */
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 5px 5px;
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.6rem, 6.5vw, 5.2rem);
    color: #fff;
}
.hero h1 .accent { color: var(--roadline); }
.hero .lead-sub {
    color: #b9bdb3;
    max-width: 34rem;
    font-size: 1.06rem;
}

.btn-road {
    background: var(--green);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .8rem 1.7rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.btn-road:hover { background: var(--green-deep); color: #fff; }
.btn-road-outline {
    background: transparent;
    color: var(--paper);
    border: 1px solid #4a4e45;
    border-radius: 999px;
    padding: .8rem 1.7rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.btn-road-outline:hover { border-color: var(--roadline); color: var(--roadline); }

/* grades ticker */
.grades-strip {
    border-top: 1px solid #2c2f2a;
    border-bottom: 1px solid #2c2f2a;
    background: rgba(0,0,0,.25);
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
.grades-track {
    display: inline-block;
    padding: .9rem 0;
    animation: ticker 36s linear infinite;
}
.grades-track span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .8rem;
    letter-spacing: .18em;
    color: #9aa093;
    margin: 0 1.6rem;
}
.grades-track span b { color: var(--roadline); font-weight: 500; margin-right: 1.6rem; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- stats ---------- */

.stat .num {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.4rem;
    color: var(--green);
    line-height: 1;
}
.stat .lbl { color: var(--muted); }

/* ---------- sections ---------- */

.section { padding: 6rem 0; }
.section-dark { background: var(--asphalt); color: var(--paper); }
.section-dark h2, .section-dark h3 { color: #fff; }

h2.section-title {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    margin: .6rem 0 1.2rem;
}

/* about panel */
.about-panel {
    background: #fff;
    border-radius: var(--radius);
    padding: 2.6rem;
    box-shadow: 0 24px 60px -30px rgba(22,24,20,.25);
}
.est-chip {
    background: var(--asphalt);
    color: var(--paper);
    border-radius: var(--radius);
    padding: 1.6rem 1.8rem;
}
.est-chip .mono { color: var(--roadline); }

/* ---------- product cards ---------- */

.product-card {
    background: #fff;
    border: 1px solid #e3e1d6;
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -28px rgba(22,24,20,.35);
}
.product-card img { height: 260px; width: 100%; object-fit: cover; }
.product-card .card-road { height: 4px; background-image: repeating-linear-gradient(90deg, var(--roadline) 0 26px, transparent 26px 46px); }
.product-card h3 {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: 1.35rem;
}
.product-card .body { padding: 1.8rem; }
.product-link { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.product-link::after { content: " →"; }

/* ---------- team ---------- */

.team-card {
    background: #fff;
    border: 1px solid #e3e1d6;
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.team-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.6rem;
    flex: 0 0 84px;
}
.team-card h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.team-card .role { color: var(--muted); }

/* ---------- spec table ---------- */

.spec-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid #2c2f2a; }
.table-spec { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: .82rem; }
.table-spec thead th {
    background: #101210;
    color: var(--roadline);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    border-color: #2c2f2a;
    padding: .9rem 1rem;
    white-space: nowrap;
}
.table-spec tbody td {
    background: var(--asphalt-2);
    color: #cfd2ca;
    border-color: #2c2f2a;
    padding: .8rem 1rem;
}
.table-spec tbody td:first-child { color: #f4f3ee; }

/* ---------- contact ---------- */

.contact-info .item { display: flex; gap: 1rem; margin-bottom: 1.6rem; }
.contact-info .item i {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 12px;
    background: rgba(48,136,82,.14);
    color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.contact-info .item h4 { font-size: .8rem; font-family: 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.contact-info .item p, .contact-info .item a { margin: 0; color: var(--ink); }

.form-elite .form-control {
    background: #fff;
    border: 1px solid #dcd9cc;
    border-radius: 12px;
    padding: .95rem 1.1rem;
}
.form-elite .form-control:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 .2rem rgba(48,136,82,.15);
}
.form-elite .form-control::placeholder { color: #a3a79b; }

.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid #e3e1d6; }
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(35%); }

/* ---------- inner pages ---------- */

.page-hero {
    background: linear-gradient(180deg, var(--asphalt) 0%, var(--asphalt-2) 100%);
    color: var(--paper);
    padding: 7.5rem 0 3.5rem;
}
.page-hero h1 {
    font-family: 'Archivo Black', sans-serif;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: #fff;
}

.article-content { max-width: 60rem; }
.article-content h3 { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 1.25rem; margin: 2.6rem 0 1rem; }
.article-content p { color: #3c4038; line-height: 1.75; }
.article-content strong { color: var(--ink); }
.article-content img {
    max-width: min(300px, 42%);
    height: auto;
    border-radius: var(--radius);
    border: 1px solid #e3e1d6;
    margin: 0 0 1.2rem 1.4rem;
    float: right;
}
.article-content hr {
    border: 0; opacity: 1; height: 4px; margin: 2.4rem 0;
    background-image: repeating-linear-gradient(90deg, #ddd9c9 0 32px, transparent 32px 56px);
}
.article-content .table { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; background: #fff; }
.article-content .table thead th { background: var(--asphalt); color: var(--roadline); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.article-content figure { overflow-x: auto; }

@media (max-width: 767px) {
    .article-content img { float: none; display: block; margin: 0 0 1.2rem; max-width: 100%; }
    .section { padding: 4rem 0; }
}

/* ---------- footer ---------- */

footer.footer-prejag {
    background: #101210;
    color: #9aa093;
    padding: 3rem 0 2rem;
}
footer.footer-prejag a { color: #cfd2ca; }
footer.footer-prejag a:hover { color: var(--roadline); }
footer .footer-brand img { height: 40px; }

/* focus visibility */
a:focus-visible, button:focus-visible, .form-control:focus-visible {
    outline: 3px solid var(--roadline);
    outline-offset: 2px;
}