/* ============================================
   modern.css — T Tech Solution design override
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Variables ── */
:root {
    --primary:       #1e40af;
    --primary-light: #3b82f6;
    --accent:        #06b6d4;
    --dark:          #0f172a;
    --text:          #475569;
    --text-dark:     #1e293b;
    --bg-light:      #f1f5f9;
    --gradient:      linear-gradient(135deg, #1e40af 0%, #06b6d4 100%);
    --radius-card:   20px;
    --shadow-card:   0 4px 24px rgba(0,0,0,0.07);
    --shadow-hover:  0 16px 40px rgba(30,64,175,0.14);
}

/* ── Base Typography ── */
body,
input, select, textarea {
    font-family: 'Sarabun', sans-serif !important;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sarabun', sans-serif !important;
    color: var(--text-dark);
    text-transform: none !important;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════
   HEADER / NAVBAR
══════════════════════════════════════════ */
#header-wrapper {
    background: url('../images/header1.jpg') center center / cover no-repeat !important;
    position: relative;
    padding: 0 !important;
}

#header-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.88) 0%,
        rgba(30, 64, 175, 0.72) 100%);
    z-index: 0;
}

#header-wrapper > .container {
    position: relative;
    z-index: 2;
    padding-top: 1.75rem;
}

/* Navbar bar */
#header {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 0.6rem 1.75rem !important;
    margin-bottom: 0 !important;
}

#header .inner {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0 !important;
}

/* Logo */
#header h1 {
    position: static !important;
    margin-top: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: #fff !important;
}

#header h1 a {
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Nav links */
#nav {
    position: static !important;
    float: none !important;
}

#nav ul {
    display: flex !important;
    gap: 0.25rem !important;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

#nav ul li a {
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 8px !important;
    transition: background 0.2s, color 0.2s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#nav ul li a:hover,
#nav ul li.current_page_item > a {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   HERO / BANNER
══════════════════════════════════════════ */
#banner {
    width: 100% !important;
    max-width: 820px;
    margin: 0 auto !important;
    padding: 8rem 1.5rem 7.5rem !important;
    text-align: center !important;
    overflow: visible !important;
}

#banner h2 {
    border: none !important;
    color: #fff !important;
    font-size: 3.2rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 1.25rem !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

#banner h2::before,
#banner h2::after {
    display: none !important;
}

#banner h2 strong {
    background: linear-gradient(90deg, #60a5fa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    color: inherit;
    display: block;
    margin-bottom: 0.15rem;
}

#banner p {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    margin-bottom: 2.5rem !important;
}

/* CTA Button */
a.button.large {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    background: var(--gradient) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.9rem 2.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.45) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

a.button.large:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 42px rgba(30, 64, 175, 0.55) !important;
}

/* ══════════════════════════════════════════
   MAIN CONTENT WRAPPER
══════════════════════════════════════════ */
#main-wrapper {
    background: var(--bg-light) !important;
}

.wrapper.style1 {
    background: var(--bg-light) !important;
    background-image: none !important;
    text-shadow: none !important;
    padding: 6rem 0 !important;
}

/* ── Section Header ── */
.box.feature1 header.first {
    text-align: center;
    margin-bottom: 3rem;
}

.box.feature1 header.first h2 {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.03em !important;
}

.box.feature1 header.first p {
    color: var(--primary-light) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 0.25rem;
}

/* ── Feature Cards ── */
.box.feature1 .col-4,
.box.feature1 .col-12-medium {
    padding: 0.75rem !important;
}

.box.feature1 .col-4 > section {
    background: #fff;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    margin: 0 !important;
}

.box.feature1 .col-4 > section:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

/* Card image */
.box.feature1 .col-4 a.image.featured {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 !important;
}

.box.feature1 .col-4 a.image.featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.box.feature1 .col-4 > section:hover a.image.featured img {
    transform: scale(1.06);
}

/* Card label */
.box.feature1 header.second {
    padding: 1.25rem 1.5rem 1.5rem !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.box.feature1 header.second::before {
    display: none !important;
}

.box.feature1 header.second h4 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding-left: 1.75rem;
    position: relative;
}

/* Icon chip inside h4 */
.box.feature1 header.second.icon::before {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1rem !important;
    color: var(--primary-light) !important;
    opacity: 1 !important;
    margin: 0 !important;
}

/* ── Article Content ── */
.box.feature1 .col-12 {
    padding: 0 0.75rem !important;
    margin-top: 3rem;
}

.box.feature1 .col-12 h4 {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    margin-top: 2rem !important;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.box.feature1 .col-12 h4:first-child {
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
}

.box.feature1 .col-12 p {
    color: var(--text) !important;
    font-size: 0.96rem !important;
    line-height: 1.8 !important;
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
#footer-wrapper {
    background: var(--dark) !important;
    background-image: none !important;
    padding: 5rem 0 3rem !important;
}

#footer h2 {
    color: #e2e8f0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    opacity: 0.5;
    margin-bottom: 0.75rem !important;
}

#footer strong {
    color: #f1f5f9 !important;
}

#footer p,
#footer dd {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
}

#footer dl.contact dt {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1rem;
}

#footer a {
    color: #60a5fa !important;
}

#footer a:hover {
    color: #93c5fd !important;
    text-decoration: none;
}

/* Footer "Learn More" button */
#footer .button.alt,
a.button.alt {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
    color: #e2e8f0 !important;
    border-radius: 50px !important;
    padding: 0.6rem 1.4rem !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}

#footer .button.alt:hover,
a.button.alt:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#copyright {
    border-color: rgba(255, 255, 255, 0.07) !important;
    margin-top: 3rem !important;
    padding-top: 2rem !important;
}

#copyright li {
    color: #475569 !important;
    font-size: 0.85rem !important;
}

#copyright li a {
    color: #475569 !important;
}

/* ══════════════════════════════════════════
   SCROLL-IN ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.box.feature1 .col-4 > section {
    animation: fadeUp 0.55s ease both;
}

.box.feature1 .col-4:nth-child(2) > section { animation-delay: 0.1s; }
.box.feature1 .col-4:nth-child(3) > section { animation-delay: 0.2s; }
.box.feature1 .col-4:nth-child(4) > section { animation-delay: 0.3s; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media screen and (max-width: 980px) {
    #banner h2 { font-size: 2.4rem !important; }
    #banner { padding: 6rem 1.5rem 5rem !important; }
    .box.feature1 header.first h2 { font-size: 1.9rem !important; }
}

@media screen and (max-width: 736px) {
    #banner h2 { font-size: 1.9rem !important; }
    #banner p  { font-size: 1rem !important; }
    #header h1 { font-size: 1.1rem !important; }
    #nav ul li a { padding: 0.4rem 0.65rem !important; font-size: 0.82rem !important; }
}

/* ══════════════════════════════════════════
   PHASE 2 — OEE / Machines / Cases sections
══════════════════════════════════════════ */

/* Shared section header */
.box .sec-head { text-align: center; margin-bottom: 3rem; }
.box .sec-head h2 {
    font-size: 2.2rem !important; font-weight: 800 !important;
    color: var(--text-dark) !important; letter-spacing: -0.03em !important;
}
.box .sec-head p {
    color: var(--primary-light) !important; font-size: 1.05rem !important;
    font-weight: 500 !important; margin-top: 0.35rem;
}
.oee-box, .machines-box, .cases-box { margin-top: 5rem; }

/* ── OEE formula pills ── */
.oee-formula {
    display: flex; flex-wrap: wrap; align-items: stretch;
    justify-content: center; gap: 0.75rem; margin-bottom: 3.5rem;
}
.oee-pill {
    background: #fff; border-radius: 16px; box-shadow: var(--shadow-card);
    padding: 1.1rem 1.4rem; min-width: 150px; flex: 0 1 190px; text-align: center;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.oee-pill .k { font-weight: 800; color: var(--primary); font-size: 1.05rem; }
.oee-pill .v { color: var(--text); font-size: 0.82rem; line-height: 1.5; }
.oee-pill.oee-result { background: var(--gradient); }
.oee-pill.oee-result .k, .oee-pill.oee-result .v { color: #fff; }
.oee-op { align-self: center; font-size: 1.5rem; font-weight: 800; color: var(--primary-light); }

/* ── OEE flow ── */
.oee-flow {
    display: flex; flex-wrap: wrap; align-items: stretch;
    justify-content: center; gap: 1rem;
}
.flow-step {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.75rem 1.5rem; flex: 1 1 240px; max-width: 300px; position: relative;
}
.flow-step .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gradient);
    color: #fff; font-weight: 800; margin-bottom: 0.85rem;
}
.flow-step h4 { font-size: 1.1rem !important; font-weight: 700 !important; margin: 0 0 0.4rem !important; color: var(--text-dark) !important; }
.flow-step p { color: var(--text) !important; font-size: 0.9rem !important; line-height: 1.7 !important; margin: 0 !important; }
.flow-arrow { align-self: center; font-size: 1.6rem; color: var(--primary-light); font-weight: 800; }

/* ── Machine segment grid ── */
.seg-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.seg-card {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.75rem 1.6rem; transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid var(--primary-light);
}
.seg-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.seg-card .ic {
    width: 3rem; height: 3rem; border-radius: 14px; background: var(--bg-light);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.seg-card .ic::before { font-size: 1.35rem; color: var(--primary); }
.seg-card h4 { font-size: 1.08rem !important; font-weight: 700 !important; color: var(--text-dark) !important; margin: 0 0 0.5rem !important; }
.seg-card p { color: var(--text) !important; font-size: 0.9rem !important; line-height: 1.7 !important; margin: 0 !important; }
.seg-card p em { color: var(--primary-light); font-style: italic; font-size: 0.84rem; }

/* ── Check box ── */
.check-box {
    margin-top: 2.5rem; background: var(--dark); border-radius: var(--radius-card);
    padding: 2.25rem 2rem;
}
.check-box > h4 { color: #fff !important; font-size: 1.25rem !important; font-weight: 700 !important; text-align: center; margin: 0 0 1.5rem !important; }
.check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.check-item { color: #94a3b8; font-size: 0.85rem; line-height: 1.6; padding-left: 1rem; border-left: 2px solid var(--accent); }
.check-item strong { display: block; color: #e2e8f0; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; }

/* ── Cases ── */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.case-card {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 2rem 1.75rem; position: relative; overflow: hidden;
}
.case-card .badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gradient);
    color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: 1rem;
}
.case-card h4 { font-size: 1.08rem !important; font-weight: 700 !important; color: var(--text-dark) !important; margin: 0 0 0.5rem !important; }
.case-card p { color: var(--text) !important; font-size: 0.92rem !important; line-height: 1.75 !important; margin: 0 !important; }
.cases-cta {
    margin-top: 2.5rem; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 1rem;
}
.cases-cta span { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); }

.sec-more { text-align: center; margin-top: 2rem; margin-bottom: 0; }
.sec-more a {
    font-weight: 700; font-size: 1.05rem; color: var(--primary) !important;
    text-decoration: none !important; border-bottom: 2px solid var(--accent);
    transition: color 0.2s;
}
.sec-more a:hover { color: var(--primary-light) !important; }

/* ── Service detail page ── */
.service-hero {
    text-align: center; margin-bottom: 3rem; padding-bottom: 2rem;
    border-bottom: 1px solid rgba(30, 64, 175, 0.12);
}
.service-hero h2 {
    font-size: 2.4rem !important; font-weight: 800 !important;
    color: var(--text-dark) !important; letter-spacing: -0.03em !important;
}
.service-hero p { color: var(--primary-light) !important; font-size: 1.1rem !important; margin-top: 0.5rem; }
.service-section { margin-bottom: 4rem; scroll-margin-top: 5rem; }
.service-section > h3 {
    font-size: 1.75rem !important; font-weight: 800 !important;
    color: var(--text-dark) !important; margin-bottom: 1rem !important;
}
.service-section .lead { font-size: 1.05rem; line-height: 1.85; color: var(--text); margin-bottom: 1.5rem; }
.oee-def-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1rem; }
.oee-def-list li {
    background: var(--bg-light); border-radius: 14px; padding: 1.1rem 1.25rem;
    border-left: 4px solid var(--primary-light);
}
.oee-def-list strong { color: var(--primary); display: block; margin-bottom: 0.25rem; }
.oee-example {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.5rem 1.75rem; margin: 1.5rem 0 2rem; text-align: center;
}
.oee-example .formula { font-size: 1.15rem; font-weight: 800; color: var(--primary); margin-bottom: 0.5rem; }
.system-flow {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 2rem 0;
}
.system-flow .sf-step {
    background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
    padding: 1.25rem 1rem; text-align: center; font-size: 0.88rem; line-height: 1.6;
}
.system-flow .sf-step strong { display: block; color: var(--primary); margin-bottom: 0.35rem; font-size: 0.95rem; }
.machine-detail-grid { display: flex; flex-direction: column; gap: 1.25rem; }
.machine-detail-card {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    padding: 1.5rem 1.75rem; border-left: 4px solid var(--accent);
}
.machine-detail-card h4 { font-size: 1.15rem !important; font-weight: 700 !important; margin: 0 0 0.75rem !important; color: var(--text-dark) !important; }
.machine-detail-card dl { margin: 0; display: grid; grid-template-columns: 140px 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; }
.machine-detail-card dt { font-weight: 700; color: var(--primary); margin: 0; }
.machine-detail-card dd { margin: 0; color: var(--text); line-height: 1.65; }
.machine-detail-card dd em { color: var(--primary-light); font-style: italic; }
.si-cases { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.si-case-item {
    background: var(--bg-light); border-radius: 14px; padding: 1.25rem 1.5rem;
}
.si-case-item strong { color: var(--primary); }
.protocol-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.protocol-tags span {
    background: var(--gradient); color: #fff; font-weight: 600; font-size: 0.85rem;
    padding: 0.4rem 1rem; border-radius: 50px;
}
.hardware-list { margin: 0; padding-left: 1.25rem; line-height: 1.85; }
.service-cta-box {
    text-align: center; background: var(--dark); border-radius: var(--radius-card);
    padding: 2.5rem 2rem; margin-top: 3rem;
}
.service-cta-box h3 { color: #fff !important; margin-bottom: 0.75rem !important; }
.service-cta-box p { color: #94a3b8 !important; margin-bottom: 1.25rem !important; }
.service-pillar-divider {
    margin: 4rem 0 2.5rem; padding-top: 2.5rem;
    border-top: 2px solid rgba(30, 64, 175, 0.1);
}
.service-pillar-divider h3 { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--text-dark) !important; }

@media screen and (max-width: 980px) {
    .system-flow { grid-template-columns: repeat(2, 1fr); }
    .machine-detail-card dl { grid-template-columns: 1fr; }
}
@media screen and (max-width: 736px) {
    .system-flow { grid-template-columns: 1fr; }
    .service-hero h2 { font-size: 1.85rem !important; }
}

/* ── Footer social bar ── */
.social-bar { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.social-bar .social {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1.25rem; border-radius: 50px; font-size: 0.88rem; font-weight: 600;
    color: #e2e8f0 !important; text-decoration: none !important;
    border: 1.5px solid rgba(255,255,255,0.16); transition: all 0.2s;
}
.social-bar .social .icon::before { font-size: 1rem; }
.social-bar .social:hover { transform: translateY(-2px); }
.social-bar .line:hover   { background: #06c755; border-color: #06c755; color: #fff !important; }
.social-bar .fb:hover     { background: #1877f2; border-color: #1877f2; color: #fff !important; }
.social-bar .tiktok:hover { background: #010101; border-color: #010101; color: #fff !important; }

/* ── Responsive ── */
@media screen and (max-width: 980px) {
    .seg-grid, .case-grid { grid-template-columns: repeat(2, 1fr); }
    .check-grid { grid-template-columns: repeat(2, 1fr); }
    .box .sec-head h2 { font-size: 1.8rem !important; }
    .oee-op, .flow-arrow { display: none; }
    .oee-formula .oee-pill { flex: 1 1 40%; }
}
@media screen and (max-width: 736px) {
    .seg-grid, .case-grid, .check-grid { grid-template-columns: 1fr; }
    .oee-box, .machines-box, .cases-box { margin-top: 3.5rem; }
    .flow-step { max-width: 100%; }
}