@charset "utf-8";
/* =========================================================
   GDA Knowledge / Article Combined CSS
   Combined from: ar-hero, hero-banner, shrinkNavbar, feature-icon,
   chips, solid-icon, timeline, knowledge, article-cta
   ========================================================= */

:root {
    --gda-red: #b30000;
    --gda-red-dark: #850000;
    --gda-gold: #f5d66b;
    --gda-dark: #343a40;
    --gda-text: #555;
    --gda-light-bg: #f7f7f7;
    --gda-card-shadow: 0 8px 24px rgba(0,0,0,.06);
    --gda-card-shadow-hover: 0 18px 40px rgba(0,0,0,.10);
    --gda-border: #e7e7e7;
    --nav-height: 90px;
    --anchor-offset: 118px;
}

/* =========================================================
   Global
   ========================================================= */
html {
    scroll-behavior: smooth;
}

body {
    color: #222;
    line-height: 1.7;
    background: #fff;
}

/* =========================================================
   Navbar / Dropdown
   ========================================================= */
.scrolling-navbar {
    background-color: transparent !important;
    transition: all .5s ease;
    padding-top: 20px;
    padding-bottom: 20px;
}

.nav-logo {
    height: 70px;
    transition: all .5s ease;
}

.scrolling-navbar .nav-link {
    color: rgba(255,255,255,.8) !important;
    transition: all .5s ease;
}

.top-nav-collapse {
    background-color: var(--gda-dark) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

.top-nav-collapse .nav-logo {
    height: 40px;
}

.top-nav-collapse .nav-link {
    color: #fff !important;
    font-size: .9rem;
}

.dropdown-menu {
    background-color: var(--gda-dark);
    border: none;
}

.dropdown-item {
    color: #fff !important;
}

.dropdown-item:hover {
    background-color: #495057;
}

.scrolling-navbar .nav-item.active .nav-link {
    font-weight: 900;
    color: #ff0000 !important;
    text-shadow: 2px 2px 0 rgba(0,0,0,1);
}

[id]{
  scroll-margin-top: var(--anchor-offset);
}

@media(max-width: 991px){
  :root{
    --anchor-offset: 104px;
  }
}

@media(max-width: 575px){
  :root{
    --anchor-offset: 92px;
  }
}

.img-cover{
	width:100%;
	height:230px;
	object-fit:cover;
	background:#ddd;
}

.light-band{
	background:#f7f7f7;
}

/* =========================================================
   Hero Banner
   ========================================================= */
.hero-banner {
    min-height: calc(65vh + var(--nav-height));
    padding-top: var(--nav-height);
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: center;
    color: #fff;
}

.hero-banner .container {
    max-width: 1100px;
}

/* Fixed typo from .containter; kept generic for safer HTML matching. */
.hero-banner .pt-vh-40 {
    padding-top: 40vh !important;
}

.hero-banner h1 {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 3px 12px rgba(0,0,0,.45);
}

.hero-banner p {
    font-size: clamp(1.05rem, 2vw, 1.5rem);
}

.eyebrow {
    font-size: clamp(.72rem, 1vw, 1rem) !important;
    letter-spacing: clamp(1px, .2vw, 2px);
    font-weight: 700;
    color: var(--gda-gold);
    margin-bottom: .75rem;
    text-transform: uppercase;
}

.hero-source {
    font-size: clamp(.65rem, .85vw, .85rem);
    color: #777;
    font-style: italic;
    opacity: .9;
    text-align: right;
}

/* =========================================================
   Knowledge Page Layout
   ========================================================= */
.knowledge-intro {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
}

.topic-nav {
    padding-bottom: 2.5rem;
}

.content-section {
    padding-top: 4.5rem;
    padding-bottom: 1.5rem;
}

.content-section:first-of-type {
    padding-top: 3rem;
}

.section-header {
    margin-bottom: 1.6rem;
}

.section-header h2,
.ar-section-title h2 {
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: .5rem;
}

.section-header p,
.content-section > p:not(.section-kicker) {
    color: var(--gda-text);
}

.section-lead {
    font-size: 1.05rem;
    color: #555;
}

.section-kicker{letter-spacing:.13em;font-size:.78rem;font-weight:800;color:var(--gda-red);text-transform:uppercase;margin-bottom:.7rem;}

.lead-keyword {
		font-weight: 700;
		color: #111;
}


/* =========================================================
   Chips / Cards / Links
   ========================================================= */
.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.chip {
    padding: 10px 18px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #333;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}

.chip:hover {
    background: var(--gda-red);
    color: #fff;
}

.topic-chips .chip.active{
    background: var(--gda-red);
    color:#fff;
    border-color:var(--gda-red);
    font-weight:600;
    pointer-events:none;
}

.topic-chips .chip{
    transition:.25s;
}

.topic-chips .chip:hover{
    background:#f4f4f4;
    border-color:#cfcfcf;
    text-decoration:none;
}

.topic-chips .chip.active:hover{
    background:var(--gda-red);
    border-color:var(--gda-red);
    color:#fff;
}


.ai-panel{background:#fff;border-left:5px solid var(--gda-red);padding:30px;border-radius:16px;box-shadow:0 12px 34px rgba(0,0,0,.08);margin-top:-56px;position:relative;z-index:3;}

.ai-panel strong{color:var(--gda-red);}

@media(max-width:767px){ 
	.content-section{padding-top:42px;padding-bottom:42px;} 
	.ai-panel{margin-top:-38px;padding:24px;} 
	.img-cover{height:210px;} 
	.img-tall{min-height:260px;} 
	.challenge-card img{height:160px;} 
	.topic-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;} 
	.topic-chips .chip{white-space:nowrap;} 
	.hero-banner h1{font-size:2rem;} }


.hub-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--gda-card-shadow);
    transition: .28s ease;
    border: 1px solid rgba(0,0,0,.04);
}

.hub-card.active:hover {
    transform: translateY(-6px);
    box-shadow: var(--gda-card-shadow-hover);
}

.hub-card.static:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    cursor: default;
}

/* =========================================================
   Hub Card Image Variants
   ========================================================= */

/* 預設：填滿卡片，適合案例圖、文章圖、場景照片 */
.hub-card > img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    background: #eee;
}

/* Cover：明確指定填滿並允許裁切 */
.hub-card.image-cover > img {
    object-fit: cover;
}

/* Contain：完整顯示產品，不裁切 */
.hub-card.image-contain > img {
    object-fit: contain;
    object-position: center;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
}

/* 較少留白 */
.hub-card.image-contain.image-pad-1 > img {
    padding: 8px;
}

/* 一般留白 */
.hub-card.image-contain.image-pad-2 > img {
    padding: 16px;
}

/* 較多留白 */
.hub-card.image-contain.image-pad-3 > img {
    padding: 26px;
}

/* 圖片主體位置 */
.hub-card.image-pos-top > img {
    object-position: center top;
}

.hub-card.image-pos-bottom > img {
    object-position: center bottom;
}

.hub-card.image-pos-left > img {
    object-position: left center;
}

.hub-card.image-pos-right > img {
    object-position: right center;
}

.hub-card.image-pos-35 > img {
    object-position: 35% center;
}

.hub-card.image-pos-65 > img {
    object-position: 65% center;
}

@media (max-width: 768px) {
    .hub-card > img,
    .hub-card-large > img,
    .hub-card-wide > img {
        height: 220px;
    }
}

@media (max-width: 575px) {
    .hub-card > img {
        height: 210px;
    }

    .hub-card.image-contain.image-pad-1 > img {
        padding: 8px;
    }

    .hub-card.image-contain.image-pad-2 > img {
        padding: 12px 14px;
    }

    .hub-card.image-contain.image-pad-3 > img {
        padding: 18px;
    }
}
.hub-card-large > img {
    height: 360px;
}

.hub-card-wide > img {
    height: 280px;
}

.hub-card-media {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #eee;
}

.hub-card-media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-card-media.image-cover > img {
    object-fit: cover;
}

.hub-card-media.image-contain {
    background: #fff;
}

.hub-card-media.image-contain > img {
    object-fit: contain;
}

.hub-card-media.image-pad-1 {
    padding: 8px;
}

.hub-card-media.image-pad-2 {
    padding: 16px;
}

.hub-card-media.image-pad-3 {
    padding: 26px;
}

.hub-card-media,
.hub-card-media > img {
    box-sizing: border-box;
}


.product-card img {
    height: 190px;
    object-fit: contain;
    background: var(--gda-light-bg);
}

.hub-card-body {
    padding: 1.35rem;
}

.hub-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--gda-red);
    margin-bottom: .75rem;
}

.industrial-card .hub-badge{
	background: rgba(32,32,32,.08);
	color:#202020;
}


.hub-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: .75rem;
}

.hub-card p {
    color: var(--gda-text);
    font-size: .95rem;
}

.hub-link,
.btn-link-style {
    color: var(--gda-red);
    font-weight: 800;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.hub-link:hover,
.btn-link-style:hover {
    color: var(--gda-red-dark);
    text-decoration: none;
}

.topic-note{
	background:#666;
	color:#fff;
	border-radius:20px;
	padding:26px;
	margin-top:28px;
}

.topic-note strong{
	display:block;
	font-size:1.2rem;
	color:#fff;
	margin-bottom:4px;
}

.product-update{
	background:#fff7e6;
	border:1px solid #f1d48a;
	border-radius:16px;
	padding:18px;
	color:#6b4e05;
}

.value-card{
	background:#fff;
	border:1px solid var(--gda-border);
	border-radius:18px;
	padding:22px;
	height:100%;
	box-shadow:0 8px 22px rgba(0,0,0,.045);
}

.value-card h3{
	font-size:1.08rem;
	font-weight:800;
	margin-bottom:8px;
}

.challenge-card{
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	height:100%;
	box-shadow:0 8px 24px rgba(0,0,0,.055);
	border:1px solid var(--gda-border);
}

.challenge-card img{
	width:100%;
	height:190px;
	object-fit:cover;
	background:#eee;
}
    
.challenge-card .challenge-body{
	padding:22px;
}

.challenge-card h3{
	font-size:1.12rem;
	font-weight:800;
	margin-bottom:8px;
}

.challenge-list{
	font-size:.92rem;
	color:#555;
	margin-bottom:0;
	padding-left:18px;
}

.challenge-list li{
	margin-bottom:4px;
}


/* =========================================================
   Icons / Experience Points
   ========================================================= */
.feature-icon {
    width: 56px !important;
    height: 56px !important;
    color: var(--gda-red) !important;
    margin-bottom: 1rem;
    display: flex;
    transition: transform .25s ease;
	align-items: center;
	justify-content: center;
}

.feature-icon i,
.feature-icon svg{
    width:28px;
    height:28px;
    font-size:28px;
    line-height:1;
}

.hub-card.active:hover .feature-icon {
    transform: translateY(-3px);
}

.feature-icon-sm,
.solid-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(179,0,0,.08);
    color: var(--gda-red) !important;
}

.feature-icon-sm {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    font-size: 1.1rem;
}

.value-card .feature-icon{
    border-radius:18px;
    background:rgba(184,21,33,.08);
    font-size:1.45rem;
    margin-bottom:18px;
}

.solid-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 1.35rem;
    margin-bottom: 1rem;
}

.experience-point {
    padding: 1.1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
}

/* =========================================================
   Timeline
   ========================================================= */
.timeline {
    position: relative;
    margin-top: 2rem;
    padding-left: 2rem;
}

.timeline::before {
    content: "";
    position: absolute;
    left: .55rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(179,0,0,.25);
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1.5rem;
    padding-bottom: 2.25rem;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -1.72rem;
    top: .25rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gda-red);
    box-shadow: 0 0 0 6px rgba(179,0,0,.12);
}

.timeline-year {
    font-weight: 700;
    color: var(--gda-red);
    font-size: 1.15rem;
}

.timeline-content {
    background: #fff;
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.04);
}

.timeline-content h3 {
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.timeline-content p {
    margin-bottom: 0;
    color: var(--gda-text);
}

/* =========================================================
   Article / Archive Blocks
   ========================================================= */
.ar-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ar-hero-wrap {
    padding: 1.5rem 1rem 2rem;
}

.ar-content-wrap {
    padding: 1.25rem 1rem 4rem;
}

.ar-article-img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.ar-caption {
    font-size: .75rem;
    color: #666;
    margin-top: -10px;
    margin-bottom: 1rem;
}

.ar-grey-box,
.ar-red-box,
.ar-highlight-box,
.cta-box {
    padding: 1.5rem;
    border-left: 4px solid var(--gda-red);
}

.ar-grey-box,
.ar-highlight-box {
    background: #f8f8f8;
}

.ar-red-box {
    background: #fff6f6;
}

.ar-highlight-box {
    margin: 1.75rem 0;
}

.cta-box {
    padding: 2rem;
    background: var(--gda-light-bg);
    border-left-width: 5px;
    border-radius: 14px;
}

/* =========================================================
   Article CTA
   ========================================================= */
.cta-kicker {
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gda-red);
    margin-bottom: .65rem;
}

.cta-title {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.cta-reference {
    font-size: .82rem;
    color: #777;
}

.cta-bg {
    background: linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.62)), url('../img/iba2025_bg_cuv_yes.png');
}


/* About cta */

.about-cta{
    min-height:70vh;
    background:
        linear-gradient(
            90deg,
            rgba(8,12,18,.88) 0%,
            rgba(8,12,18,.76) 38%,
            rgba(8,12,18,.38) 68%,
            rgba(8,12,18,.12) 100%
        ),
        url('../img/food-processing-technology-cta-bg.png');
    background-size:cover;
    background-position:center right;
	display: flex;
	color: #fff;
	padding: 5rem 0;
}

.about-cta-content {
	max-width: 620px;
}

.about-cta h2{
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 1.25rem;
}

.about-cta p{
	font-size: 1.05rem;
	max-width: 560px;
	}

.about-cta .btn{
	margin-top: 1rem;
	padding: .85rem 1.6rem;
	font-weight: 700;
}

@media(max-width:767px){
    .about-cta{
        min-height:58vh;
        padding:4rem 0 4.5rem;
        background-position:center right;
    }

    .about-cta-content{
        max-width:100%;
    }
}

/* =========================================================
   Utilities
   ========================================================= */
.soft-divider {
    border: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    margin: 2.5rem auto;
    max-width: 1140px;
}

.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gda-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    z-index: 999;
}

.back-to-top:hover {
    background: #8f0000;
    color: #fff;
    text-decoration: none;
}

.approach-list{
	margin-top:1.25rem;
	padding-left:0;
	list-style:none;
}

.approach-list li{
	margin-bottom:.65rem;
	color:#444;
	position:relative;
	padding-left:28px;
}

.approach-list li:before{
	content:"\f00c";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	left:0;
	top:0;
	color:var(--gda-red);
}



/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991px) {
    .scrolling-navbar {
        background-color: rgba(0,0,0,.78) !important;
    }

    .scrolling-navbar .nav-logo {
        height: 40px;
    }

    .hero-banner {
        min-height: calc(65vh + var(--nav-height));
        padding-top: calc(var(--nav-height) + 1.5rem);
        align-items: flex-start;
        background-position: center top;
    }

    .hero-banner .container {
        padding-top: 2rem !important;
    }

    .content-section {
        padding-top: 3.5rem;
    }
}

@media (max-width: 768px) {
    .hub-card-large > img,
    .hub-card-wide > img,
    .hub-card > img {
        height: 220px;
    }
}

/* Larger static icons for capability overview cards */
.capability-card .hub-card-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #f5f5f5;
    color: var(--gda-red);
    font-size: 2rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .capability-card .hub-card-icon {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
        margin-bottom: 16px;
    }

    .section-header h2 {
        font-size: 1.65rem;
    }
}

@media (max-width: 767px) {
    .topic-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .topic-chips::-webkit-scrollbar {
        display: none;
    }

    .chip {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .88rem;
        padding: 9px 16px;
    }

    .feature-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .experience-point {
        padding: 1rem 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .knowledge-intro {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .knowledge-intro p {
        font-size: .96rem;
        line-height: 1.65;
    }

    .timeline {
        padding-left: 1.4rem;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: .35rem;
        padding-bottom: 1.75rem;
    }

    .timeline-year {
        font-size: 1.05rem;
    }

    .timeline-content {
        padding: 1.2rem;
    }
}

@media (max-width: 575px) {
    .knowledge-intro {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .topic-nav {
        padding-bottom: 1.5rem;
    }

    .content-section {
        padding-top: 3rem;
        padding-bottom: 1rem;
    }

    .cta-title {
        font-size: 1.45rem;
    }

    .cta-kicker {
        font-size: .72rem;
    }

    .btn {
        white-space: normal;
    }

    .back-to-top {
        right: 14px;
        bottom: 18px;
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   About Us
   ========================================================= */

    .metric-card{
        background:#fff;
        border:1px solid #e7e7e7;
        border-radius:18px;
        padding:24px;
        height:100%;
        box-shadow:0 8px 22px rgba(0,0,0,.055);
    }
    .metric-card strong{
        display:block;
        font-size:2rem;
        line-height:1.1;
        color:#b81521;
        font-weight:800;
        margin-bottom:8px;
    }
    .capability-card{
        background:#fff;
        border:1px solid #e7e7e7;
        border-radius:18px;
        padding:24px;
        height:100%;
        box-shadow:0 8px 22px rgba(0,0,0,.05);
    }
    .capability-card h3{
        font-size:1.12rem;
        font-weight:800;
        margin-bottom:8px;
    }
    .capability-card .feature-icon{
        width:54px;
        height:54px;
        border-radius:16px;
        background:rgba(184,21,33,.08);
        color:#b81521;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:1.35rem;
        margin-bottom:16px;
    }
    .engineering-band{
        background:#f7f7f7;
    }
    .image-note{
        font-size:.9rem;
        color:#666;
        margin-top:10px;
    }
    .pill-list{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        padding-left:0;
        list-style:none;
        margin:18px 0 0;
    }
    .pill-list li{
        border:1px solid #e0e0e0;
        border-radius:999px;
        padding:7px 13px;
        font-weight:700;
        font-size:.9rem;
        background:#fff;
    }
    .mini-link{
        font-weight:800;
        color:#b81521;
    }
    @media(max-width:767px){
        .metric-card strong{font-size:1.6rem;}
    }


.workflow-row {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.workflow-row:last-child {
    border-bottom: none;
}

.workflow-row h3 {
    font-size: 1.55rem;
}

.workflow-row p {
    color: #5f6368;
    line-height: 1.8;
}


.faq-item{
	background:#fff;
	border-radius:16px;
	padding:24px;
	box-shadow:0 8px 24px rgba(0,0,0,.06);
	height:100%;
}

/* =========================================================
   Contact Page
   ========================================================= */

.contact-card,
.info-card,
.support-card{
    background:#fff;
    border:1px solid var(--gda-border);
    border-radius:20px;
    box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.contact-card{
    padding:34px;
}

.info-card,
.support-card{
    padding:26px;
    height:100%;
}

.info-card h3,
.support-card h3{
    font-size:1.15rem;
    font-weight:800;
    margin-bottom:10px;
}

.info-card i,
.support-card i{
    color:var(--gda-red);
    font-size:1.5rem;
    margin-bottom:16px;
}

.contact-card .form-control{
    border-radius:12px;
    border-color:#ddd;
    padding:13px 14px;
}

.contact-card .form-control:focus{
    border-color:var(--gda-red);
    box-shadow:0 0 0 .2rem rgba(179,0,0,.12);
}

.btn-gda{
    background:var(--gda-red);
    border-color:var(--gda-red);
    color:#fff;
    border-radius:999px;
    padding:12px 28px;
    font-weight:800;
}

.btn-gda:hover{
    background:var(--gda-red-dark);
    border-color:var(--gda-red-dark);
    color:#fff;
}

.notice-box{
    border-left:4px solid var(--gda-red);
    background:#fafafa;
    padding:18px 20px;
    border-radius:12px;
}

.status-message{
    display:none;
    margin-top:16px;
    border-radius:12px;
    padding:14px 16px;
    font-weight:700;
}

.status-message.success{
    display:block;
    background:#edf7ed;
    color:#1f6b2a;
}

.status-message.error{
    display:block;
    background:#fff1f1;
    color:#9a1b1b;
}

@media(max-width:767px){
    .contact-card{
        padding:24px;
    }
}

/* =========================================================
   Product Showcase Cards
   For product pages: real samples, cutting insight, popup cases
   ========================================================= */

.showcase-card{
    background:#fff;
    border:1px solid var(--gda-border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.045);
    cursor:pointer;
    transition:box-shadow .25s ease;
}

.showcase-card:hover{
    box-shadow:0 14px 28px rgba(0,0,0,.08);
}

.showcase-img-wrap{
    overflow:hidden;
    background:#eee;
}

.showcase-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

.showcase-card:hover img{
    transform:scale(1.025);
}

.showcase-body{
    padding:13px 16px 14px;
}

.showcase-body h3{
    font-size:1rem;
    font-weight:800;
    margin:0;
    color:#222;
}

.showcase-body p{
    font-size:.82rem;
    color:#777;
    font-style:italic;
    margin:2px 0 0;
}

.showcase-modal{
    border:0;
    border-radius:20px;
    overflow:hidden;
}

.showcase-modal-img{
    width:100%;
    max-height:70vh;
    object-fit:contain;
    background:#111;
}

.showcase-modal-body{
    padding:24px 30px 28px;
}

.showcase-modal-body h3{
    font-size:1.6rem;
    font-weight:800;
    margin-bottom:2px;
}

.showcase-modal-note{
    color:#777;
    font-style:italic;
    margin-bottom:14px;
}

.showcase-modal-insight{
    color:#444;
    line-height:1.75;
    max-width:820px;
    margin-bottom:16px;
}

.showcase-pill-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.showcase-pill{
    border-radius:999px;
    background:#f4f4f4;
    color:#555;
    padding:7px 12px;
    font-size:.78rem;
    font-weight:700;
}

.showcase-close{
    position:absolute;
    right:18px;
    top:10px;
    z-index:10;
    color:#fff;
    opacity:1;
    font-size:2rem;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
}

@media(max-width:767px){
    .showcase-card img{height:190px;}
    .showcase-modal-body{padding:20px;}
    .showcase-modal-body h3{font-size:1.35rem;}
}


/* =========================================================
   Product Detail Pages
   Shared by USC-3AX, USC-3AX-MINI and future product pages
   Applied only when body has .product-detail-page
   ========================================================= */

/* Key specification table */
.product-detail-page .product-spec-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.product-detail-page .product-spec-table th {
    width: 36%;
    padding: 14px 16px;
    background: #fff;
    color: #333;
    font-weight: 800;
    vertical-align: top;
    border: 1px solid var(--gda-border);
    border-right: 0;
    border-radius: 14px 0 0 14px;
}

.product-detail-page .product-spec-table td {
    padding: 14px 16px;
    background: #fff;
    color: #555;
    vertical-align: top;
    border: 1px solid var(--gda-border);
    border-left: 0;
    border-radius: 0 14px 14px 0;
}


/* Product workflow cards */
.product-detail-page .workflow-step {
    height: 100%;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--gda-border);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0,0,0,.045);
}

.product-detail-page .workflow-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(179,0,0,.08);
    color: var(--gda-red);
    font-weight: 900;
}


/* Product detail responsive layout */
@media (max-width: 767px) {

    .product-detail-page .product-spec-table th,
    .product-detail-page .product-spec-table td {
        display: block;
        width: 100%;
        border: 1px solid var(--gda-border);
    }

    .product-detail-page .product-spec-table th {
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
    }

    .product-detail-page .product-spec-table td {
        margin-bottom: 10px;
        border-top: 0;
        border-radius: 0 0 14px 14px;
    }
}

/* =========================================================
   Universal Media / Image UX
   ========================================================= */

/* 基礎圖片容器 */
.media-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

/* 圖片基本設定 */
.media-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
}

/* -----------------------------------------
   Aspect Ratio
   ----------------------------------------- */

.media-ratio-16x9 {
    aspect-ratio: 16 / 9;
}

.media-ratio-4x3 {
    aspect-ratio: 4 / 3;
}

.media-ratio-3x2 {
    aspect-ratio: 3 / 2;
}

.media-ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.media-ratio-auto {
    aspect-ratio: auto;
}

/* -----------------------------------------
   Image Fitting
   ----------------------------------------- */

/* 適合實際產品照片、機械設備，確保產品完整 */
.media-contain > img {
    object-fit: contain;
}

/* 適合 Gallery、案例照片、背景感圖片 */
.media-cover > img {
    object-fit: cover;
}

/* 圖片依原始比例顯示，不強制固定高度 */
.media-natural > img {
    width: 100%;
    height: auto;
    object-fit: initial;
}

/* -----------------------------------------
   Internal Padding / Breathing Space
   不使用 p-1，避免與 Bootstrap 衝突
   ----------------------------------------- */

.media-pad-1 {
    padding: clamp(8px, 1vw, 14px);
}

.media-pad-2 {
    padding: clamp(14px, 1.8vw, 24px);
}

.media-pad-3 {
    padding: clamp(20px, 2.8vw, 40px);
}

.media-pad-x {
    padding-left: clamp(16px, 3vw, 44px);
    padding-right: clamp(16px, 3vw, 44px);
}

.media-pad-y {
    padding-top: clamp(16px, 3vw, 44px);
    padding-bottom: clamp(16px, 3vw, 44px);
}

/* -----------------------------------------
   Object Position
   用來微調圖片主體
   ----------------------------------------- */

.media-pos-center > img {
    object-position: center center;
}

.media-pos-top > img {
    object-position: center top;
}

.media-pos-bottom > img {
    object-position: center bottom;
}

.media-pos-left > img {
    object-position: left center;
}

.media-pos-right > img {
    object-position: right center;
}

.media-pos-35 > img {
    object-position: 35% center;
}

.media-pos-65 > img {
    object-position: 65% center;
}

/* -----------------------------------------
   Background Options
   ----------------------------------------- */

.media-bg-white {
    background: #fff;
}

.media-bg-soft {
    background: #f6f6f6;
}

.media-bg-dark {
    background: #202020;
}

.media-bg-transparent {
    background: transparent;
}

img.img-bg-white{
    background:#fff;
}

img.img-bg-soft{
    background:#f6f6f6;
}

img.img-bg-dark{
    background:#202020;
}

/* -----------------------------------------
   Border / Radius
   ----------------------------------------- */

.media-rounded {
    border-radius: 12px;
}

.media-rounded-lg {
    border-radius: 18px;
}

.media-border {
    border: 1px solid var(--gda-border, #e7e7e7);
}

/* -----------------------------------------
   Optional Shadow
   ----------------------------------------- */

.media-shadow {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

/* -----------------------------------------
   Gallery image hover
   只在指定 class 時啟用
   ----------------------------------------- */

.media-hover:hover > img {
    transform: scale(1.025);
}

/* -----------------------------------------
   Mobile Adjustments
   ----------------------------------------- */

@media (max-width: 767.98px) {
    .media-pad-1 {
        padding: 8px;
    }

    .media-pad-2 {
        padding: 12px;
    }

    .media-pad-3 {
        padding: 16px;
    }

    /* 手機可取消過度寬扁的固定比例 */
    .media-mobile-4x3 {
        aspect-ratio: 4 / 3;
    }

    .media-mobile-1x1 {
        aspect-ratio: 1 / 1;
    }

    .media-mobile-natural {
        aspect-ratio: auto;
    }

    .media-mobile-natural > img {
        height: auto;
    }
}


/* Accessibility: skip navigation link */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 99999;

    padding: 10px 16px;
    background: #ffffff;
    color: #171717;
    border: 2px solid #171717;
    border-radius: 4px;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;

    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    color: #171717;
    text-decoration: none;
    outline: 3px solid #b81521;
    outline-offset: 3px;
}

#main-content:focus {
    outline: none;
}


/* =========================================================
   Japanese Typography
   ========================================================= */

html[lang="ja"] body{
    font-family:
        "Noto Sans JP",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        sans-serif;
}

html[lang="ja"] .hero-banner h1,
html[lang="ja"] .ar-section-title h2{
    font-family:
        "Montserrat",
        "Noto Sans JP",
        sans-serif;
}

html[lang="ja"] .section-lead{
    line-height:1.9;
    letter-spacing:.01em;
}


/* ==========================================================
   Engineering Story Label
========================================================== */

.story-label{
    display:inline-block;
    margin-bottom:.75rem;

    color:var(--gda-red);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
}


/* ==========================================================
   Engineering Story Note
========================================================== */

.story-note{

    margin:2rem 0;

    padding-left:1.25rem;

    border-left:3px solid var(--gda-red);

}

.story-note h3{

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:.65rem;

}

.story-note p:last-child{

    margin-bottom:0;

}


/* ==========================================================
   Engineering Story Checklist
========================================================== */

.story-check{

    list-style:none;

    padding-left:0;

    margin:1rem 0 0;

}

.story-check li{

    position:relative;

    padding-left:1.35rem;

    margin-bottom:.55rem;

    line-height:1.6;

}

.story-check li:before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--gda-red);

    font-weight:700;

}


/* ==========================================================
   Engineering Story Quote
========================================================== */

.story-quote{

    margin:2.5rem 0;

    padding-left:1.4rem;

    border-left:4px solid var(--gda-red);

    font-size:1.12rem;

    font-style:italic;

    color:#444;

}

.story-quote strong{

    color:#222;

}


/* ==========================================================
   Story Divider
========================================================== */

.story-divider{

    margin:3rem auto;

    width:72px;

    height:2px;

    background:rgba(179,0,0,.18);

}